fix: Tabs from testing#7463
Conversation
ktabors
left a comment
ktabors
left a comment
There was a problem hiding this comment.
I don't see a way to test tab collapse and icon only?
Drag the resize handle smaller on the Icons story with the isIconOnly control set to true |
| <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab> | ||
| <Tab id="MaR">Monarchy and Republic</Tab> | ||
| <Tab id="Emp">Empire</Tab> | ||
| <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab> |
There was a problem hiding this comment.
Should the keys change to match the new values? Why are we disabling all the keys?
There was a problem hiding this comment.
a bit of knowledge about the internal workings that is being tested to make sure that disabling all the keys individually works the same
this is a chromatic story, not fussed about the keys
On mobile the screen is wider than three iconOnly tabs so no collapse. Icon only it is currently the only story that isn't collapsed on mobile. Retested and it's a little weird. Going to the story initially shows collapsed, set to icon only and it still shows tabs collapsed. Navigate away and come back and Tabs are no longer collapsed. Changing the prop appears to not trigger the resize observer, not sure it should, this seems like a testing only use case. With this weirdness it is possible see the icon only tabs with a picker that shows icons and text items, which is what we really care about and why I mentioned this. |
## API Changes
@react-spectrum/s2/@react-spectrum/s2:Tabs Tabs {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
- iconOnly?: boolean
id?: string
isDisabled?: boolean
+ isIconOnly?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TabsProps TabsProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
- iconOnly?: boolean
id?: string
isDisabled?: boolean
+ isIconOnly?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
styles?: StylesPropWithHeight
} |
* Revert "chore: Update JSDocs and apis for release (#7595)" This reverts commit 101d077. * Revert "fix: Tabs infinite loop (#7487)" This reverts commit 8228e4e. * Revert "fix: Tabs from testing (#7463)" This reverts commit 494e01c. * Revert "feat: Tabs collapse behaviour (#7202)" This reverts commit cd4da2b. * add stuff back that we still want * update lock
5 participants
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: