Skip to content

Commit

Permalink
Fix ActionList.Item conditional when FF is not enabled (#4695)
Browse files Browse the repository at this point in the history
* Fix conditional when FF is not enabled

* Add changeset
  • Loading branch information
TylerJDev authored Jun 25, 2024
1 parent db72a71 commit 9ee8ec9
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/modern-cooks-decide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Fixes conditional in `ActionList.Item` that was dependent on FF being active before applying forwarded ref.
28 changes: 28 additions & 0 deletions packages/react/src/ActionList/ActionList.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,34 @@ describe('ActionList', () => {
expect(listItems.length).toBe(2)
})

it('should apply ref to ActionList.Item when feature flag is disabled', async () => {
const MockComponent = () => {
const ref = React.useRef<HTMLLIElement>(null)

const focusRef = () => {
if (ref.current) ref.current.focus()
}

return (
<FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
<button onClick={focusRef}>Prompt</button>
<ActionList>
<ActionList.Item ref={ref}>Item 1</ActionList.Item>
<ActionList.Item>Item 2</ActionList.Item>
</ActionList>
</FeatureFlags>
)
}

const {getByRole} = HTMLRender(<MockComponent />)
const triggerBtn = getByRole('button', {name: 'Prompt'})
const focusTarget = getByRole('listitem', {name: 'Item 1'})

fireEvent.click(triggerBtn)

expect(document.activeElement).toBe(focusTarget)
})

it('should render ActionList.Item as li when feature flag is enabled and has proper aria role', async () => {
const {container} = HTMLRender(
<FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/ActionList/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
value={{variant, disabled, inactive: Boolean(inactiveText), inlineDescriptionId, blockDescriptionId}}
>
<LiBox
ref={buttonSemanticsFeatureFlag || listSemantics ? forwardedRef : null}
ref={!buttonSemanticsFeatureFlag || listSemantics ? forwardedRef : null}
sx={
buttonSemanticsFeatureFlag
? merge<BetterSystemStyleObject>(
Expand Down

0 comments on commit 9ee8ec9

Please sign in to comment.