diff --git a/.changeset/blue-planes-draw.md b/.changeset/blue-planes-draw.md deleted file mode 100644 index e4a1cbd4ecd..00000000000 --- a/.changeset/blue-planes-draw.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -'braid-design-system': patch ---- - ---- -updated: - - Button - - ButtonLink ---- - -**Button, ButtonLink:** Improve alignment of transparent buttons with icons against Text with icons - -To improve optical balance of a `Button` with an `icon`, the icon container is bled to the left to balance against the larger horizontal inset of a `standard` button. -This alignment correction is now only applied on `standard` sized buttons that are not using the `transparent` variant. - -Isolating this alignment correction enables transparent buttons to better align with other components with `icon` slots, for example: - -```jsx - - }>Text - - -``` - -Icons and text will now be perfectly aligned between Button components and others icon slots with the same text size. diff --git a/packages/braid-design-system/CHANGELOG.md b/packages/braid-design-system/CHANGELOG.md index 9254a325ec3..573d4bdc0c1 100644 --- a/packages/braid-design-system/CHANGELOG.md +++ b/packages/braid-design-system/CHANGELOG.md @@ -1,5 +1,27 @@ # braid-design-system +## 31.18.1 + +### Patch Changes + +- **Button, ButtonLink:** Improve alignment of transparent buttons with icons against Text with icons ([#1170](https://github.com/seek-oss/braid-design-system/pull/1170)) + + To improve optical balance of a `Button` with an `icon`, the icon container is bled to the left to balance against the larger horizontal inset of a `standard` button. + This alignment correction is now only applied on `standard` sized buttons that are not using the `transparent` variant. + + Isolating this alignment correction enables transparent buttons to better align with other components with `icon` slots, for example: + + ```jsx + + }>Text + + + ``` + + Icons and text will now be perfectly aligned between Button components and others icon slots with the same text size. + ## 31.18.0 ### Minor Changes diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json index 822cd44fcfa..5080207417a 100644 --- a/packages/braid-design-system/package.json +++ b/packages/braid-design-system/package.json @@ -1,6 +1,6 @@ { "name": "braid-design-system", - "version": "31.18.0", + "version": "31.18.1", "description": "Themeable design system for the SEEK Group", "main": "lib/components/index.ts", "bin": { diff --git a/site/src/componentUpdates.json b/site/src/componentUpdates.json index a877fd8b921..33543b073e5 100644 --- a/site/src/componentUpdates.json +++ b/site/src/componentUpdates.json @@ -2701,5 +2701,17 @@ "summary": "Removes custom icon sizing and layout in favour of new typography icon sizes and layout." } ] + }, + { + "version": "31.18.1", + "updates": [ + { + "updated": [ + "Button", + "ButtonLink" + ], + "summary": "**Button, ButtonLink:** Improve alignment of transparent buttons with icons against Text with icons\n\nTo improve optical balance of a `Button` with an `icon`, the icon container is bled to the left to balance against the larger horizontal inset of a `standard` button.\nThis alignment correction is now only applied on `standard` sized buttons that are not using the `transparent` variant.\n\nIsolating this alignment correction enables transparent buttons to better align with other components with `icon` slots, for example:\n\n```jsx\n\n }>Text\n \n\n```\n\nIcons and text will now be perfectly aligned between Button components and others icon slots with the same text size." + } + ] } ]