v12.0.3

Codemod

• fix: Add codemod to main index file to export (#2996) (@mannycarrera4, manuel.carrera)

v12.0.2

Infrastructure

• fix: Remove duplicate keys from routes (#2994) (@mannycarrera4, manuel.carrera)

v12.0.1

Components

• chore: Update deprecated urls to CodeshiftCommunity (#2977) (@danieldelcore)
• fix: Clean up Select file structure and move examples to main react (#2992) (@mannycarrera4, manuel.carrera)

v12.0.0

BREAKING CHANGES

• #2793 - Avatar no longer uses SystemIconCircle for sizing.

  • Avatar.Size is no longer supported. The size prop type has change to accept the following: "extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})
  • Avatar.Variant is no longer supported. Enum AvatarVariant has been removed. The variant type prop now accepts "dark" | "light"
  • The as prop now accepts any element, not just div.

• #2674 Codemods formatting have been updated and users will need to format their files after the codemod has been used.

• #2934 The newly promoted FormField is a
  compound component.
  Due to the different APIs of the component, this change is not codemodable. The following shows
  an example of how to update your code to match the new compound component API.

  // v11 FormField in Main
  <FormField
    error={FormField.ErrorType.Alert}
    labelPosition={FormField.LabelPosition.Left}
    useFieldSet={true}
    required={true}
    hintId="hint-alert"
    hintText="Please enter a valid email."
    label="Email"
  >
    <TextInput onChange={handleChange} value={value} />
  </FormField>
  
  // v12 Newly promoted FormField from Preview to Main
  <FormField
    error="error"
    orientation="horizontalStart"
    isRequired={true}
  >
  	<FormField.Label>Email</FormField.Label>
  	<FormField.Field>
  		<FormField.Input as={TextInput} onChange={handleChange} value={value} />
  		<FormField.Hint>Please enter a valid email.</FormField.Hint>
  	</FormField.Field>
  </FormField>

  Noticeable changes:

  • error prop takes in the following values: "error" | "alert".
  • labelPosition becomes orientation with the following values:
    "horizontal" | "horizontalStart" | "horizontalEnd" | "vertical".
  • useFieldSet is no longer valid. If you want to group inputs, use
    FormFieldGroup component.
  • required becomes isRequired.
  • hintId is no longer needed. The component handles associating the hint text, label and input
    automatically. If you wish to have a unique id, you can add one onto the FormField element.
  • hintText is no longer a valid prop. Use FormField.Hint sub component.
  • errorLabel and alertLabel are no longer valid props. Customizing your hint text inside of
    FormField.Hint.
  • label is no longer a valid prop. Use FormField.Label sub component to render your label text.
  • Instead of rendering an input, ensure you use FormField.Input with the as prop. This ensures
    proper error handling and aria attributes for accessibility.

• #2969 We've removed the MenuItemProps export from @workday/canvas-kit-react/menu. Use ExtractProps<typeof Menu.Item, never> instead. We don't mean to export prop interfaces of polymorphic components. The never means "don't add element props". The second parameter is used to pass the interface that the as prop is pointing to.

• #2980 elemProps hooks using composeHooks have more accurate type signatures which may lead to new type errors. For information, view our discussion.

• #2982 A list model's navigation.getItem() can return undefined if no item is found. Previously it threw an error, which cause many problems. It is now up to the caller to decide what to do with an undefined return value

Components

• chore: Removed Select in Preview (#2796) (@thunguyen19, manuel.carrera, @mannycarrera4)
  We've removed the Select component that was in @workday/canvas-kit-preview-react. Please use the Select in Main (https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) which is a compound component and offers more flexibility.

  Thank You Picture

  

• chore: Modal, Dialog, Popup and Toast Styles Refactor (#2795) (@josh-bagwell)
  Updated Modal, Dialog, Popup and Toast to use new system tokens and style utilities.

• chore: Removal of InputIconContainer (#2838) (@josh-bagwell)
  We've removed InputIconContainer from Main. Please use InputGroup from Main instead.

• chore: Refactor TextArea and TextInput with new styling utilities (#2825) (@mannycarrera4, manuel.carrera, @NicholasBoll)
  We've updated TextInput and TextArea to use our new Tokens and styling utilities. The React interface has not changed, but CSS variables are now used for dynamic properties.

• chore: Update Avatar to use createStencil and createComponent (#2793) (@kaconant, krissy.conant, @mannycarrera4, manuel.carrera)
  The Avatar component has been refactored to use our new tokens and styling utilities. The changes below highlight the breaking changes to the API.

• feat: Add horizontal start and end label position for form field (#2881) (@mannycarrera4, manuel.carrera, @josh-bagwell)
  The orientation prop on the FormField component will be updated to accept the following values: vertical, horizontalStart, and horizontalEnd. horizontal will still be accepted as a value in v12, but it will be deprecated and slated for removal in a future major release. These changes are intended to provide more flexibility with label alignments on FormField elements.

  Instances where the orientation prop of the FormField component is set to horizontal will automatically default to horizontalStart via a codemod. A console warning message will also appear with a message to change the prop value to either horizontalStart or horizontalEnd.

• chore: Updated unique id generation for classnames (#2913) (@josh-bagwell, @mannycarrera4)

• chore: Add FormFieldGroup component and density example (#2865) (@mannycarrera4, manuel.carrera, @josh-bagwell, @RayRedGoose)

  • We've added a new FormFieldGroup component to use when grouping inputs like checkboxes and radio inputs that need to be associated to one another. Its API matches the FormField API where you have error prop as well as id isRequired and orienation.

  • orientation has been added back to useFormFieldModel to better support sub component styling.

  • Styles have been cleaned up to use gap for proper spacing between labels, inputs and hint text.

  • Added a new FormField.Field component to ensure proper alignment between label and inputs regardless of orientation and hint text. Ensure to wrap your inputs and hint text in this component.

• chore: Revert Select Preview Removal (#2933) (@josh-bagwell)

• feat(text-input): Support CSS Variables in InputGroup (#2935) (@NicholasBoll)

• feat: Promote FormField from Preview to Main (#2934) (@mannycarrera4, manuel.carrera, @josh-bagwell)
  We've promoted FormField from Preview to Main. The following changes have been
  made to provide more flexibility and better explicit components when using inputs.

  • The orientation prop on the FormField component will be updated to accept the following values:
    vertical, horizontalStart, and horizontalEnd. horizontal will still be accepted as a value
    in v12, but it will be deprecated and slated for removal in a future major release. These changes
    are intended to provide more flexibility with label alignments on FormField elements.

  Note: The horizontal alignment of start and end are relative to its container, meaning start
  and end match the flex property of flex-start and flex-end. This is especially applicable for
  moving between RTL (right-to-left) and LTR (left-to-right) languages.

  Note: Orientation "horizontal" has been deprecated. You will see a console warn message
  suggesting to update your types and usage to horizontalStart, horizontalEnd or vertical.

  • useFormFieldModel: orientation has been added back into useFormFieldModel. While we still
    support compat mode due to
    style merging issues, having orientation
    on the model allows for proper styling of sub components.

  • Styles clean up. FormField.Hint and FormField.Label where using margin for spacing. We've
    updated styles ...

v11.1.17

Components

• fix: Unbroken String Overflow Menu Item Fix (#2975) (@josh-bagwell)
  A fix to Menu Item to break a long unbroken string for Select.

v10.3.63

Components

• fix: Unbroken String Overflow Menu Item Fix (#2975) (@josh-bagwell)
  A fix to Menu Item to break a long unbroken string for Select.

v11.1.16

Components

• chore: Fixed Button Style Merge Issue (#2951) (@josh-bagwell, manuel.carrera)
  Updates Button variants to fix merge style issue.

v11.1.15

Infrastructure

• fix: Remove extract docs in canary to prevent exceeding limit (#2948) (@mannycarrera4, manuel.carrera)

Styling

• fix: Support false modifier values (#2952) (@NicholasBoll)

v11.1.14

Components

• fix: Update BaseButton to use correct theming color for focus ring (#2942) (@josh-bagwell)
  Fixes theming for the BaseButton within Pagination.

v10.3.62

Components

• fix: Update BaseButton to use correct theming color for focus ring (#2942) (@josh-bagwell)
  Fixes theming for the BaseButton within Pagination.