- 1501381ee: LG-2719: Replace
@leafygreen-ui/box
with@leafygreen-ui/polymorphic
and refactorButton
internals.- This is a major change because previously,
Button
instances intended to be rendered as an<a>
that were alsodisabled
were forcibly being rendered as a<button>
to avoid incorrectly passing thedisabled
attribute to an<a>
. From v20.0.0, theButton
component switched to using thearia-disabled
attribute instead of thedisabled
attribute which removed the need to forcibly render disabledButton
instances as a<button>
. Instead, they will now render as an<a>
. - Exports
BaseButtonProps
type
- This is a major change because previously,
- e1955dd36: Fixes broken patch build
- Updated dependencies [e1955dd36]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @lg-tools/[email protected]
- 53c67fba6: LG-4650: migrates from
yarn
topnpm
- Updated dependencies [53c67fba6]
- @leafygreen-ui/[email protected]
- @lg-tools/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 274d7e1a7: Removes prop-types from LeafyGreen UI
- Updated dependencies [274d7e1a7]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- f38cdc3dc: Exports
getTestUtils
from Button package
- c86227a6: Updates Storybook argTypes for mongodb.design
- 1ec45a7e: - Exports
getTestUtils
, a util to reliably interact withLG Button
in a product test suite. For more details, check out the README- Exports the constant,
LGIDS_BUTTON
, which storesdata-lgid
values.
- Exports the constant,
-
7a0ff1be: LG-4126
Styling changes are made to ensure consistent implementation of
disabled
state styles.
- 15185af0: Imports Storybook utilities from
@lg-tools/storybook-utils
(previously imported from@leafygreen-ui/lib
) - 356a53fd: Update TS builds to use
[email protected]
- Updated dependencies [15185af0]
- Updated dependencies [356a53fd]
- Updated dependencies [66df9ab8]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- e4767683: Fixes disabled state styling when a button is focused or active
- Updated dependencies [2bceccb1]
- Updated dependencies [2645cd50]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 6c89b45b: The baseFontSize knob for Button's LiveExample on .design now toggles correctly
- Updated dependencies [99848a0f]
- @leafygreen-ui/[email protected]
- f077faf1: - Buttons now correctly disable click events when disabled or isLoading
- Buttons now no longer display focus outlines when disabled or isLoading
- Updated dependencies [dd4f3da8]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- a4b3b704: Assigns Button Size object
as const
to improve Intellisense/autocomplete
- d2c1ec53: Updates Button to remove
pointer-events: none
styles from it's inner container. This allows the Select component to work as intended when usingusePortal = false
.
- Updated dependencies [3a9b274d]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [4fcf2e94]
- Updated dependencies [4fcf2e94]
- Updated dependencies [4fcf2e94]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- db014722: Retroactively updates changeset notes around reason to update Button from using
disabled
toaria-disabled
under the hood. See details at version 20.0.0
- c11bbc29: Fixes problem with ts-docs not being available in bundle.
- Updated dependencies [c11bbc29]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- c15ee2ac: Fixes missing documentation file
- Updated dependencies [c15ee2ac]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- e8ef95e6: Updates disabled styles
- cfba537d: Changes API that supports
isLoading
in Button components. Consuming applications now must pass their own Spinner components through theloadingIndicator
slot prop
- 215268ff: Updates build tooling. No functional changes
- Updated dependencies [215268ff]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 1e6ddb60: Passes
preventDefault
to a disabled button's click event handler, to prevent submit buttons from firing their form's submit handler when they should not.
- Updated dependencies [61c60ab9]
- @leafygreen-ui/[email protected]
- 76161cf0: Updates story file and implements GeneratedStory
- 76161cf0: Updates stories for Chromatic testing
- Updated dependencies [76161cf0]
- Updated dependencies [76161cf0]
- Updated dependencies [76161cf0]
- Updated dependencies [76161cf0]
- Updated dependencies [76161cf0]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 8eb2b7dc0: Add
isLoading
andloadingText
props
- d611bea87: Revert changes made in 20.1.0
- 2dfc4d0ea: Adds a loading state using the new Spinner component
- d2ce54e2f: Updates story files for Storybook 7.x
- 0cd471676: Updates README to reflect the correct button variants
- Updated dependencies [d2ce54e2f]
- Updated dependencies [5546f7cb9]
- Updated dependencies [d2ce54e2f]
- Updated dependencies [0cd471676]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- d3dd7aad5: Updates to TSDocs
- 73cbbd02c: Uses fontWeight token from
@leafygreen-ui/tokens
- Updated dependencies [73cbbd02c]
- Updated dependencies [8ece56980]
- @leafygreen-ui/[email protected]
- cf00160ec: Updates TSDocs
- Updated dependencies [55d33e435]
- Updated dependencies [111b680c5]
- Updated dependencies [55d33e435]
- Updated dependencies [cf00160ec]
- Updated dependencies [111b680c5]
- Updated dependencies [77320a6b8]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 8c0c2bdf9: Updates build script to include a transpiled copy of the story file in the bundle
- Updated dependencies [8c0c2bdf9]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- fb47557dd: Updates disabled focus styles
- Updated dependencies [c2c5601f4]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [5b036515e]
- Updated dependencies [26e341a0b]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 82e320ed4: Add focus styles to to override any global button styles
- Updated dependencies [2e8a572db]
- Updated dependencies [4ccc353e7]
- Updated dependencies [4ccc353e7]
- @leafygreen-ui/[email protected]
-
1cff328a3: Disabled buttons no longer render the
disabled
attribute, but rely onaria-disabled
. They also no longer setpointer-events: "none"
in their styles.onClick
events are explicitly prevented within the component to maintain functionality.This change was made to ensure that:
- Disabled buttons are still focusable to users when navigating via the
Tab
key, and - Disabled buttons are valid triggers for a
Tooltip
.
For more on
aria-disabled
see the documentation on MDNFunctionally, migration from v19 to v20 should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.
Generally, only this repo should need to test that the button has a specific attribute. If possible, we recommend changing unit tests to check that some event was or was not called.
However there are cases where this still needs to be tested. To change this, replace any
expect(button).toBeDisabled()
with an explicit check forexpect(button).toHaveAttribute("aria-disabled", "true")
.Similarly to unit tests, you should generally test functionality, not implementation details. However, to test this in Cypress replace any
cy.get(button).should('be.disabled');
checks withcy.get(button).invoke('attr', 'aria-disabled').should('eq', 'true');
- Disabled buttons are still focusable to users when navigating via the
- bf2fedf6d: Version bumps lib
- Updated dependencies [bf2fedf6d]
- @leafygreen-ui/[email protected]
- c82ed35d5: Removes
useUsingKeyboardContext
from component, in favor of&:focus-visible
- b24b21462: Storybook: Updates story files to be on par with existing mongodb.design examples
- Updated dependencies [741cdd408]
- Updated dependencies [b24b21462]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- c7f7fff56: Refactors Button component internals
- Updated dependencies [703db871f]
- @leafygreen-ui/[email protected]
- b7f7a4c95: Updates package dependencies & devDependencies, and ensures each package is appropriately listed. Ensures
tsconfig
has no circular dependencies - Updated dependencies [b7f7a4c95]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- ed0e425e5: Adds
polished
as an explicit dependency - ae5421cf6: Updates components to use internal transition tokens
- Updated dependencies [ae5421cf6]
- Updated dependencies [ae5421cf6]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [b9b09a86]
- @leafygreen-ui/[email protected]
- f2d63a60: Removes leafygreen data attributes (prefixed with
data-leafygreen-ui-
), and replaces them with deterministic classNames (prefixed withlg-ui-
)
- Updated dependencies [f2d63a60]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 0b6435fa: Fixing bug where icon color was not changed when the Button was disabled
- Updated dependencies [e399f1b9]
- Updated dependencies [e399f1b9]
- @leafygreen-ui/[email protected]
- 24683433: - Remove an implicit dependency on
@emotion/react
fixing an issue where LG packages would not build if@leafygreen/[email protected]
or greater was installed. - Updated dependencies [24683433]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 3690df49: Updates TypeScript annotations, type structures and export format of some components
- 3690df49: Updates Storybook configs
- Updated dependencies [3690df49]
- Updated dependencies [3690df49]
- Updated dependencies [3690df49]
- Updated dependencies [3690df49]
- Updated dependencies [58a5a05e]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 8d7534e9: Adds
tsdoc.json
to published package files - Updated dependencies [8d7534e9]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 22128084: Updates typing of
as
prop. Adds documentation to clarify the use of NextJSLink
wrapper
- e9177e94: Updating a few colors
- Updated dependencies [30e038a3]
- @leafygreen-ui/[email protected]
- Updated dependencies [85d46871]
- Updated dependencies [99e20bb9]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- fd2f6de0: Updates to TSDocs, PropTypes, and Storybook files
- 8d12b918: Explicitly sets font colors for all variant hover/active states
- 86a7f3c3: Changing icon color when disabled
- Updated dependencies [6a89bc29]
- Updated dependencies [fd2f6de0]
- Updated dependencies [96d1ff9c]
- Updated dependencies [422dbfcd]
- Updated dependencies [9ff90d4b]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 646c00f7: Changing Button's HTML element prop definitions from Pick<> to explicit definitions
- Updated dependencies [c48e943e]
- @leafygreen-ui/[email protected]
- 3a14d852: Restoring as prop to Button component
- Updated dependencies [5f28fce1]
- Updated dependencies [c48e943e]
- @leafygreen-ui/[email protected]
- f3aad7e2: Updates Dark Mode Button for visual brand refresh
- c1f9c4d4: Disabling focus styles and ripple on disabled Buttons
- Updated dependencies [233ac580]
- Updated dependencies [ba4aab15]
- Updated dependencies [2cf1bc4a]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 686ecae: Disables
onClick
events whenas="a"
anddisabled={true}
- 8457f92: Updateslight mode Button in line with visual brand refresh
- Updated dependencies [8457f92]
- @leafygreen-ui/[email protected]
- Updated dependencies [cb54eef]
- @leafygreen-ui/[email protected]
- 539fab10: Fixes a React console error when providing an onChange handler to a Radio Group
- 24930836: Fixes a bug where a disabled button with an
href
would still start navigation. - Updated dependencies [f6e5655a]
- Updated dependencies [f6e5655a]
- Updated dependencies [b8f03aa1]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [047c1930]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- dda5c8bb: Ensures that text is centered in buttons when no right glyph is present
- 54daf9a4: Add stronger overrides for color and text-decoration for hover and focus states in buttons
- Updated dependencies [857a680a]
- @leafygreen-ui/[email protected]
- 7c952eca: Fixes semantic HTML inside of Button to better support being a trigger for portaled components
- e2f7e6a4: Explicitly sets
color
property on focused buttons
- ab581f34: Re-released components that were erroneously released without
.d.ts
files - Updated dependencies [ab581f34]
- Updated dependencies [90321b36]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- e1b1293c: Adjusts padding for content alignment inside of Button
- 65032024: - Redesign's the button component!
- Improves accessibility of buttons for visually-impaired users.
- Adds support for right-aligned glyphs.
- Renames glyph prop to
leftGlyph
.
- Updated dependencies [65032024]
- Updated dependencies [65032024]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 1ed17f68: Updates lodash to 4.17.21, as there's a vulnerability in 4.17.20 that's been resolved in 4.17.21
- Updated dependencies [1ed17f68]
- @leafygreen-ui/[email protected]
- 572ced14: Internal change that makes Button integrate better with components like Tooltip and Popover.
- 6e26200a: Small correction to border radius of the interaction ring for hover and focused states
- 78c60261: Fix regression where XSmall size button text was not all uppercased
- 8b0ea602: Form-compatible components now display more visually consistent hover and focus states
- 8b0ea602: Added a
forceState
propButton
which can force enable or disable certain visual states
- Updated dependencies [8b0ea602]
- @leafygreen-ui/[email protected]
- 10bdc295: Adjusts
large
Button height from 45px to 48px
- Updated dependencies [c9a0d89f]
- Updated dependencies [9ee1d5fc]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- dac3f38b: Fixes a publishing error that prevented UMD modules from being distributed
- Updated dependencies [dac3f38b]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 0267bfd2: The underlying structure of distributed module definition files have changed and now have official support for ES modules. Module definition files are now generated using Rollup instead of Webpack. This should not affect functionality, but some thorough testing and caution should be exercised when upgrading.
- Updated dependencies [0267bfd2]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 47846c77: Fixes unintentional exclusion of
ref
from TypeScript typing of props forButton
,SubMenu
, andMenuItem
components.
- 6883ccd0: Moves
overflow
css rule to support the component's usage as a trigger for the Tooltip component
- d5d40791: Pin lodash version to latest to include fix for prototype pollution attack vulnerability.
- Updated dependencies [6883ccd0]
- Updated dependencies [d5d40791]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 691eb05: Better support for UMD
- Updated dependencies [691eb05]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- f6e84ec: Fix type signature to not have
children
be a required prop
- a571361: Updates Button CSS padding and flex properties for the span that wraps children.
- Updated dependencies [2eba736]
- Updated dependencies [1aa26ee]
- Updated dependencies [d2136a0]
- Updated dependencies [a571361]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- e8f5376: Ensures that only props that are of type
string
are recognized as being passed to thehref
prop. - Updated dependencies [e8f5376]
- Updated dependencies [4873650]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 0593116: Uses enhanced
ExtendableBox
type to set smarter defaultas
component inMenuItem
andSubMenu
- Updated dependencies [0593116]
- @leafygreen-ui/[email protected]
- 1d24966: Makes
@leafygreen-ui/leafygreen-provider
a peer dependency to ensure that components use hooks from the same version of the provider as what's installed.
- eba8391: Component now extends
Box
in order to enforce stronger typings - Updated dependencies [eba8391]
- Updated dependencies [eba8391]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [6fc022e]
- @leafygreen-ui/[email protected]
- 2a03117: Upgrades @testing-library/react to v10 and revises test suites to conform with new standards
- Updated dependencies [2a03117]
- Updated dependencies [c812eb3]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- 7d7e589: Sets text-align property to center
- 75c0693: Upgrades workspace dependencies
- Updated dependencies [75c0693]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- ebbac0e: Adds leafygreen-provider to Button component
- Updated dependencies [5aafd72]
- Updated dependencies [5aafd72]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- Updated dependencies [4c268a5]
- @leafygreen-ui/[email protected]
- b342448: Adds glyph prop to Button component
- ac5c473: Adds lodash as dependency
- 464c09d: Introduces SSR compatibility though a change to our build process and files
- Updated dependencies [464c09d]
- @leafygreen-ui/[email protected]
- @leafygreen-ui/[email protected]
- f42801b: Fixes bug such that on hover, color is explicitly set rather than inherited
- ff55bb5: Adds fallback CSS for focus and hover states
- 9c45cb4: Wraps component with
React.forwardRef
to provide direct access to the underlying element
- Updated dependencies [9c45cb4]
- @leafygreen-ui/[email protected]
- eb49b56: Fixes an issue where the children of Button had a
z-index
that was being applied in a global stacking context