@veracity/vui 2.19.0 → 2.20.0-beta.0

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/textarea/textarea.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
+import { Label } from '..'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 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'
 
@@ -47,8 +49,9 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
     defaultValue,
     disabled,
     errorText,
-    id,
+    id: idProp,
     helpText,
+    label,
     maxLength,
     name,
     onBlur,
@@ -66,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>) {
@@ -96,53 +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
-        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>
+    <>
+      {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

@@ -24,6 +24,8 @@ export type TextareaProps = SystemProps &
     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

@@ -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,