braid-design-system 31.8.0 → 31.11.0

package/CHANGELOG.md

@@ -1,5 +1,154 @@
 # braid-design-system
 
+## 31.11.0
+
+### Minor Changes
+
+- **Button, ButtonLink:** Improve Button `bleed` ([#1103](https://github.com/seek-oss/braid-design-system/pull/1103))
+
+  Previously the `bleedY` prop allowed the background of `Button` to bleed vertically into the surrounding layout. This worked well for all variants except `transparent`, which needed to bleed horizontally as well.
+
+  To support this we have introduced the `bleed` prop which will apply the bleed based on the `variant`. We have also deprecated `bleedY` which will be removed in a future release.
+
+  **EXAMPLE USAGE:**
+
+  ```diff
+   <Button
+  -  bleedY
+  +  bleed
+     {...}
+   >
+     Button
+   </Button>
+  ```
+
+  **MIGRATION GUIDE**
+
+  Migration from `bleedY` to `bleed` can be automated by running the Braid upgrade command, passing the `v31.11` version. You must provide a glob to target your project’s source files. For example:
+
+  ```
+  yarn braid-upgrade v31.11 "**/*.{ts,tsx}"
+  ```
+
+  It is recommended to visually review the any `Button` usage with the `transparent` variant, to ensure the layout is as expected.
+
+## 31.10.0
+
+### Minor Changes
+
+- **Bleed:** Support using span elements via component prop ([#1094](https://github.com/seek-oss/braid-design-system/pull/1094))
+
+  Setting the `component` prop to `span` will now ensure all elements controlled by `Bleed` are `span`s. This is useful when using layout components inside dom elements that should not contain `div`s from a HTML validation perspective.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Bleed space="medium" component="span">
+    ...
+  </Bleed>
+  ```
+
+### Patch Changes
+
+- **Dialog, Drawer:** Prevent sticky close button container from blocking content ([#1097](https://github.com/seek-oss/braid-design-system/pull/1097))
+
+  Fix regression introduced when migrating the close action to use `ButtonIcon`. The close action container was blocking the content of the `Dialog`/`Drawer`, and when scrolling could prevent a user from interacting with the content as it went behind the container.
+
+  Additionally, re-introduced the surface coloured background behind the button to prevent the button from visually colliding with content when scrolling.
+
+## 31.9.0
+
+### Minor Changes
+
+- **Tab:** Add icon support ([#1089](https://github.com/seek-oss/braid-design-system/pull/1089))
+
+  Provides a designed slot for adding an icon to a `Tab`
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Tab icon={<IconPromote />}>{...}</Tab>
+  ```
+
+- **AccordionItem:** Add icon support ([#1086](https://github.com/seek-oss/braid-design-system/pull/1086))
+
+  Provides a designed slot for adding an icon to an `AccordionItem`
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <AccordionItem
+    icon={<IconPromote />}
+    {...}
+  />
+  ```
+
+- **Tag:** Add `id` support ([#1081](https://github.com/seek-oss/braid-design-system/pull/1081))
+
+- **Button, ButtonLink:** Add icon support ([#1090](https://github.com/seek-oss/braid-design-system/pull/1090))
+
+  Provides a designed slot for adding an icon to a `Button` or `ButtonLink`
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Button icon={<IconSend />}>{...}</Button>
+  ```
+
+- **Tag:** Add icon support ([#1087](https://github.com/seek-oss/braid-design-system/pull/1087))
+
+  Provides a designed slot for adding an icon to a `Tag`
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Tag
+    icon={<IconPromote />}
+    {...}
+  />
+  ```
+
+- **OverflowMenu:** Add `id` support ([#1081](https://github.com/seek-oss/braid-design-system/pull/1081))
+
+- **ButtonIcon:** Add component ([#1084](https://github.com/seek-oss/braid-design-system/pull/1084))
+
+  See [documentation](https://seek-oss.github.io/braid-design-system/components/ButtonIcon) for full feature set.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon
+    icon={<IconShare/>}
+    label="Share"
+    id="share"
+    onClick={...}
+  />
+  ```
+
+### Patch Changes
+
+- **Divider:** Use span element ([#1089](https://github.com/seek-oss/braid-design-system/pull/1089))
+
+  As the `Divider` component is not used as a container element, we now use a `span`. This allows it to be used inside `button` elements, such as a `Tab`, without producing invalid html.
+
+- **Badge:** Use span element ([#1086](https://github.com/seek-oss/braid-design-system/pull/1086))
+
+  As the `Badge` component is not used as a container element, we now use a `span`. This allows it to be used inside `button` elements, such as an `AccordionItem`, without producing invalid html.
+
+- **TooltipRenderer:** Ignore pointer events on tip container ([#1082](https://github.com/seek-oss/braid-design-system/pull/1082))
+
+  Fix for the container of the tooltip interferring with pointer events of the tooltip trigger itself.
+
+- **MenuRenderer, OverflowMenu:** Guard against open/close handlers firing incorrectly ([#1088](https://github.com/seek-oss/braid-design-system/pull/1088))
+
+  Add guard to ensure open and close handlers are not re-fired when handler instances are updated.
+
+- **Autosuggest, PasswordField, TextField, useToast:** Add `id` to internal close/clear buttons ([#1081](https://github.com/seek-oss/braid-design-system/pull/1081))
+
+- **Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast:** Migrate to use ButtonIcon ([#1084](https://github.com/seek-oss/braid-design-system/pull/1084))
+
+  Adopt new `ButtonIcon` for clear/close actions in favour of custom internal buttons.
+
 ## 31.8.0
 
 ### Minor Changes

package/README.md

@@ -1,5 +1,6 @@
 <div align="center" >
-  <img src="logo.png" alt="BRAID" title="BRAID" width="186px" />
+  <img src="logo.png#gh-light-mode-only" alt="BRAID" title="BRAID" width="186px" />
+  <img src="logo-inverted.png#gh-dark-mode-only" alt="BRAID" title="BRAID" width="186px" />
   <br/>
   <br/>
   Themeable design system for the SEEK Group.