Version Packages (#1551)

packages/braid-design-system/CHANGELOG.md

@@ -1,5 +1,99 @@
 # braid-design-system
 
+## 32.22.0
+
+### Minor Changes
+
+- **Column:** Add support for hide above/below breakpoint ([#1553](https://github.com/seek-oss/braid-design-system/pull/1553))
+
+  Introduce new `hideAbove` and `hideBelow` props on column for responsively hiding columns across breakpoint.
+
+  These props can be used either separately or in combination to optimise content display across different screen sizes.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Columns space="small">
+    <Column>
+      <Placeholder height={60} label="Always visible" />
+    </Column>
+    <Column hideBelow="tablet">
+      <Placeholder height={60} label="Tablet and above" />
+    </Column>
+    <Column hideAbove="mobile">
+      <Placeholder height={60} label="Mobile Only" />
+    </Column>
+  </Columns>
+  ```
+
+- **Badge:** Enable usage inside typographic components ([#1547](https://github.com/seek-oss/braid-design-system/pull/1547))
+
+  A `Badge` can now be nested inside typographic components, e.g. `Text` and `Heading`, as an inline element alongside text.
+  Previously a `Badge` had to be aligned against text using an `Inline` component, which would result in the `Badge` dropping below the text when the copy wrapped.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Text>
+    Lorem ipsum velit in <Badge>amet</Badge>.
+  </Text>
+  ```
+
+- **Tabs:** Add `size` support ([#1550](https://github.com/seek-oss/braid-design-system/pull/1550))
+
+  Introduces the ability to customise the `size` of the `Tab` components in the tab list.
+  Available sizes are `standard` (default) and `small`.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Tabs size="small">
+    <Tab>First tab</Tab>
+    <Tab>Second tab</Tab>
+    <Tab>Third tab</Tab>
+  </Tabs>
+  ```
+
+- **Spread:** Add new layout component ([#1554](https://github.com/seek-oss/braid-design-system/pull/1554))
+
+  Introduce a new layout component, `Spread`, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.
+
+  **EXAMPLE USAGE:**
+
+  The `Spread` component works horizontally by default:
+
+  ```jsx
+  <Spread space="small" alignY="center">
+    <Heading level="4">Heading</Heading>
+
+    <OverflowMenu label="Options">
+      <MenuItem>First</MenuItem>
+      <MenuItem>Second</MenuItem>
+    </OverflowMenu>
+  </Spread>
+  ```
+
+  But can be switched to `vertical` via the `direction` prop:
+
+  ```jsx
+  <Spread space="large" direction="vertical">
+    <Stack space="small">
+      <Heading level="4">Heading</Heading>
+      <Text>Text</Text>
+    </Stack>
+
+    <Text size="small" tone="secondary">
+      Date
+    </Text>
+  </Spread>
+  ```
+
+### Patch Changes
+
+- Move `badge` slot inside label ([#1547](https://github.com/seek-oss/braid-design-system/pull/1547))
+
+  Relocate the `badge` slot inside the `label` slot enabling the `Badge` to sit alongside the last word in wrapping lines of text.
+
 ## 32.21.0
 
 ### Minor Changes

packages/braid-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.21.0",
+  "version": "32.22.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {

site/src/componentUpdates.json

@@ -4017,5 +4017,43 @@
         "summary": "**MonthPicker:** Reduce space between month and year fields\n\nReducing the space between month and year fields to improve correlation between the two fields within the greater context of a form."
       }
     ]
+  },
+  {
+    "version": "32.22.0",
+    "updates": [
+      {
+        "new": [
+          "Column"
+        ],
+        "summary": "**Column:** Add support for hide above/below breakpoint\n\nIntroduce new `hideAbove` and `hideBelow` props on column for responsively hiding columns across breakpoint.\n\nThese props can be used either separately or in combination to optimise content display across different screen sizes.\n\n**EXAMPLE USAGE:**\n```jsx\n<Columns space=\"small\">\n  <Column>\n    <Placeholder height={60} label=\"Always visible\" />\n  </Column>\n  <Column hideBelow=\"tablet\">\n    <Placeholder height={60} label=\"Tablet and above\" />\n  </Column>\n  <Column hideAbove=\"mobile\">\n    <Placeholder height={60} label=\"Mobile Only\" />\n  </Column>\n</Columns>\n```"
+      },
+      {
+        "updated": [
+          "AccordionItem",
+          "Checkbox",
+          "CheckboxStandalone",
+          "RadioItem"
+        ],
+        "summary": "Move `badge` slot inside label\n\nRelocate the `badge` slot inside the `label` slot enabling the `Badge` to sit alongside the last word in wrapping lines of text."
+      },
+      {
+        "updated": [
+          "Badge"
+        ],
+        "summary": "**Badge:** Enable usage inside typographic components\n\nA `Badge` can now be nested inside typographic components, e.g. `Text` and `Heading`, as an inline element alongside text.\nPreviously a `Badge` had to be aligned against text using an `Inline` component, which would result in the `Badge` dropping below the text when the copy wrapped.\n\n**EXAMPLE USAGE:**\n```jsx\n<Text>\n  Lorem ipsum velit in <Badge>amet</Badge>.\n</Text>\n```"
+      },
+      {
+        "new": [
+          "Tabs"
+        ],
+        "summary": "**Tabs:** Add `size` support\n\nIntroduces the ability to customise the `size` of the `Tab` components in the tab list.\nAvailable sizes are `standard` (default) and `small`.\n\n**EXAMPLE USAGE:**\n```jsx\n<Tabs size=\"small\">\n  <Tab>First tab</Tab>\n  <Tab>Second tab</Tab>\n  <Tab>Third tab</Tab>\n</Tabs>\n```"
+      },
+      {
+        "new": [
+          "Spread"
+        ],
+        "summary": "**Spread:** Add new layout component\n\nIntroduce a new layout component, `Spread`, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.\n\n**EXAMPLE USAGE:**\n\nThe `Spread` component works horizontally by default:\n\n```jsx\n<Spread space=\"small\" alignY=\"center\">\n  <Heading level=\"4\">Heading</Heading>\n\n  <OverflowMenu label=\"Options\">\n    <MenuItem>First</MenuItem>\n    <MenuItem>Second</MenuItem>\n  </OverflowMenu>\n</Spread>\n```\n\nBut can be switched to `vertical` via the `direction` prop:\n\n```jsx\n<Spread space=\"large\" direction=\"vertical\">\n  <Stack space=\"small\">\n    <Heading level=\"4\">Heading</Heading>\n    <Text>Text</Text>\n  </Stack>\n\n  <Text size=\"small\" tone=\"secondary\">\n    Date\n  </Text>\n</Spread>\n```"
+      }
+    ]
   }
 ]