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 =