From 22f799b59cb0bd516a21acd4f171542d5be935d9 Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
<16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Tue, 15 Sep 2026 15:31:56 +0100
Subject: [PATCH 1/2] feat(web-components): support flex item dividers
---
packages/web-components/src/components.d.ts | 8 +++++++
.../src/components/ic-divider/ic-divider.css | 18 ++++++++++++++
.../ic-divider/ic-divider.stories.js | 24 +++++++++++++++++++
.../src/components/ic-divider/ic-divider.tsx | 7 ++++++
.../src/components/ic-divider/readme.md | 1 +
.../ic-divider/test/basic/ic-divider.spec.ts | 9 +++++++
6 files changed, 67 insertions(+)
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
index b09606fdbe6..70662209c37 100644
--- a/packages/web-components/src/components.d.ts
+++ b/packages/web-components/src/components.d.ts
@@ -876,6 +876,10 @@ export namespace Components {
* The line style of the divider.
*/
"borderStyle"?: IcDividerStyles;
+ /**
+ * If `true`, a vertical divider will stretch to the height of its flex container.
+ */
+ "flexItem"?: boolean;
/**
* The label for the divider. The label placement will need to be set for the label to be displayed correctly.
*/
@@ -4794,6 +4798,10 @@ declare namespace LocalJSX {
* The line style of the divider.
*/
"borderStyle"?: IcDividerStyles;
+ /**
+ * If `true`, a vertical divider will stretch to the height of its flex container.
+ */
+ "flexItem"?: boolean;
/**
* The label for the divider. The label placement will need to be set for the label to be displayed correctly.
*/
diff --git a/packages/web-components/src/components/ic-divider/ic-divider.css b/packages/web-components/src/components/ic-divider/ic-divider.css
index 5f1a31aeb12..2cb2fd5ebbb 100644
--- a/packages/web-components/src/components/ic-divider/ic-divider.css
+++ b/packages/web-components/src/components/ic-divider/ic-divider.css
@@ -69,11 +69,21 @@ hr {
border: none;
}
+:host(.ic-divider-vertical.ic-divider-flex-item) {
+ align-self: stretch;
+ height: auto;
+}
+
:host(.ic-divider-vertical) div.vertical-divider {
display: flex;
height: inherit;
}
+:host(.ic-divider-vertical.ic-divider-flex-item) div.vertical-divider {
+ flex-grow: 1;
+ height: auto;
+}
+
:host(.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-divider-vertical.ic-divider-label-top)::after,
@@ -82,6 +92,14 @@ hr {
height: 100%;
}
+:host(.ic-divider-vertical.ic-divider-flex-item.ic-divider-label-bottom)::before,
+:host(.ic-divider-vertical.ic-divider-flex-item.ic-divider-label-center)::before,
+:host(.ic-divider-vertical.ic-divider-flex-item.ic-divider-label-top)::after,
+:host(.ic-divider-vertical.ic-divider-flex-item.ic-divider-label-center)::after {
+ flex-grow: 1;
+ height: auto;
+}
+
/* Theme */
hr,
:host(.ic-divider-horizontal.ic-divider-label-right)::before,
diff --git a/packages/web-components/src/components/ic-divider/ic-divider.stories.js b/packages/web-components/src/components/ic-divider/ic-divider.stories.js
index ec7b7db0a0a..668af5e97f5 100644
--- a/packages/web-components/src/components/ic-divider/ic-divider.stories.js
+++ b/packages/web-components/src/components/ic-divider/ic-divider.stories.js
@@ -266,6 +266,30 @@ export const LabelPlacement = {
name: "Label placement",
};
+export const FlexItem = {
+ render: () => html`
+
+
+
Intrinsic content gives this flex container its height.
+
+
+
+
+
The vertical dividers stretch without an explicit parent height.
+
+
+ `,
+
+ name: "Flex item",
+};
+
export const Playground = {
render: (args) => {
const backgroundColor =
diff --git a/packages/web-components/src/components/ic-divider/ic-divider.tsx b/packages/web-components/src/components/ic-divider/ic-divider.tsx
index 2dc45edcfbd..3b24c6dfff3 100644
--- a/packages/web-components/src/components/ic-divider/ic-divider.tsx
+++ b/packages/web-components/src/components/ic-divider/ic-divider.tsx
@@ -45,6 +45,11 @@ export class Divider {
*/
@Prop() borderStyle?: IcDividerStyles = "solid";
+ /**
+ * If `true`, a vertical divider will stretch to the height of its flex container.
+ */
+ @Prop() flexItem?: boolean = false;
+
/**
* The label for the divider. The label placement will need to be set for the label to be displayed correctly.
*/
@@ -117,6 +122,7 @@ export class Divider {
render() {
const {
borderStyle,
+ flexItem,
label,
labelPlacement,
monochrome,
@@ -184,6 +190,7 @@ export class Divider {
[`ic-divider-${orientation}`]: true,
[`ic-divider-${weight}`]: true,
[`ic-divider-${borderStyle}`]: true,
+ [`ic-divider-flex-item`]: !!flexItem,
[`ic-divider-label-${labelPlacement}`]:
slotHasContent(this.el, "label") || !isEmptyString(label),
}}
diff --git a/packages/web-components/src/components/ic-divider/readme.md b/packages/web-components/src/components/ic-divider/readme.md
index 35db8a6b783..777548bdadf 100644
--- a/packages/web-components/src/components/ic-divider/readme.md
+++ b/packages/web-components/src/components/ic-divider/readme.md
@@ -10,6 +10,7 @@
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------------- |
| `borderStyle` | `border-style` | The line style of the divider. | `"dashed" \| "solid" \| undefined` | `"solid"` |
+| `flexItem` | `flex-item` | If `true`, a vertical divider will stretch to the height of its flex container. | `boolean \| undefined` | `false` |
| `label` | `label` | The label for the divider. The label placement will need to be set for the label to be displayed correctly. | `string \| undefined` | `undefined` |
| `labelPlacement` | `label-placement` | The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations. | `"bottom" \| "center" \| "left" \| "right" \| "top" \| undefined` | `"center"` |
| `monochrome` | `monochrome` | If `true`, the divider will be displayed in a grey colour. | `boolean \| undefined` | `false` |
diff --git a/packages/web-components/src/components/ic-divider/test/basic/ic-divider.spec.ts b/packages/web-components/src/components/ic-divider/test/basic/ic-divider.spec.ts
index 0863db07805..dc0429dde5f 100644
--- a/packages/web-components/src/components/ic-divider/test/basic/ic-divider.spec.ts
+++ b/packages/web-components/src/components/ic-divider/test/basic/ic-divider.spec.ts
@@ -12,6 +12,15 @@ describe("ic-divider", () => {
expect(page.root).toMatchSnapshot();
});
+ it("should apply the flex item class when flex-item is true", async () => {
+ const page = await newSpecPage({
+ components: [Divider],
+ html: ``,
+ });
+
+ expect(page.root).toHaveClass("ic-divider-flex-item");
+ });
+
it("should render with a slotted label", async () => {
const page = await newSpecPage({
components: [Divider],
From dd22c1bd4c445f6706276314d01fbe6f747ec86c Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
<16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Tue, 15 Sep 2026 15:31:56 +0100
Subject: [PATCH 2/2] test(react): cover flex item dividers
---
.../baseline/IcDivider.cy.tsx/flex-item.png | Bin 0 -> 15171 bytes
.../IcDivider/IcDivider.cy.tsx | 34 ++++++++++++++++++
.../react/src/stories/ic-divider.stories.jsx | 29 +++++++++++++++
3 files changed, 63 insertions(+)
create mode 100644 packages/react/cypress-image-diff-screenshots/baseline/IcDivider.cy.tsx/flex-item.png
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcDivider.cy.tsx/flex-item.png b/packages/react/cypress-image-diff-screenshots/baseline/IcDivider.cy.tsx/flex-item.png
new file mode 100644
index 0000000000000000000000000000000000000000..b14cb167ed462086afa97df3dcb596a04d79692d
GIT binary patch
literal 15171
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 {
testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.087),
});
});
+
+ it("should stretch vertical dividers in a flex container without an explicit height", () => {
+ cy.viewport(700, 320);
+ mount(
+
+
+
Intrinsic content gives this flex container its height.
+
+
+
+
+
The dividers stretch without an explicit parent height.
+
+
+ );
+ cy.checkHydrated(DIVIDER_SELECTOR);
+
+ cy.checkA11yWithWait();
+ cy.compareSnapshot({
+ name: "/flex-item",
+ testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.02),
+ });
+ });
});
diff --git a/packages/react/src/stories/ic-divider.stories.jsx b/packages/react/src/stories/ic-divider.stories.jsx
index 29a81f728be..1af489c01eb 100644
--- a/packages/react/src/stories/ic-divider.stories.jsx
+++ b/packages/react/src/stories/ic-divider.stories.jsx
@@ -339,6 +339,35 @@ export const LabelPlacement = {
name: "Label placement",
};
+export const FlexItem = {
+ render: () => (
+
+
+
Intrinsic content gives this flex container its height.
+
+
+
+
+
The vertical dividers stretch without an explicit parent height.
+
+
+ ),
+
+ name: "Flex item",
+};
+
+
export const Playground = {
render: (args) => {
const backgroundColor =