Skip to content

Commit 1a13e2f

Browse files
snowystingersnowystinger
committed
fix: testing session bugs
1 parent cfcd697 commit 1a13e2f

File tree

5 files changed

+57
-52
lines changed

5 files changed

+57
-52
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,18 @@ export const Example = {
3737
<Tab id="Emp">Empire</Tab>
3838
</TabList>
3939
<TabPanel id="FoR">
40-
<div>
40+
<div className={style({overflow: 'auto', height: 'full'})}>
4141
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</div>
4242
</div>
4343
</TabPanel>
4444
<TabPanel id="MaR">
45-
<div>
45+
<div className={style({overflow: 'auto', height: 'full'})}>
4646
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
4747
<div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
4848
</div>
4949
</TabPanel>
5050
<TabPanel id="Emp">
51-
<div>
51+
<div className={style({overflow: 'auto', height: 'full'})}>
5252
<div>Alea jacta est.</div>
5353
</div>
5454
</TabPanel>

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

+3-8
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect
3131
import {focusRing, size, style} from '../style' with {type: 'macro'};
3232
import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
3333
import {IconContext} from './Icon';
34+
import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
3435
import {Picker, PickerItem} from './TabsPicker';
3536
import {Text, TextContext} from './Content';
3637
import {useControlledState} from '@react-stately/utils';
3738
import {useDOMRef} from '@react-spectrum/utils';
38-
import {useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
3939
import {useHasTabbableChild} from '@react-aria/focus';
4040
import {useLocale} from '@react-aria/i18n';
4141
import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -409,17 +409,12 @@ export function Tab(props: TabProps) {
409409

410410
const tabPanel = style({
411411
...focusRing(),
412-
display: 'flex',
413412
marginTop: 4,
414-
marginX: -4,
415-
paddingX: 4,
416413
color: 'gray-800',
417414
flexGrow: 1,
418-
flexShrink: 1,
419415
flexBasis: '[0%]',
420416
minHeight: 0,
421-
minWidth: 0,
422-
overflow: 'auto'
417+
minWidth: 0
423418
}, getAllowedOverrides({height: true}));
424419

425420
export function TabPanel(props: TabPanelProps) {
@@ -489,7 +484,7 @@ let HiddenTabs = function (props: {
489484
return (
490485
<div
491486
// @ts-ignore
492-
inert="true"
487+
inert={inertValue(true)}
493488
ref={listRef}
494489
className={style({
495490
display: '[inherit]',

‎packages/@react-spectrum/s2/src/TreeView.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ const rowBackgroundColor = {
162162
const treeRow = style({
163163
position: 'relative',
164164
display: 'flex',
165-
height: 40,
165+
height: 'full',
166166
width: 'full',
167167
boxSizing: 'border-box',
168168
font: 'ui',
@@ -189,9 +189,10 @@ const treeRow = style({
189189
const treeCellGrid = style({
190190
display: 'grid',
191191
width: 'full',
192+
height: 'full',
192193
alignContent: 'center',
193194
alignItems: 'center',
194-
gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 40, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],
195+
gridTemplateColumns: ['auto', 'auto', 'auto', 40, 'auto', '1fr', 'minmax(0, auto)', 'auto'],
195196
gridTemplateRows: '1fr',
196197
gridTemplateAreas: [
197198
'drag-handle checkbox level-padding expand-button icon content actions actionmenu'
@@ -306,8 +307,6 @@ const treeContent = style({
306307

307308
const treeActions = style({
308309
gridArea: 'actions',
309-
flexGrow: 0,
310-
flexShrink: 0,
311310
/* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */
312311
marginStart: 2,
313312
marginEnd: 4
@@ -439,6 +438,13 @@ interface ExpandableRowChevronProps {
439438

440439
const expandButton = style<ExpandableRowChevronProps>({
441440
gridArea: 'expand-button',
441+
color: {
442+
default: '[inherit]',
443+
isDisabled: {
444+
default: 'disabled',
445+
forcedColors: 'GrayText'
446+
}
447+
},
442448
height: 'full',
443449
aspectRatio: 'square',
444450
display: 'flex',

‎packages/@react-spectrum/s2/stories/Popover.stories.tsx

+35-33
Original file line numberDiff line numberDiff line change
@@ -48,39 +48,41 @@ export const HelpCenter = (args: any) => (
4848
<Tab id="feedback">Feedback</Tab>
4949
</TabList>
5050
<TabPanel id="help">
51-
<SearchField label="Search" styles={style({marginTop: 12, marginX: 12})} />
52-
<Menu aria-label="Help" styles={style({marginTop: 12})}>
53-
<MenuSection>
54-
<MenuItem href="#">
55-
<File />
56-
<Text slot="label">Documentation</Text>
57-
</MenuItem>
58-
</MenuSection>
59-
<MenuSection>
60-
<MenuItem href="#">
61-
<Education />
62-
<Text slot="label">Learning</Text>
63-
</MenuItem>
64-
<MenuItem href="#">
65-
<Users />
66-
<Text slot="label">Community</Text>
67-
</MenuItem>
68-
</MenuSection>
69-
<MenuSection>
70-
<MenuItem href="#">
71-
<User />
72-
<Text slot="label">Customer Care</Text>
73-
</MenuItem>
74-
<MenuItem href="#">
75-
<Cloud />
76-
<Text slot="label">Status</Text>
77-
</MenuItem>
78-
<MenuItem href="#">
79-
<Lightbulb />
80-
<Text slot="label">Developer Connection</Text>
81-
</MenuItem>
82-
</MenuSection>
83-
</Menu>
51+
<div className={style({marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12})}>
52+
<SearchField label="Search" styles={style({marginX: 12})} />
53+
<Menu aria-label="Help">
54+
<MenuSection>
55+
<MenuItem href="#">
56+
<File />
57+
<Text slot="label">Documentation</Text>
58+
</MenuItem>
59+
</MenuSection>
60+
<MenuSection>
61+
<MenuItem href="#">
62+
<Education />
63+
<Text slot="label">Learning</Text>
64+
</MenuItem>
65+
<MenuItem href="#">
66+
<Users />
67+
<Text slot="label">Community</Text>
68+
</MenuItem>
69+
</MenuSection>
70+
<MenuSection>
71+
<MenuItem href="#">
72+
<User />
73+
<Text slot="label">Customer Care</Text>
74+
</MenuItem>
75+
<MenuItem href="#">
76+
<Cloud />
77+
<Text slot="label">Status</Text>
78+
</MenuItem>
79+
<MenuItem href="#">
80+
<Lightbulb />
81+
<Text slot="label">Developer Connection</Text>
82+
</MenuItem>
83+
</MenuSection>
84+
</Menu>
85+
</div>
8486
</TabPanel>
8587
<TabPanel id="support" styles={style({margin: 12})}>
8688
<Card size="L" styles={style({width: 'full'})}>

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,18 @@ export const Example = (args: any) => (
4040
<Tab id="Emp">Empire</Tab>
4141
</TabList>
4242
<TabPanel id="FoR">
43-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</div>
43+
<div className={style({overflow: 'auto', height: 'full'})}>
44+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.
45+
</div>
4446
</TabPanel>
4547
<TabPanel id="MaR">
46-
<div>
48+
<div className={style({overflow: 'auto', height: 'full'})}>
4749
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
4850
<div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
4951
</div>
5052
</TabPanel>
5153
<TabPanel id="Emp">
52-
<div>Alea jacta est.</div>
54+
<div className={style({overflow: 'auto', height: 'full'})}>Alea jacta est.</div>
5355
</TabPanel>
5456
</Tabs>
5557
</div>
@@ -114,7 +116,7 @@ let items: Item[] = [
114116

115117
export const Dynamic = (args: any) => (
116118
<div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
117-
<div id="the-label">Hola</div>
119+
<div id="the-label" className={style({font: 'ui'})}>External label for tabs</div>
118120
<Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
119121
<TabList items={items}>
120122
{item => <Tab>{item.title}</Tab>}

0 commit comments

Comments
 (0)