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 00000000000..b14cb167ed4 Binary files /dev/null and b/packages/react/cypress-image-diff-screenshots/baseline/IcDivider.cy.tsx/flex-item.png differ diff --git a/packages/react/src/component-tests/IcDivider/IcDivider.cy.tsx b/packages/react/src/component-tests/IcDivider/IcDivider.cy.tsx index cc322926194..107a2d2e2dc 100644 --- a/packages/react/src/component-tests/IcDivider/IcDivider.cy.tsx +++ b/packages/react/src/component-tests/IcDivider/IcDivider.cy.tsx @@ -311,4 +311,38 @@ describe("IcDivider visual and a11y testing", () => { 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 = 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],