button-group: migrate to TUI SegmentedControl

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/button-group/ButtonGroup.tsx

@@ -1,60 +1,75 @@
-import { 
-  useEffect,
-  createContext
-} from 'react'
-
-import { useRadioGroup } from 'react-aria'
-import { useRadioGroupState } from 'react-stately'
+import { useState } from 'react'
+import { Field, SegmentedControl } from '@tangible/ui'
 import { getOptions } from '../../../utils'
 
-import ButtonOption from './ButtonOption'
-import {
-  Description,
-  Label
-} from '../../base'
-
-const ButtonGroupContext = createContext(null)
-
 /**
- * @see https://react-spectrum.adobe.com/react-aria/useRadioGroup.html
+ * button-group is a single-select radiogroup rendered as segments — now on TUI's
+ * SegmentedControl. Value contract preserved: the selected key. A hidden input
+ * carries it for form submission (react-aria's native radios did this before).
  */
-
-const ButtonGroup = props => {
-
-  const state = useRadioGroupState(props)
+const ButtonGroup = (props: any) => {
   const options = getOptions(props.choices ?? {})
+  const [value, setValue] = useState<string | number | undefined>(props.value ?? undefined)
+  const disabled = Boolean(props.readOnly)
+  const disabledKeys = (props.disabledKeys ?? []).map(String)
 
-  const {
-    radioGroupProps,
-    labelProps,
-    descriptionProps
-  } = useRadioGroup(props, state)
-
-  useEffect(() => { 
-    props.onChange && props.onChange(state.selectedValue)
-  }, [state.selectedValue])
+  const handleChange = (next: string | number) => {
+    setValue(next)
+    props.onChange?.(next)
+  }
 
-  return(
+  return (
     <div className="tf-button-group">
-      { props.label &&
-        <Label labelProps={ labelProps } parent={ props }>
-          { props.label }
-        </Label> }
-      <div className="tf-button-group-container" { ...radioGroupProps }>
-        <ButtonGroupContext.Provider value={ state }>
-          { options.map(option => (
-            <ButtonOption key={ option.value } context={ ButtonGroupContext } { ...option } >
-              { props.use_dashicon
-                ? <span className={ `dashicons dashicons-${option.label}`}></span>
-                : option.label }
-            </ButtonOption>
-          )) }
-        </ButtonGroupContext.Provider>
-      </div>
-      { props.description &&
-        <Description descriptionProps={ descriptionProps } parent={ props }>
-          { props.description }
-        </Description> }
+      <input type="hidden" name={props.name ?? ''} value={value ?? ''} />
+      <Field
+        className={props.className}
+        disabled={disabled}
+        required={Boolean(props.isRequired)}
+        error={Boolean(props.isInvalid)}
+      >
+        {props.label && (
+          <Field.Label hidden={Boolean(props.labelVisuallyHidden)}>{props.label}</Field.Label>
+        )}
+        <Field.Control>
+          <SegmentedControl
+            value={value}
+            onValueChange={handleChange}
+            disabled={disabled}
+            wrap
+            // Field.Control injects aria-labelledby when a Field.Label is present;
+            // this is the fallback for the label-less case (SegmentedControl
+            // requires one of aria-label / aria-labelledby).
+            aria-label={props.label ?? 'Options'}
+          >
+            {options.map((option) =>
+              props.use_dashicon ? (
+                <SegmentedControl.Item
+                  key={option.value}
+                  value={option.value}
+                  disabled={disabledKeys.includes(String(option.value))}
+                  aria-label={String(option.label)}
+                  icon={<span className={`dashicons dashicons-${option.label}`} />}
+                />
+              ) : (
+                <SegmentedControl.Item
+                  key={option.value}
+                  value={option.value}
+                  disabled={disabledKeys.includes(String(option.value))}
+                >
+                  {option.label}
+                </SegmentedControl.Item>
+              )
+            )}
+          </SegmentedControl>
+        </Field.Control>
+        {props.description && (
+          <Field.HelperText
+            className={props.descriptionVisuallyHidden ? 'tui-visually-hidden' : undefined}
+          >
+            {props.description}
+          </Field.HelperText>
+        )}
+      </Field>
     </div>
   )
 }

assets/src/components/field/button-group/index.scss

@@ -1,50 +1,7 @@
-.tf-button-group label {
+// button-group is now TUI's SegmentedControl (see ButtonGroup.tsx) — all of its
+// styling lives in @tangible/ui. The field wrapper needs nothing beyond letting
+// the control size itself.
+.tf-button-group {
   display: flex;
-}
-
-.tf-button-group .tf-button-group-option {
-  @include button;
-
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 0;
-  color: $field-focus-color;
-  margin: 0;
-
-  &:first-child {
-    border-top-left-radius: $button-border-radius;
-    border-bottom-left-radius: $button-border-radius;
-  }
-
-  &:not(:first-child) {
-    margin-left: (-$button-border-size);
-  }
-
-  &:last-child {
-    border-top-right-radius: $button-border-radius;
-    border-bottom-right-radius: $button-border-radius;
-  }
-
-  &.tf-button-group-option-selected {
-    color: $field-background;
-    background: $field-focus-color;
-    border-color: $field-focus-color;
-  }
-
-	&:focus-within {
-		position: relative;
-		z-index: 1;
-	}
-
-  .dashicons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.tf-button-group-container[aria-disabled="true"] .tf-button-group-option {
-  opacity: 0.5;
-  pointer-events: none;
+  flex-direction: column;
 }

package.json

@@ -61,7 +61,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.5",
     "@floating-ui/react": "^0.27.19",
-    "@tangible/ui": "0.0.14",
+    "@tangible/ui": "^0.2.0",
     "@tanstack/react-table": "^8.21.3",
     "baseline-browser-mapping": "^2.10.0",
     "mime-types": "^3.0.2",