You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*State whether this component be part of Nimble or Spright and provide justification or considerations leading to that decision.*
21
+
<!-- *State whether this component be part of Nimble or Spright and provide justification or considerations leading to that decision.* -->
22
+
23
+
Nimble, general component
18
24
19
25
### Non-goals
20
26
21
-
*A list of use cases, features, or functionality which are **not** goals for the component.*
22
-
27
+
<!-- *A list of use cases, features, or functionality which are **not** goals for the component.* -->
28
+
29
+
- Very long lists of steps
30
+
- Non-linear steps
31
+
23
32
### Features
24
33
25
-
*A list of the key features unique to this component.*
34
+
- Similar to a breadcrumb but with more visual states
26
35
27
36
### Risks and Challenges
28
37
29
-
*Notable risks or challenges associated with implementing the component. Would we need to make any breaking changes in order to achieve this component's goals?*
38
+
<!--*Notable risks or challenges associated with implementing the component. Would we need to make any breaking changes in order to achieve this component's goals?*-->
30
39
31
-
### Prior Art/Examples
40
+
No known new risks or challenges
32
41
33
-
- Carbon design system progress: <https://carbondesignsystem.com/components/progress-indicator/usage/>
42
+
### Prior Art / Examples
34
43
35
-
*Screenshots and/or links to existing, canonical, or exemplary implementations of the component.*
*Describe the design of the component, thinking through several perspectives:*
52
+
<!--*Describe the design of the component, thinking through several perspectives:*
42
53
43
54
- *A customer using the component on a web page.*
44
55
- *A developer building an app with the component and interacting through HTML/CSS/JavaScript.*
45
56
- *A designer customizing the component.*
46
57
47
58
*Include code snippets showing basic component use and any interesting configurations.*
48
59
49
-
*For each section below, consider adding an "Alternatives" sub-section to describe any design alternatives and discuss why they were rejected.*
60
+
*For each section below, consider adding an "Alternatives" sub-section to describe any design alternatives and discuss why they were rejected.* -->
61
+
62
+
The `nimble-stepper` acts a a progress indicator for a wizard / step-by-step workflow. It behaves conceptually as either a collection of card buttons (i.e. collection of `nimble-step`) or as a breadcrumb (i.e. collection of `nimble-anchor-step`). Each item has a severity state associated with it (potentially with extra detail messages to show) and the ability to show what state is the "current" selected step that the user is on.
63
+
64
+
The `nimble-stepper` is just for layout, placing steps either horizontal or vertical orientation and communicating internal state to child steps as needed (ideally just via style)
65
+
50
66
51
67
### API
52
68
53
-
*The key elements of the component's public API surface:*
69
+
<!--*The key elements of the component's public API surface:*
54
70
55
71
- *Component Name*
56
72
- *Props/Attrs: to match native element APIs, prefer primitive types rather than complex configuration objects and expose fields as both properties on the TypeScript class and attributes on the HTML element*
@@ -59,7 +75,14 @@ The `nimble-stepper-group` and
59
75
- *CSS Classes and CSS Custom Properties that affect the component*
*Consider high and low-level APIs. Attempt to design a powerful and extensible low-level API with a high-level API for developer/designer ergonomics and simplicity.*
78
+
*Consider high and low-level APIs. Attempt to design a powerful and extensible low-level API with a high-level API for developer/designer ergonomics and simplicity.* -->
79
+
80
+
-`nimble-stepper`
81
+
-*Props/Attrs: to match native element APIs, prefer primitive types rather than complex configuration objects and expose fields as both properties on the TypeScript class and attributes on the HTML element*
82
+
-*Methods*
83
+
-*Events*
84
+
-*CSS Classes and CSS Custom Properties that affect the component*
85
+
-*How native CSS Properties (height, width, etc.) affect the component*
63
86
64
87
### Anatomy
65
88
@@ -72,13 +95,17 @@ The `nimble-stepper-group` and
72
95
73
96
### Native form integration
74
97
75
-
*Describe the plan for custom element form integration or why it's not necessary.*
98
+
<!-- *Describe the plan for custom element form integration or why it's not necessary.*
99
+
100
+
*Components that are intended to replace a native form element (input, textarea, select) should generally behave like their native counterpart. See ["More capable form controls" on web.dev](https://web.dev/articles/more-capable-form-controls) for an overview of requirements. Leverage patterns from [FAST Form Associated Custom Elements](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/form-associated/form-associated-custom-element.spec.md).* -->
76
101
77
-
*Components that are intended to replace a native form element (input, textarea, select) should generally behave like their native counterpart. See ["More capable form controls" on web.dev](https://web.dev/articles/more-capable-form-controls) for an overview of requirements. Leverage patterns from [FAST Form Associated Custom Elements](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/form-associated/form-associated-custom-element.spec.md).*
102
+
N/A
78
103
79
104
### Angular integration
80
105
81
-
*Describe the plan for Angular support, including directives for attribute binding and ControlValueAccessor for form integration. Depending on the contributor's needs, implementing Angular integration may be deferred but the initial spec should still document what work will be needed.*
106
+
<!-- *Describe the plan for Angular support, including directives for attribute binding and ControlValueAccessor for form integration. Depending on the contributor's needs, implementing Angular integration may be deferred but the initial spec should still document what work will be needed.* -->
107
+
108
+
Angular `routerLink` integration for `nimble-anchor-step`
82
109
83
110
### Blazor integration
84
111
@@ -118,11 +145,13 @@ The `nimble-stepper-group` and
118
145
119
146
### Mobile
120
147
121
-
*Consider how the component will behave on mobile devices, including:*
148
+
<!--*Consider how the component will behave on mobile devices, including:*
122
149
123
150
- *Overflow behavior when screen space is constrained*
124
151
- *Interactions that are affected by touch rather than a pointer device (e.g. hover)*
125
-
-*Integration with common mobile experiences like native pickers, on-screen keyboards, and dictation*
152
+
- *Integration with common mobile experiences like native pickers, on-screen keyboards, and dictation* -->
0 commit comments