diff --git a/.changeset/silly-dots-lick.md b/.changeset/silly-dots-lick.md new file mode 100644 index 00000000000..dc22c64df64 --- /dev/null +++ b/.changeset/silly-dots-lick.md @@ -0,0 +1,7 @@ +--- +"@primer/react": minor +--- + +Update ActionList checkbox styles to form checkbox styles (impacts ActionMenu and SelectPanel) + + diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png new file mode 100644 index 00000000000..4053e0c036e Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png new file mode 100644 index 00000000000..1fc9c4fa147 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png new file mode 100644 index 00000000000..2a23b3f5f37 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png new file mode 100644 index 00000000000..04a69659694 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4053e0c036e Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png new file mode 100644 index 00000000000..23bc4ab9d9c Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png new file mode 100644 index 00000000000..d907d468538 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png new file mode 100644 index 00000000000..c1cf1a2d2f0 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png new file mode 100644 index 00000000000..23bc4ab9d9c Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Multiselect-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png new file mode 100644 index 00000000000..243ca167400 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png new file mode 100644 index 00000000000..03ba005c8f5 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png new file mode 100644 index 00000000000..dacfcd52739 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png new file mode 100644 index 00000000000..520d82ca4ba Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png new file mode 100644 index 00000000000..243ca167400 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png new file mode 100644 index 00000000000..9fea6189661 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png new file mode 100644 index 00000000000..8eb80bc9b20 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png new file mode 100644 index 00000000000..cab1a46559b Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png new file mode 100644 index 00000000000..4baee192ac5 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Disabled-Selected-Multiselect-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png index 9d2eaab95e8..826c45f4d2c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png index 4b7ca64e766..b9e867a42c8 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png index 6d4d0f6f030..00ad2163e72 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png index afd46283381..9f2b26d25f5 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png index 9d2eaab95e8..826c45f4d2c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png index 10d5204af1c..73eeee7fc6d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png index 822bc6c78d6..5b654974b7f 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png index 529436ae140..10d2e8c4d31 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png index 10d5204af1c..73eeee7fc6d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png differ diff --git a/blob-report/report-1.zip b/blob-report/report-1.zip index dea0ba8c02d..08389772006 100644 Binary files a/blob-report/report-1.zip and b/blob-report/report-1.zip differ diff --git a/blob-report/report-2.zip b/blob-report/report-2.zip index 46a72c40e45..43ca0f51b95 100644 Binary files a/blob-report/report-2.zip and b/blob-report/report-2.zip differ diff --git a/blob-report/report-3.zip b/blob-report/report-3.zip index c4cd113cb42..781929d19e8 100644 Binary files a/blob-report/report-3.zip and b/blob-report/report-3.zip differ diff --git a/blob-report/report-4.zip b/blob-report/report-4.zip index 8a57fe6ca71..de5dc5e8bef 100644 Binary files a/blob-report/report-4.zip and b/blob-report/report-4.zip differ diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts index fac59e41cc7..48c37ede40a 100644 --- a/e2e/components/ActionList.test.ts +++ b/e2e/components/ActionList.test.ts @@ -25,13 +25,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -59,13 +53,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -93,13 +81,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -127,13 +109,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -161,13 +137,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -195,13 +165,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -229,13 +193,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -253,7 +211,9 @@ test.describe('ActionList', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionList.Multi Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionList.Multi Select.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -263,13 +223,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -297,13 +251,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -331,13 +279,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -365,13 +307,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -399,13 +335,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -433,13 +363,7 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) + await expect(page).toHaveNoViolations() }) }) } @@ -467,43 +391,60 @@ test.describe('ActionList', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Disabled Multiselect', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--disabled-multiselect', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`ActionList.Disabled Multiselect.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--disabled-multiselect', + globals: { + colorScheme: theme, }, }) + await expect(page).toHaveNoViolations() }) }) } }) - test.describe('All combinations', () => { + test.describe('Disabled Selected Multiselect', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-actionlist-examples--all-combinations', + id: 'components-actionlist-features--disabled-selected-multiselect', globals: { colorScheme: theme, }, }) - // Resize to fit long page - await page.setViewportSize({width: 1000, height: 1000}) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.png`) - - // Hover state - await page.getByRole('listitem', {name: 'Danger inline description'}).hover() - expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.hover.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionList.Disabled Selected Multiselect.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-actionlist-examples--all-combinations', + id: 'components-actionlist-features--disabled-selected-multiselect', globals: { colorScheme: theme, }, diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 2dc349ea258..8ab57ab8525 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -68,6 +68,14 @@ const components = new Map([ id: 'components-actionlist-features--with-icons', name: 'With Icons', }, + { + id: 'components-actionlist-features--disabled-multiselect', + name: 'Disabled Multiselect', + }, + { + id: 'components-actionlist-features--disabled-selected-multiselect', + name: 'Disabled Selected Multiselect', + }, ], }, ], diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx index a27e2181d3c..d342d981263 100644 --- a/src/ActionList/ActionList.features.stories.tsx +++ b/src/ActionList/ActionList.features.stories.tsx @@ -176,16 +176,23 @@ export const SingleSelect = () => { } export const MultiSelect = () => { - const [selectedIndex, setSelectedIndex] = React.useState(0) + const [selectedIndices, setSelectedIndices] = React.useState([0]) + const handleSelect = (index: number) => { + if (selectedIndices.includes(index)) { + setSelectedIndices(selectedIndices.filter(i => i !== index)) + } else { + setSelectedIndices([...selectedIndices, index]) + } + } return ( {projects.map((project, index) => ( setSelectedIndex(index)} + role="menuitemcheckbox" + selected={selectedIndices.includes(index)} + aria-checked={selectedIndices.includes(index)} + onSelect={() => handleSelect(index)} > @@ -198,6 +205,28 @@ export const MultiSelect = () => { ) } +export const DisabledSelectedMultiselect = () => ( + + + Selected disabled item + + + Item 2 + + +) + +export const DisabledMultiselect = () => ( + + + Disabled item + + + Item 2 + + +) + export const DisabledItem = () => { const [selectedIndex, setSelectedIndex] = React.useState(0) return ( diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 90ee1682abf..cbe721b9cfa 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -97,7 +97,13 @@ export const Item = React.forwardRef( transition: 'background 33.333ms linear', color: getVariantStyles(variant, disabled).color, cursor: 'pointer', - '&[aria-disabled]': {cursor: 'not-allowed'}, + '&[aria-disabled]': { + cursor: 'not-allowed', + '[data-component="ActionList.Checkbox"]': { + bg: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))', + borderColor: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))', + }, + }, // Button reset styles (to support as="button") appearance: 'none', diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx index b4a9b71b6e4..553f15c0e09 100644 --- a/src/ActionList/Selection.tsx +++ b/src/ActionList/Selection.tsx @@ -4,6 +4,7 @@ import {ListContext, ActionListProps} from './List' import {GroupContext, ActionListGroupProps} from './Group' import {ActionListItemProps} from './shared' import {LeadingVisualContainer} from './Visuals' +import Box from '../Box' type SelectionProps = Pick export const Selection: React.FC> = ({selected}) => { @@ -34,33 +35,69 @@ export const Selection: React.FC> = ({se /** * selectionVariant is multiple - * we use a svg instead of an input because there should not + * we use a styled div instead of an input because there should not * be an interactive element inside an option - * svg copied from primer/css */ + const checkmarkIn = { + from: { + clipPath: 'inset(var(--base-size-16, 16px) 0 0 0)', + }, + + to: { + clipPath: 'inset(0 0 0 0)', + }, + } + + const checkmarkOut = { + from: { + clipPath: 'inset(0 0 0 0)', + }, + + to: { + clipPath: 'inset(var(--base-size-16, 16px) 0 0 0)', + }, + } + return ( - - + + ) } diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 51c4560234b..b50e0e3e252 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -69,6 +69,11 @@ exports[`NavList renders a simple list 1`] = ` cursor: not-allowed; } +.c2[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c2 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -150,6 +155,11 @@ exports[`NavList renders a simple list 1`] = ` cursor: not-allowed; } +.c6[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -464,6 +474,11 @@ exports[`NavList renders with groups 1`] = ` cursor: not-allowed; } +.c6[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -545,6 +560,11 @@ exports[`NavList renders with groups 1`] = ` cursor: not-allowed; } +.c10[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -895,6 +915,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav cursor: not-allowed; } +.c10[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1011,6 +1036,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav cursor: not-allowed; } +.c3[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c3 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1351,6 +1381,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t cursor: not-allowed; } +.c10[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1473,6 +1508,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t cursor: not-allowed; } +.c3[aria-disabled] [data-component="ActionList.Checkbox"] { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); +} + .c3 [data-component="ActionList.Item--DividerContainer"] { position: relative; }