Version Packages

packages/braid-design-system/CHANGELOG.md

@@ -1,5 +1,65 @@
 # 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>
+  ```
+
+### 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,37 @@
         "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```"
+      }
+    ]
   }
 ]