@veracity/vui 2.19.0 → 2.20.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.19.0",
+  "version": "2.20.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
@@ -38,12 +38,15 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
     color: ${p => th.color(p.controlHoverColor)};
   }
 
+  .vui-checkboxControl:focus-within {
+    color: ${checkboxColors.focus};
+  }
+
   &[aria-disabled='true'] {
-    color: ${checkboxColors.disabledText};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: ${checkboxColors.disabledText};
+      color: ${checkboxColors.disabled};
     }
   }
 `
@@ -82,7 +85,7 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
 
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = controlColor ? controlColor : checkboxColors.main
+  const color = isChecked || isIndeterminate ? checkboxColors.checked : controlColor
   const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
   const isLongLabel = label && label?.length >= 60
 
@@ -119,7 +122,6 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
         {...controlStyles}
       >
         <CheckboxInput
-          aria-label={label ? label : 'input-checkbox'}
           className="vui-checkboxInput"
           onChange={handleOnChange}
           ref={inputRef}

package/src/checkbox/consts.ts

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

package/src/checkbox/theme.ts

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

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './icon'
 export * from './icons'
 export * from './image'
 export * from './input'
+export * from './label'
 export * from './link'
 export * from './list'
 export * from './logo'

package/src/input/input.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 
 import { IconButton } from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import Label from '../label'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
@@ -43,25 +44,27 @@ export const InputBase = styled.divBox`
 export const Input = vui<'div', InputProps>((props, ref) => {
   const {
     allowClear,
+    ariaLabel,
     autoComplete,
-    autoCompleteOptions,
     autoCompleteMaxHeight,
+    autoCompleteOptions,
     autoFocus,
-    ariaLabel,
     children,
     className,
     defaultValue,
     disabled,
+    displayValueOnly,
     errorText,
+    helpText,
     iconLeft,
     iconRight,
-    id,
+    id: idProp,
     input,
     inputProps,
     inputRef,
     itemLeft,
     itemRight,
-    helpText,
+    label,
     max,
     maxLength,
     min,
@@ -74,7 +77,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     readOnly,
     required,
     showCount,
-    displayValueOnly,
     size = 'lg',
     state = '',
     stateMapping,
@@ -85,10 +87,13 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     ...rest
   } = props
 
+  const generatedId = useId()
   const [count, setCount] = useState(getInitialCount(props))
   const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
 
+  const id = idProp || generatedId
+
   const styles = useStyleConfig('Input', props)
 
   const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
@@ -131,10 +136,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   return (
     <InputProvider value={context}>
       {displayValueOnly ? (
-        <T
-          className={cs('vui-input-value', className)}
-          size={displayValueOnlyTextSize[size] as 'xs' | 'md' | 'sm' | 'lg'}
-        >
+        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>
           {value || defaultValue}
         </T>
       ) : (
@@ -144,63 +146,78 @@ export const Input = vui<'div', InputProps>((props, ref) => {
           filterAutoCompleteOptions={filterAutoCompleteOptions}
           onAutoCompleteSelect={onAutoCompleteSelect}
         >
-          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-            {itemLeft}
-            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-            {children ?? input ?? (
-              <InputInput
-                ref={inputRef}
-                {...{
-                  autoFocus,
-                  ariaLabel,
-                  defaultValue,
-                  disabled,
-                  id,
-                  max,
-                  maxLength,
-                  min,
-                  name,
-                  onBlur,
-                  onChange,
-                  onFocus,
-                  pattern,
-                  placeholder,
-                  readOnly,
-                  required,
-                  step,
-                  type,
-                }}
-                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
-                value={valueInternal}
-                {...inputProps}
-              />
-            )}
-            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-            {itemRight}
-            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-            {allowClear && (
-              <IconButton
-                disabled={!valueInternal}
-                icon="falTimes"
-                mr={0.5}
-                onClick={onClear}
-                size={clearIconSize[size]}
-                title="Clear"
-              />
-            )}
-            {showCount && (
-              <T
-                className="vui-inputCount"
-                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-input-label" htmlFor={id} mb={0.5} {...styles.label}>
+                {label}
+              </Label>
+            ) : (
+              label
             )}
-          </InputBase>
+            <InputBase
+              className={cs('vui-input', className)}
+              ref={ref}
+              {...styles.container}
+              {...aliasedProps}
+              {...rest}
+            >
+              {itemLeft}
+              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+              {children ?? input ?? (
+                <InputInput
+                  ref={inputRef}
+                  {...{
+                    autoFocus,
+                    ariaLabel,
+                    defaultValue,
+                    disabled,
+                    id,
+                    max,
+                    maxLength,
+                    min,
+                    name,
+                    onBlur,
+                    onChange,
+                    onFocus,
+                    pattern,
+                    placeholder,
+                    readOnly,
+                    required,
+                    step,
+                    type,
+                  }}
+                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
+                  value={valueInternal}
+                  {...inputProps}
+                />
+              )}
+              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+              {itemRight}
+              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+              {allowClear && (
+                <IconButton
+                  disabled={!valueInternal}
+                  icon="falTimes"
+                  mr={0.5}
+                  onClick={onClear}
+                  size={clearIconSize[size]}
+                  title="Clear"
+                />
+              )}
+              {showCount && (
+                <T
+                  className="vui-inputCount"
+                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+                  position="absolute"
+                  right={0}
+                  size="sm"
+                  top="calc(100% + 1px)"
+                >
+                  {count} {maxLength ? `/ ${maxLength}` : null}
+                </T>
+              )}
+            </InputBase>
+          </>
         </AutoCompletePopover>
       )}
 

package/src/input/input.types.ts

@@ -47,6 +47,8 @@ export type InputProps = SystemProps &
     itemLeft?: React.ReactNode
     /** Socket displaying a custom element on the right. */
     itemRight?: React.ReactNode
+    /** The label. */
+    label?: string | React.ReactNode
     /** Passed to the inner input. */
     max?: number | string
     /** Passed to the inner input. */

package/src/input/theme.ts

@@ -15,7 +15,7 @@ const defaultProps = {
   variant: 'grey',
 }
 
-const parts = ['container', 'icon', 'input']
+const parts = ['container', 'icon', 'input', 'label']
 
 const sizes = {
   sm: {
@@ -27,6 +27,9 @@ const sizes = {
       size: 'xs',
     },
     input: {},
+    label: {
+      fontSize: 'sm',
+    },
   },
   md: {
     container: {
@@ -37,6 +40,9 @@ const sizes = {
       size: 'sm',
     },
     input: {},
+    label: {
+      fontSize: 'sm',
+    },
   },
   lg: {
     container: {
@@ -47,6 +53,9 @@ const sizes = {
       size: 'md',
     },
     input: {},
+    label: {
+      fontSize: 'md',
+    },
   },
   xl: {
     container: {
@@ -57,6 +66,9 @@ const sizes = {
       size: 'md',
     },
     input: {},
+    label: {
+      fontSize: 'lg',
+    },
   },
 }
 

package/src/label/index.ts

@@ -0,0 +1,3 @@
+export * from './label'
+export { default } from './label'
+export * from './label.types'

package/src/label/label.tsx

@@ -0,0 +1,31 @@
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import T from '../t'
+import { cs } from '../utils'
+import { LabelProps } from './label.types'
+
+export const LabelBase = styled.labelBox`
+  display: block;
+  font-weight: 600;
+  width: 100%;
+  color: darkBlue.main;
+
+  &[aria-disabled='true'] {
+    color: sandstone.75;
+    cursor: not-allowed;
+  }
+`
+
+/** Displays a paragraph of text. */
+export const Label = vui<'label', LabelProps>((props, ref) => {
+  const { children, className, text, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Label', props)
+
+  return (
+    <T as={LabelBase} className={cs('vui-label', className)} ref={ref} {...styles} {...rest}>
+      {children ?? text}
+    </T>
+  )
+})
+
+Label.displayName = 'Label'
+export default Label

package/src/label/label.types.ts

@@ -0,0 +1,8 @@
+import { SystemProps, TypographyProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type LabelProps = SystemProps &
+  ThemingProps<'P'> & {
+    /** Displays given text if no children are provided. */
+    text?: number | string
+  }

package/src/label/theme.ts

@@ -0,0 +1,29 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+}
+
+const sizes = {
+  xs: {
+    fontSize: 'xs',
+  },
+  sm: {
+    fontSize: 'sm',
+  },
+  md: {
+    fontSize: 'md',
+  },
+  lg: {
+    fontSize: 'lg',
+  },
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants,
+}

package/src/list/list.tsx

@@ -53,12 +53,13 @@ export const List = vui<'ul', ListProps>((props, ref) => {
   }
 
   useEffect(() => {
-    if (isInteractive) document.addEventListener('keydown', onKeydown)
-
-    return () => {
-      if (isInteractive) document.removeEventListener('keydown', onKeydown)
+    if (listRef.current && isInteractive) {
+      listRef.current.addEventListener('keydown', onKeydown)
+      return () => {
+        listRef.current?.removeEventListener('keydown', onKeydown)
+      }
     }
-  }, [])
+  }, [listRef.current, isInteractive])
 
   return (
     <ListProvider value={context}>

package/src/radio/consts.ts

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

package/src/radio/radio.tsx

@@ -39,8 +39,12 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
     color: ${p => th.color(p.controlHoverColor)};
   }
 
+  .vui-radioControl:focus-within {
+    color: ${radioColors.focus};
+  }
+
   &[aria-disabled='true'] {
-    color: ${radioColors.disabledText};
+    color: ${radioColors.disabled};
     cursor: not-allowed;
 
     .vui-radioControl {
@@ -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

@@ -26,6 +26,8 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
         backgroundColor: 'sandstone.79',
         borderColor: 'sandstone.79',
         hoverBg: 'sandstone.79',
+        hoverBorderColor: 'sandstone.79',
+        activeBorderColor: 'sandstone.79',
       }
     : undefined
 

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>
           </>
         ))}