Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/src/CardView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
onLoadMore?: () => void,
/** Spectrum-defined styles, returned by the `style()` macro. */
styles?: StylesPropWithHeight,
/** Provides the ActionBar to render when cards are selected in the CardView. */
renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
}

Expand Down
1 change: 1 addition & 0 deletions packages/@react-spectrum/s2/src/TableView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ interface S2TableProps {
loadingState?: LoadingState,
/** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
onLoadMore?: () => any,
/** Provides the ActionBar to display when rows are selected in the TableView. */
renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
}

Expand Down
44 changes: 26 additions & 18 deletions packages/@react-spectrum/s2/src/Tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,11 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
*/
density?: 'compact' | 'regular',
/**
* If the tabs should only display icons and no text.
* Defines if the text within the tabs should be hidden and only the icon should be shown.
* The text is always visible when the item is collapsed into a picker.
* @default 'show'
*/
isIconOnly?: boolean
labelBehavior?: 'show' | 'hide'
}

export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
Expand Down Expand Up @@ -96,7 +98,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
isDisabled,
disabledKeys,
orientation = 'horizontal',
isIconOnly = false
labelBehavior = 'show'
} = props;
let domRef = useDOMRef(ref);
let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
Expand All @@ -112,7 +114,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
disabledKeys,
selectedKey: value,
onSelectionChange: setValue,
isIconOnly,
labelBehavior,
onFocus: () => pickerRef.current?.focus(),
pickerRef
}]
Expand Down Expand Up @@ -141,10 +143,12 @@ const tablist = style({
compact: 24,
regular: 32
},
isIconOnly: {
density: {
compact: 16,
regular: 24
labelBehavior: {
hide: {
density: {
compact: 16,
regular: 24
}
}
}
}
Expand All @@ -170,7 +174,7 @@ const tablist = style({
});

export function TabList<T extends object>(props: TabListProps<T>) {
let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
let {density, isDisabled, disabledKeys, orientation, labelBehavior, onFocus} = useContext(InternalTabsContext) ?? {};
let {showItems} = useContext(CollapseContext) ?? {};
let state = useContext(TabListStateContext);
let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
Expand Down Expand Up @@ -208,7 +212,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
<RACTabList
{...props}
ref={tablistRef}
className={renderProps => tablist({...renderProps, isIconOnly, density})} />
className={renderProps => tablist({...renderProps, labelBehavior, density})} />
{orientation === 'horizontal' &&
<TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
</div>
Expand Down Expand Up @@ -255,7 +259,7 @@ const selectedIndicator = style({
transitionTimingFunction: 'in-out'
});

function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
function TabLine(props: TabLineProps) {
let {
disabledKeys,
isDisabled: isTabsDisabled,
Expand Down Expand Up @@ -342,7 +346,9 @@ const tab = style({
flexShrink: 0,
transition: 'default',
paddingX: {
isIconOnly: size(6)
labelBehavior: {
hide: size(6)
}
}
}, getAllowedOverrides());

Expand All @@ -356,15 +362,15 @@ const icon = style({
});

export function Tab(props: TabProps) {
let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};

return (
<RACTab
{...props}
// @ts-ignore
originalProps={props}
style={props.UNSAFE_style}
className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
{({
// @ts-ignore
isMenu
Expand All @@ -380,9 +386,11 @@ export function Tab(props: TabProps) {
style({
order: 1,
display: {
isIconOnly: 'none'
labelBehavior: {
hide: 'none'
}
}
})({isIconOnly})
})({labelBehavior})
}],
[IconContext, {
render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
Expand Down Expand Up @@ -479,7 +487,7 @@ let HiddenTabs = function (props: {
let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
let {items} = props;
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, labelBehavior} = useContext(InternalTabsContext);
let state = useContext(TabListStateContext);
let allKeysDisabled = useMemo(() => {
return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
Expand All @@ -501,7 +509,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
ref={pickerRef ? pickerRef : undefined}
isDisabled={isDisabled || allKeysDisabled}
density={density!}
isIconOnly={isIconOnly}
labelBehavior={labelBehavior}
items={items}
disabledKeys={disabledKeys}
selectedKey={selectedKey}
Expand Down
17 changes: 11 additions & 6 deletions packages/@react-spectrum/s2/src/TabsPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,9 @@ export interface PickerProps<T extends object> extends
density: 'compact' | 'regular',
/**
* If the tab picker should only display icon and no text for the button label.
* @default 'show
*/
isIconOnly?: boolean
labelBehavior?: 'show' | 'hide'
}

export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
Expand Down Expand Up @@ -162,7 +163,9 @@ const iconCenterWrapper = style({
display: 'flex',
gridArea: 'icon',
paddingStart: {
isIconOnly: size(6)
labelBehavior: {
hide: size(6)
}
}
});

Expand All @@ -181,7 +184,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
items,
placeholder = stringFormatter.format('picker.placeholder'),
density,
isIconOnly,
labelBehavior = 'show',
...pickerProps
} = props;
let isQuiet = true;
Expand Down Expand Up @@ -217,7 +220,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
[IconContext, {
slots: {
icon: {
render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
styles: icon
}
}
Expand All @@ -228,11 +231,13 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
[DEFAULT_SLOT]: {styles: style({
display: {
default: 'block',
isIconOnly: 'none'
labelBehavior: {
hide: 'none'
}
},
flexGrow: 1,
truncate: true
})({isIconOnly})}
})({labelBehavior})}
}
}],
[InsideSelectValueContext, true]
Expand Down
1 change: 1 addition & 0 deletions packages/@react-stately/selection/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,5 +108,6 @@ export interface MultipleSelectionManager extends FocusState {
isLink(key: Key): boolean,
/** Returns the props for the given item. */
getItemProps(key: Key): any,
/** The collection of nodes that the selection manager handles. */
collection: Collection<Node<unknown>>
}
1 change: 1 addition & 0 deletions packages/react-aria-components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export {FormValidationContext} from 'react-stately';
export {parseColor, getColorChannels} from '@react-stately/color';
export {ListLayout as UNSTABLE_ListLayout, GridLayout as UNSTABLE_GridLayout} from '@react-stately/layout';

export type {AutocompleteProps} from './Autocomplete';
export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from './Breadcrumbs';
export type {ButtonProps, ButtonRenderProps} from './Button';
export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from './Calendar';
Expand Down