Add explicit dismiss button to feedback prompt
Summary: You can already click the star icon in the title bar to dismiss, but according to feedback this isn't obvious: https://our.intern.facebook.com/intern/itsr?start_date=1561849200&end_date=1570402800&tab=4&all_tools=true So adding an explicit dismiss button. Reviewed By: passy Differential Revision: D17788570 fbshipit-source-id: b0995e5abdaafc5bd6f93edb27dad703c81b8f2b
This commit is contained in:
committed by
Facebook Github Bot
parent
57e8f8e235
commit
8c15547597
@@ -73,6 +73,32 @@ const Row = styled(FlexRow)({
|
|||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const DismissRow = styled(Row)({
|
||||||
|
marginBottom: 0,
|
||||||
|
marginTop: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const DismissButton = styled('span')({
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const Spacer = styled(FlexColumn)({
|
||||||
|
flexGrow: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
function dismissRow(dismiss: () => void) {
|
||||||
|
return (
|
||||||
|
<DismissRow>
|
||||||
|
<Spacer />
|
||||||
|
<DismissButton onClick={dismiss}>Dismiss</DismissButton>
|
||||||
|
<Spacer />
|
||||||
|
</DismissRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
type FeedbackComponentState = {
|
type FeedbackComponentState = {
|
||||||
rating: number | null;
|
rating: number | null;
|
||||||
hoveredRating: number;
|
hoveredRating: number;
|
||||||
@@ -91,7 +117,8 @@ class FeedbackComponent extends Component<
|
|||||||
selectedPredefinedComments: Array<string>,
|
selectedPredefinedComments: Array<string>,
|
||||||
allowUserInfoSharing: boolean,
|
allowUserInfoSharing: boolean,
|
||||||
) => void;
|
) => void;
|
||||||
close(): void;
|
close: () => void;
|
||||||
|
dismiss: () => void;
|
||||||
promptData: FeedbackPrompt;
|
promptData: FeedbackPrompt;
|
||||||
},
|
},
|
||||||
FeedbackComponentState
|
FeedbackComponentState
|
||||||
@@ -175,6 +202,7 @@ class FeedbackComponent extends Component<
|
|||||||
body = [
|
body = [
|
||||||
<Row>{this.props.promptData.bodyText}</Row>,
|
<Row>{this.props.promptData.bodyText}</Row>,
|
||||||
<Row style={{margin: 'auto'}}>{stars}</Row>,
|
<Row style={{margin: 'auto'}}>{stars}</Row>,
|
||||||
|
dismissRow(this.props.dismiss),
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
case 'leave-comment':
|
case 'leave-comment':
|
||||||
@@ -220,6 +248,7 @@ class FeedbackComponent extends Component<
|
|||||||
Submit
|
Submit
|
||||||
</Button>
|
</Button>
|
||||||
</Row>,
|
</Row>,
|
||||||
|
dismissRow(this.props.dismiss),
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
case 'finished':
|
case 'finished':
|
||||||
@@ -329,6 +358,7 @@ export default class RatingButton extends Component<Props, State> {
|
|||||||
close={() => {
|
close={() => {
|
||||||
this.setState({isShown: false});
|
this.setState({isShown: false});
|
||||||
}}
|
}}
|
||||||
|
dismiss={this.onClick.bind(this)}
|
||||||
promptData={promptData}
|
promptData={promptData}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user