Skip to content

Commit

Permalink
ActionList: Ensure variant is respected when full (#4706)
Browse files Browse the repository at this point in the history
* Fix `variant` issue when `full` and FF is enabled

* Adjust width styles for FF

* Add changeset

* Add full variant vrt tests
  • Loading branch information
TylerJDev authored Jul 3, 2024
1 parent 89c3a08 commit 71859ed
Show file tree
Hide file tree
Showing 13 changed files with 45 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/famous-zebras-train.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

(Behind feature flag) ActionList: Fix for "full" variant when using button semantics
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions e2e/components/ActionList.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -654,4 +654,32 @@ test.describe('ActionList', () => {
})
}
})

test.describe('Full Variant', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-actionlist-features--full-variant',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ActionList.Full Variant.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-actionlist-features--full-variant',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
})
10 changes: 10 additions & 0 deletions packages/react/src/ActionList/ActionList.features.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -792,3 +792,13 @@ export const WithTrailingAction = () => {
</FeatureFlags>
)
}

export const FullVariant = () => (
<ActionList variant="full">
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Quote reply</ActionList.Item>
<ActionList.Item>Edit comment</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
)
4 changes: 2 additions & 2 deletions packages/react/src/ActionList/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
display: 'flex',
// show between 2 items
':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
width: 'calc(100% - 16px)',
marginX: buttonSemantics ? '2' : '0',
width: buttonSemantics && listVariant !== 'full' ? 'calc(100% - 16px)' : '100%',
marginX: buttonSemantics && listVariant !== 'full' ? '2' : '0',
...(buttonSemantics ? hoverStyles : {}),
}

Expand Down

0 comments on commit 71859ed

Please sign in to comment.