Skip to content

Commit 98eda87

Browse files
lexi-taylorlexi-taylor
committed
ui changes, adding another test
1 parent 3b0f3ac commit 98eda87

13 files changed

Lines changed: 180 additions & 23 deletions

‎__tests__/html2/fluentTheme/defaultFeedback.activity.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
id: 'a-00000',
4040
timestamp: 0,
4141
text: 'This is a test message to show feedback buttons',
42-
replyToId: 'a-00001',
4342
from: {
4443
role: 'bot'
4544
},
@@ -79,7 +78,6 @@
7978
expect.objectContaining({
8079
type: 'invoke',
8180
name: 'message/submitAction',
82-
replyToId: 'a-00001',
8381
value: {
8482
actionName: 'feedback',
8583
actionValue: {

‎__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png‎

3 KB
Loading

‎__tests__/html2/fluentTheme/feedback.form.multiple.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
</head>
13+
14+
<body>
15+
<main id="webchat"></main>
16+
<script type="text/babel">
17+
run(async function () {
18+
const {
19+
React,
20+
ReactDOM: { render },
21+
WebChat: { FluentThemeProvider, ReactWebChat }
22+
} = window; // Imports in UMD fashion.
23+
24+
const { directLine, store } = testHelpers.createDirectLineEmulator();
25+
26+
const App = () => <ReactWebChat directLine={directLine} store={store} />;
27+
28+
render(
29+
<FluentThemeProvider>
30+
<App />
31+
</FluentThemeProvider>,
32+
document.getElementById('webchat')
33+
);
34+
35+
await pageConditions.uiConnected();
36+
37+
await (await directLine.emulateOutgoingActivity("What's the weather like today?")).resolveAll();
38+
39+
await directLine.emulateIncomingActivity({
40+
type: 'message',
41+
text: 'The weather is sunny and warm.',
42+
from: {
43+
role: 'bot'
44+
},
45+
locale: 'en-US',
46+
entities: [],
47+
channelData: {
48+
feedbackLoop: {
49+
type: 'default',
50+
disclaimer:
51+
'We may contact you at klewis@contoso.microsoft.com about your feedback. Learn more about how this data is used and your rights. By pressing Submit, your feedback will be used to improve our products and services. Privacy statement.'
52+
}
53+
}
54+
});
55+
56+
await pageConditions.numActivitiesShown(2);
57+
58+
await (await directLine.emulateOutgoingActivity('How is the weather in Seattle today?')).resolveAll();
59+
60+
await directLine.emulateIncomingActivity({
61+
id: 'a-00001',
62+
type: 'message',
63+
text: "I'm not sure how to help with that.",
64+
from: {
65+
role: 'bot'
66+
},
67+
locale: 'en-US',
68+
entities: [],
69+
channelData: {
70+
feedbackLoop: {
71+
type: 'default',
72+
disclaimer:
73+
'We may contact you at klewis@contoso.microsoft.com about your feedback. Learn more about how this data is used and your rights. By pressing Submit, your feedback will be used to improve our products and services. Privacy statement.'
74+
}
75+
}
76+
});
77+
78+
await pageConditions.numActivitiesShown(4);
79+
80+
pageElements.byTestId('send box text area').focus();
81+
await host.sendShiftTab(2);
82+
83+
await host.sendKeys('ENTER');
84+
await host.sendKeys('ENTER');
85+
86+
await pageConditions.became(
87+
'feedback form is open',
88+
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
89+
20000
90+
);
91+
92+
await host.snapshot('local');
93+
94+
await host.sendKeys('Test feedback');
95+
const { activity } = await directLine.actPostActivity(async () => {
96+
await host.sendTab(1);
97+
await host.sendKeys('ENTER');
98+
});
99+
100+
expect(activity).toEqual(
101+
expect.objectContaining({
102+
type: 'invoke',
103+
name: 'message/submitAction',
104+
replyToId: 'a-00001',
105+
value: {
106+
actionName: 'feedback',
107+
actionValue: {
108+
reaction: 'like',
109+
feedback: {
110+
feedbackText: expect.any(String)
111+
}
112+
}
113+
}
114+
})
115+
);
116+
});
117+
</script>
118+
</body>
119+
</html>

‎__tests__/html2/fluentTheme/feedback.form.multiple.html.snap-1.png‎

46.7 KB
Loading

‎packages/api/src/StyleOptions.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -945,15 +945,22 @@ type StyleOptions = {
945945

946946
fontColorPrimary?: string;
947947
fontColorSecondary?: string;
948+
948949
primaryButtonBackgroundColor?: string;
949950
primaryButtonFontColor?: string;
951+
primaryButtonBorderColor?: string;
950952
primaryButtonBackgroundColorOnHover?: string;
951953
primaryButtonBackgroundColorOnActive?: string;
952954
primaryButtonBackgroundColorOnDisabled?: string;
955+
primaryButtonFontColorOnHover?: string;
956+
primaryButtonFontColorOnDisabled?: string;
957+
953958
secondaryButtonBackgroundColor?: string;
954959
secondaryButtonBackgroundColorOnHover?: string;
955960
secondaryButtonBorderColor?: string;
956961
secondaryButtonFontColor?: string;
962+
secondaryButtonFontColorOnHover?: string;
963+
957964
textBoxBackgroundColor?: string;
958965
textBoxBorderColor?: string;
959966
textBoxBorderColorOnFocus?: string;

‎packages/api/src/defaultStyleOptions.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,21 +310,28 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
310310

311311
fontColorPrimary: 'black',
312312
fontColorSecondary: 'black',
313+
313314
primaryButtonBackgroundColor: DEFAULT_ACCENT,
314315
primaryButtonFontColor: 'white',
315-
primaryButtonBackgroundColorOnHover: DEFAULT_ACCENT,
316+
primaryButtonBorderColor: DEFAULT_ACCENT,
317+
primaryButtonBackgroundColorOnHover: '#004a98',
316318
primaryButtonBackgroundColorOnActive: DEFAULT_ACCENT,
317319
primaryButtonBackgroundColorOnDisabled: DEFAULT_ACCENT,
320+
primaryButtonFontColorOnHover: 'white',
321+
primaryButtonFontColorOnDisabled: 'white',
322+
318323
secondaryButtonFontColor: 'black',
319324
secondaryButtonBackgroundColor: 'White',
320-
secondaryButtonBackgroundColorOnHover: 'White',
325+
secondaryButtonBackgroundColorOnHover: DEFAULT_SUBTLE,
321326
secondaryButtonBorderColor: DEFAULT_SUBTLE,
327+
secondaryButtonFontColorOnHover: 'white',
328+
322329
textBoxBackgroundColor: 'White',
323-
textBoxBorderColor: 'black',
324-
textBoxBorderColorOnFocus: 'black',
325-
textBoxBorderColorOnActive: 'black',
330+
textBoxBorderColor: DEFAULT_SUBTLE,
331+
textBoxBorderColorOnFocus: DEFAULT_SUBTLE,
332+
textBoxBorderColorOnActive: DEFAULT_ACCENT,
326333
textBoxTextColor: 'black',
327-
textBoxMinHeight: 40,
334+
textBoxMinHeight: 60,
328335
textBoxMinWidth: 280,
329336

330337
// Speech recognition

‎packages/api/src/localization/en-US.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"_COPY_BUTTON_COPIED.comment": "After clicking on the copy button, this text will show briefly",
7979
"FEEDBACK_FORM_SUBMIT_BUTTON_LABEL": "Submit",
8080
"FEEDBACK_FORM_CANCEL_BUTTON_LABEL": "Cancel",
81-
"FEEDBACK_FORM_PLACEHOLDER": "Please provide your feedback",
81+
"FEEDBACK_FORM_PLACEHOLDER": "Give as much detail as you can, but do not include any private or sensitive information.",
8282
"FEEDBACK_FORM_TITLE": "Tell us about your experience",
8383
"FILE_CONTENT_ALT": "'$1'",
8484
"FILE_CONTENT_DOWNLOADABLE_ALT": "Download file '$1'",

‎packages/component/src/Activity/ActivityFeedback.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
5252
const [feedbackType, setFeedbackType] = useState<string | undefined>(undefined);
5353
const resetFeedbackRef = useRef<() => void>();
5454

55-
const { replyToId } = activity;
55+
const { id } = activity;
5656

5757
const { messageThing, graph, isFeedbackLoopSupported } = useGetMessageThing(activity);
5858

@@ -114,10 +114,10 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
114114
disclaimer={disclaimer}
115115
feedbackType={feedbackType as FeedbackType}
116116
handeFeedbackTypeChange={onFeedbackTypeChange}
117-
replyToId={replyToId}
117+
replyToId={id}
118118
/>
119119
),
120-
[disclaimer, feedbackType, onFeedbackTypeChange, replyToId]
120+
[disclaimer, feedbackType, id, onFeedbackTypeChange]
121121
);
122122

123123
if (feedbackActionsPlacement === 'activity-actions' && isFeedbackLoopSupported) {

‎packages/component/src/Styles/CustomPropertyNames.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@ const CustomPropertyNames = Object.freeze({
2525
FeedbackFormDisclaimerColor: '--webchat__font--color-secondary',
2626
FeedbackFormSubmitButtonColor: '--webchat__color--accent',
2727
FeedbackFormSubmitButtonFontColor: '--webchat__button--text--primary',
28+
FeedbackFormSubmitButtonBorderColor: '--webchat__button--primary-border',
29+
FeedbackFormSubmitButtonFontColorOnHover: '--webchat__button--text--primary--hover',
30+
FeedbackFormSubmitButtonFontColorOnDisabled: '--webchat__button--text--primary--disabled',
2831
FeedbackFormSubmitButtonHoverColor: '--webchat__button--primary--hover',
2932
FeedbackFormSubmitButtonActiveColor: '--webchat__button--primary--active',
3033
FeedbackFormSubmitButtonDisabledColor: '--webchat__button--primary--disabled',
3134
FeedbackFormCancelButtonColor: '--webchat__button--secondary',
3235
FeedbackFormCancelButtonFontColor: '--webchat__button--text--secondary',
3336
FeedbackFormCancelButtonBorderColor: '--webchat__button--secondary-border',
3437
FeedbackFormCancelButtonHoverColor: '--webchat__button--secondary--hover',
38+
FeedbackFormCancelButtonFontColorOnHover: '--webchat__button--text--secondary--hover',
3539
FeedbackFormSendBoxBackgroundColor: '--webchat__textbox--background',
3640
FeedbackFormSendBoxBorderColor: '--webchat__textbox--border',
3741
FeedbackFormSendBoxFontColor: '--webchat__button--text--secondary',

‎packages/component/src/Styles/StyleSet/FeedbackForm.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,31 @@ export default function createFeedbackFormStyle() {
2828
'&.feedback-form__container': {
2929
display: 'flex',
3030
flexDirection: 'row',
31-
gap: '8px'
31+
gap: '8px',
32+
paddingTop: '6px'
3233
},
3334
'&.feedback-form__button__submit': {
3435
backgroundColor: CSSTokens.FeedbackFormSubmitButtonColor,
35-
border: `1px solid ${CSSTokens.FeedbackFormSubmitButtonColor}`,
36+
border: `1px solid ${CSSTokens.FeedbackFormSubmitButtonBorderColor}`,
3637
borderRadius: '4px',
3738
color: CSSTokens.FeedbackFormSubmitButtonFontColor,
3839
cursor: 'pointer',
3940
fontSize: '12px',
40-
fontFamily: CSSTokens.FontPrimary
41+
fontFamily: CSSTokens.FontPrimary,
42+
height: '24px',
43+
padding: '0 8px'
4144
},
4245
'&.feedback-form__button__submit:hover': {
43-
backgroundColor: CSSTokens.FeedbackFormSubmitButtonHoverColor
46+
backgroundColor: CSSTokens.FeedbackFormSubmitButtonHoverColor,
47+
border: `1px solid ${CSSTokens.FeedbackFormSubmitButtonHoverColor}`,
48+
color: CSSTokens.FeedbackFormSubmitButtonFontColorOnHover
4449
},
4550
'&.feedback-form__button__submit:active': {
4651
backgroundColor: CSSTokens.FeedbackFormSubmitButtonActiveColor
4752
},
4853
'&.feedback-form__button__submit:disabled': {
4954
backgroundColor: CSSTokens.FeedbackFormSubmitButtonDisabledColor,
55+
color: CSSTokens.FeedbackFormSubmitButtonFontColorOnDisabled,
5056
cursor: 'not-allowed'
5157
},
5258
'&.feedback-form__button__cancel': {
@@ -55,10 +61,14 @@ export default function createFeedbackFormStyle() {
5561
cursor: 'pointer',
5662
fontSize: '12px',
5763
border: `1px solid ${CSSTokens.FeedbackFormCancelButtonBorderColor}`,
58-
fontFamily: CSSTokens.FontPrimary
64+
color: CSSTokens.FeedbackFormCancelButtonFontColor,
65+
fontFamily: CSSTokens.FontPrimary,
66+
height: '24px',
67+
padding: '0 8px'
5968
},
6069
'&.feedback-form__button__cancel:hover': {
61-
backgroundColor: CSSTokens.FeedbackFormCancelButtonHoverColor
70+
backgroundColor: CSSTokens.FeedbackFormCancelButtonHoverColor,
71+
color: CSSTokens.FeedbackFormCancelButtonFontColorOnHover
6272
}
6373
};
6474
}

0 commit comments

Comments
 (0)