feat: Tabs collapse behaviour #7202

snowystinger · 2024-10-16T08:06:03Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

packages/@react-spectrum/s2/src/Tabs.tsx

snowystinger · 2024-10-16T08:07:25Z

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -82,6 +82,7 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent('item', function Bre
  // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
  let isCurrent = node.nextKey == null;
  let {isDisabled, onAction} = useSlottedContext(BreadcrumbsContext)!;
+  // why don't we use useBreadcrumbItem?


why? totally unrelated to this PR, just noticed it as I was working

packages/react-aria-components/src/Tabs.tsx

rspbot · 2024-10-17T08:10:15Z

Build successful! 🎉

rspbot · 2024-10-21T05:58:32Z

Build successful! 🎉

rspbot · 2024-10-22T04:28:27Z

Build successful! 🎉

rspbot · 2024-10-22T04:42:10Z

Build successful! 🎉

packages/@react-spectrum/s2/src/Tabs.tsx

LFDanLu

Partial review, will finish Monday

packages/@react-spectrum/s2/stories/Tabs.stories.tsx

LFDanLu · 2024-10-25T00:04:44Z

packages/@react-spectrum/s2/src/Tabs.tsx

+export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className'>, StyleProps {
+  // why can't i omit the children and use ReactNode like other components which take items?


What specifically was happening here?

packages/@react-spectrum/s2/src/Tabs.tsx

LFDanLu · 2024-10-25T00:28:19Z

packages/@react-spectrum/s2/src/Tabs.tsx

      let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');

      if (tab != null) {
        setSelectedTab(tab);
      }
+    } else if (tablistRef?.current) {
+      let picker: HTMLElement | null = tablistRef.current.querySelector('button');


I forget if aria disallows it, but is the picker guaranteed to be the only button element in the tablist? I don't see children presentation for the tablist in the spec

yeah, the role tablist doesn't allow for anything other than tabs, I may need to switch the role when we collapse now that you bring it up...

I just looked at S1 Tabs, looks like we don't change the role of the picker but I see in https://w3c.github.io/aria/#tablist does explicitly state "tab" as the only allowed child role like you mentioned... cc @majornista

packages/@react-spectrum/s2/src/Tabs.tsx

yihuiliao · 2024-10-31T15:05:50Z

packages/@react-spectrum/s2/src/Tabs.tsx

+  /**
+   * If the tabs should only display icons and no text.
+   */
+  iconOnly?: boolean


if we're adding a prop isIconOnly then we can use this to update the spacing between the tabs when they are icon only

packages/@react-spectrum/s2/src/TabsPicker.tsx

rspbot · 2024-11-04T16:37:02Z

Build successful! 🎉

rspbot · 2024-11-04T19:13:31Z

Build successful! 🎉

rspbot · 2024-11-04T19:13:32Z

## 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
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
   onSelectionChange?: (Key) => void
   selectedKey?: Key | null
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:TabList

 TabList <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children?: ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:Tab

 Tab {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children?: ReactNode
+  children: ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
 }

/@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
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
   onSelectionChange?: (Key) => void
   selectedKey?: Key | null
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:TabProps

 TabProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children?: ReactNode
+  children: ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
 }

/@react-spectrum/s2:TabListProps

 TabListProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children?: ReactNode
+  children?: ReactNode | (T) => ReactNode
   dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

feat: Tabs collapse behaviour

c81ba45

snowystinger commented Oct 16, 2024

View reviewed changes

packages/@react-spectrum/s2/src/Tabs.tsx Outdated Show resolved Hide resolved

snowystinger commented Oct 16, 2024

View reviewed changes

packages/react-aria-components/src/Tabs.tsx Show resolved Hide resolved

snowystinger added 2 commits October 17, 2024 18:48

Get picker menu working

f8cf117

fix all the lint

d46d15a

Support orientation changes, fix sizing

020392b

snowystinger changed the title ~~[WIP] feat: Tabs collapse behaviour~~ Oct 21, 2024

snowystinger marked this pull request as ready for review October 21, 2024 04:53

snowystinger added 2 commits October 21, 2024 16:19

fix lint

2728e02

reduce renders, tix ts

4dd9b00

snowystinger added 2 commits October 22, 2024 15:08

support iconOnly with collapsing

99c5a70

fix frickin lint

9214709

Merge branch 'main' into tabs-collapse

e76be75

snowystinger added the in sprint label Oct 22, 2024

reidbarber reviewed Oct 23, 2024

View reviewed changes

packages/@react-spectrum/s2/src/Tabs.tsx Show resolved Hide resolved

LFDanLu reviewed Oct 25, 2024

View reviewed changes

yihuiliao reviewed Oct 31, 2024

View reviewed changes

packages/@react-spectrum/s2/src/TabsPicker.tsx Show resolved Hide resolved

yihuiliao reviewed Oct 31, 2024

View reviewed changes

packages/@react-spectrum/s2/src/TabsPicker.tsx Outdated Show resolved Hide resolved

yihuiliao reviewed Oct 31, 2024

View reviewed changes

packages/@react-spectrum/s2/src/TabsPicker.tsx Outdated Show resolved Hide resolved

fix TS

508d51a

snowystinger and others added 3 commits November 4, 2024 11:17

Merge branch 'main' into tabs-collapse

e6f3d40

remove unused context

09b5cb2

pass along disabled keys

b22b6e9

snowystinger and others added 4 commits November 4, 2024 12:41

Some style cleanup

356dbdf

Merge branch 'main' into tabs-collapse

4b6f550

fix lint

553fe6a

truly fix lint

3bf7349

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Tabs collapse behaviour #7202

feat: Tabs collapse behaviour #7202

snowystinger commented Oct 16, 2024

snowystinger Oct 16, 2024 •

edited

Loading

rspbot commented Oct 17, 2024

rspbot commented Oct 21, 2024

rspbot commented Oct 22, 2024

rspbot commented Oct 22, 2024

LFDanLu left a comment

LFDanLu Oct 25, 2024

LFDanLu Oct 25, 2024

snowystinger Oct 28, 2024

LFDanLu Oct 28, 2024

yihuiliao Oct 31, 2024

rspbot commented Nov 4, 2024

rspbot commented Nov 4, 2024

rspbot commented Nov 4, 2024

		export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' \| 'className'>, StyleProps {
		// why can't i omit the children and use ReactNode like other components which take items?

feat: Tabs collapse behaviour #7202

Are you sure you want to change the base?

feat: Tabs collapse behaviour #7202

Conversation

snowystinger commented Oct 16, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

snowystinger Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

rspbot commented Oct 17, 2024

rspbot commented Oct 21, 2024

rspbot commented Oct 22, 2024

rspbot commented Oct 22, 2024

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Oct 25, 2024

Choose a reason for hiding this comment

LFDanLu Oct 25, 2024

Choose a reason for hiding this comment

snowystinger Oct 28, 2024

Choose a reason for hiding this comment

LFDanLu Oct 28, 2024

Choose a reason for hiding this comment

yihuiliao Oct 31, 2024

Choose a reason for hiding this comment

rspbot commented Nov 4, 2024

rspbot commented Nov 4, 2024

rspbot commented Nov 4, 2024

@react-spectrum/s2

/@react-spectrum/s2:Tabs

/@react-spectrum/s2:TabList

/@react-spectrum/s2:Tab

/@react-spectrum/s2:TabsProps

/@react-spectrum/s2:TabProps

/@react-spectrum/s2:TabListProps

snowystinger Oct 16, 2024 •

edited

Loading