leafygreen-ui

LeafyGreen UI – LeafyGreen's React UI Kit

APACHE-2.0 License

Downloads
8.8M
Stars
217
Committers
47
View Code on GitHub Visit Website
Ecosystems: React, MongoDB

Bot releases are visible (Hide)

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

Published by github-actions[bot] 7 months ago

Minor Changes

  • c3906f78: - Exports the constant, LGIDS_TYPOGRAPHY, which stores data-lgid values.
    • Extends LgIdProps on CommonTypographyProps.
    • Adds the data-lgid attribute to Label and Description

Patch Changes

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

Published by github-actions[bot] 7 months ago

Minor Changes

  • c3906f78: - Extends DarkModeProps from @leafygreen-ui/lib
    • Exports getTestUtils, a util to reliably interact with LG Toggle in a product test suite. For more details, check out the README LG-4035
    • Exports the constant, LGIDS_TOGGLE, which stores data-lgid values.

Patch Changes

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

Published by github-actions[bot] 7 months ago

Major Changes

  • 27ad3121: LG-4145

    aria-label and aria-labelledby props are passed to the input.

    aria-labelledby

    aria-labelledby prop can only set the aria-labelledby attribute on the input if label prop is undefined. Otherwise, the generated label component id will be used for the aria-labelledby attribute

    👎 Does not use aria-labelledby prop 👍 Does use custom aria-labelledby prop
    <TextInput label="Label" aria-labelledby="custom-label-id" /> <TextInput aria-labelledby="custom-label-id" />

    aria-label

    aria-label prop can only set the aria-label attribute on the input if both label prop and aria-labelledby prop are undefined
    | 👎 Does not use aria-label prop | 👎 Does not use aria-label prop | 👍 Does use aria-label prop |
    | - | - | - |
    | <TextInput label="Label" aria-label="Custom label" /> | <TextInput aria-label="Custom label" aria-labelledby="other-custom-label-id" /> | <TextInput aria-label="Custom label" /> |

    LG-4143

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

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

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

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

    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(textInput).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(textInput).should('be.disabled'); checks with cy.get(textInput).invoke('attr', 'aria-disabled').should('eq', 'true');

Minor Changes

  • c3906f78: - Extends DarkModeProps from @leafygreen-ui/lib
    • Exports getTestUtils, a util to reliably interact with LG TextInput in a product test suite. For more details, check out the README LG-4035
    • Exports the constant, LGIDS_TEXT_INPUT, which stores data-lgid values.

Patch Changes

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

Published by github-actions[bot] 7 months ago

Minor Changes

  • c3906f78: - Extends DarkModeProps from @leafygreen-ui/lib
    • Exports getTestUtils, a util to reliably interact with LG TextArea in a product test suite. For more details, check out the README LG-4035
    • Adds aria-invalid attribute on the textarea. This will be true if state === error.
    • Exports the constant, LGIDS_TEXT_AREA, which stores data-lgid values.

Patch Changes

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

Published by github-actions[bot] 7 months ago

Minor Changes

  • c3906f78: - Exports getTestUtils, a util to reliably interact with LG Select in a product test suite. For more details, check out the README LG-4129
    • Exports the constant, LGIDS_SELECT which stores data-lgid values.
    • Removes role="presentation" from WarningIcon

Patch Changes

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

Published by github-actions[bot] 7 months ago

Major Changes

  • f630c718: LG-4152

    aria-label prop change

    aria-label prop can only set the aria-label attribute on the searchbox element if aria-labelledby prop is undefined
    | 👎 Does not use aria-label prop | 👍 Does use aria-label prop |
    | - | - |
    | <SearchInput aria-label="Label" aria-labelledby="custom-label-id" /> | <SearchInput aria-label="Label" /> |

    Styling changes

    The following styling changes are made:

    • added xsmall variant
    • updated spacing for default, small, and large size variants
    • updated dark mode placeholder text color

    onKeyDown bug fix

    Previously, if searchbox element had focus and was disabled, user could press keys which would trigger opening the menu element.

    Now, if searchbox element has focus and is disabled, user can press keys, and they will not trigger any onKeyDown logic.

Patch Changes

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

Published by github-actions[bot] 7 months ago

Patch Changes

  • 070736c4: Exports black and white colors as const
leafygreen-ui - @leafygreen-ui/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

  • 36166b41: - Horizontally centers loading indicator with description
    • Deletes duplicate LoadingIndicators.styles.ts file
  • Updated dependencies [9b71e34d]
  • Updated dependencies [c3906f78]
  • Updated dependencies [c3906f78]
  • Updated dependencies [070736c4]
leafygreen-ui - @leafygreen-ui/[email protected]

Published by github-actions[bot] 7 months ago

Minor Changes

  • d0b1cfd8: Exports LogoProps from package

Patch Changes

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

Published by github-actions[bot] 7 months ago

Minor Changes

  • c3906f78: Adds LgIdProps which exports an interface to support ['data-lgid']?: string;, which can be extended inside components props.
leafygreen-ui - @leafygreen-ui/[email protected]

Published by github-actions[bot] 7 months ago

Minor Changes

  • 9402ba0e: Adds 'Escalation' to glyph set
leafygreen-ui - @leafygreen-ui/[email protected]

Published by github-actions[bot] 7 months ago

Minor Changes

  • 27ad3121: LG-4143

    Optional successMessage prop is rendered below input container when state is valid.

    The following changes are made to inputProps spread on the input component contained by FormFieldInputContainer:

    • aria-label prop is only passed to the input component with an aria-label attribute if label prop and aria-labelledby prop are undefined. If either is defined, aria-label attribute on the input component will be undefined as per best practices from aria-label MDN docs
      aria-label prop can only set the aria-label attribute on the input if both label prop and aria-labelledby prop are undefined

      | 👎 Does not use `aria-label` prop | 👎 Does not use `aria-label` prop | 👍 Does use `aria-label` prop |
| - | - | - |
| `<TextInput label="Label" aria-label="Custom label" />` | `<TextInput aria-label="Custom label" aria-labelledby="other-custom-label-id" />` | `<TextInput aria-label="Custom label" />` |

    • disabled prop is passed to the input component with aria-disabled attribute

    • aria-invalid attribute will always be set on the input component if the parent form field is in an error state. A custom aria-invalid prop can be used to customize this logic

    The following styling changes are made:

    • updated left and right spacing of input container for xsmall, small, and large size variants
    • updated light mode placeholder text color
    • moved success and error icon from inside the input to underneath the input, alongside the state feedback message
    • refactored disabled styles although there should be no visual changes associated with this refactor

Patch Changes

  • c3906f78: - Adds data-lgid to Error and optional.
    • Removes role="presentation" from Checkmark and Warning icons and replaces it with aria-hidden. The title attribute is omitted when using role="presentation" and we rely on title to query the DOM for those icons.
    • Exports the constant, LGIDS_FORM_FIELD, which stores data-lgid values.
  • Updated dependencies [9402ba0e]
  • Updated dependencies [9b71e34d]
  • Updated dependencies [c3906f78]
  • Updated dependencies [c3906f78]
  • Updated dependencies [070736c4]
leafygreen-ui - @leafygreen-ui/[email protected]

Published by github-actions[bot] 7 months ago

Minor Changes

Patch Changes

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

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-chat/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-tools/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-tools/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-tools/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-tools/[email protected]

Published by github-actions[bot] 7 months ago

Patch Changes

leafygreen-ui - @lg-tools/[email protected]

Published by github-actions[bot] 7 months ago

Minor Changes

  • 15185af0: Initial pre-release of @lg-tools/storybook-utils
Package Rankings
Top 1.98% on Npmjs.org
Badges
Extracted from project README
version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version version