Skip to content

Commit da7e608

Browse files
devongovettdevongovett
authored
chore: May release audit (#8245)
* Remove aria-label for default TableView custom actions section I don't think this is necessary * Pass through dependencies * Unused deps * Remove unused omits * Don't allow null in onSelectionChange of Select and StepList * Add back expand button warning to Tree * lockfile * Add docs for icon colors and sizes * Add back null to Select onSelectionChange Needed by form reset.
1 parent 553c4ef commit da7e608

File tree

13 files changed

+99
-20
lines changed

13 files changed

+99
-20
lines changed

‎.storybook-s2/docs/Colors.jsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,36 @@ function Color({name, className}) {
147147
</div>
148148
);
149149
}
150+
151+
export function IconColors() {
152+
return (
153+
<div className="sb-unstyled" style={{columnWidth: 100}}>
154+
<Color name="white" className={colorSwatch('white', 'fill')} />
155+
<Color name="black" className={colorSwatch('black', 'fill')} />
156+
<Color name="accent" className={colorSwatch('accent', 'fill')} />
157+
<Color name="neutral" className={colorSwatch('neutral', 'fill')} />
158+
<Color name="negative" className={colorSwatch('negative', 'fill')} />
159+
<Color name="informative" className={colorSwatch('informative', 'fill')} />
160+
<Color name="positive" className={colorSwatch('positive', 'fill')} />
161+
<Color name="notice" className={colorSwatch('notice', 'fill')} />
162+
<Color name="gray" className={colorSwatch('gray', 'fill')} />
163+
<Color name="red" className={colorSwatch('red', 'fill')} />
164+
<Color name="orange" className={colorSwatch('orange', 'fill')} />
165+
<Color name="yellow" className={colorSwatch('yellow', 'fill')} />
166+
<Color name="chartreuse" className={colorSwatch('chartreuse', 'fill')} />
167+
<Color name="celery" className={colorSwatch('celery', 'fill')} />
168+
<Color name="seafoam" className={colorSwatch('seafoam', 'fill')} />
169+
<Color name="cyan" className={colorSwatch('cyan', 'fill')} />
170+
<Color name="blue" className={colorSwatch('blue', 'fill')} />
171+
<Color name="indigo" className={colorSwatch('indigo', 'fill')} />
172+
<Color name="purple" className={colorSwatch('purple', 'fill')} />
173+
<Color name="fuchsia" className={colorSwatch('fuchsia', 'fill')} />
174+
<Color name="magenta" className={colorSwatch('magenta', 'fill')} />
175+
<Color name="pink" className={colorSwatch('pink', 'fill')} />
176+
<Color name="turquoise" className={colorSwatch('turquoise', 'fill')} />
177+
<Color name="cinnamon" className={colorSwatch('cinnamon', 'fill')} />
178+
<Color name="brown" className={colorSwatch('brown', 'fill')} />
179+
<Color name="silver" className={colorSwatch('silver', 'fill')} />
180+
</div>
181+
)
182+
}

‎.storybook-s2/docs/Icons.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' w
33
import {ActionButton, Text} from '@react-spectrum/s2';
44
import {H2, H3, P, Code, Pre, Link} from './typography';
55
import {highlight} from './highlight' with {type: 'macro'};
6+
import {IconColors} from './Colors';
7+
import CheckmarkCircle from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
8+
import {iconStyle} from '../../packages/@react-spectrum/s2/style' with {type: 'macro'};
69

710
export function Icons() {
811
return (
@@ -29,6 +32,37 @@ export function Icons() {
2932
);
3033
})}
3134
</div>
35+
<H2>Styling</H2>
36+
<P>The <Code>iconStyle</Code> macro can be used to set the size and color of a workflow icon. Icons support five t-shirt sizes, and a subset of the Spectrum colors. <Link href="?path=/docs/intro--docs#supported-css-properties-on-spectrum-components">Other style properties</Link> available across components are also supported on icons.</P>
37+
<Pre>{highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
38+
import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
39+
40+
<CheckmarkCircle styles={iconStyle({size: 'L', color: 'positive'})} />`)}</Pre>
41+
<H3>Icon colors</H3>
42+
<IconColors />
43+
<H3>Icon sizes</H3>
44+
<div className={style({display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'end'})}>
45+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
46+
<CheckmarkCircle styles={iconStyle({size: 'XS'})} />
47+
<span className={style({font: 'ui-sm'})}>XS (14px)</span>
48+
</div>
49+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
50+
<CheckmarkCircle styles={iconStyle({size: 'S'})} />
51+
<span className={style({font: 'ui-sm'})}>S (16px)</span>
52+
</div>
53+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
54+
<CheckmarkCircle styles={iconStyle({size: 'M'})} />
55+
<span className={style({font: 'ui-sm', fontWeight: 'bold'})}>M (20px)</span>
56+
</div>
57+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
58+
<CheckmarkCircle styles={iconStyle({size: 'L'})} />
59+
<span className={style({font: 'ui-sm'})}>L (22px)</span>
60+
</div>
61+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
62+
<CheckmarkCircle styles={iconStyle({size: 'XL'})} />
63+
<span className={style({font: 'ui-sm'})}>XL (26px)</span>
64+
</div>
65+
</div>
3266
<H2>Custom icons</H2>
3367
<P>To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.</P>
3468
<H3>Parcel</H3>

‎.storybook-s2/docs/Intro.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ import {ActionButton} from '@react-spectrum/s2';
193193
<Content>See the <Link href="?path=/docs/style-macro--docs" variant="secondary" target="_top">full docs</Link> to learn about using the style macro to build custom components.</Content>
194194
</InlineAlert>
195195
<H3>Supported CSS properties on Spectrum components</H3>
196-
<ul className={'sb-unstyled' + style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', columns: 3, padding: 0, listStyleType: 'none'})}>
196+
<ul className={'sb-unstyled' + style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', padding: 0, listStyleType: 'none'})} style={{columns: 3}}>
197197
<li><Code>margin</Code></li>
198198
<li><Code>marginStart</Code></li>
199199
<li><Code>marginEnd</Code></li>

‎packages/@react-spectrum/s2/intl/ar-AE.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"table.loading": "جارٍ التحميل...",
2828
"table.loadingMore": "جارٍ تحميل المزيد...",
2929
"table.resizeColumn": "تغيير حجم العمود",
30-
"table.standardColumnMenu": "Default column actions",
3130
"table.sortAscending": "فرز بترتيب تصاعدي",
3231
"table.sortDescending": "فرز بترتيب تنازلي",
3332
"tag.actions": "الإجراءات",

‎packages/@react-spectrum/s2/intl/en-US.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"table.sortAscending": "Sort Ascending",
2929
"table.sortDescending": "Sort Descending",
3030
"table.resizeColumn": "Resize column",
31-
"table.standardColumnMenu": "Default column actions",
3231
"tag.showAllButtonLabel": "Show all ({tagCount, number})",
3332
"tag.hideButtonLabel": "Show less",
3433
"tag.actions": "Actions",

‎packages/@react-spectrum/s2/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,9 @@
136136
"@react-aria/i18n": "^3.12.8",
137137
"@react-aria/interactions": "^3.25.0",
138138
"@react-aria/live-announcer": "^3.4.2",
139-
"@react-aria/overlays": "^3.27.0",
140139
"@react-aria/utils": "^3.28.2",
141140
"@react-spectrum/utils": "^3.12.4",
142141
"@react-stately/layout": "^4.2.2",
143-
"@react-stately/menu": "^3.9.3",
144142
"@react-stately/utils": "^3.10.6",
145143
"@react-types/dialog": "^3.5.17",
146144
"@react-types/grid": "^3.3.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
251251
if (typeof children === 'function' && items) {
252252
renderer = (
253253
<>
254-
<Collection items={items}>
254+
<Collection items={items} dependencies={props.dependencies}>
255255
{children}
256256
</Collection>
257257
{cardLoadingSentinel}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import {SliderContext} from './Slider';
4949
import {space, style} from '../style' with {type: 'macro'};
5050
import {useId, useObjectRef, useOverlayTrigger} from 'react-aria';
5151
import {useLayoutEffect} from '@react-aria/utils';
52-
import {useMenuTriggerState} from '@react-stately/menu';
52+
import {useMenuTriggerState} from 'react-stately';
5353

5454
export interface CoachMarkProps extends Omit<PopoverProps, 'children' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'isNonModal'>, StyleProps {
5555
/** The children of the coach mark. */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export interface ComboboxStyleProps {
7676
size?: 'S' | 'M' | 'L' | 'XL'
7777
}
7878
export interface ComboBoxProps<T extends object> extends
79-
Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | 'isLoading'>,
79+
Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,
8080
ComboboxStyleProps,
8181
StyleProps,
8282
SpectrumLabelableProps,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ interface S2TableProps {
109109
}
110110

111111
// TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
112-
export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | 'isLoading' | 'onLoadMore'>, UnsafeStyles, S2TableProps {
112+
export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
113113
/** Spectrum-defined styles, returned by the `style()` macro. */
114114
styles?: StylesPropWithHeight
115115
}
@@ -792,7 +792,7 @@ function ColumnWithMenu(props: ColumnWithMenuProps) {
792792
</Button>
793793
<Menu onAction={onMenuSelect} styles={style({minWidth: 128})}>
794794
{items.length > 0 && (
795-
<MenuSection aria-label={stringFormatter.format('table.standardColumnMenu')}>
795+
<MenuSection>
796796
<Collection items={items}>
797797
{(item) => <MenuItem>{item?.label}</MenuItem>}
798798
</Collection>
@@ -863,12 +863,12 @@ const selectAllCheckboxColumn = style({
863863
backgroundColor: 'gray-75'
864864
});
865865

866-
export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
866+
export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
867867

868868
/**
869869
* A header within a `<Table>`, containing the table columns.
870870
*/
871-
export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
871+
export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
872872
let scale = useScale();
873873
let {selectionBehavior, selectionMode} = useTableOptions();
874874
let {isQuiet} = useContext(InternalTableContext);
@@ -899,7 +899,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
899899
)}
900900
</RACColumn>
901901
)}
902-
<Collection items={columns}>
902+
<Collection items={columns} dependencies={dependencies}>
903903
{children}
904904
</Collection>
905905
</RACTableHeader>

0 commit comments

Comments
 (0)