@veracity/vui 2.18.3 → 2.20.0-beta.0

package/src/menu/menuItem.tsx

@@ -18,16 +18,7 @@ export const MenuItem = vui<'li', ListItemProps>((props, ref) => {
     closeOnSelect && instance?.hide()
   })
 
-  return (
-    <ListItem
-      className={cs('vui-menuItem', className)}
-      isInteractive
-      onClick={onClick}
-      ref={ref}
-      {...styles.item}
-      {...rest}
-    />
-  )
+  return <ListItem className={cs('vui-menuItem', className)} onClick={onClick} ref={ref} {...styles.item} {...rest} />
 })
 
 MenuItem.displayName = 'MenuItem'

package/src/menu/menuList.tsx

@@ -20,6 +20,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
         {slotTop}
         <List
           className={cs('vui-menuList', className)}
+          isInteractive
           py={1}
           ref={ref}
           w="100%"

package/src/radio/consts.ts

@@ -1,5 +1,7 @@
 export const radioColors = {
-  main: 'seaBlue.main',
-  hover: 'seaBlue.40',
-  disabled: 'sandstone.main',
-}
+  unchecked: 'sandstone.60',
+  checked: 'seaBlue.28',
+  hover: 'seaBlue.20',
+  focus: 'seaBlue.35',
+  disabled: 'sandstone.90',
+} as const

package/src/radio/radio.tsx

@@ -39,6 +39,10 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
     color: ${p => th.color(p.controlHoverColor)};
   }
 
+  .vui-radioControl:focus-within {
+    color: ${radioColors.focus};
+  }
+
   &[aria-disabled='true'] {
     color: ${radioColors.disabled};
     cursor: not-allowed;
@@ -89,7 +93,7 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
 
   const icon = isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = controlColor ? controlColor : radioColors.main
+  const color = isChecked ? radioColors.checked : controlColor
   const controlHoverColor = hoverColor ? hoverColor : radioColors.hover
 
   useEffect(() => {
@@ -128,7 +132,6 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
       >
         {checked !== undefined && (
           <RadioInput
-            aria-label="input-radio"
             className="vui-radioInput"
             onChange={handleOnChange}
             ref={inputRef}
@@ -140,7 +143,6 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
 
         {checked === undefined && (
           <RadioInput
-            aria-label="input-radio"
             className="vui-radioInput"
             onChange={handleOnChange}
             ref={inputRef}

package/src/radio/theme.ts

@@ -2,7 +2,7 @@ import { radioColors } from './consts'
 
 const baseStyle = {
   control: {
-    color: radioColors.main,
+    color: radioColors.unchecked,
     hoverColor: radioColors.hover,
   },
 }

package/src/select/select.tsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
 import { Box } from '../box'
+import { useStyleConfig } from '../core'
 import { Input } from '../input'
+import { helpTextSize } from '../input/consts'
+import HelpText from '../input/helpText'
+import Label from '../label'
 import { Popover } from '../popover'
-import { __DEV__ } from '../utils'
-import { SelectProvider } from './context'
+import { __DEV__, isString } from '../utils'
+import { SelectProvider, useSelectContext } from './context'
 import { SelectOptionData, SelectProps } from './select.types'
 import SelectButton from './selectButton'
 import SelectContent from './selectContent'
@@ -22,8 +26,12 @@ export function Select(props: SelectProps) {
     children,
     defaultValue,
     disabled,
+    errorText,
+    helpText,
+    id: idProp,
     isInvalid,
     isMultiple,
+    label,
     maxHeight,
     name,
     onChange,
@@ -33,7 +41,7 @@ export function Select(props: SelectProps) {
     selectButton,
     selectButtonProps,
     showOptionsFilter,
-    size,
+    size = 'lg',
     value,
     variant,
     ...rest
@@ -45,9 +53,13 @@ export function Select(props: SelectProps) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
   }
 
+  const generatedId = useId()
+  const styles = useStyleConfig('Select', useSelectContext())
   const [query, setQuery] = useState<string>('')
   const [filteredOptions, setFilteredOptions] = useState(options)
 
+  const id = idProp || generatedId
+
   const context = {
     disabled,
     isInvalid,
@@ -73,6 +85,13 @@ export function Select(props: SelectProps) {
 
   return (
     <SelectProvider value={context}>
+      {isString(label) ? (
+        <Label aria-disabled={disabled} className="vui-input-label" htmlFor={id} mb={0.5} {...styles.label}>
+          {label}
+        </Label>
+      ) : (
+        label
+      )}
       <Popover matchWidth {...rest}>
         <>
           {selectButton ?? <SelectButton {...selectButtonProps} />}
@@ -85,7 +104,7 @@ export function Select(props: SelectProps) {
                   mt={0}
                   onChange={onQueryChange}
                   placeholder="Filter…"
-                  size="sm"
+                  size={size}
                   value={query}
                 />
               </Box>
@@ -97,6 +116,12 @@ export function Select(props: SelectProps) {
           </SelectContent>
         </>
       </Popover>
+      {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
+      {!!errorText && (
+        <HelpText isError size={helpTextSize[size]}>
+          {errorText}
+        </HelpText>
+      )}
     </SelectProvider>
   )
 }

package/src/select/select.types.ts

@@ -24,12 +24,20 @@ export type SelectProps = ThemingProps<'Select'> &
   UseSelectProps & {
     /** Select cannot be opened and is styled accordingly. */
     disabled?: boolean
+    /** Socket displaying error text below an input. */
+    errorText?: string | React.ReactNode
+    /** Socket displaying help text below an input. */
+    helpText?: React.ReactNode | string
+    /** Unique identifier */
+    id?: string
     /** Represents invalid form input and is styled accordingly. */
     isInvalid?: boolean
     /** Maximum container height in px. */
     maxHeight?: number
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string
+    /** The label. */
+    label?: string | React.ReactNode
     /** Data prop to display an array of options in the popover. */
     options?: SelectOptionData[]
     /** Displayed inside the trigger when no value is selected. */

package/src/select/selectButton.tsx

@@ -18,8 +18,18 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
   const styles = useStyleConfig('Select', useSelectContext())
 
   const text = valueText || placeholder
-  const textColor = disabled ? 'sandstone.10' : !valueText ? 'sandstone.10' : undefined
-  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
+
+  const disabledProps = disabled
+    ? {
+        activeBg: 'sandstone.79',
+        cursor: 'not-allowed',
+        backgroundColor: 'sandstone.79',
+        borderColor: 'sandstone.79',
+        hoverBg: 'sandstone.79',
+        hoverBorderColor: 'sandstone.79',
+        activeBorderColor: 'sandstone.79',
+      }
+    : undefined
 
   const readOnlyProps = readOnly
     ? {
@@ -31,14 +41,17 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
         hoverBg: 'sandstone.95',
         opacity: 1,
       }
-    : {}
+    : undefined
 
   const isInvalidProps = isInvalid
     ? {
         borderColor: 'energyRed.45',
         hoverBorderColor: 'energyRed.45',
       }
-    : {}
+    : undefined
+
+  const textColor = valueText ? undefined : 'sandstone.10'
+  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
 
   return (
     <PopoverTrigger
@@ -59,6 +72,7 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
       }
       userSelect="text"
       {...styles.button}
+      {...disabledProps}
       {...readOnlyProps}
       {...isInvalidProps}
       {...rest}
@@ -67,5 +81,4 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
 })
 
 SelectButton.displayName = 'SelectButton'
-
 export default SelectButton

package/src/select/selectGroup.tsx

@@ -11,7 +11,7 @@ export const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Select', useSelectContext())
 
-  return <List className={cs('vui-selectGroup', className)} ref={ref} size="sm" {...styles.group} {...rest} />
+  return <List className={cs('vui-selectGroup', className)} ref={ref} {...styles.group} {...rest} />
 }) as VuiComponent<'ul', SelectGroupProps> & {
   Divider: typeof ListDivider
   Heading: typeof ListHeading

package/src/select/selectOption.tsx

@@ -50,14 +50,14 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
       selectedBg="skyBlue.selected"
       title={title}
       value={valueProp}
-      {...styles.item}
+      {...styles.option}
       {...rest}
       {...ellipsisOverflow}
     >
       {children ??
         (isMultiple && (
           <>
-            <Checkbox checked={isSelected} disabled={disabled} mr={1} />
+            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />
             <List.Text>{props.text}</List.Text>
           </>
         ))}

package/src/select/theme.ts

@@ -5,18 +5,50 @@ const defaultProps = {
   variant: 'outlined',
 }
 
-const parts = ['container', 'button', 'content', 'group', 'option']
+const parts = ['container', 'button', 'content', 'group', 'option', 'label']
 
 const sizes = {
   sm: {
     button: {
       size: 'sm',
     },
+    group: {
+      size: 'sm',
+    },
+    option: {
+      size: 'sm',
+    },
+    label: {
+      fontSize: 'sm',
+    },
   },
   md: {
     button: {
       size: 'md',
     },
+    group: {
+      size: 'md',
+    },
+    option: {
+      size: 'md',
+    },
+    label: {
+      fontSize: 'md',
+    },
+  },
+  lg: {
+    button: {
+      size: 'lg',
+    },
+    group: {
+      size: 'lg',
+    },
+    option: {
+      size: 'lg',
+    },
+    label: {
+      fontSize: 'lg',
+    },
   },
 }
 

package/src/switch/switchLabel.tsx

@@ -10,6 +10,11 @@ export const SwitchLabel = vui<'span', TProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Switch', useSwitchContext())
 
+  // <T> has xs but not xl
+  if (styles.label.size === 'xl') {
+    rest.fontSize = 20
+  }
+
   return <T className={cs('vui-switchLabel', className)} display="flex" ref={ref} {...styles.label} {...rest} />
 })
 

package/src/switch/theme.ts

@@ -11,6 +11,26 @@ const baseStyle = {
   },
 }
 
+function sizeXl() {
+  const button = {
+    fontSize: 'lg',
+    minW: 58,
+    thumb: {
+      h: 28,
+      w: 28,
+    },
+    track: {
+      h: 32,
+    },
+  }
+
+  const label = {
+    size: 'xl',
+  }
+
+  return { button, label }
+}
+
 function sizeLg() {
   const button = {
     fontSize: 'md',
@@ -82,6 +102,7 @@ const sizes = {
   sm: sizeSm,
   md: sizeMd,
   lg: sizeLg,
+  xl: sizeXl,
 }
 
 const variants = {

package/src/tabs/tabsNavBar.tsx

@@ -66,7 +66,10 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
               hoverColor="seaBlue.main"
               isRound={false}
               ml={1}
-              onClick={e => tab?.onDelete?.(e)}
+              onClick={e => {
+                e.stopPropagation()
+                tab?.onDelete?.(e)
+              }}
               title="Delete"
             />
           )}

package/src/textarea/textarea.tsx

@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
+import { Label } from '..'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
-import { inputColors } from '../input/consts'
+import { helpTextSize, inputColors } from '../input/consts'
+import HelpText from '../input/helpText'
+import label from '../label'
 import T from '../t'
-import { ChangeEvent, cs, filterUndefined } from '../utils'
+import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import { getInitialCount } from './helpers'
 import { TextareaProps } from './textarea.types'
 
@@ -13,6 +16,7 @@ const TextareaTextarea = styled.textareaBox`
   outline: none;
   padding: 1;
   resize: none;
+  min-height: 80px;
   transition-duration: fast;
   width: 100%;
 
@@ -26,7 +30,7 @@ const TextareaTextarea = styled.textareaBox`
 
 export const TextareaBase = styled.divBox`
   display: flex;
-  min-height: 80px;
+  flex-direction: column;
   position: relative;
   width: 100%;
 `
@@ -38,12 +42,16 @@ export const TextareaBase = styled.divBox`
 export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   const {
     autoFocus,
+    ariaLabel,
     className,
     colorScheme: colorSchemeProp,
     cols,
     defaultValue,
     disabled,
-    id,
+    errorText,
+    id: idProp,
+    helpText,
+    label,
     maxLength,
     name,
     onBlur,
@@ -61,9 +69,12 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
     ...rest
   } = omitThemingProps(props)
 
+  const generatedId = useId()
   const [count, setCount] = useState(getInitialCount(props))
   const [valueInternal, setValueInternal] = useState(defaultValue)
 
+  const id = idProp || generatedId
+
   const styles = useStyleConfig('Textarea', props)
 
   function onChange(e: ChangeEvent<HTMLTextAreaElement>) {
@@ -78,6 +89,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 
   const textareaAliasedProps = filterUndefined({
     'aria-disabled': disabled,
+    'aria-label': ariaLabel,
     bg: readOnly ? 'sandstone.97' : undefined,
     borderColor: readOnly ? 'sandstone.55' : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
@@ -90,47 +102,68 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   }, [value])
 
   return (
-    <TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-      <TextareaTextarea
-        aria-label="input-textarea"
-        className="vui-textareaTextarea"
-        ref={textareaRef}
-        {...{
-          autoFocus,
-          cols,
-          defaultValue,
-          disabled,
-          id,
-          maxLength,
-          name,
-          onBlur,
-          onChange,
-          onFocus,
-          placeholder,
-          readOnly,
-          required,
-          resize,
-          rows,
-        }}
-        value={valueInternal}
-        {...styles.textarea}
-        {...textareaAliasedProps}
-        {...textareaProps}
-      />
-
-      {showCount && (
-        <T
-          className="vui-textareaCount"
-          color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
-          position="absolute"
-          right={0}
-          size="sm"
-          top="calc(100% + 1px)"
-        >
-          {count} {maxLength ? `/ ${maxLength}` : null}
-        </T>
+    <>
+      {isString(label) ? (
+        <Label aria-disabled={disabled} className="vui-textareaLabel" htmlFor={id} mb={0.5} {...styles.label}>
+          {label}
+        </Label>
+      ) : (
+        label
       )}
-    </TextareaBase>
+      <TextareaBase
+        className={cs('vui-textarea', className)}
+        ref={ref}
+        {...styles.container}
+        {...aliasedProps}
+        {...rest}
+      >
+        <TextareaTextarea
+          className="vui-textareaTextarea"
+          ref={textareaRef}
+          {...{
+            autoFocus,
+            cols,
+            defaultValue,
+            disabled,
+            id,
+            maxLength,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            placeholder,
+            readOnly,
+            required,
+            resize,
+            rows,
+          }}
+          value={valueInternal}
+          {...styles.textarea}
+          {...textareaAliasedProps}
+          {...textareaProps}
+        />
+
+        {showCount && (
+          <T
+            className="vui-textareaCount"
+            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+            position="absolute"
+            right={0}
+            size="sm"
+            top="calc(100% + 1px)"
+          >
+            {count} {maxLength ? `/ ${maxLength}` : null}
+          </T>
+        )}
+
+        {!!helpText && <HelpText size={helpTextSize['lg']}>{helpText}</HelpText>}
+        {!!errorText && (
+          <HelpText isError size={helpTextSize['lg']}>
+            {errorText}
+          </HelpText>
+        )}
+      </TextareaBase>
+    </>
   )
 })
 

package/src/textarea/textarea.types.ts

@@ -6,6 +6,8 @@ export type TextareaProps = SystemProps &
   ThemingProps<'Textarea'> & {
     /** Passed to the inner input. */
     autoFocus?: boolean
+    /** ARIA label for the input element. */
+    ariaLabel?: string
     /** Children are disabled for this component. */
     children?: never
     /** Deprecated. Please use variant instead. @deprecated  */
@@ -16,8 +18,14 @@ export type TextareaProps = SystemProps &
     defaultValue?: number | string
     /** Passed to the inner input. */
     disabled?: boolean
+    /** Socket displaying error text below an input. */
+    errorText?: string | React.ReactNode
+    /** Socket displaying help text below an input. */
+    helpText?: React.ReactNode | string
     /** Deprecated. Please use variant="red" instead. @deprecated*/
     isInvalid?: boolean
+    /** The label. */
+    label?: string | React.ReactNode
     /** Passed to the inner input. */
     maxLength?: number
     /** Passed to the inner input. */

package/src/textarea/theme.ts

@@ -2,7 +2,7 @@ import { inputColors } from '../input/consts'
 
 const baseStyle = {
   textarea: {
-    focusWithinRing: 2,
+    focusWithinRing: 3,
     color: inputColors.inputText,
   },
   input: {
@@ -14,7 +14,7 @@ const defaultProps = {
   variant: 'grey',
 }
 
-const parts = ['container', 'textarea']
+const parts = ['container', 'textarea', 'label']
 
 const sizes = {}
 

package/src/theme/components.ts

@@ -20,6 +20,7 @@ import Heading from '../heading/theme'
 import Icon from '../icon/theme'
 import Image from '../image/theme'
 import Input from '../input/theme'
+import Label from '../label/theme'
 import Link from '../link/theme'
 import List from '../list/theme'
 import Menu from '../menu/theme'
@@ -75,6 +76,7 @@ export default {
   Icon,
   Image,
   Input,
+  Label,
   Link,
   List,
   Markdown,