Skip to content

Commit d108aeb

Browse files
PixeledCodePixeledCode
authored
feat(progress-steps): add ProgressStepsContent (#4065)
* feat(progress-steps): use css for separator * feat(progress-steps): add ProgressStepContent props * feat(progress-steps): remove content prop * feat(progress-steps): add padding bottom to component * feat(progress-steps): update story * feat(progress-steps): update docs site with additonal content example * feat(progress-steps): add changeset * feat(progress-steps): update types * feat(progress-steps): add verticle padding to ProgressStepsContent * feat(progress-steps): add changset for codemods * feat(progress-steps): implement changes from review * feat(progress-steps): change minwidth of separator * feat(progress-steps): update typedocs * feat(progress-steps): fix build issue * feat(progress-steps): add test for progressStepsContent * feat(progress-steps): update typedocs * feat(progress-steps): update package json * feat(progress-steps): update yarn lock * feat(progress-steps): implement changes from review * feat(progress-steps): update typedocs * feat(progress-steps): update typedocs * feat(progress-steps): add ProgressStepSeparator callout * feat(progress-steps): update paddingY comment * feat(progress-steps): update type docs * feat(progress-steps): update type docs * feat(progress-steps): add Timeline vs. Progress Steps * feat(progress-steps): use 10px as margin top for separator * feat(progress-steps): update typedocs
1 parent a84b45b commit d108aeb

File tree

18 files changed

+1985
-122
lines changed

18 files changed

+1985
-122
lines changed

‎.changeset/cyan-hats-provide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@twilio-paste/codemods": minor
3+
---
4+
5+
[Progress Steps] Add `ProgressStepsContent` component to add additional content during vertical orientation

‎.changeset/nice-cats-leave.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/progress-steps": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Progress Steps] Add `ProgressStepsContent` component to add additional content during vertical orientation

‎packages/paste-codemods/tools/.cache/mappings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@
219219
"ProgressBar": "@twilio-paste/core/progress-bar",
220220
"ProgressBarLabel": "@twilio-paste/core/progress-bar",
221221
"ProgressStepComplete": "@twilio-paste/core/progress-steps",
222+
"ProgressStepContent": "@twilio-paste/core/progress-steps",
222223
"ProgressStepCurrent": "@twilio-paste/core/progress-steps",
223224
"ProgressStepError": "@twilio-paste/core/progress-steps",
224225
"ProgressStepIncomplete": "@twilio-paste/core/progress-steps",

‎packages/paste-core/components/progress-steps/__tests__/index.spec.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
ProgressSteps,
1212
} from "../src";
1313
import { Anchors, Buttons, Divs } from "../stories/horizontal.stories";
14+
import { WithContent } from "../stories/vertical.stories";
1415

1516
describe("ProgressSteps", () => {
1617
it("should render divs correctly", () => {
@@ -55,6 +56,13 @@ describe("ProgressSteps", () => {
5556
expect(signupLabel?.getAttribute("href")).toEqual("#");
5657
});
5758

59+
it("should render with content correctly", () => {
60+
const { getByText } = render(<WithContent />);
61+
const signupLabel = getByText("Snowflake");
62+
63+
expect(signupLabel?.tagName).toEqual("DT");
64+
});
65+
5866
describe("element naming", () => {
5967
it("should set all default element names", async () => {
6068
const { getByRole } = render(<Buttons />);
@@ -70,6 +78,11 @@ describe("ProgressSteps", () => {
7078
expect(addFriends?.dataset.pasteElement).toEqual("PROGRESS_STEP_INCOMPLETE");
7179
expect(wrapper?.dataset.pasteElement).toEqual("PROGRESS_STEPS");
7280
});
81+
it("should set default name on progress steps content", async () => {
82+
expect(
83+
render(<WithContent />).baseElement.querySelector("[data-paste-element='PROGRESS_STEP_CONTENT']"),
84+
).toBeInTheDocument();
85+
});
7386
});
7487
describe("custom element naming", () => {
7588
it("should set all custom element names", async () => {

‎packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const ProgressStepComplete = React.forwardRef<HTMLDivElement, ProgressSte
1515
type={as === "button" ? "button" : undefined}
1616
ref={ref}
1717
display="flex"
18-
alignItems="center"
1918
columnGap="space30"
2019
border="none"
2120
background="none"
@@ -32,10 +31,10 @@ export const ProgressStepComplete = React.forwardRef<HTMLDivElement, ProgressSte
3231
_hover={as !== "div" ? { textDecoration: "none", color: "colorTextPrimary" } : undefined}
3332
_focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
3433
>
35-
<ProgressSuccessIcon decorative={false} title={i18nCompleteLabel} />
36-
<Box as="span" textAlign="left">
37-
{children}
34+
<Box display="flex" flexDirection="column" alignItems="center">
35+
<ProgressSuccessIcon decorative={false} title={i18nCompleteLabel} />
3836
</Box>
37+
<Box textAlign="left">{children}</Box>
3938
</Box>
4039
</div>
4140
);

‎packages/paste-core/components/progress-steps/src/ProgressStepContent.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Box, type BoxProps } from "@twilio-paste/box";
2+
import type { Padding } from "@twilio-paste/style-props";
3+
import type { HTMLPasteProps } from "@twilio-paste/types";
4+
import React from "react";
5+
6+
export interface ProgressStepContentProps extends HTMLPasteProps<"div"> {
7+
children?: React.ReactNode;
8+
/**
9+
* Overrides the default element name to apply unique styles with the Customization Provider
10+
*
11+
* @default 'PROGRESS_STEP_CONTENT'
12+
* @type {BoxProps['element']}
13+
* @memberof ProgressStepContentProps
14+
*/
15+
element?: BoxProps["element"];
16+
/**
17+
* Responsive prop of Space tokens for the CSS `padding-top` and `padding-bottom` properties
18+
*
19+
* @default 'space40'
20+
* @type {Padding}
21+
* @memberof ProgressStepContentProps
22+
*/
23+
paddingY?: Padding;
24+
}
25+
26+
export const ProgressStepContent = React.forwardRef<HTMLDivElement, ProgressStepContentProps>(
27+
({ element = "PROGRESS_STEP_CONTENT", paddingY = "space40", ...props }, ref) => {
28+
return (
29+
<Box element={element} color="colorText" ref={ref} paddingY={paddingY}>
30+
{props.children}
31+
</Box>
32+
);
33+
},
34+
);
35+
ProgressStepContent.displayName = "ProgressStepContent";

‎packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const ProgressStepCurrent = React.forwardRef<HTMLDivElement, ProgressStep
1616
ref={ref}
1717
aria-current="step"
1818
display="flex"
19-
alignItems="center"
2019
columnGap="space30"
2120
border="none"
2221
background="none"
@@ -33,10 +32,10 @@ export const ProgressStepCurrent = React.forwardRef<HTMLDivElement, ProgressStep
3332
_hover={as !== "div" ? { textDecoration: "none", color: "colorTextPrimaryStrongest" } : undefined}
3433
_focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
3534
>
36-
<ProgressCurrentIcon decorative={false} title={i18nCurrentLabel} />
37-
<Box as="span" textAlign="left">
38-
{children}
35+
<Box display="flex" flexDirection="column" alignItems="center">
36+
<ProgressCurrentIcon decorative={false} title={i18nCurrentLabel} />
3937
</Box>
38+
<Box textAlign="left">{children}</Box>
4039
</Box>
4140
</div>
4241
);

‎packages/paste-core/components/progress-steps/src/ProgressStepError.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const ProgressStepError = React.forwardRef<HTMLDivElement, ProgressStepEr
1515
type={as === "button" ? "button" : undefined}
1616
ref={ref}
1717
display="flex"
18-
alignItems="center"
1918
columnGap="space30"
2019
border="none"
2120
background="none"
@@ -32,10 +31,11 @@ export const ProgressStepError = React.forwardRef<HTMLDivElement, ProgressStepEr
3231
_hover={as !== "div" ? { textDecoration: "none", color: "colorTextErrorStrongest" } : undefined}
3332
_focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
3433
>
35-
<ProgressErrorIcon decorative={false} title={i18nErrorLabel} />
36-
<Box as="span" textAlign="left">
37-
{children}
34+
<Box display="flex" flexDirection="column" alignItems="center">
35+
<ProgressErrorIcon decorative={false} title={i18nErrorLabel} />
3836
</Box>
37+
38+
<Box textAlign="left">{children} </Box>
3939
</Box>
4040
</div>
4141
);

‎packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export const ProgressStepIncomplete = React.forwardRef<HTMLDivElement, ProgressS
2626
disabled={disabled}
2727
ref={ref}
2828
display="flex"
29-
alignItems="center"
3029
columnGap="space30"
3130
border="none"
3231
background="none"
@@ -44,10 +43,10 @@ export const ProgressStepIncomplete = React.forwardRef<HTMLDivElement, ProgressS
4443
_focus={as !== "div" ? { boxShadow: "shadowFocus" } : undefined}
4544
_disabled={{ textDecoration: "none", color: "colorTextWeaker", cursor: "not-allowed" }}
4645
>
47-
<ProgressIncompleteIcon decorative={false} title={i18nIncompleteLabel} />
48-
<Box as="span" textAlign="left">
49-
{children}
46+
<Box display="flex" flexDirection="column" alignItems="center">
47+
<ProgressIncompleteIcon decorative={false} title={i18nIncompleteLabel} />
5048
</Box>
49+
<Box textAlign="left">{children} </Box>
5150
</Box>
5251
</div>
5352
);

‎packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,7 @@
1-
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
21
import type { BoxProps } from "@twilio-paste/box";
32
import type { HTMLPasteProps } from "@twilio-paste/types";
43
import * as React from "react";
54

6-
import { ProgressStepsContext } from "./ProgressStepsContext";
7-
8-
const VerticalStyles: BoxProps = {
9-
borderLeftWidth: "borderWidth20",
10-
borderLeftStyle: "solid",
11-
borderLeftColor: "colorBorderWeaker",
12-
borderRadius: "borderRadius0",
13-
minHeight: "32px",
14-
marginLeft: "space30",
15-
};
16-
const HorizontalStyles: BoxProps = {
17-
borderBottomWidth: "borderWidth20",
18-
borderBottomStyle: "solid",
19-
borderBottomColor: "colorBorderWeaker",
20-
borderRadius: "borderRadius20",
21-
minWidth: "32px",
22-
};
23-
245
export interface ProgressStepSeparatorProps extends HTMLPasteProps<"div"> {
256
children?: React.ReactNode;
267
/**
@@ -33,21 +14,8 @@ export interface ProgressStepSeparatorProps extends HTMLPasteProps<"div"> {
3314
element?: BoxProps["element"];
3415
}
3516

36-
export const ProgressStepSeparator = React.forwardRef<HTMLDivElement, ProgressStepSeparatorProps>(
37-
({ element = "PROGRESS_STEP_SEPARATOR", ...props }, ref) => {
38-
const { orientation } = React.useContext(ProgressStepsContext);
39-
40-
return (
41-
<Box
42-
{...safelySpreadBoxProps(props)}
43-
{...(orientation === "horizontal" ? HorizontalStyles : VerticalStyles)}
44-
ref={ref}
45-
aria-hidden
46-
flexShrink={0}
47-
flexGrow={1}
48-
element={element}
49-
/>
50-
);
51-
},
52-
);
17+
export const ProgressStepSeparator = React.forwardRef<HTMLDivElement, ProgressStepSeparatorProps>(() => {
18+
// returning null since we are relying on the CSS to render the separator
19+
return null;
20+
});
5321
ProgressStepSeparator.displayName = "ProgressStepSeparator";

0 commit comments

Comments
 (0)