Skip to content

feat: support select theming #702

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

Draft
hcopp wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: support select theming #702

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
4 changes: 2 additions & 2 deletions packages/web/src/__stories__/componentConfigStickerSheet/customComponentConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const customComponentConfig: ComponentConfig = {

Radio: (props) => ({
background: 'bg',
borderWidth: props.checked ? 200 : 100,
borderWidth: props.checked ? 200 : 200,
borderColor: props.checked ? 'bgPrimary' : 'bgLinePrimarySubtle',
controlColor: 'bgPrimary',
dotSize: 20 / 3,
Expand Down Expand Up @@ -117,7 +117,7 @@ export const customComponentConfig: ComponentConfig = {
Select: (props) => ({
bordered: false,
variant: 'foregroundMuted',
inputBackground: 'bgAlternate',
inputBackground: props.readOnly || props.disabled ? 'bgSecondary' : 'bgAlternate',
focusedBorderWidth: 100,
height: props.compact ? 24 : props.labelVariant === 'inside' ? 40 : 32,
font: props.compact ? 'label2' : 'body',
Expand Down
28 changes: 17 additions & 11 deletions packages/web/src/__stories__/componentConfigStickerSheet/examples/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,41 @@ const selectOptions = [
export const SelectExample = memo(() => {
const [selectValue, setSelectValue] = useState<string | null>(null);

// Select stories run with a11y test off due to a known nested-interactive issue

return (
<VStack className="no-a11y-checks">
<VStack alignItems="stretch" className="no-a11y-checks" gap={2} width="100%">
<Select
compact
label="Label"
labelVariant="inside"
onChange={setSelectValue}
options={selectOptions}
placeholder="Select an option"
style={{ flexGrow: 1 }}
placeholder="Outside label"
style={{ width: '100%' }}
value={selectValue}
/>
<Select
label="Label"
labelVariant="inside"
onChange={setSelectValue}
options={selectOptions}
placeholder="Select an option"
style={{ flexGrow: 1 }}
placeholder="Default input"
style={{ width: '100%' }}
value={selectValue}
/>
<Select
compact
label="Label"
onChange={setSelectValue}
options={selectOptions}
placeholder="Compact input"
style={{ width: '100%' }}
value={selectValue}
/>
<Select
readOnly
label="Label"
onChange={setSelectValue}
options={selectOptions}
placeholder="Select an option"
style={{ flexGrow: 1 }}
placeholder="Read only input"
style={{ width: '100%' }}
value={selectValue}
/>
</VStack>
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__stories__/componentConfigStickerSheet/examples/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { memo, useState } from 'react';
import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
import { DefaultTabsActiveIndicator } from '@coinbase/cds-web/tabs/DefaultTabsActiveIndicator';
import { Tabs } from '@coinbase/cds-web/tabs/Tabs';

import { VStack } from '../../../layout';
Expand Down
75 changes: 55 additions & 20 deletions packages/web/src/alpha/select/DefaultSelectControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ import {
type SelectType,
} from './Select';

// The height is smaller for the inside label variant since the label takes
// up space above the input.
const LABEL_VARIANT_INSIDE_HEIGHT = 32;
const COMPACT_HEIGHT = 40;
const DEFAULT_HEIGHT = 56;

Expand Down Expand Up @@ -74,11 +71,14 @@ const DefaultSelectControlComponent = memo(
open,
placeholder,
disabled,
readOnly = false,
setOpen,
variant,
helperText,
label,
labelVariant,
labelColor = 'fg',
labelFont = 'label1',
contentNode,
startNode,
endNode: customEndNode,
Expand All @@ -98,6 +98,7 @@ const DefaultSelectControlComponent = memo(
onKeyDown,
styles,
classNames,
height,
...props
}: SelectControlProps<Type, SelectOptionValue>,
ref: React.Ref<HTMLElement>,
Expand All @@ -106,6 +107,7 @@ const DefaultSelectControlComponent = memo(
? SelectOptionValue | SelectOptionValue[] | null
: SelectOptionValue | null;
const isMultiSelect = type === 'multi';
const canOpen = !disabled && !readOnly;
const shouldShowCompactLabel = compact && label && !isMultiSelect;
const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
// Map of options to their values
Expand Down Expand Up @@ -189,6 +191,7 @@ const DefaultSelectControlComponent = memo(
const valueNodeContainerRef = useRef<HTMLDivElement>(null);
const handleUnselectValue = useCallback(
(event: React.MouseEvent, index: number) => {
if (readOnly) return;
// Unselect the value
event.stopPropagation();
const currentValue = [...(value as SelectOptionValue[])];
Expand All @@ -208,7 +211,7 @@ const DefaultSelectControlComponent = memo(
if (focusIndex === null) return controlPressableRef.current?.focus();
(valueNodes[focusIndex] as HTMLElement)?.focus();
},
[onChange, value],
[onChange, readOnly, value],
);

const interactableBlendStyles = useMemo(
Expand Down Expand Up @@ -243,12 +246,15 @@ const DefaultSelectControlComponent = memo(
const labelNode = useMemo(
() =>
labelVariant === 'inside' ? (
<Pressable noScaleOnPress onClick={() => setOpen((s) => !s)} tabIndex={-1}>
<Pressable noScaleOnPress onClick={() => canOpen && setOpen((s) => !s)} tabIndex={-1}>
<InputLabel
className={classNames?.controlLabelNode}
color="fg"
color={labelColor}
font={labelFont}
paddingBottom={0}
paddingStart={2}
paddingEnd={2}
paddingStart={startNode ? 0.5 : 2}
paddingTop={1}
style={styles?.controlLabelNode}
>
{label}
Expand All @@ -257,15 +263,26 @@ const DefaultSelectControlComponent = memo(
) : typeof label === 'string' ? (
<InputLabel
className={classNames?.controlLabelNode}
color="fg"
color={labelColor}
font={labelFont}
style={styles?.controlLabelNode}
>
{label}
</InputLabel>
) : (
label
),
[labelVariant, classNames?.controlLabelNode, styles?.controlLabelNode, label, setOpen],
[
labelVariant,
classNames?.controlLabelNode,
styles?.controlLabelNode,
label,
setOpen,
canOpen,
labelColor,
labelFont,
startNode,
],
);

const valueNode = useMemo(() => {
Expand Down Expand Up @@ -294,7 +311,7 @@ const DefaultSelectControlComponent = memo(
accessibilityLabel={`${removeSelectedOptionAccessibilityLabel} ${accessibilityLabel}`}
borderWidth={0}
classNames={{ content: selectedOptionChipContentCss }}
disabled={option.disabled}
disabled={readOnly || option.disabled}
invertColorScheme={false}
maxWidth={200}
onClick={(event) => handleUnselectValue(event, index)}
Expand Down Expand Up @@ -340,6 +357,7 @@ const DefaultSelectControlComponent = memo(
hiddenSelectedOptionsLabel,
optionsMap,
removeSelectedOptionAccessibilityLabel,
readOnly,
handleUnselectValue,
]);

Expand All @@ -362,15 +380,17 @@ const DefaultSelectControlComponent = memo(
focusable={false}
minHeight={
labelVariant === 'inside'
? LABEL_VARIANT_INSIDE_HEIGHT
: compact
? COMPACT_HEIGHT
: DEFAULT_HEIGHT
? undefined
: height !== undefined && height !== null
? height
: compact
? COMPACT_HEIGHT
: DEFAULT_HEIGHT
}
minWidth={0}
onClick={() => setOpen((s) => !s)}
onClick={() => canOpen && setOpen((s) => !s)}
onKeyDown={onKeyDown}
paddingStart={1}
paddingStart={labelVariant === 'inside' ? 0 : 1}
role={role}
style={styles?.controlInputNode}
tabIndex={tabIndex}
Expand All @@ -397,7 +417,7 @@ const DefaultSelectControlComponent = memo(
alignItems="center"
flexGrow={1}
flexShrink={1}
height="100%"
height={labelVariant === 'inside' ? undefined : '100%'}
justifyContent="space-between"
minWidth={0}
width="100%"
Expand All @@ -413,8 +433,12 @@ const DefaultSelectControlComponent = memo(
justifyContent="flex-start"
minWidth={0}
overflow="hidden"
paddingX={1}
paddingY={labelVariant === 'inside' && !isMultiSelect ? 0 : compact ? 1 : 1.5}
paddingBottom={labelVariant === 'inside' && !isMultiSelect ? 1 : compact ? 1 : 1.5}
paddingEnd={labelVariant === 'inside' && !isMultiSelect ? 2 : 1}
paddingStart={
labelVariant === 'inside' && !isMultiSelect ? (startNode ? 0.5 : 2) : 1
}
paddingTop={labelVariant === 'inside' && !isMultiSelect ? 0 : compact ? 1 : 1.5}
style={styles?.controlValueNode}
>
{valueNode}
Expand All @@ -433,6 +457,7 @@ const DefaultSelectControlComponent = memo(
classNames?.controlStartNode,
classNames?.controlValueNode,
disabled,
canOpen,
labelVariant,
compact,
styles?.controlInputNode,
Expand All @@ -448,12 +473,18 @@ const DefaultSelectControlComponent = memo(
valueNode,
contentNode,
setOpen,
height,
],
);

const endNode = useMemo(
() => (
<Pressable aria-hidden flexShrink={0} onClick={() => setOpen((s) => !s)} tabIndex={-1}>
<Pressable
aria-hidden
flexShrink={0}
onClick={() => canOpen && setOpen((s) => !s)}
tabIndex={-1}
>
<HStack
alignItems="center"
className={classNames?.controlEndNode}
Expand Down Expand Up @@ -484,9 +515,12 @@ const DefaultSelectControlComponent = memo(
open,
variant,
setOpen,
canOpen,
],
);

const stackHeight = labelVariant === 'inside' ? undefined : height;

return (
<InputStack
ref={ref}
Expand All @@ -495,6 +529,7 @@ const DefaultSelectControlComponent = memo(
disabled={disabled}
endNode={endNode}
focusedBorderWidth={focusedBorderWidth}
height={stackHeight}
helperTextNode={helperTextNode}
inputNode={inputNode}
labelNode={shouldShowCompactLabel ? null : labelNode}
Expand Down
20 changes: 17 additions & 3 deletions packages/web/src/alpha/select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const SelectBase = memo(
open: openProp,
setOpen: setOpenProp,
disabled,
readOnly,
disableClickOutsideClose,
placeholder,
helperText,
Expand All @@ -108,6 +109,12 @@ const SelectBase = memo(
align,
font,
bordered = true,
borderWidth,
focusedBorderWidth,
height,
inputBackground,
labelColor,
labelFont,
SelectOptionComponent = DefaultSelectOption,
SelectAllOptionComponent = DefaultSelectAllOption,
SelectDropdownComponent = DefaultSelectDropdown,
Expand Down Expand Up @@ -149,7 +156,7 @@ const SelectBase = memo(

const handleControlKeyDown = useCallback(
(event: React.KeyboardEvent) => {
if (disabled || open) return;
if (disabled || readOnly || open) return;
if (event.ctrlKey || event.metaKey || event.altKey) return;

const key = event.key;
Expand All @@ -158,7 +165,7 @@ const SelectBase = memo(
setOpen(true);
}
},
[disabled, open, setOpen],
[disabled, readOnly, open, setOpen],
);

useEffect(() => {
Expand Down Expand Up @@ -308,22 +315,29 @@ const SelectBase = memo(
ariaHaspopup={accessibilityRoles?.dropdown}
blendStyles={styles?.controlBlendStyles}
bordered={bordered}
borderWidth={borderWidth}
className={classNames?.control}
classNames={controlClassNames}
compact={compact}
disabled={disabled}
endNode={endNode}
font={font}
focusedBorderWidth={focusedBorderWidth}
helperText={helperText}
hiddenSelectedOptionsLabel={hiddenSelectedOptionsLabel}
height={height}
inputBackground={inputBackground}
label={label}
labelColor={labelColor}
labelFont={labelFont}
labelVariant={labelVariant}
maxSelectedOptionsToShow={maxSelectedOptionsToShow}
onChange={onChange}
onKeyDown={handleControlKeyDown}
open={open}
options={options}
placeholder={placeholder}
readOnly={readOnly}
removeSelectedOptionAccessibilityLabel={removeSelectedOptionAccessibilityLabel}
setOpen={setOpen}
startNode={startNode}
Expand All @@ -347,7 +361,7 @@ const SelectBase = memo(
clearAllLabel={clearAllLabel}
compact={compact}
controlRef={refs.reference as React.MutableRefObject<HTMLElement>}
disabled={disabled}
disabled={disabled || !!readOnly}
emptyOptionsLabel={emptyOptionsLabel}
end={end}
hideSelectAll={hideSelectAll}
Expand Down
Loading
Loading