Version Packages (#1171)

seek-oss · Oct 24, 2022 · b97fa78 · b97fa78
1 parent bad6129
commit b97fa78
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/.changeset/blue-planes-draw.md b/.changeset/blue-planes-draw.md
diff --git 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
+  <Stack space="small">
+    <Text icon={<IconSend />}>Text</Text>
+    <Button icon={<IconSend />} variant="transparent" bleed>
+      Button
+    </Button>
+  </Stack>
+  ```
+
+  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
@@ -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
@@ -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<Stack space=\"small\">\n  <Text icon={<IconSend />}>Text</Text>\n  <Button icon={<IconSend />} variant=\"transparent\" bleed>\n    Button\n  </Button>\n</Stack>\n```\n\nIcons and text will now be perfectly aligned between Button components and others icon slots with the same text size."
+      }
+    ]
   }
 ]