leafygreen-ui

Major Changes

• c406ab85: LG-4135

  1. Updated styling:
  • updated spacing for 'small' and 'large' size variants
  • added 'xsmall' variant
  • updated placeholder text color
  • removed validation icon from inside the input
  2. Added errorMessage and successMessage props
  • errorMessage will render a default of 'This input needs your attention' and can be customized
  • errorMessage will only render when state is warning or error
  • successMessage will render a default of 'Success' and can be customized
  • successMessage will only render when state is valid
  • both will only render if aria-describedby is undefined and stateNotifications is not an array

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Major Changes

• c406ab85: LG-4134

  1. Updated styling:
  • updated spacing for 'small' and 'xsmall' size variants
  • added 'large' variant
  • updated placeholder text color
  • moved error icon from inside the input to underneath the input, alongside the error message

  2. Added default errorMessage of 'This input needs your attention'

  3. Added valid state variant and successMessage prop

  • successMessage will render a default of 'Success' and can be customized
  • successMessage will only render when state=valid

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Minor Changes

• c406ab85: LG-2930

  • Adds and exports FormFieldFeedback component
  • Adds and exports DEFAULT_MESSAGES constant
  • Updates FormField and FormFieldInputContainer components to use tokens where possible
  • Refactors FormField to use FormFieldFeedback

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Patch Changes

• c406ab85: LG-2930

  • Update error message test id in DatePicker test specs

• Updated dependencies [c406ab85]

• Updated dependencies [c406ab85]

• Updated dependencies [c406ab85]

• Updated dependencies [c406ab85]

  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Major Changes

• c406ab85: LG-4133

  1. Updated styling:
  • updated spacing for 'small', 'xsmall', and 'large' size variants
  • updated placeholder text color
  • moved error icon from inside the input to underneath the input, alongside the error message

  2. A default errorMessage of 'This input needs your attention' will render below combobox when state is invalid.

  3. Added a valid state with success icon and successMessage prop. A default successMessage of 'Success' will render when state is valid. successMessage prop allows customization.

  4. Disabled Combobox component no longer renders the disabled attribute and instead relies on aria-disabled and readonly attributes.

  The last change is made to ensure that disabled components are still focusable to users using keyboard navigation.

  For more on aria-disabled see the documentation on MDN

  Migration guide

  Functionally, migration should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.

  Jest/RTL

  Generally, only this repo should need to test that these components have a specific attribute. We recommend updating unit tests to check that some event was or was not called.

  However, there are cases where this may still need to be tested. You can replace any expect(combobox).toBeDisabled() with an explicit check for expect(combobox).toHaveAttribute('aria-disabled', 'true').

  Cypress

  Similar to unit tests, you should generally test functionality and not implementation details. However, to test this in Cypress replace any cy.get(combobox).should('be.disabled'); checks with cy.get(combobox).invoke('attr', 'aria-disabled').should('eq', 'true');

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [c406ab85]
• Updated dependencies [c406ab85]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [4951369a]
  • @lg-tools/[email protected]

Patch Changes

• Updated dependencies [4951369a]
  • @lg-tools/[email protected]
  • @lg-tools/[email protected]

Patch Changes

• 4951369a: Bumps rollup and related packages to v4

Patch Changes

• 57dedc40: Adds satisfies to ensure consistent & correct colors token structure

Minor Changes

• 433616d4: Exports MenuGroup from package

Patch Changes

• Updated dependencies [57dedc40]
  • @leafygreen-ui/[email protected]

Patch Changes

• dfd6972c: Adds data-lgid to storybookExcludedControlParams and storybookExcludedArgTypes.

Major Changes

• dfd6972c: - Fixes the Link component so that:
  • links are inline with the text preceding it
  • The Arrow Icon is inline with the last line of text. Previously it rendered in a column next to the text because of display: inline-flex
  • Adds generated stories for each Typography component

Patch Changes

• Updated dependencies [dfd6972c]
• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]
  • @lg-tools/[email protected]

Patch Changes

• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Major Changes

• cbfda91b: LG-4144

  1. FormField styling changes apply to TextArea. See style changes here

  2. A default errorMessage of 'This input needs your attention' will render below text area when state is invalid.

  3. A default successMessage of 'Success' will render when state is valid. successMessage prop accepts a custom string.

  4. Disabled TextArea component no longer renders the disabled attribute and instead relies on aria-disabled and readonly attributes.

  The last change is made to ensure that disabled components are still focusable to users using keyboard navigation.

  For more on aria-disabled see the documentation on MDN

  Migration guide

  Functionally, migration should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.

  Jest/RTL

  Generally, only this repo should need to test that these components have a specific attribute. We recommend updating unit tests to check that some event was or was not called.

  However, there are cases where this may still need to be tested. In cases where a test checks expect(textArea).toBeDisabled(), you can replace and use test harnesses.

  Cypress

  Similar to unit tests, you should generally test functionality and not implementation details. However, to test this in Cypress replace any cy.get(textArea).should('be.disabled'); checks with cy.get(textArea).invoke('attr', 'aria-disabled').should('eq', 'true');

Patch Changes

• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]
  • @leafygreen-ui/[email protected]

Patch Changes

• Updated dependencies [dfd6972c]
  • @leafygreen-ui/[email protected]