diff --git a/.changeset/seven-candles-cry.md b/.changeset/seven-candles-cry.md new file mode 100644 index 00000000..d8c0238a --- /dev/null +++ b/.changeset/seven-candles-cry.md @@ -0,0 +1,5 @@ +--- +"@cambly/syntax-core": minor +--- + +RichSelectList: color and label updates diff --git a/packages/syntax-core/src/RichSelect/RichSelect.module.css b/packages/syntax-core/src/RichSelect/RichSelect.module.css index 4ee0feaf..7f95114a 100644 --- a/packages/syntax-core/src/RichSelect/RichSelect.module.css +++ b/packages/syntax-core/src/RichSelect/RichSelect.module.css @@ -2,3 +2,7 @@ .richSelectBox:focus-visible { outline: none; } + +.label { + cursor: pointer; +} diff --git a/packages/syntax-core/src/RichSelect/RichSelectList.stories.tsx b/packages/syntax-core/src/RichSelect/RichSelectList.stories.tsx index 4273e52f..515d2dde 100644 --- a/packages/syntax-core/src/RichSelect/RichSelectList.stories.tsx +++ b/packages/syntax-core/src/RichSelect/RichSelectList.stories.tsx @@ -45,6 +45,7 @@ export const WhatIfItLookedLikeThis = (): ReactElement => { { > undefined} @@ -205,7 +207,6 @@ export const Default: StoryObj = { args: { children: renderOptions(), helperText: "Helper text", - label: "Label", placeholderText: "Placeholder", selectedValues: ["opt1"], }, @@ -226,6 +227,7 @@ const RichSelectListInteractive = (): ReactElement => { return ( = { undefined} @@ -277,6 +280,7 @@ export const NoAutosaveControlled: StoryObj = { @@ -348,6 +353,7 @@ export const NoAutosaveControlledMultipleSelect: StoryObj< = { render: () => ( undefined} @@ -389,6 +396,7 @@ export const ItemAttributeComposition: StoryObj = { render: () => ( undefined} diff --git a/packages/syntax-core/src/RichSelect/RichSelectList.test.tsx b/packages/syntax-core/src/RichSelect/RichSelectList.test.tsx index 2436bfe3..58c985d6 100644 --- a/packages/syntax-core/src/RichSelect/RichSelectList.test.tsx +++ b/packages/syntax-core/src/RichSelect/RichSelectList.test.tsx @@ -20,6 +20,7 @@ const user = userEvent.setup({ const defaultRequiredProps = { onChange: () => undefined, label: "x", + accessibilityLabel: "label", primaryButtonText: "Save", primaryButtonAccessibilityLabel: "Save", secondaryButtonText: "Clear", diff --git a/packages/syntax-core/src/RichSelect/RichSelectList.tsx b/packages/syntax-core/src/RichSelect/RichSelectList.tsx index afdb53e2..83fb6c32 100644 --- a/packages/syntax-core/src/RichSelect/RichSelectList.tsx +++ b/packages/syntax-core/src/RichSelect/RichSelectList.tsx @@ -3,6 +3,7 @@ import React, { useMemo, type SyntheticEvent, useRef, + useId, } from "react"; import classNames from "classnames"; import { @@ -41,10 +42,7 @@ const iconSize = { lg: 24, } as const; -export type RichSelectListProps = Omit< - RichSelectBoxProps, - "accessibilityLabel" -> & { +export type RichSelectListProps = RichSelectBoxProps & { /** Test id for the select element */ "data-testid"?: string; /** @@ -58,8 +56,12 @@ export type RichSelectListProps = Omit< errorText?: string; /** Text shown below select box */ helperText?: string; + /** + * RichSelectList id, if not provided, a unique id will be generated + */ + id?: string; /** Text shown above select box */ - label: string; + label?: string; /** * Text showing in select box if no option has been chosen. * There should always have a placeholder unless there is a default option selected @@ -107,6 +109,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { errorText, helperText, label, + id, onChange, onClick = NOOP, placeholderText, @@ -117,6 +120,8 @@ function RichSelectList(props: RichSelectListProps): ReactElement { ...richSelectBoxProps } = props; + const reactId = useId(); + const inputId = id ?? reactId; const isHydrated = useIsHydrated(); const disabled = !isHydrated || disabledProp; @@ -186,14 +191,19 @@ function RichSelectList(props: RichSelectListProps): ReactElement { setInteractionModality("keyboard"); // Show the focus ring so the user knows where focus went }} > - - {label} - + {label && ( + + )} setSelectedKeys(new Set(selected))} - accessibilityLabel={label} {...richSelectBoxProps} + accessibilityLabel={inputId} > {children} diff --git a/packages/syntax-core/src/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css index e647591a..33388582 100644 --- a/packages/syntax-core/src/SelectList/SelectList.module.css +++ b/packages/syntax-core/src/SelectList/SelectList.module.css @@ -31,6 +31,8 @@ .selectBox { align-items: center; appearance: none; + background-color: var(--color-base-white); + border: 1px solid var(--color-base-gray-700); cursor: pointer; display: flex; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,