Skip to content

Commit 3d8e33f

Browse files
cansuaacansuaa
authored
feat: Add disabled reason to button group (#3386)
1 parent 0e8e875 commit 3d8e33f

24 files changed

+515
-48
lines changed

‎pages/button-dropdown/disabled-reason.page.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,15 @@ export default function DescriptionPage() {
159159
variant="primary"
160160
/>
161161
</div>
162+
<div style={{ float: isRightAligned ? 'right' : undefined, marginBottom: '100px' }}>
163+
<ButtonDropdown
164+
items={actionsItems}
165+
ariaLabel="Instance actions"
166+
variant="icon"
167+
disabled={true}
168+
disabledReason="disabled reason"
169+
/>
170+
</div>
162171
<div style={{ float: isRightAligned ? 'right' : undefined, marginBottom: '100px' }}>
163172
<ButtonDropdown items={selectableGroupItems} data-testid="buttonDropdownSelectableItems">
164173
Selectable example

‎pages/button-group/gen-ai-feedback.page.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useState } from 'react';
5+
6+
import { Box, Button, ButtonGroup, ButtonGroupProps, Header, SpaceBetween, StatusIndicator } from '~components';
7+
8+
export default function ButtonGroupPage() {
9+
const [feedback, setFeedback] = useState<string>('');
10+
const [feedbackSubmitting, setFeedbackSubmitting] = useState<string>('');
11+
12+
const items: ButtonGroupProps.ItemOrGroup[] = [
13+
{
14+
type: 'group',
15+
text: 'Vote',
16+
items: [
17+
{
18+
type: 'icon-button',
19+
id: 'helpful',
20+
iconName: feedback === 'helpful' ? 'thumbs-up-filled' : 'thumbs-up',
21+
text: 'Helpful',
22+
disabled: !!feedback.length || feedbackSubmitting === 'not-helpful',
23+
disabledReason: feedbackSubmitting.length
24+
? ''
25+
: feedback === 'helpful'
26+
? '“Helpful” feedback has been submitted.'
27+
: 'Helpful option is unavailable after “not helpful” feedback submitted.',
28+
loading: feedbackSubmitting === 'helpful',
29+
popoverFeedback:
30+
feedback === 'helpful' ? (
31+
<StatusIndicator type="success">Feedback submitted</StatusIndicator>
32+
) : (
33+
'Submitting feedback'
34+
),
35+
},
36+
{
37+
type: 'icon-button',
38+
id: 'not-helpful',
39+
iconName: feedback === 'not-helpful' ? 'thumbs-down-filled' : 'thumbs-down',
40+
text: 'Not helpful',
41+
disabled: !!feedback.length || feedbackSubmitting === 'helpful',
42+
disabledReason: feedbackSubmitting.length
43+
? ''
44+
: feedback === 'not-helpful'
45+
? '“Not helpful” feedback has been submitted.'
46+
: '“Not helpful” option is unavailable after “helpful” feedback submitted.',
47+
loading: feedbackSubmitting === 'not-helpful',
48+
popoverFeedback:
49+
feedback === 'helpful' ? (
50+
<StatusIndicator type="success">Feedback submitted</StatusIndicator>
51+
) : (
52+
'Submitting feedback'
53+
),
54+
},
55+
],
56+
},
57+
{
58+
type: 'icon-button',
59+
id: 'copy',
60+
iconName: 'copy',
61+
text: 'Copy',
62+
popoverFeedback: <StatusIndicator type="success">Message copied</StatusIndicator>,
63+
},
64+
];
65+
66+
return (
67+
<Box margin={'m'}>
68+
<Header variant="h1">Gen-AI feedback</Header>
69+
<br />
70+
71+
<SpaceBetween size="l">
72+
<ButtonGroup
73+
ariaLabel="Chat actions"
74+
variant="icon"
75+
items={items}
76+
onItemClick={({ detail }) => {
77+
setFeedbackSubmitting(detail.id);
78+
79+
setTimeout(() => {
80+
setFeedback(detail.id);
81+
setFeedbackSubmitting('');
82+
}, 2000);
83+
}}
84+
/>
85+
86+
<Button
87+
onClick={() => {
88+
setFeedback('');
89+
setFeedbackSubmitting('');
90+
}}
91+
>
92+
Reset
93+
</Button>
94+
</SpaceBetween>
95+
</Box>
96+
);
97+
}

‎pages/button-group/item-permutations.page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ const itemPermutations = createPermutations<ButtonGroupProps.Item>([
2929
loading: [false, true],
3030
popoverFeedback: ['Text feedback'],
3131
},
32+
// Disabled reason
33+
{
34+
type: ['icon-button'],
35+
id: ['test'],
36+
iconName: ['settings'],
37+
text: ['Settings'],
38+
disabled: [true],
39+
disabledReason: ['Disabled reason'],
40+
},
3241
// Popover feedback
3342
{
3443
type: ['icon-button'],
@@ -51,6 +60,17 @@ const itemPermutations = createPermutations<ButtonGroupProps.Item>([
5160
text: ['Add to favorites'],
5261
pressed: [false, true],
5362
},
63+
// Disabled reason
64+
{
65+
type: ['icon-toggle-button'],
66+
id: ['test'],
67+
iconName: ['star'],
68+
pressedIconName: ['star-filled'],
69+
text: ['Add to favorites'],
70+
pressed: [false, true],
71+
disabled: [true],
72+
disabledReason: ['Disabled reason'],
73+
},
5474
]);
5575

5676
const menuDropdownPermutations = createPermutations<ButtonGroupProps.MenuDropdown>([
@@ -87,6 +107,23 @@ const menuDropdownPermutations = createPermutations<ButtonGroupProps.MenuDropdow
87107
],
88108
],
89109
},
110+
// Disabled reason
111+
{
112+
type: ['menu-dropdown'],
113+
id: ['more-actions'],
114+
text: ['More actions'],
115+
disabled: [true],
116+
disabledReason: ['Disabled reason'],
117+
items: [
118+
[
119+
{
120+
id: 'cut',
121+
iconName: 'delete-marker',
122+
text: 'Cut',
123+
},
124+
],
125+
],
126+
},
90127
]);
91128

92129
export default function () {

‎pages/button-group/permutations.page.tsx

+64-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import createPermutations from '../utils/permutations';
99
import PermutationsView from '../utils/permutations-view';
1010
import ScreenshotArea from '../utils/screenshot-area';
1111

12-
const feedbackGroup: ButtonGroupProps.Group = {
12+
const toggleFeedbackGroup: ButtonGroupProps.Group = {
1313
type: 'group',
1414
text: 'Vote',
1515
items: [
@@ -18,16 +18,64 @@ const feedbackGroup: ButtonGroupProps.Group = {
1818
id: 'like',
1919
iconName: 'thumbs-up',
2020
pressedIconName: 'thumbs-up-filled',
21-
text: 'Like',
21+
text: 'Like - toggleable',
2222
pressed: true,
2323
},
2424
{
2525
type: 'icon-toggle-button',
2626
id: 'dislike',
2727
iconName: 'thumbs-down',
2828
pressedIconName: 'thumbs-down-filled',
29-
text: 'Dislike',
29+
text: 'Dislike - toggleable',
30+
pressed: false,
31+
},
32+
],
33+
};
34+
35+
const feedbackGroup: ButtonGroupProps.Group = {
36+
type: 'group',
37+
text: 'Vote',
38+
items: [
39+
{
40+
type: 'icon-button',
41+
id: 'helpful',
42+
iconName: 'thumbs-up-filled',
43+
text: 'Helpful',
44+
disabled: true,
45+
disabledReason: 'Already voted popover feedback',
46+
},
47+
{
48+
type: 'icon-button',
49+
id: 'not-helpful',
50+
iconName: 'thumbs-down',
51+
text: 'Not helpful',
52+
disabled: true,
53+
disabledReason: 'Disabled reason',
54+
},
55+
],
56+
};
57+
58+
const disabledReasonGroup: ButtonGroupProps.Group = {
59+
type: 'group',
60+
text: 'Disabled reason group',
61+
items: [
62+
{
63+
type: 'icon-button',
64+
id: 'icon-button-disabled-reason',
65+
iconName: 'thumbs-up',
66+
text: 'Helpful',
67+
disabled: true,
68+
disabledReason: 'Disabled reason icon-button',
69+
},
70+
{
71+
type: 'icon-toggle-button',
72+
id: 'icon-toggle-button-disabled-reason',
73+
iconName: 'thumbs-down',
74+
pressedIconName: 'thumbs-down-filled',
75+
text: 'Not helpful',
3076
pressed: false,
77+
disabled: true,
78+
disabledReason: 'Disabled reason icon-toggle-button',
3179
},
3280
],
3381
};
@@ -73,6 +121,15 @@ const moreActionsMenu: ButtonGroupProps.MenuDropdown = {
73121
items: [cut],
74122
};
75123

124+
const moreActionsMenuDisabledReason: ButtonGroupProps.MenuDropdown = {
125+
type: 'menu-dropdown',
126+
id: 'menu-dropdown-disabled-reason',
127+
text: 'More actions',
128+
disabled: true,
129+
disabledReason: 'Disabled reason menu-dropdown',
130+
items: [cut],
131+
};
132+
76133
const actionsGroupsWithMenu: ButtonGroupProps.Group = {
77134
type: 'group',
78135
text: 'Actions',
@@ -90,7 +147,11 @@ const buttonGroupPermutations = createPermutations<ButtonGroupProps>([
90147
[feedbackGroup, copy],
91148
[feedbackGroup, actionsGroup],
92149
[feedbackGroup, copy, actionsGroup],
150+
[toggleFeedbackGroup, copy],
151+
[toggleFeedbackGroup, actionsGroup],
152+
[toggleFeedbackGroup, copy, actionsGroup],
93153
[actionsGroupsWithMenu, copy],
154+
[disabledReasonGroup, moreActionsMenuDisabledReason],
94155
],
95156
},
96157
]);

0 commit comments

Comments
 (0)