RichSelectList: update color and make label optional (#330)

* Make label optional and add accessibility label * Change BE color to white * Set clearChanges to use setSelectedKeys * Add default prop for accessibilityLabel * Remove only * Revert test change * Revert change to clearChanges * Add changeset * Add id instead of accessibility label * update with id * Organize
Cambly · Mar 15, 2024 · adbd975 · adbd975
1 parent d3b8b72
commit adbd975
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 11 deletions.
diff --git a/.changeset/seven-candles-cry.md 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
@@ -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
@@ -45,6 +45,7 @@ export const WhatIfItLookedLikeThis = (): ReactElement => {
     <Box display="flex" gap={2} alignItems="center" flexWrap="wrap">
       <RichSelectList
         label="Label"
+        accessibilityLabel="Label"
         helperText="Helper text"
         multiple
         placeholderText="Placeholder"
@@ -136,6 +137,7 @@ export const VeryLongContent = (): ReactElement => {
     >
       <RichSelectList
         label="Label"
+        accessibilityLabel="Label"
         helperText="Helper text"
         placeholderText="Placeholder"
         onChange={() => undefined}
@@ -205,7 +207,6 @@ export const Default: StoryObj<typeof RichSelectList> = {
   args: {
     children: renderOptions(),
     helperText: "Helper text",
-    label: "Label",
     placeholderText: "Placeholder",
     selectedValues: ["opt1"],
   },
@@ -226,6 +227,7 @@ const RichSelectListInteractive = (): ReactElement => {
   return (
     <RichSelectList
       label="Label"
+      accessibilityLabel="Label"
       helperText="Helper text"
       multiple
       selectedValues={selectionValue}
@@ -255,6 +257,7 @@ export const RadioButtons: StoryObj<typeof RichSelectList> = {
     <RichSelectList
       multiple={false}
       label="Label"
+      accessibilityLabel="Label"
       selectedValues={["opt1"]}
       placeholderText="Placeholder"
       onChange={() => undefined}
@@ -277,6 +280,7 @@ export const NoAutosaveControlled: StoryObj<typeof RichSelectList> = {
       <RichSelectList
         multiple
         label="Label"
+        accessibilityLabel="Label"
         selectedValues={["sf"]}
         placeholderText="Placeholder"
         helperText="When `autosave` is false, the user must click the button to save their changes"
@@ -337,6 +341,7 @@ export const NoAutosaveControlledMultipleSelect: StoryObj<
         <ControlledRichSelectList
           multiple
           label="Multiple select"
+          accessibilityLabel="Label"
           helperText="When `autosave` is false, the user must click the button to save their changes"
           autosave={false}
         >
@@ -348,6 +353,7 @@ export const NoAutosaveControlledMultipleSelect: StoryObj<
         </ControlledRichSelectList>
 
         <ControlledRichSelectList
+          accessibilityLabel="Label"
           multiple={false}
           label="Single select"
           helperText="When `autosave` is false, the user must click the button to save their changes"
@@ -368,6 +374,7 @@ export const Autosave: StoryObj<typeof RichSelectList> = {
   render: () => (
     <RichSelectList
       label="Label"
+      accessibilityLabel="Label"
       helperText="When `autosave` is true, the user's changes are automatically saveted"
       autosave
       onChange={() => undefined}
@@ -389,6 +396,7 @@ export const ItemAttributeComposition: StoryObj<typeof RichSelectList> = {
   render: () => (
     <RichSelectList
       label="Label"
+      accessibilityLabel="Label"
       multiple
       autosave
       onChange={() => undefined}

diff --git 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
@@ -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
           }}
         >
-          <Typography size={100} color="gray700">
-            {label}
-          </Typography>
+          {label && (
+            <label className={styles.label} htmlFor={id}>
+              <Box paddingX={1}>
+                <Typography size={100} color="gray700">
+                  {label}
+                </Typography>
+              </Box>
+            </label>
+          )}
         </ReactAriaLabel>
         <Popover
           ref={overlayHandlerRef}
           disabled={disabled}
-          accessibilityLabel={label}
           content={
             // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
             <Box
@@ -207,8 +217,8 @@ function RichSelectList(props: RichSelectListProps): ReactElement {
                 selectedValues={selectedKeys}
                 defaultSelectedValues={defaultSelectedKeys}
                 onChange={(selected) => setSelectedKeys(new Set(selected))}
-                accessibilityLabel={label}
                 {...richSelectBoxProps}
+                accessibilityLabel={inputId}
               >
                 {children}
               </RichSelectBox>

diff --git 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,