Merge pull request #438 from omnifed/434-feat-make-select-option-comp…

…onents

434 feat make select option components

docs/app/components/code-builder/builder-form.tsx

@@ -73,6 +73,7 @@ export default function BuilderForm(props: BuilderFormProps) {
             <Show when={props.api[key].type === 'enum'}>
               <Select
                 {...(props.api[key] as EnumResult)}
+                id={props.api[key].name}
                 onChange={handleSelectChange}
                 options={props.api[key].value as string[]}
                 value={selectedProps[key] as string}

docs/app/components/code-builder/builder-layout.tsx

@@ -47,6 +47,10 @@ export default function BuilderLayout(
           className={vstack({
             justify: 'center',
             mx: 'auto',
+            w: {
+              '@/sm': 'full',
+              '@/md': '1/2',
+            },
           })}
         >
           {props.children}
@@ -61,6 +65,7 @@ export default function BuilderLayout(
               position: 'sticky',
               textStyle: 'h6',
               top: '0',
+              zIndex: 'sticky',
             })}
           >
             Preview Playground

docs/app/components/code-builder/builder-select.tsx

@@ -1,35 +1,20 @@
-import { type SelectHTMLAttributes } from 'react'
 import type { EnumResult } from './helpers'
-import { css } from '@cerberus/styled-system/css'
-import { focusStates } from '@cerberus-design/panda-preset'
+import { Select, type SelectProps, Option } from '@cerberus-design/react'
 
 type BuilderSelectProps = Omit<EnumResult, 'value'> &
-  SelectHTMLAttributes<HTMLSelectElement> & {
+  SelectProps & {
     options: string[]
   }
 
 export default function BuilderSelect(props: BuilderSelectProps) {
   const { options, ...nativeProps } = props
   return (
-    <select
-      {...nativeProps}
-      className={css({
-        border: '1px solid',
-        borderColor: 'action.border.initial',
-        color: 'page.text.initial',
-        h: '2.5rem',
-        pxi: '2',
-        rounded: 'sm',
-        ...focusStates,
-        w: 'full',
-      })}
-      id={nativeProps.name}
-    >
+    <Select {...nativeProps} id={nativeProps.name}>
       {options.map((choice) => (
-        <option key={choice} value={choice}>
+        <Option key={choice} value={choice}>
           {choice}
-        </option>
+        </Option>
       ))}
-    </select>
+    </Select>
   )
 }

docs/app/components/code-builder/builder-snippet.tsx

@@ -6,6 +6,14 @@ import { useCodeBuilder } from '@/app/context/code-builder'
 import { useMemo, type PropsWithChildren } from 'react'
 import { css } from '@cerberus/styled-system/css'
 
+function isFormState(key: string) {
+  return ['disabled', 'required', 'readOnly', 'invalid'].includes(key)
+}
+
+function isChildContent(key: string) {
+  return ['text', 'helpText', 'label'].includes(key)
+}
+
 interface BuilderSnippetProps {
   code: string
 }
@@ -16,11 +24,11 @@ export default function BuilderSnippet(
   const { selectedProps } = useCodeBuilder()
   const code = useMemo(() => {
     return props.code.replace(/{{([^}]+)}}/g, (_, key): string => {
-      if (key === 'text') {
+      if (isChildContent(key)) {
         return (selectedProps[key as keyof typeof selectedProps] ||
           'Add Text') as string
       }
-      if (key === 'disabled') {
+      if (isFormState(key)) {
         return `{${selectedProps[key as keyof typeof selectedProps] || 'false'}}`
       }
       return `"${selectedProps[key as keyof typeof selectedProps] || 'false'}"`

docs/app/react/select/a11y.mdx

@@ -9,20 +9,21 @@ import OverviewList from '@/app/components/OverviewList'
 ## Use Cases
 
 <OverviewList intro="Users should be able to:" rules={[
-  'Navigate to and activate a text field with assistive technology',
-  'Input information into the text field',
-  'Receive and understand supporting text and error messages',
-  'Navigate to and select interactive icons',
+  'Navigate to and activate a select field with assistive technology',
+  'Choose an item from the list of options',
+  'Receive and understand supporting select and error messages'
 ]} />
 
 ## Keyboard Navigation
 
 | Keys     | Actions                                                         |
 | -------- | --------------------------------------------------------------- |
 | Tab      | Focus lands on (non-disabled) input       |
+| Enter    | Opens the dropdown menu and selects the focused option         |
+| Esc      | Closes the dropdown menu                                       |
 
 ## Labeling Elements
 
 If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
 
-The accessibility label for a textfield is typically the same as the label for the textfield.
+The accessibility label for a select field is typically the same as the label for the text field.