Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Disabled reason for Button and ButtonDropdown #2409

Merged
merged 31 commits into from
Jul 10, 2024
Merged

feat: Disabled reason for Button and ButtonDropdown #2409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
1e7f214
Move use-hidden-description from src/button-dropdown/utils to src/int…
georgylobko Jun 13, 2024
a6f404d
Add className prop to internal tooltip
georgylobko Jun 13, 2024
1246781
Add disabledReason prop to Button
georgylobko Jun 13, 2024
cbb4e3c
Fix typo
georgylobko Jun 13, 2024
47d08ac
Add u tests for disabledReason button for onMouseEnter and onMouseLea…
georgylobko Jun 13, 2024
8c7e2e7
Add disabledReason prop to ButtonDropdown
georgylobko Jun 13, 2024
351138b
Replace undefined with empty string as values for disabledReason on b…
georgylobko Jun 14, 2024
ae512f0
Fix key uniqueness issue on button-dropdown permutations page
georgylobko Jun 14, 2024
5004ab6
Introduce tokens $color-text-button-normal-disabled $color-text-butto…
georgylobko Jun 14, 2024
8933061
Fix tooltip import
georgylobko Jun 20, 2024
e3e9653
Add disabled reason page for button component
georgylobko Jun 25, 2024
6e1a6ae
Remove disabled reason from button permutation page
georgylobko Jun 25, 2024
d867c86
Add disabled reason examples for button-dropdown
georgylobko Jun 25, 2024
edde864
Fix a11y issues in button/button-dropdown pages
georgylobko Jun 25, 2024
347c1db
Fix: prevent triggering event on disabled link button
georgylobko Jun 25, 2024
6f579d7
Update snapshots
georgylobko Jun 25, 2024
d1c27e7
Fix: remove unnecessary import in tooltip component
georgylobko Jun 25, 2024
53806aa
Fix: remove findDisabledReasonDescription test util method
georgylobko Jun 25, 2024
ebd08a2
fix: Make findDisabledReason test-util method access portal tooltip v…
georgylobko Jun 27, 2024
b67385f
fix: Address code review comments
georgylobko Jun 28, 2024
051324c
chore: Add test to check if onClick handler is not triggered when dis…
georgylobko Jun 28, 2024
b7b34a9
Merge branch 'main' into feat/disabled-reason-buttons
georgylobko Jul 1, 2024
abdf549
fix: Import button test classes in test-utils
georgylobko Jul 1, 2024
52595bc
chore: Update test snapshots
georgylobko Jul 1, 2024
3fbbd6a
chore: Change colorBackgroundButtonPrimaryDisabled value
georgylobko Jul 3, 2024
067e1a1
chore: Update test snapshots
georgylobko Jul 3, 2024
77576c7
fix: Remove redundant button-dropdown example
georgylobko Jul 4, 2024
8368333
fix: Update snapshots
georgylobko Jul 4, 2024
b675692
chore: Make disabledReason prop applicable only for normal and primar…
georgylobko Jul 8, 2024
d0255d2
Merge branch 'main' into feat/disabled-reason-buttons
georgylobko Jul 8, 2024
bd77af9
fix: Change the condition that sets the button's disabled attribute f…
georgylobko Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion pages/button-dropdown/disabled-reason.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,24 @@ export default function DescriptionPage() {
Right Align
</label>
<ScreenshotArea disableAnimations={true}>
<div style={{ float: isRightAligned ? 'right' : undefined }}>
<div style={{ float: isRightAligned ? 'right' : undefined, marginBottom: '100px' }}>
<ButtonDropdown items={actionsItems} expandableGroups={true} data-testid="buttonDropdown">
Actions
</ButtonDropdown>
</div>
<div style={{ float: isRightAligned ? 'right' : undefined, marginBottom: '100px' }}>
<ButtonDropdown items={actionsItems} expandableGroups={true} disabled={true} disabledReason="disabled reason">
Actions
</ButtonDropdown>
</div>
<div style={{ float: isRightAligned ? 'right' : undefined, marginBottom: '100px' }}>
<ButtonDropdown
items={actionsItems}
ariaLabel="Instance actions"
mainAction={{ text: 'Launch instance', disabled: true, disabledReason: 'disabled reason' }}
variant="primary"
/>
</div>
</ScreenshotArea>
</>
);
Expand Down
22 changes: 22 additions & 0 deletions pages/button/disabled-reason.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import Button from '~components/button';
import ScreenshotArea from '../utils/screenshot-area';
import styles from './styles.scss';

export default function ButtonsScenario() {
return (
<article>
<ScreenshotArea>
<h1 className={styles.styledWrapper}>Buttons with disabled reason</h1>
<Button variant="primary" disabled={true} disabledReason="disabled reason">
Primary
</Button>
<Button disabled={true} disabledReason="disabled reason">
Default
</Button>
</ScreenshotArea>
</article>
);
}
24 changes: 20 additions & 4 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,9 +350,11 @@ Object {
"color-text-button-inline-icon-hover": "#16191f",
"color-text-button-normal-active": "#16191f",
"color-text-button-normal-default": "#545b64",
"color-text-button-normal-disabled": "#879596",
"color-text-button-normal-hover": "#16191f",
"color-text-button-primary-active": "#ffffff",
"color-text-button-primary-default": "#ffffff",
"color-text-button-primary-disabled": "#879596",
"color-text-button-primary-hover": "#ffffff",
"color-text-calendar-date-hover": "#16191f",
"color-text-calendar-month": "#545b64",
Expand Down Expand Up @@ -983,9 +985,11 @@ Object {
"color-text-button-inline-icon-hover": "#fafafa",
"color-text-button-normal-active": "#fafafa",
"color-text-button-normal-default": "#d5dbdb",
"color-text-button-normal-disabled": "#879596",
"color-text-button-normal-hover": "#fafafa",
"color-text-button-primary-active": "#16191f",
"color-text-button-primary-default": "#16191f",
"color-text-button-primary-disabled": "#879596",
"color-text-button-primary-hover": "#16191f",
"color-text-calendar-date-hover": "#eaeded",
"color-text-calendar-month": "#d5dbdb",
Expand Down Expand Up @@ -1616,9 +1620,11 @@ Object {
"color-text-button-inline-icon-hover": "#16191f",
"color-text-button-normal-active": "#16191f",
"color-text-button-normal-default": "#545b64",
"color-text-button-normal-disabled": "#879596",
"color-text-button-normal-hover": "#16191f",
"color-text-button-primary-active": "#ffffff",
"color-text-button-primary-default": "#ffffff",
"color-text-button-primary-disabled": "#879596",
"color-text-button-primary-hover": "#ffffff",
"color-text-calendar-date-hover": "#16191f",
"color-text-calendar-month": "#545b64",
Expand Down Expand Up @@ -2249,9 +2255,11 @@ Object {
"color-text-button-inline-icon-hover": "#16191f",
"color-text-button-normal-active": "#16191f",
"color-text-button-normal-default": "#545b64",
"color-text-button-normal-disabled": "#879596",
"color-text-button-normal-hover": "#16191f",
"color-text-button-primary-active": "#ffffff",
"color-text-button-primary-default": "#ffffff",
"color-text-button-primary-disabled": "#879596",
"color-text-button-primary-hover": "#ffffff",
"color-text-calendar-date-hover": "#16191f",
"color-text-calendar-month": "#545b64",
Expand Down Expand Up @@ -2882,9 +2890,11 @@ Object {
"color-text-button-inline-icon-hover": "#033160",
"color-text-button-normal-active": "#033160",
"color-text-button-normal-default": "#0972d3",
"color-text-button-normal-disabled": "#7d8998",
"color-text-button-normal-hover": "#033160",
"color-text-button-primary-active": "#ffffff",
"color-text-button-primary-default": "#ffffff",
"color-text-button-primary-disabled": "#7d8998",
"color-text-button-primary-hover": "#ffffff",
"color-text-calendar-date-hover": "#000716",
"color-text-calendar-month": "#5f6b7a",
Expand Down Expand Up @@ -3515,9 +3525,11 @@ Object {
"color-text-button-inline-icon-hover": "#033160",
"color-text-button-normal-active": "#033160",
"color-text-button-normal-default": "#0972d3",
"color-text-button-normal-disabled": "#7d8998",
"color-text-button-normal-hover": "#033160",
"color-text-button-primary-active": "#ffffff",
"color-text-button-primary-default": "#ffffff",
"color-text-button-primary-disabled": "#7d8998",
"color-text-button-primary-hover": "#ffffff",
"color-text-calendar-date-hover": "#000716",
"color-text-calendar-month": "#5f6b7a",
Expand Down Expand Up @@ -3849,7 +3861,7 @@ Object {
"color-background-button-normal-hover": "#192534",
"color-background-button-primary-active": "#539fe5",
"color-background-button-primary-default": "#539fe5",
"color-background-button-primary-disabled": "#354150",
"color-background-button-primary-disabled": "#232f3e",
"color-background-button-primary-hover": "#89bdee",
"color-background-calendar-current-date": "#354150",
"color-background-cell-shaded": "#192534",
Expand Down Expand Up @@ -3922,7 +3934,7 @@ Object {
"color-border-button-normal-default": "#539fe5",
"color-border-button-normal-disabled": "#5f6b7a",
"color-border-button-normal-hover": "#89bdee",
"color-border-button-primary-disabled": "#354150",
"color-border-button-primary-disabled": "#232f3e",
"color-border-calendar-grid": "transparent",
"color-border-calendar-grid-selected-focus-ring": "#0f1b2a",
"color-border-code-editor-ace-active-line-dark-theme": "#5f6b7a",
Expand Down Expand Up @@ -4148,9 +4160,11 @@ Object {
"color-text-button-inline-icon-hover": "#89bdee",
"color-text-button-normal-active": "#89bdee",
"color-text-button-normal-default": "#539fe5",
"color-text-button-normal-disabled": "#7d8998",
"color-text-button-normal-hover": "#89bdee",
"color-text-button-primary-active": "#000716",
"color-text-button-primary-default": "#000716",
"color-text-button-primary-disabled": "#7d8998",
"color-text-button-primary-hover": "#000716",
"color-text-calendar-date-hover": "#d1d5db",
"color-text-calendar-month": "#8d99a8",
Expand Down Expand Up @@ -4482,7 +4496,7 @@ Object {
"color-background-button-normal-hover": "#192534",
"color-background-button-primary-active": "#539fe5",
"color-background-button-primary-default": "#539fe5",
"color-background-button-primary-disabled": "#354150",
"color-background-button-primary-disabled": "#232f3e",
"color-background-button-primary-hover": "#89bdee",
"color-background-calendar-current-date": "#354150",
"color-background-cell-shaded": "#192534",
Expand Down Expand Up @@ -4555,7 +4569,7 @@ Object {
"color-border-button-normal-default": "#539fe5",
"color-border-button-normal-disabled": "#5f6b7a",
"color-border-button-normal-hover": "#89bdee",
"color-border-button-primary-disabled": "#354150",
"color-border-button-primary-disabled": "#232f3e",
"color-border-calendar-grid": "transparent",
"color-border-calendar-grid-selected-focus-ring": "#0f1b2a",
"color-border-code-editor-ace-active-line-dark-theme": "#5f6b7a",
Expand Down Expand Up @@ -4781,9 +4795,11 @@ Object {
"color-text-button-inline-icon-hover": "#89bdee",
"color-text-button-normal-active": "#89bdee",
"color-text-button-normal-default": "#539fe5",
"color-text-button-normal-disabled": "#7d8998",
"color-text-button-normal-hover": "#89bdee",
"color-text-button-primary-active": "#000716",
"color-text-button-primary-default": "#000716",
"color-text-button-primary-disabled": "#7d8998",
"color-text-button-primary-hover": "#000716",
"color-text-calendar-date-hover": "#d1d5db",
"color-text-calendar-month": "#8d99a8",
Expand Down
Loading
Loading