diff --git a/cypress/snapshots/b2c/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/b2c/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..b8771d31786 Binary files /dev/null and b/cypress/snapshots/b2c/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/b2c/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/b2c/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..81da1a1b2af Binary files /dev/null and b/cypress/snapshots/b2c/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/cs/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/cs/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..bf32e85b488 Binary files /dev/null and b/cypress/snapshots/cs/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/cs/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/cs/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..935d6757800 Binary files /dev/null and b/cypress/snapshots/cs/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/finai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/finai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..dab93b958ce Binary files /dev/null and b/cypress/snapshots/finai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/finai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/finai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..9d08feca5ef Binary files /dev/null and b/cypress/snapshots/finai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/giga/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/giga/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..f5191c0ab92 Binary files /dev/null and b/cypress/snapshots/giga/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/giga/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/giga/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..a8b60022063 Binary files /dev/null and b/cypress/snapshots/giga/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/homeds/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/homeds/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..a9d0bb7bf7f Binary files /dev/null and b/cypress/snapshots/homeds/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/homeds/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/homeds/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..edb7a571ab3 Binary files /dev/null and b/cypress/snapshots/homeds/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/insol/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/insol/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..ee606006167 Binary files /dev/null and b/cypress/snapshots/insol/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/insol/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/insol/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..ff043d59530 Binary files /dev/null and b/cypress/snapshots/insol/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/os/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/os/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..834192cf64e Binary files /dev/null and b/cypress/snapshots/os/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/os/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/os/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..c6dec31a463 Binary files /dev/null and b/cypress/snapshots/os/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/platform-ai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/platform-ai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..fc710bd77d5 Binary files /dev/null and b/cypress/snapshots/platform-ai/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/platform-ai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/platform-ai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..279163ba4dc Binary files /dev/null and b/cypress/snapshots/platform-ai/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/serv/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/serv/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..834192cf64e Binary files /dev/null and b/cypress/snapshots/serv/chromium/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/cypress/snapshots/serv/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png b/cypress/snapshots/serv/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png new file mode 100644 index 00000000000..c6dec31a463 Binary files /dev/null and b/cypress/snapshots/serv/webkit/Steps/Steps -- vertical -- item stretch to max width.snap.png differ diff --git a/packages/plasma-new-hope/src/components/Steps/Steps.component-test.tsx b/packages/plasma-new-hope/src/components/Steps/Steps.component-test.tsx index 1000fa869d7..cb09ce3e014 100644 --- a/packages/plasma-new-hope/src/components/Steps/Steps.component-test.tsx +++ b/packages/plasma-new-hope/src/components/Steps/Steps.component-test.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; import { mount, getComponent, getDescribeFN, hasComponent, getBaseVisualTests, PadMe } from '@salutejs/plasma-cy-utils'; -import styled, { createGlobalStyle } from 'styled-components'; +import styled from 'styled-components'; // @ts-ignore import { IconMic } from 'override/_Icon'; @@ -18,6 +18,20 @@ const stepItems: StepItemProps[] = [ { title: 'Title', content: 'Content', status: 'inactive', indicator: 5 }, ]; +const complexContent = ( +
+ Text + Lorem Ipsum + +
+); + +const complexStepItems: StepItemProps[] = [ + { title: 'Title', content: complexContent, status: 'active', indicator: 1 }, + { title: 'Title', content: complexContent, status: 'inactive', indicator: 2 }, + { title: 'Title', content: complexContent, status: 'inactive', indicator: 3 }, +]; + getBaseVisualTests({ component: 'Steps', componentProps: { items: stepItems }, @@ -640,5 +654,15 @@ describeFn('Steps', () => { ); cy.matchImageSnapshot(); }); + + it('item stretch to max width', () => { + mount( +
+ +
, + ); + + cy.matchImageSnapshot(); + }); }); }); diff --git a/packages/plasma-new-hope/src/components/Steps/ui/StepItem/StepItem.styles.ts b/packages/plasma-new-hope/src/components/Steps/ui/StepItem/StepItem.styles.ts index e082f3080d3..2b86b796f03 100644 --- a/packages/plasma-new-hope/src/components/Steps/ui/StepItem/StepItem.styles.ts +++ b/packages/plasma-new-hope/src/components/Steps/ui/StepItem/StepItem.styles.ts @@ -222,6 +222,8 @@ export const StepItemDivider = styled.div<{ indentToken?: string }>` export const StepItemContentWrapper = styled.div` &.${classes.verticalOrientation} { + width: 100%; + ${StepItemTitle} { padding-top: var(${tokens.contentVerticalPadding}); padding-right: 0;