Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(dropdowns): use transient props where appropriate #1961

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(dropdowns): use transient props where appropriate #1961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 28 additions & 24 deletions packages/dropdowns/src/elements/combobox/Combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,15 +177,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
'Options'
);
const triggerProps = {
isAutocomplete,
isBare,
isCompact,
isEditable,
isLabelHovered,
isMultiselectable,
maxHeight,
focusInset,
validation,
...(getTriggerProps({
onFocus: () => {
if (!isDisabled) {
Expand Down Expand Up @@ -214,10 +205,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
const inputProps = {
'aria-invalid': validation === 'error' || validation === 'warning',
hidden: isInputHidden,
isBare,
isCompact,
isEditable,
isMultiselectable,
placeholder,
...(getInputProps({
...(_inputProps as IUseComboboxReturnValue['getInputProps'])
Expand Down Expand Up @@ -266,12 +253,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
return (
<ComboboxContext.Provider value={contextValue}>
<StyledCombobox
isCompact={isCompact}
$isCompact={isCompact}
tabIndex={-1} // HACK: otherwise screenreaders can't read the label
{...props}
ref={ref}
>
<StyledTrigger {...triggerProps}>
<StyledTrigger
$isAutocomplete={isAutocomplete}
$isBare={isBare}
$isCompact={isCompact}
$isEditable={isEditable}
$isLabelHovered={isLabelHovered}
$isMultiselectable={isMultiselectable}
$maxHeight={maxHeight}
$focusInset={focusInset}
$validation={validation}
{...triggerProps}
>
<StyledContainer>
{!!startIcon && (
<StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
Expand All @@ -291,7 +289,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
<StyledTagsButton
disabled={isDisabled}
hidden={isTagGroupExpanded}
isCompact={isCompact}
$isCompact={isCompact}
tabIndex={-1}
type="button"
>
Expand All @@ -308,17 +306,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
)}
<StyledValue
hidden={!isInputHidden}
isAutocomplete={isAutocomplete}
isBare={isBare}
isCompact={isCompact}
isDisabled={isDisabled}
isEditable={isEditable}
isMultiselectable={isMultiselectable}
isPlaceholder={!(inputValue || renderValue)}
$isAutocomplete={isAutocomplete}
$isBare={isBare}
$isCompact={isCompact}
$isDisabled={isDisabled}
$isEditable={isEditable}
$isMultiselectable={isMultiselectable}
$isPlaceholder={!(inputValue || renderValue)}
>
{renderValue ? renderValue({ selection, inputValue }) : inputValue || placeholder}
</StyledValue>
<StyledInput {...inputProps} />
<StyledInput
$isBare={isBare}
$isCompact={isCompact}
$isEditable={isEditable}
$isMultiselectable={isMultiselectable}
{...inputProps}
/>
</StyledInputGroup>
{!!(hasChevron || endIcon) && (
<StyledInputIcon
Expand Down
12 changes: 6 additions & 6 deletions packages/dropdowns/src/elements/combobox/Listbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,16 +123,16 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
const Node = (
<StyledFloatingListbox
data-garden-animate={isVisible ? 'true' : 'false'}
isHidden={!isExpanded}
position={placement === 'bottom-start' ? 'bottom' : 'top'}
$isHidden={!isExpanded}
$position={placement === 'bottom-start' ? 'bottom' : 'top'}
style={{ transform, width }}
zIndex={zIndex}
$zIndex={zIndex}
ref={floatingRef}
>
<StyledListbox
isCompact={isCompact}
maxHeight={maxHeight}
minHeight={minHeight}
$isCompact={isCompact}
$maxHeight={maxHeight}
$minHeight={minHeight}
onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
style={{ height }}
{...props}
Expand Down
6 changes: 3 additions & 3 deletions packages/dropdowns/src/elements/combobox/OptGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(

return (
<StyledOption
isCompact={isCompact}
$isCompact={isCompact}
$type="group"
onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
role="none"
Expand All @@ -51,7 +51,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
>
<StyledOptionContent>
{!!(content || legend) && (
<StyledOption as="div" isCompact={isCompact} $type="header">
<StyledOption as="div" $isCompact={isCompact} $type="header">
{!!icon && (
<StyledOptionTypeIcon $isCompact={isCompact} $type="header">
{icon}
Expand All @@ -60,7 +60,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
{content || legend}
</StyledOption>
)}
<StyledOptGroup isCompact={isCompact} {...optGroupProps}>
<StyledOptGroup $isCompact={isCompact} {...optGroupProps}>
<StyledListboxSeparator role="none" />
{children}
</StyledOptGroup>
Expand Down
4 changes: 2 additions & 2 deletions packages/dropdowns/src/elements/combobox/Option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
return (
<OptionContext.Provider value={contextValue}>
<StyledOption
isActive={isActive}
isCompact={isCompact}
$isActive={isActive}
$isCompact={isCompact}
$type={type}
{...props}
{...optionProps}
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns/src/elements/combobox/OptionMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const OptionMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
(props, ref) => {
const { isDisabled } = useOptionContext();

return <StyledOptionMeta isDisabled={isDisabled} {...props} ref={ref} />;
return <StyledOptionMeta $isDisabled={isDisabled} {...props} ref={ref} />;
}
);

Expand Down
4 changes: 2 additions & 2 deletions packages/dropdowns/src/elements/menu/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
<ItemContext.Provider value={contextValue}>
<StyledItem
$type={type}
isCompact={isCompact}
isActive={isActive}
$isCompact={isCompact}
$isActive={isActive}
{...props}
{...itemProps}
ref={mergeRefs([_itemRef, ref])}
Expand Down
6 changes: 3 additions & 3 deletions packages/dropdowns/src/elements/menu/ItemGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(

return (
<ItemGroupContext.Provider value={contextValue}>
<StyledItem isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
<StyledItem $isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
<StyledItemContent>
{!!(content || legend) && (
<StyledItem as="div" isCompact={isCompact} $type="header">
<StyledItem as="div" $isCompact={isCompact} $type="header">
{!!icon && (
<StyledItemTypeIcon $isCompact={isCompact} $type="header">
{icon}
Expand All @@ -56,7 +56,7 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(
{content || legend}
</StyledItem>
)}
<StyledItemGroup isCompact={isCompact} {...groupProps}>
<StyledItemGroup $isCompact={isCompact} {...groupProps}>
<StyledSeparator role="none" />
{children}
</StyledItemGroup>
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns/src/elements/menu/ItemMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ItemMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
(props, ref) => {
const { isDisabled } = useItemContext();

return <StyledItemMeta isDisabled={isDisabled} {...props} ref={ref} />;
return <StyledItemMeta $isDisabled={isDisabled} {...props} ref={ref} />;
}
);

Expand Down
14 changes: 7 additions & 7 deletions packages/dropdowns/src/elements/menu/MenuList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,18 +144,18 @@ export const MenuList = forwardRef<HTMLUListElement, IMenuListProps>(
const Node = (
<StyledFloatingMenu
data-garden-animate={isVisible}
isHidden={!isExpanded || !isVisible} /* [1] */
position={getMenuPosition(placement)}
zIndex={zIndex}
$isHidden={!isExpanded || !isVisible} /* [1] */
$position={getMenuPosition(placement)}
$zIndex={zIndex}
style={{ transform }}
ref={floatingRef}
>
<StyledMenu
data-garden-animate-arrow={isVisible}
arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
isCompact={isCompact}
minHeight={minHeight}
maxHeight={maxHeight}
$arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
$isCompact={isCompact}
$minHeight={minHeight}
$maxHeight={maxHeight}
style={{ height }}
{...props}
ref={ref}
Expand Down
6 changes: 3 additions & 3 deletions packages/dropdowns/src/views/combobox/StyledCombobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import { StyledMessage } from './StyledMessage';
const COMPONENT_ID = 'dropdowns.combobox';

interface IStyledComboboxProps extends ThemeProps<DefaultTheme> {
isCompact?: boolean;
$isCompact?: boolean;
}

const sizeStyles = (props: IStyledComboboxProps) => {
const minWidth = `${props.isCompact ? 100 : 144}px`;
const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
const minWidth = `${props.$isCompact ? 100 : 144}px`;
const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;

return css`
min-width: ${minWidth};
Expand Down
12 changes: 6 additions & 6 deletions packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import { IListboxProps } from '../../types';
const COMPONENT_ID = 'dropdowns.combobox.floating';

export interface IStyledFloatingListboxProps extends ThemeProps<DefaultTheme> {
isHidden?: boolean;
position: MenuPosition;
zIndex?: IListboxProps['zIndex'];
$isHidden?: boolean;
$position: MenuPosition;
$zIndex?: IListboxProps['zIndex'];
}

/*
Expand All @@ -28,11 +28,11 @@ export const StyledFloatingListbox = styled.div.attrs({
left: 0; /* [1] */

${props =>
menuStyles(props.position, {
menuStyles(props.$position, {
theme: props.theme,
hidden: props.isHidden,
hidden: props.$isHidden,
animationModifier: '[data-garden-animate="true"]',
zIndex: props.zIndex
zIndex: props.$zIndex
})};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
Expand Down
14 changes: 7 additions & 7 deletions packages/dropdowns/src/views/combobox/StyledInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden
const COMPONENT_ID = 'dropdowns.combobox.input';

interface IStyledInputProps extends ThemeProps<DefaultTheme> {
isBare?: boolean;
isCompact?: boolean;
isEditable?: boolean;
isMultiselectable?: boolean;
$isBare?: boolean;
$isCompact?: boolean;
$isEditable?: boolean;
$isMultiselectable?: boolean;
}

const colorStyles = ({ theme }: IStyledInputProps) => {
Expand All @@ -33,11 +33,11 @@ const colorStyles = ({ theme }: IStyledInputProps) => {
};

export const getHeight = (props: IStyledInputProps) => {
if (props.isBare && !props.isMultiselectable) {
if (props.$isBare && !props.$isMultiselectable) {
return props.theme.space.base * 5;
}

return props.theme.space.base * (props.isCompact ? 5 : 8);
return props.theme.space.base * (props.$isCompact ? 5 : 8);
};

export const sizeStyles = (props: IStyledInputProps) => {
Expand Down Expand Up @@ -80,7 +80,7 @@ export const StyledInput = styled.input.attrs({

&[hidden] {
display: revert;
${props => props.isEditable && hideVisually()}
${props => props.$isEditable && hideVisually()}
}

&[aria-hidden='true'] {
Expand Down
16 changes: 8 additions & 8 deletions packages/dropdowns/src/views/combobox/StyledListbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,21 @@ import { StyledListboxSeparator } from './StyledListboxSeparator';
const COMPONENT_ID = 'dropdowns.combobox.listbox';

export interface IStyledListboxProps extends ThemeProps<DefaultTheme> {
isCompact?: boolean;
maxHeight?: IListboxProps['maxHeight'];
minHeight?: IListboxProps['minHeight'];
$isCompact?: boolean;
$maxHeight?: IListboxProps['maxHeight'];
$minHeight?: IListboxProps['minHeight'];
}

const sizeStyles = (props: IStyledListboxProps) => {
const padding = props.theme.space.base;
const minHeight =
props.minHeight === undefined
const $minHeight =
props.$minHeight === undefined
? `${getOptionMinHeight(props) + padding * 2}px`
: props.minHeight;
: props.$minHeight;

return css`
min-height: ${minHeight};
max-height: ${props.maxHeight};
min-height: ${$minHeight};
max-height: ${props.$maxHeight};

&&& {
padding-top: ${padding}px;
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns/src/views/combobox/StyledOptGroup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
const COMPONENT_ID = 'dropdowns.combobox.optgroup';

export interface IStyledOptGroupProps extends ThemeProps<DefaultTheme> {
isCompact?: boolean;
$isCompact?: boolean;
}

export const StyledOptGroup = styled.ul.attrs({
Expand Down
10 changes: 5 additions & 5 deletions packages/dropdowns/src/views/combobox/StyledOption.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ import { OptionType } from '../../types';
const COMPONENT_ID = 'dropdowns.combobox.option';

export interface IStyledOptionProps extends ThemeProps<DefaultTheme> {
isActive?: boolean;
isCompact?: boolean;
$isActive?: boolean;
$isCompact?: boolean;
$type?: OptionType | 'header' | 'group';
}

const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
const colorStyles = ({ theme, $isActive, $type }: IStyledOptionProps) => {
let backgroundColor;
let boxShadow;

if (isActive && $type !== 'group' && $type !== 'header') {
if ($isActive && $type !== 'group' && $type !== 'header') {
const variable = 'background.primaryEmphasis';

backgroundColor = getColor({ theme, variable, transparency: theme.opacity[100] });
Expand Down Expand Up @@ -57,7 +57,7 @@ const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
};

export const getMinHeight = (props: IStyledOptionProps) =>
props.theme.space.base * (props.isCompact ? 7 : 9);
props.theme.space.base * (props.$isCompact ? 7 : 9);

/*
* 1. Use px vs. unitless to prevent browser sizing shifts.
Expand Down
6 changes: 3 additions & 3 deletions packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
const COMPONENT_ID = 'dropdowns.combobox.option.meta';

export interface IStyledOptionMetaProps extends ThemeProps<DefaultTheme> {
isDisabled?: boolean;
$isDisabled?: boolean;
}

const colorStyles = ({ theme, isDisabled }: IStyledOptionMetaProps) => {
const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
const colorStyles = ({ theme, $isDisabled }: IStyledOptionMetaProps) => {
const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
const color = getColor({ theme, variable });

return css`
Expand Down
Loading
Loading