Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ✨ add sd-step & sd-step-group #304

Closed
27 of 33 tasks
karlbaumhauer opened this issue Aug 1, 2023 · 2 comments · Fixed by #1007
Closed
27 of 33 tasks

feat: ✨ add sd-step & sd-step-group #304

karlbaumhauer opened this issue Aug 1, 2023 · 2 comments · Fixed by #1007
Assignees
@yoezlem
Labels
CL-migration All components which need to be migrated from Component Library 🙌 Epic

Comments

@karlbaumhauer
Copy link
Contributor

karlbaumhauer commented Aug 1, 2023 •
edited by yoezlem

User Story

As a user of the Solid Design System, I want to use a sd-step-group component for smooth navigation through task steps.

Design Branch v1.0.0

https://www.figma.com/file/VTztxQ5pWG7ARg8hCX6PfR/branch/XQ86g7rO9VAF1zCeb3fMlh/Solid-DS-%E2%80%93-Component-Library?type=design&node-id=19206-26790&mode=design&t=JudeeRyagcu3nT60-0

Documentation

https://www.figma.com/file/RQSSKJKUI90k21fK8DDK3q/Progress-Steps?type=design&node-id=1202-9493&mode=design&t=fD5NNuUK6I7kSPez-0

Hand-off

https://www.figma.com/file/RQSSKJKUI90k21fK8DDK3q/Progress-Steps?type=design&node-id=6-4&mode=design&t=fD5NNuUK6I7kSPez-0

sd-step

Components detailed requirements

Props

Status Name Type Default Description
size lg / sm lg Choose between lg for standard progress-steps or sm for tight spaces
orientation horizontal / vertical horizontal Choose between the 2 variants: horizontal & vertical.
state waiting/finished/inProgress waiting The indicator helps end users being aware of where they currently are within the process or task in relation to where they have been, and what to follow.
noTail boolean false The border of the sd-step component.The border must extend 100% wide so that it can dock directly to the next sd-step component
label string `` Shows the label of the sd-step component. If you need to display HTML, use the label slot instead.
description string `` Shows the description of the sd-step component. If you need to display HTML, use the description slot instead.

Parts (besides the shoelace parts)

  • every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

Slots

  • label - The progress-step label. Alternatively, you can use the label attribute.
  • default - The sd-step description. Alternatively, you can use the description attribute.

Stories (besides the default story)

  • Orientation - Shows both orientation (horizontal & vertical)
  • Size x State - Show in a table both sizes with the different states

sd-step-group

Components detailed requirements

Props

Status Name Type Default Description
size lg / sm lg The progress-steps group's size. This size will be applied to all child of sd-step
orientation vertical / horizontal horizontal The Group orientation. The orientation will be applied to all child of sd-step

Parts (besides the shoelace parts)

  • every other HTML element (depending on the HTML structure) => NOTE: if highlighting the parts in the parts story does not work out of the box, do not spend more effort on it but open a bug ticket to tackle it later.

Stories (besides the default story)

  • Size - (description)
  • Orientation - Shows both orientations (horizontal & vertical)

Samples

  • name - add sd-media with an image inside the default slot (check the sample section for Figma Design Branch v1.0.0 Link)

Methods

Status Name Description
setActiveStep Sets the active step-item

Open Questions towards design

  • Question1
  • Question2

Technical Information

  • Steps that are completed must be clickable. The state from the previous one should also change back to waiting (check the click bahaviour here: https://ant.design/components/steps#steps-demo-clickable)
  • For the noTail property the pseudo-element ::after could be a thing
    • decided to move away from pseudo-elements since they need absolute styles and those do not work well when steps are used together
  • Focus state needs to be done for the sd-step component (state: finished). Please refer to the Figma branch v1.0.0 link für further clarification.
  • you can use sd-paragraph for the label and default slot.

Subtasks

DoR

  • Item has business value
  • All subtasks have been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

DoD

  • All subtasks have been closed
@karlbaumhauer karlbaumhauer added the 🔧 code needs changes in code label Nov 14, 2023
@karlbaumhauer karlbaumhauer modified the milestone: 2024-01-30 Nov 15, 2023
@yoezlem yoezlem changed the title feat: ✨ add sd-progress-setps feat: ✨ add sd-progress-steps Jan 16, 2024
@yoezlem yoezlem added the CL-migration All components which need to be migrated from Component Library label Jan 16, 2024
@yoezlem yoezlem self-assigned this Feb 28, 2024
@yoezlem
Copy link
Contributor

yoezlem commented Mar 8, 2024

Found this one: #744 which is a new variant for the sd-progress-step. Do we want to cover that in our story or leave it like it is?

@yoezlem yoezlem changed the title feat: ✨ add sd-progress-steps feat: ✨ add sd-progress-step && sd-progress-steps Mar 8, 2024
@yoezlem yoezlem changed the title feat: ✨ add sd-progress-step && sd-progress-steps feat: ✨ add sd-progress-step & sd-progress-steps Mar 8, 2024
@karlbaumhauer
Copy link
Contributor Author

Found this one: #744 which is a new variant for the sd-progress-step. Do we want to cover that in our story or leave it like it is?

this was excluded in a new ticket as it is not CL-migration related. I would leave it in a separate ticket.

@yoezlem yoezlem changed the title feat: ✨ add sd-progress-step & sd-progress-steps feat: ✨ add sd-progress-steps-item & sd-progress-steps Mar 8, 2024
@yoezlem yoezlem changed the title feat: ✨ add sd-progress-steps-item & sd-progress-steps feat: ✨ add sd-step & sd-step-group Mar 15, 2024
@yoezlem yoezlem removed their assignment Mar 18, 2024
@Vahid1919 Vahid1919 self-assigned this Mar 22, 2024
@Vahid1919 Vahid1919 mentioned this issue May 2, 2024
Merged
5 tasks
@Vahid1919 Vahid1919 linked a pull request May 2, 2024 that will close this issue
feat: ✨ add sd-step & sd-step-group #1007
Merged
5 tasks
This was referenced May 3, 2024
Closed
Closed
@yoezlem yoezlem assigned yoezlem and unassigned Vahid1919 May 3, 2024
@yoezlem yoezlem added 🙌 Epic and removed 🔧 code needs changes in code labels May 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yoezlem yoezlem

Labels
CL-migration All components which need to be migrated from Component Library 🙌 Epic
Projects
Solid Design System Project Board
Status: ✅ Done
[legacy] - SDS Roadmap
Status: Planned
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: ✨ add sd-step & sd-step-group solid-design-system/solid
3 participants
@karlbaumhauer @Vahid1919 @yoezlem