dimension composites: rebuild on TUI primitives

assets/src/components/base/button/Button.stories.tsx

@@ -26,10 +26,6 @@ const meta = {
       control: 'select',
       options: ['xs', 'sm', 'md', 'lg']
     },
-    iconSize: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg']
-    },
     leftIconName: {
       control: 'text'
     },
@@ -54,7 +50,6 @@ const meta = {
     content: 'Button',
     testId: 'base-button',
     size: 'md',
-    iconSize: 'sm',
     loading: false,
     fullWidth: false
   }

assets/src/components/base/button/Button.tsx

@@ -44,7 +44,6 @@ type ForwardedTuiProps = Omit<
   | 'rightIconName'
   | 'leftIcon'
   | 'rightIcon'
-  | 'iconSize'
   | 'href'
   | 'target'
   | 'rel'
@@ -65,7 +64,6 @@ export interface FieldsButtonProps extends ForwardedTuiProps {
   rightIconName?: TuiButtonProps['rightIconName']
   leftIcon?: TuiButtonProps['leftIcon']
   rightIcon?: TuiButtonProps['rightIcon']
-  iconSize?: TuiButtonProps['iconSize']
   href?: TuiButtonProps['href']
   target?: TuiButtonProps['target']
   rel?: TuiButtonProps['rel']
@@ -109,7 +107,6 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElemen
     rightIconName,
     leftIcon,
     rightIcon,
-    iconSize,
     href,
     target,
     rel,
@@ -312,7 +309,6 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElemen
       rightIconName={rightIconName}
       leftIcon={leftIcon}
       rightIcon={rightIcon}
-      iconSize={iconSize}
       href={href}
       target={target}
       rel={rel}

assets/src/components/field/border/Border.tsx

@@ -1,89 +1,83 @@
-import { useState, useEffect } from 'react'
-import { useField } from 'react-aria'
-
-import { Label, Description } from '../../base'
+import { useEffect, useState } from 'react'
+import { Field } from '@tangible/ui'
 import { initJSON } from '../../../utils'
 
 import Dimensions from '../dimensions/Dimensions'
 import { Color } from '../'
 
-const Border = (props) => {
-  const units = props.units ?? ['px']
+/**
+ * border = dimensions + a color — { dimensions, color }, JSON in the hidden
+ * input. The dimensions half is the now-TUI Dimensions composite; the color
+ * half is still the react-aria Color field (TUI has no ColorPicker yet — see
+ * the ColorPicker gap). Wrapper migrated to the TUI Field idiom.
+ */
+const Border = (props: any) => {
+  const units: string[] = props.units ?? ['px']
   const format = props.format ?? 'hex'
 
-  const {
-    labelProps,
-    fieldProps,
-    descriptionProps 
-  } = useField(props)
-
-  const [value, setValue] = useState(
+  const [value, setValue] = useState<any>(() =>
     initJSON(props.value ?? '', {
-      dimensions: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        unit: units[0],
-        isLinked: false,
-      },
-      color: 'rgba(0,0,0,1)'
+      dimensions: { top: 0, left: 0, right: 0, bottom: 0, unit: units[0], isLinked: false },
+      color: 'rgba(0,0,0,1)',
     })
   )
 
-  useEffect(() => props.onChange && props.onChange(value), [value])
+  useEffect(() => {
+    props.onChange && props.onChange(value)
+  }, [value])
 
-  const handleData = value => {
-    if (typeof value === 'string') {
-      setValue((prevState) => ({
-        ...prevState,
-        color: value,
-      }))
+  // Dimensions sends an object (partial dimensions); Color sends a string.
+  const handleData = (next: any) => {
+    if (typeof next === 'string') {
+      setValue((prev: any) => ({ ...prev, color: next }))
     } else {
-      setValue((prevState) => ({
-        ...prevState,
-        dimensions: {
-          ...prevState.dimensions,
-          ...value,
-        }
-      }))
+      setValue((prev: any) => ({ ...prev, dimensions: { ...prev.dimensions, ...next } }))
     }
   }
 
+  const disabled = Boolean(props.readOnly)
+
   return (
-    <div className='tf-border'>
-      {props.label &&
-        <Label labelProps={ labelProps } parent={ props }>
-          {props.label}
-        </Label>}
-      <input type="hidden" name={props.name ?? ''} value={JSON.stringify(value)} {...fieldProps} />
-      <div className='tf-border-container'>
-        <div className='tf-border-dimensions-container'>
-          <Dimensions
-            label={ 'Border dimensions' }
-            labelVisuallyHidden={ true }
-            onChange={handleData}
-            linked={props.linked}
-            units={units}
-            value={value.dimensions}
-          />
-        </div>
-        <div className='tf-border-color-picker-container'>
-          <Color
-            label={ 'Border Color' }
-            labelVisuallyHidden={ true }
-            onChange={handleData}
-            value={value.color}
-            format={format}
-            hasAlpha={props.hasAlpha ?? true}
-          />
-        </div>
-      </div>
-      {props.description && (
-        <Description descriptionProps={ descriptionProps } parent={ props }>
-          {props.description}
-        </Description>
-      )}
+    <div className="tf-border">
+      <input type="hidden" name={props.name ?? ''} value={JSON.stringify(value)} />
+      <Field className={props.className} disabled={disabled} error={Boolean(props.isInvalid)}>
+        {props.label && (
+          <Field.Label hidden={Boolean(props.labelVisuallyHidden)}>{props.label}</Field.Label>
+        )}
+        <Field.Control>
+          <div role="group" className="tf-border-container">
+            <div className="tf-border-dimensions-container">
+              <Dimensions
+                label="Border dimensions"
+                labelVisuallyHidden
+                onChange={handleData}
+                linked={props.linked}
+                units={units}
+                value={value.dimensions}
+                readOnly={props.readOnly}
+                min={0}
+              />
+            </div>
+            <div className="tf-border-color-picker-container">
+              <Color
+                label="Border Color"
+                labelVisuallyHidden
+                onChange={handleData}
+                value={value.color}
+                format={format}
+                hasAlpha={props.hasAlpha ?? true}
+              />
+            </div>
+          </div>
+        </Field.Control>
+        {props.description && (
+          <Field.HelperText
+            className={props.descriptionVisuallyHidden ? 'tui-visually-hidden' : undefined}
+          >
+            {props.description}
+          </Field.HelperText>
+        )}
+      </Field>
     </div>
   )
 }

assets/src/components/field/border/index.scss

@@ -1,3 +1,14 @@
-.tf-border-dimensions-container {
-    margin: 0 0 5px 0;
+// border = the TUI dimensions composite + the (react-aria) Color field, laid
+// out side by side.
+.tf-border {
+  .tf-border-container {
+    display: flex;
+    gap: var(--tui-spacing-sm);
+    align-items: flex-start;
+  }
+
+  .tf-border-dimensions-container {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
 }