diff --git a/specs/api/Button.md b/specs/api/Button.md index 5a58eca0dc9..bf3803fe473 100644 --- a/specs/api/Button.md +++ b/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, + 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, diff --git a/specs/api/Form.md b/specs/api/Form.md index b798c9df0e1..3e55fe5f923 100644 --- a/specs/api/Form.md +++ b/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 | ReactElement[] + 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 | diff --git a/specs/api/Icon.md b/specs/api/Icon.md index cb5e66ba4e5..f7125202b29 100644 --- a/specs/api/Icon.md +++ b/specs/api/Icon.md @@ -1,13 +1,13 @@ # Icon ```typescript -interface Icon extends SVGAttributes { +interface Icon extends DOMProps, StyleProps { alt?: string, children: ReactElement, size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' } -interface UIIcon extends SVGAttributes { +interface UIIcon extends DOMProps, StyleProps { alt?: string, children: ReactElement } diff --git a/specs/api/Link.md b/specs/api/Link.md index dd75ce70063..10730910fde 100644 --- a/specs/api/Link.md +++ b/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 diff --git a/specs/api/Progress.md b/specs/api/Progress.md index 7633e19652b..6a462411c7e 100644 --- a/specs/api/Progress.md +++ b/specs/api/Progress.md @@ -1,4 +1,4 @@ -# ProgressBar and ProgressCircle +# ProgressBar, Meter, and ProgressCircle ```typescript interface ProgressBar { @@ -6,13 +6,13 @@ interface ProgressBar { 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"` | `` | | +| `variant="warning"` | `` | | +| `variant="critical"` | `` | | ## ProgressCircle Changes | **v2** | **v3** | **Notes** | diff --git a/specs/api/Radio.md b/specs/api/Radio.md index ba9befc3b77..87b49ce6c57 100644 --- a/specs/api/Radio.md +++ b/specs/api/Radio.md @@ -1,7 +1,7 @@ # Radio ```typescript -interface RadioGroup extends ValueBase, InputBase { +interface RadioGroup extends ValueBase, InputBase, Labelable, DOMProps, StyleProps { orientation?: 'horizontal' | 'vertical', // default vertical labelPosition?: 'side' | 'bottom', // default side children: ReactElement | ReactElement[], @@ -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** | diff --git a/specs/api/Shared.md b/specs/api/Shared.md index 033f60ed42c..83bf31c77bc 100644 --- a/specs/api/Shared.md +++ b/specs/api/Shared.md @@ -30,7 +30,20 @@ interface RangeInputBase { 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 diff --git a/specs/api/StatusLight.md b/specs/api/StatusLight.md index 207dc73651a..2db79eefeb4 100644 --- a/specs/api/StatusLight.md +++ b/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 diff --git a/specs/api/TextFields.md b/specs/api/TextFields.md index cac76fc2759..7ad2f13de13 100644 --- a/specs/api/TextFields.md +++ b/specs/api/TextFields.md @@ -1,7 +1,7 @@ # Text Fields ```typescript -interface TextField extends InputBase, TextInputBase, TextInputDOM, ValueBase { +interface TextField extends InputBase, TextInputBase, TextInputDOM, ValueBase, Labelable, TextInputDOMProps, StyleProps { icon?: ReactNode, isQuiet?: boolean, validationTooltip?: ReactNode @@ -14,7 +14,7 @@ interface SearchField extends TextField { onClear?: () => void } -interface NumberField extends InputBase, TextInputBase, ValueBase, RangeInputBase { +interface NumberField extends InputBase, TextInputBase, ValueBase, RangeInputBase, Labelable, DOMProps, StyleProps { isQuiet?: boolean, decrementAriaLabel?: string, incrementAriaLabel?: string, @@ -22,7 +22,7 @@ interface NumberField extends InputBase, TextInputBase, ValueBase, Range 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** |