Api review

specs/api/Button.md

@@ -1,20 +1,21 @@
 # Button
 
 ```typescript
-interface ButtonBase extends DOMProps, StyleProps, PressProps, FocusableProps {
+interface ButtonBase extends DOMProps, StyleProps, PressEvents, FocusableProps {
   isDisabled?: boolean,
-  icon?: ReactElement,
-  children?: ReactNode,
   elementType?: string | JSXElementConstructor<any>,
+  children?: ReactNode,
   href?: string
 }
 
 interface Button extends ButtonBase {
-  variant: 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative',
+  icon?: ReactElement,
+  variant: 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative', // no default, must choose
   isQuiet?: boolean
 }
 
 interface ActionButton extends ButtonBase {
+  icon?: ReactElement,
   isQuiet?: boolean,
   isSelected?: boolean,
   holdAffordance?: boolean,

specs/api/Form.md

@@ -1,42 +1,46 @@
-# Form and FieldLabel
+# Form and Label
 
 ```typescript
-interface Form {
+interface Form extends DOMProps, StyleProps, LabelableProps {
   children: ReactElement<FormItem> | ReactElement<FormItem>[]
+  isQuiet?: boolean,
+  isEmphasized?: boolean,
+  isDisabled?: boolean,
+  isRequired?: boolean,
+  isReadOnly?: boolean,
+  validationState?: ValidationState
 }
 
-export interface LabelProps extends DOMProps {
-  children?: ReactElement | ReactElement[],
-  labelFor?: string,
-  label?: ReactNode,
-  htmlFor?: string
-}
-
-interface FieldLabelBase extends LabelProps, DOMProps, StyleProps {
-  labelPosition?: 'top' | 'side', // default ?
-  labelAlign?: 'start' | 'end', // Default start
+interface Label extends DOMProps, StyleProps {
+  children?: ReactNode,
+  htmlFor?: string, // for compatibility with React
+  for?: string,
+  labelPosition?: LabelPosition, // default top
+  labelAlign?: Alignment, // default start
   isRequired?: boolean,
-  necessityIndicator?: 'icon' | 'label'
+  necessityIndicator?: NecessityIndicator // default icon
 }
-
-interface FormItem extends FieldLabelBase {}
-interface FieldLabel extends FieldLabelBase {}
 ```
 
-## FormItem Changes
+## Form Changes
 | **v2**                     | **v3**                     | **Notes**   |
 | -------------------------- | -------------------------- | ----------- |
-| `labelAlign="left"`        | `labelAlign="start"`       | rtl support |
-| `labelAlign="right"`       | `labelAlign="end"`         | rtl support |
-| `labelFor`                 | -                          | internal    |
+| -                          | `isQuiet`                  | added       |
+| -                          | `isEmphasized`             | added       |
+| -                          | `isDisabled`               | added       |
 | -                          | `isRequired`               | added       |
-| -                          | `necessityIndicator`       | added       |
-| -                          | `labelPosition`            | added       |
+| -                          | `isReadOnly`               | added       |
+| -                          | `validationState`          | added       |
 
 ## FieldLabel Changes
-| **v2**             | **v3**                   | **Notes**   |
-| ------------------ | ------------------------ | ----------- |
-| `position="left"`  | `labelAlign="start"`     | rtl support |
-| `position="right"` | `labelAlign="end"`       | rtl support |
-| `necessity`        | `isRequired`             |             |
-| -                  | `labelPosition`          | added       |
+| **v2**                     | **v3**                     | **Notes**             |
+| -------------------------- | -------------------------- | --------------------- |
+| `FieldLabel`               | `Label`                    | component name change |
+| `labelAlign="left"`        | `labelAlign="start"`       | rtl support           |
+| `labelAlign="right"`       | `labelAlign="end"`         | rtl support           |
+| `labelFor`                 | `for`                      | internal              |
+| -                          | `isRequired`               | added                 |
+| -                          | `isReadOnly`               | added                 |
+| -                          | `validationState`          | added                 |
+| -                          | `necessityIndicator`       | added                 |
+| -                          | `labelPosition`            | added                 |

specs/api/Icon.md

@@ -1,13 +1,13 @@
 # Icon
 
 ```typescript
-interface Icon extends SVGAttributes<SVGElement> {
+interface Icon extends DOMProps, StyleProps {
   alt?: string,
   children: ReactElement,
   size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'
 }
 
-interface UIIcon extends SVGAttributes<SVGElement> {
+interface UIIcon extends DOMProps, StyleProps {
   alt?: string,
   children: ReactElement
 }

specs/api/Link.md

@@ -1,7 +1,7 @@
 # Link
 
 ```typescript
-interface Link extends DOMProps, StyleProps, PressProps {
+interface Link extends DOMProps, StyleProps, PressEvents {
   variant?: 'primary' | 'secondary' | 'overBackground', // default primary
   children: ReactNode,
   isQuiet?: boolean

specs/api/Progress.md

@@ -1,18 +1,18 @@
-# ProgressBar and ProgressCircle
+# ProgressBar, Meter, and ProgressCircle
 
 ```typescript
 interface ProgressBar {
   value?: number,
   minValue?: number,
   maxValue?: number,
   size?: 'S' | 'L',
-  children?: ReactNode,
+  label?: ReactNode,
   'aria-label'?: string,
   labelPosition?: 'top' | 'side',
   showValueLabel?: boolean, // true by default if label, false by default if not
   formatOptions?: Intl.NumberFormatOptions, // defaults to formatting as a percentage.
   valueLabel?: ReactNode, // custom value label (e.g. 1 of 4)
-  variant?: 'positive' | 'warning' | 'critical' | 'overBackground',
+  variant?: 'overBackground',
   isIndeterminate?: boolean
 }
 
@@ -25,6 +25,10 @@ interface ProgressCircle {
   isCentered?: boolean,
   isIndeterminate?: boolean
 }
+
+interface Meter extends ProgressBar {
+  variant: 'positive' | 'warning' | 'critical'
+}
 ```
 
 ## ProgressBar Changes
@@ -34,13 +38,15 @@ interface ProgressCircle {
 | `size="M"`                     | `size="L"`                   | spectrum calls it large, not medium                             |
 | `labelPosition="left"`         | `labelPosition="side"`       | rtl support                                                     |
 | `labelPosition="bottom"`       | -                            | not supported.                                                  |
-| `label`                        | `children`                   | if not provided, `aria-label` is required.                      |
 | `showPercent`                  | `showValueLabel`             | default changed to true if label is specified, false if not.    |
 | -                              | `numberFormatter`            | added. default is percentage, but others can also be supported. |
 | -                              | `valueLabel`                 | custom value label, e.g. “1 of 4”                               |
 | -                              | `isIndeterminate`            | added                                                           |
 | `min`                          | `minValue`                   |                                                                 |
 | `max`                          | `maxValue`                   |                                                                 |
+| `variant="positive"`           | `<Meter variant="positive">` |                                                                 |
+| `variant="warning"`            | `<Meter variant="warning">`  |                                                                 |
+| `variant="critical"`           | `<Meter variant="critical">` |                                                                 |
 
 ## ProgressCircle Changes
 | **v2**                          | **v3**             | **Notes** |

specs/api/Radio.md

@@ -1,7 +1,7 @@
 # Radio
 
 ```typescript
-interface RadioGroup extends ValueBase<string>, InputBase {
+interface RadioGroup extends ValueBase<string>, InputBase, Labelable, DOMProps, StyleProps {
   orientation?: 'horizontal' | 'vertical', // default vertical
   labelPosition?: 'side' | 'bottom', // default side
   children: ReactElement<Radio> | ReactElement<Radio>[],
@@ -29,6 +29,10 @@ interface Radio extends FocusableProps, DOMProps, StyleProps {
 | -                      | `isReadOnly`                   | added     |
 | -                      | `validationState`              | added     |
 | -                      | `isEmphasized`                 | added     |
+| -                      | `label`                        | added     |
+| -                      | `labelPosition`                | added     |
+| -                      | `labelAlign`                   | added     |
+| -                      | `necessityIndicator`           | added     |
 
 ## Radio Changes
 | **v2**        | **v3**       | **Notes**                                                                                                            |

specs/api/Shared.md

@@ -30,7 +30,20 @@ interface RangeInputBase<T> {
   maxValue?: T,
   step?: T // ??
 }
+
+type LabelPosition = 'top' | 'side';
+type Alignment = 'start' | 'end';
+type NecessityIndicator = 'icon' | 'label';
+
+interface Labelable {
+  label?: ReactNode,
+  isRequired?: boolean,
+  labelPosition?: LabelPosition,
+  labelAlign?: Alignment,
+  necessityIndicator?: NecessityIndicator
+}
 ```
+
 ## Selection
 
 ```javascript

specs/api/StatusLight.md

@@ -1,7 +1,7 @@
 # StatusLight
 
 ```typescript
-interface StatusLight extends StyleProps, DOMProps{
+interface StatusLight extends DOMProps, StyleProps {
   children: ReactNode,
   variant: 'positive' | 'negative' | 'notice' | 'info' | 'neutral' | 'celery' | 'chartreuse' | 'yellow' | 'magenta' | 'fuchsia' | 'purple' | 'indigo' | 'seafoam',
   isDisabled?: boolean

specs/api/TextFields.md

@@ -1,7 +1,7 @@
 # Text Fields
 
 ```typescript
-interface TextField extends InputBase, TextInputBase, TextInputDOM, ValueBase<string> {
+interface TextField extends InputBase, TextInputBase, TextInputDOM, ValueBase<string>, Labelable, TextInputDOMProps, StyleProps {
   icon?: ReactNode,
   isQuiet?: boolean,
   validationTooltip?: ReactNode
@@ -14,15 +14,15 @@ interface SearchField extends TextField {
   onClear?: () => void
 }
 
-interface NumberField extends InputBase, TextInputBase, ValueBase<number>, RangeInputBase<number> {
+interface NumberField extends InputBase, TextInputBase, ValueBase<number>, RangeInputBase<number>, Labelable, DOMProps, StyleProps {
   isQuiet?: boolean,
   decrementAriaLabel?: string,
   incrementAriaLabel?: string,
   showStepper?: boolean,
   formatOptions?: Intl.NumberFormatOptions
 }
 
-interface SearchWithin extends InputBase, TextInputBase {
+interface SearchWithin extends InputBase, TextInputBase, Labelable, DOMProps, StyleProps {
   // not extending from ValueBase because we want onValueChange instead of onChange
   value?: string,
   defaultValue?: string,
@@ -54,6 +54,10 @@ interface InlineEditor extends TextField {
 | `readOnly`    | `isReadOnly`                |           |
 | -             | `icon`                      | added     |
 | -             | `validationTooltip`         | added     |
+| -             | `label`                     | added     |
+| -             | `labelPosition`             | added     |
+| -             | `labelAlign`                | added     |
+| -             | `necessityIndicator`        | added     |
 
 ## SearchField Changes
 | **v2**                                     | **v3**                  | **Notes**                                        |