Merge branch 'main' into multiselect-rework

.github/workflows/dependency-track.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: pnpm/[email protected]
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '22'
 

.github/workflows/release.yml

@@ -42,12 +42,11 @@ jobs:
         run: pnpm release:notification --packages '${{ steps.changesets.outputs.publishedPackages }}'
       - name: Slack Notification
         if: steps.changesets.outputs.published == 'true'
-        uses: slackapi/slack-github-action@v1.27.1
+        uses: slackapi/slack-github-action@v2.0.0
         with:
           payload-file-path: './slack-notification.json'
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_HOOK }}
-          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+          webhook: ${{ secrets.SLACK_HOOK }}
+          webhook-type: webhook-trigger
 
       # We use the "docs" branch for the production build on vercel
       - name: Updating "docs" branch

config/eslint/package.json

@@ -29,21 +29,21 @@
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jest": "28.10.0",
+    "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-testing-library": "6.4.0",
+    "eslint-plugin-testing-library": "6.5.0",
     "prettier": "3.4.2"
   },
   "peerDependencies": {
     "eslint": "9.x.x",
-    "typescript": "5.3.x || 5.5.x || 5.6.x"
+    "typescript": "5.3.x || 5.5.x || 5.6.x || 5.7.x"
   },
   "devDependencies": {
     "eslint": "9.17.0",
     "eslint-plugin-tailwindcss": "3.17.5",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
   }
 }

config/jest/package.json

@@ -22,24 +22,24 @@
   },
   "dependencies": {
     "@babel/core": "7.26.0",
-    "@swc/core": "1.10.6",
+    "@swc/core": "1.10.7",
     "@swc/jest": "0.2.37",
     "@types/jest": "29.5.14",
     "babel-jest": "29.7.0",
     "jest-watch-typeahead": "2.2.2",
     "merge-deep": "3.0.3",
-    "react-test-renderer": "18.3.1"
+    "react-test-renderer": "19.0.0"
   },
   "peerDependencies": {
     "jest": "29.x",
     "jest-environment-jsdom": "29.x",
-    "react": "18.x",
+    "react": "19.x",
     "typescript": "5.x"
   },
   "devDependencies": {
     "jest": "29.7.0",
     "jest-transform-css": "6.0.2",
-    "react": "18.3.1",
-    "typescript": "5.7.2"
+    "react": "19.0.0",
+    "typescript": "5.7.3"
   }
 }

config/prettier/package.json

@@ -22,6 +22,6 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "prettier-plugin-tailwindcss": "0.6.9"
+    "prettier-plugin-tailwindcss": "0.6.10"
   }
 }

config/storybook/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @marigold/storybook-config
 
+## 1.1.54
+
+### Patch Changes
+
+- @marigold/components@10.1.3
+- @marigold/theme-b2b@28.0.4
+- @marigold/theme-core@27.0.4
+
+## 1.1.53
+
+### Patch Changes
+
+- Updated dependencies [3878b6b]
+  - @marigold/theme-b2b@28.0.3
+  - @marigold/theme-core@27.0.3
+  - @marigold/components@10.1.2
+
 ## 1.1.52
 
 ### Patch Changes

config/storybook/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marigold/storybook-config",
   "description": "Marigold's storybook configuration",
-  "version": "1.1.52",
+  "version": "1.1.54",
   "license": "MIT",
   "exports": "./main.js",
   "keywords": [
@@ -27,7 +27,7 @@
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/source-loader": "^8.1.11",
     "@storybook/test": "^8.1.11",
-    "@types/react": "18.3.18",
+    "@types/react": "19.0.7",
     "@vitejs/plugin-react": "4.3.4",
     "vite-tsconfig-paths": "5.1.4"
   },
@@ -39,20 +39,20 @@
     "@storybook/preview-api": "^8.1.11",
     "@storybook/react-vite": "^8.1.11",
     "autoprefixer": "10.4.20",
-    "postcss": "8.4.49",
+    "postcss": "8.5.1",
     "postcss-loader": "8.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "^8.1.11",
     "tailwindcss": "3.4.17",
-    "typescript": "5.7.2",
-    "vite": "6.0.7"
+    "typescript": "5.7.3",
+    "vite": "6.0.9"
   },
   "peerDependencies": {
-    "@storybook/react": "8.0.x || 8.1.x || 8.2.x || 8.3.x || 8.4.x",
-    "react": "18.x",
-    "react-dom": "18.x",
-    "typescript": "5.3.x || 5.5.x || 5.6.x"
+    "@storybook/react": "8.0.x || 8.1.x || 8.2.x || 8.3.x || 8.4.x || 8.5.x",
+    "react": "19.x",
+    "react-dom": "19.x",
+    "typescript": "5.3.x || 5.5.x || 5.6.x || 5.7.x"
   },
   "scripts": {
     "start": "storybook dev -p 6006 -c .storybook/",

docs/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @marigold/docs
 
+## 10.1.3
+
+### Patch Changes
+
+- @marigold/components@10.1.3
+- @marigold/system@10.1.3
+- @marigold/theme-b2b@28.0.4
+- @marigold/theme-core@27.0.4
+- @marigold/theme-docs@2.2.4
+- @marigold/icons@1.2.62
+- @marigold/theme-preset@1.3.27
+
+## 10.1.2
+
+### Patch Changes
+
+- Updated dependencies [3878b6b]
+  - @marigold/theme-b2b@28.0.3
+  - @marigold/theme-core@27.0.3
+  - @marigold/theme-docs@2.2.3
+  - @marigold/system@10.1.2
+  - @marigold/components@10.1.2
+  - @marigold/icons@1.2.61
+  - @marigold/theme-preset@1.3.26
+
 ## 10.1.1
 
 ### Patch Changes

docs/app/_components/CommandItems.tsx

@@ -127,7 +127,7 @@ export const TokenItem = ({ classNames }: CommandItemProps) => {
 };
 
 export const IconItem = ({ classNames }: CommandItemProps) => {
-  const ref = useRef<SVGSVGElement>();
+  const ref = useRef<SVGSVGElement>(undefined);
   const getIcon = (icon: keyof typeof Icons, ref: RefObject<SVGSVGElement>) => {
     const Component = Icons[icon];
     const iconElement = <Component ref={ref} />;

docs/content/components/content/badge/badge.mdx

@@ -1,7 +1,6 @@
 ---
 title: Badge
 caption: Component for short notes with one color as status messages
-badge: updated
 ---
 
 A `<Badge>` is a content component. This component can be used to reflect status messages via a short note and a color.

docs/content/components/content/card/card.mdx

@@ -1,7 +1,6 @@
 ---
 title: Card
 caption: Component to support the structuring of information.
-badge: updated
 ---
 
 A `<Card>` component is a versatile UI element used to display content in a concise, visually organized format.

docs/content/components/form/button/button.mdx

@@ -1,7 +1,6 @@
 ---
 title: Button
 caption: Buttons allow users to trigger actions.
-badge: updated
 ---
 
 The `<Button>` component is a crucial components of any user interface, allowing users to initiate actions such as submitting forms, adding items to a cart, or opening dialogs. The label on a button indicates the action that will be taken when the user presses it.

docs/content/components/form/datefield/datefield.mdx

@@ -1,7 +1,6 @@
 ---
 title: DateField
 caption: Component for entering date in forms.
-badge: updated
 ---
 
 The `<DateField>` allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment. These segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.

docs/content/components/form/datepicker/datepicker.mdx

@@ -1,7 +1,6 @@
 ---
 title: DatePicker
 caption: Component used to pick date value.
-badge: updated
 ---
 
 The `<DatePicker>` component is a user interface element that allows users to select a date from a calendar.

docs/content/components/form/slider/slider.mdx

@@ -1,7 +1,6 @@
 ---
 title: Slider
 caption: Allows to make selections from a range of values.
-badge: updated
 ---
 
 The `<Slider>` is a form component that allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are known and static.
@@ -41,7 +40,6 @@ Sliders allow users to view and select a value (or range) along a track. They’
 
 A slider’s `step` size defines the increments at which the slider can move, allowing users to make finer or coarser adjustments based on the context — such as adjusting volume in single steps versus increments of ten. Setting an appropriate step size enhances usability, especially for precise inputs. The `step` default increment is 1.
 
-
 ### Label
 
 The label is automatically placed on top of the slider and aligned to its left side. It informs users what value(s) they have selected. You can place it with the `label` prop.

docs/content/components/layout/aside/aside.mdx

@@ -1,7 +1,6 @@
 ---
 title: Aside
 caption: Component to seperate content from the main content.
-badge: updated
 ---
 
 The `<Aside>` component is a responsive layout element designed for displaying side content next to main content. It ensures the side content has a fixed width while the main content dynamically adjusts to fill the remaining space.

docs/content/components/layout/center/center.mdx

@@ -1,7 +1,6 @@
 ---
 title: Center
 caption: Component to center its children horizontally.
-badge: updated
 ---
 
 The `<Center>` is a layout component that centers its children <strong>horizontally</strong> within a container.

docs/content/components/layout/columns/columns.mdx

@@ -1,7 +1,6 @@
 ---
 title: Columns
 caption: Position content in one row.
-badge: updated
 ---
 
 The `<Columns>` component is used to create structured and flexible layouts that organize content efficiently. It is a responsive component with sized columns in one row based on a [flex system](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).

docs/content/components/layout/scrollable/scrollable.mdx

@@ -1,7 +1,6 @@
 ---
 title: Scrollable
 caption: Lets the content scroll.
-badge: updated
 ---
 
 `<Scrollable>` is a component container for creating scrollable areas in the UI. Scrollbars can be both vertical and horizontal.

docs/content/components/overlay/dialog/dialog.mdx

@@ -1,7 +1,6 @@
 ---
 title: Dialog
 caption: Component for displaying dialogs.
-badge: updated
 ---
 
 The `<Dialog>` component is a versatile UI element used to display important content that requires user interaction, typically in a modal or popup window. It is designed to temporarily interrupt the user's workflow to present critical information, request confirmation, or facilitate a task without navigating away from the current page.

docs/content/getting-started/governance-process.mdx

@@ -15,9 +15,9 @@ We have created a flowchart, divided into 3 phases, that illustrates how incomin
 <SectionMessage>
   <SectionMessage.Title>Note</SectionMessage.Title>
   <SectionMessage.Content>
-    ug fixes aren't subject to the same rigorous evaluation process and are
+    Bug fixes aren't subject to the same rigorous evaluation process and are
     handled differently. To read more about how to report bugs go
-    [here](/resources//get-in-touch/#report-bugs).
+    [here](/getting-started//get-in-touch/#report-bugs).
   </SectionMessage.Content>
 </SectionMessage>
 
@@ -29,7 +29,7 @@ We have created a flowchart, divided into 3 phases, that illustrates how incomin
   width="100%"
   height="480"
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FXnvTRolISplT6ZKtLYS8KG%2FManaging-Changes-and-Additions-to-the-Design-System%253A-Flowchart%3Ftype%3Dwhiteboard%26node-id%3D0%253A1%26t%3Db3p2S27ZxriQPK27-1"
-  allowfullscreen
+  allowFullScreen
 />
 
 ## Phase 1: Product team discovers a problem
@@ -144,7 +144,7 @@ This phase can only be achieved if the estimated time for the request is accepta
       width={700}
       height={900}
       src="/governance-phase3a.png"
-      alr="governance phase 3a"
+      alt="governance phase 3a"
     />
   </Columns>
 

docs/content/patterns/loading-states/loading-states.mdx

@@ -1,7 +1,6 @@
 ---
 title: Loading States
 caption: Learn when to use which loading state.
-badge: new
 ---
 
 <SectionMessage variant="warning">

docs/content/releases/blog/release-2025-01-22.mdx

@@ -0,0 +1,44 @@
+---
+title: Marigold v10.1.2
+date: 2025-01-22
+type: Blog
+changed:
+  - component/content/section-message
+  - component/layout/aspect
+  - component/layout/grid
+  - component/layout/inset
+  - component/layout/tiles
+  - component/form/calendar
+  - component/form/search-field
+  - component/content/xloader
+  - component/navigation/pagination
+---
+
+Happy New Year! 🥳 Marigold v10.1.2 kicks off the year with updates to key components and the introduction of a brand-new component. Along with that we made a lot of dependency updates including changing the React version to React 19. Thanks for being part of the journey—we’re excited for what’s ahead.
+
+Here’s what’s new!
+
+## Improvements
+
+- **React 19:** We have updated to React 19, bringing enhanced performance, streamlined simplicity, and an improved development experience.
+
+### Components
+
+- **Pagination:** We added a new component `<Pagination>` to the Marigold library. This component is used to divide and navigate large data sets. You can find more information about this component in the documentation.
+- **SectionMessage:** You now have the possibility to control the dismissable `<SectionMessage>` we've added the properties `close` and `onCloseChange` to handle the dismissable state.
+- **XLoader:** The `<XLoader>` was refactored and is now more accessible! Besides this the docs page were updated.
+
+### Documentation
+
+We of course also keep on updating our component documentation pages. These following pages have been updated:
+
+- `<Aspect>`
+- `<Calendar>`
+- `<Inset>`
+- `<Grid>`
+- `<SearchField>`
+- `<Tiles>`
+
+---
+
+Thanks for reading, and we hope you enjoy the new features in Marigold 10.1.2! Be sure to check out the updated documentation for more details, and as always, we're here if you need help.