feat: updates to stepper component (breaking change + new tag attribute) #573

ethanWallace · 2024-06-26T13:19:31Z

Summary | Résumé

Update gcds-stepper to match new design changing stepper from a caption to a heading with caption.

Changes

New tag attribute lets you set heading level h1 | h2 | h3.
Previously, the heading level was set to h6, this functionality has changed.
New default slot to pass heading text to stepper

Old implementation

<gcds-stepper current-step="1" total-steps="4">
</gcds-stepper>

New implementation

<gcds-stepper current-step="1" total-steps="4" tag="h2">
  Section title
</gcds-stepper>

Requires tokens from cds-snc/gcds-tokens#278.

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

daine · 2024-06-26T16:58:55Z

When we merge this commit, could we name it as close as possible to the changes it has on current users? I'm thinking something like:
feat: updates to stepper component (new tag attribute)

I love how you've detailed the changes in the PR description! Would it be possible to refine it a bit more? This is the page users get to dive into more info on the changes as it's linked on the CHANGELOG and release description.

New tag attribute lets you set heading level h1 | h2 | h3.

Previously, the heading level was set to h6, this functionality has changed.

New default slot to pass heading text to stepper

ethanWallace · 2024-06-27T20:08:34Z

Just waiting on the translation for our will not render error.

melaniebmn

Looks good, will approve when translation comes back

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

daine · 2024-07-03T00:12:52Z

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

+    if (this.totalSteps == undefined) {
+      this.totalSteps = 3;
+    } else if (this.totalSteps < this.currentStep) {
+      this.totalSteps = this.currentStep;
+    }


Same comment here as above on validation; I feel like we shouldn't be setting arbitrary values for these because they are a required field, is there a really good reason that we have to set it instead of reporting it as an invalid parameter?

daine

Tested the code and it works pretty well! Just a few changes mostly around validation and testing.

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

packages/web/src/components/gcds-stepper/test/gcds-stepper.e2e.ts

packages/web/src/components/gcds-stepper/test/gcds-stepper.spec.tsx

daine · 2024-07-04T05:57:31Z

packages/web/src/components/gcds-stepper/gcds-stepper.tsx

+  /**
+   * State to track if component should render
+   */
+  @State() renderError: boolean = false;


melaniebmn

+1 on the unit tests that @daine mentioned - the rest looks great!

ethanWallace · 2024-07-05T11:56:09Z

I believe I have captured all the ways the stepper would fail to render in the unit tests but let me know if I missed one

daine

Just a few more requests please then we should be good to go!

Can we fix the linting? @melaniebmn and I noticed a while back that you and I don't seem to be getting the lint complaints, I messed around with my IDE's configuration and it now shows me the lint warnings, could you check yours too?
When you run the tests or check the overview and structure, 4 of them just shows "renders steps" and I realize we have the description in the comments, could we update those?

Thank you!

packages/web/src/components/gcds-stepper/test/gcds-stepper.spec.tsx

melaniebmn

LGTM

daine

LGTM!

daine

LGTM!

melaniebmn

LGTM

ethanWallace added 2 commits June 21, 2024 09:26

First iteration of stepper V2

3f4eab9

Add new tag property to stepper

e075128

ethanWallace mentioned this pull request Jun 26, 2024

refactor: Update stepper tokens to match new design cds-snc/gcds-tokens#278

Merged

ethanWallace requested review from daine and melaniebmn June 26, 2024 13:20

ethanWallace marked this pull request as ready for review June 26, 2024 13:29

melaniebmn reviewed Jun 26, 2024

View reviewed changes

packages/web/src/components/gcds-stepper/gcds-stepper.tsx Outdated Show resolved Hide resolved

Add validation to gcds-stepper properties

c3b64b9

ethanWallace changed the title ~~refactor: stepper component V2~~ feat: updates to stepper component (new tag attribute) Jun 27, 2024

Update design tokens package version

cd426ef

melaniebmn reviewed Jun 27, 2024

View reviewed changes

packages/web/src/components/gcds-stepper/gcds-stepper.tsx Outdated Show resolved Hide resolved

daine reviewed Jul 3, 2024

View reviewed changes

daine requested changes Jul 3, 2024

View reviewed changes

ethanWallace added 2 commits July 3, 2024 14:07

Add validation + expand tests

b195ab2

Add one more unit test

8747a46

daine reviewed Jul 4, 2024

View reviewed changes

Add French version of error

86e97e3

ethanWallace requested review from daine and melaniebmn July 4, 2024 17:25

melaniebmn reviewed Jul 4, 2024

View reviewed changes

Add required to default slot in storybook

a4b3171

daine reviewed Jul 9, 2024

View reviewed changes

Update test names + linting

175ec41

melaniebmn previously approved these changes Jul 9, 2024

View reviewed changes

daine previously approved these changes Jul 9, 2024

View reviewed changes

Add new logError function for property validation

c99e7c7

ethanWallace dismissed stale reviews from daine and melaniebmn via c99e7c7 July 24, 2024 18:40

ethanWallace requested review from daine and melaniebmn July 24, 2024 18:40

ethanWallace changed the title ~~feat: updates to stepper component (new tag attribute)~~ feat: updates to stepper component (breaking change + new tag attribute) Jul 24, 2024

daine previously approved these changes Jul 25, 2024

View reviewed changes

Merge main

a9027ed

ethanWallace dismissed daine’s stale review via a9027ed August 19, 2024 13:04

Update tokens package

2094e88

melaniebmn approved these changes Aug 19, 2024

View reviewed changes

ethanWallace merged commit 0f8bd2f into main Aug 19, 2024
3 checks passed

ethanWallace deleted the refactor/stepper-component branch August 19, 2024 18:27

sre-read-write bot mentioned this pull request Aug 19, 2024

chore: GCDS Components Release v0.25.0 #611

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: updates to stepper component (breaking change + new tag attribute) #573

feat: updates to stepper component (breaking change + new tag attribute) #573

ethanWallace commented Jun 26, 2024 •

edited

Loading

daine commented Jun 26, 2024

ethanWallace commented Jun 27, 2024

melaniebmn left a comment

daine Jul 3, 2024

daine left a comment

daine Jul 4, 2024

melaniebmn left a comment

ethanWallace commented Jul 5, 2024

daine left a comment •

edited

Loading

melaniebmn left a comment

daine left a comment

daine left a comment

melaniebmn left a comment

feat: updates to stepper component (breaking change + new tag attribute) #573

feat: updates to stepper component (breaking change + new tag attribute) #573

Conversation

ethanWallace commented Jun 26, 2024 • edited Loading

Summary | Résumé

Changes

Old implementation

New implementation

daine commented Jun 26, 2024

ethanWallace commented Jun 27, 2024

melaniebmn left a comment

Choose a reason for hiding this comment

daine Jul 3, 2024

Choose a reason for hiding this comment

daine left a comment

Choose a reason for hiding this comment

daine Jul 4, 2024

Choose a reason for hiding this comment

melaniebmn left a comment

Choose a reason for hiding this comment

ethanWallace commented Jul 5, 2024

daine left a comment • edited Loading

Choose a reason for hiding this comment

melaniebmn left a comment

Choose a reason for hiding this comment

daine left a comment

Choose a reason for hiding this comment

daine left a comment

Choose a reason for hiding this comment

melaniebmn left a comment

Choose a reason for hiding this comment

ethanWallace commented Jun 26, 2024 •

edited

Loading

daine left a comment •

edited

Loading