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
docs(swatch,swatchgroup,table,tabs): docs migrations to storybook (#2925)
* docs(swatch): adds missing variants, expands test coverage
- missing stories are added
- additional template to support new stories
- expands chromatic test cases
* docs(swatchgroup): adds missing variants, test coverage
- adds missing stories to docs page
- expands Chromatic test cases
- adds documentation for border classes, density and corner rounding
* docs(tabs): adds stories and test cases
- adds missing variants to docs page
- expands Chromatic test coverage
- enhances coverage to support new variants
* docs(table): adds stories and test cases
- migration guide notes are moved to CHANGELOG
- adds missing stories to docs page
- enhances template to support new variants
- expands Chromatic test coverage
* docs(swatch,swatchgroup,table): clean up
- renames withBorder arg to borderStyle since it isn't a boolean arg for
swatch/swatchgroup
- refactors template and test files to reflect arg name changes
- removes unnecessary comments
- removes unnecessary literals in Container() functions
- corrects withColumnDividers arg name to hasColumnDividers in default
table args
- corrects sentence case in table control args
- extend swatch.argtypes and fix containerWidth
- fix sizing docs description
- uses "Density - Compact" and "Density - Spacious" as story names so that
both stories will be next to each other on the docs page.
- calls out the default, regular density for the default table in the
story description
* chore(tabs): add backticks to token reference in docs
docs(tabs): use passive voice in docs descriptions
* docs(swatch): update descriptions for controls
- adds descriptions in the control table for isMixedValue, rounding, and
imageUrl
- adds a better description for gradient control
- changes gradient control from color to text to make it clearer that a
user can input their own gradient examples.
- change from isRectangle boolean, to shape inline-radio control
- add description for rectangle control
- update template.js & test file as needed for refactored rectangle
- add nothing/empty story docs description
- add opacity examples to swatch stories
* docs(swatchgroup): add rounding none to roundinggroup
chore(swatchgroup): remove shape control from control table
* docs(tabs): update wording on docs page
* chore(table): table clean up
- fix sentence case in control table
- because certain variants cannot be created from the default story,
this adds stories to sidebar them back to the navigation for users to
view and further edit via the controls
- adds description of the quiet multi-select, that has emphasized styles
by default, and how to remove those emphasized styles to clarify quiet
emphasized multi-select story
* docs(swatchgroup): refactor swatches and borders
- in most stories, swatchgroup now uses colors that now meet contrast in
both our light and dark mode to properly show the "default" of having no
border on the swatches in the swatchgroup
- for the light border story, a new set of colors that don't meet color
contrast for light mode are implemented
- the rounding template was updated to use a selection of the new colors
that meet contrast
- updated light border swatch colors for the light border test case
* docs(swatch): fix no color/empty story and test
- adds documentation around making sure the default border is applied in
cases where a swatch is empty/undefined
- updates the no-color test case to apply the default border
- removes non-existent swatch arguments isGradient and isImage
- fix rectangle story name to shape
* docs(swatch,swatchgroup,tabs): pr fixes
- fixes case of defaultValues swatch/swatchgroup
- uses shorthand for borderStyles in swatch and converts in template now
- simplifies isDisabled, isSelected assignments in swatchgroup template
- removes unnecessary destructuring in tabs
* chore(tabs): use getRandomId to generate ids for tabs/tabitems
* chore(table): fix sentence case in table cells
description: "The gradient preview within the swatch. Input a gradient example, such as <code>linear-gradient(red, blue)</code>.",
80
+
type: {name: "string"},
81
+
table: {
82
+
type: {summary: "string"},
83
+
category: "Component",
84
+
},
85
+
control: "text",
86
+
},
87
+
isMixedValue: {
88
+
name: "Mixed value",
89
+
description: "A swatch that represents multiple values that are not identical.",
90
+
type: {name: "boolean"},
91
+
table: {
92
+
type: {summary: "boolean"},
93
+
category: "Component",
94
+
},
95
+
control: "boolean",
96
+
},
35
97
},
36
98
args: {
37
99
rootClass: "spectrum-Swatch",
38
100
size: "m",
39
101
isSelected: false,
40
102
isDisabled: false,
41
103
rounding: "regular",
42
-
swatchColor: "rgb(174, 216, 230)"
104
+
swatchColor: "rgb(174, 216, 230)",
105
+
borderStyle: "default",
106
+
shape: "square",
107
+
isMixedValue: false,
43
108
},
44
109
parameters: {
45
110
packageJson: pkgJson,
46
111
},
47
112
};
48
113
114
+
/**
115
+
* The medium size is the default and most frequently used option. By default, a swatch has a square shape.
116
+
*/
49
117
exportconstDefault=SwatchGroup.bind({});
50
118
Default.args={};
51
119
120
+
// ********* DOCS ONLY ********* //
121
+
/**
122
+
* The medium size is the default. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
123
+
*/
124
+
exportconstSizing=(args,context)=>Sizes({
125
+
Template: SizingGroup,
126
+
withHeading: false,
127
+
...args,
128
+
},context);
129
+
Sizing.tags=["!dev"];
130
+
Sizing.parameters={
131
+
chromatic: {disableSnapshot: true},
132
+
};
133
+
134
+
/**
135
+
* A swatch in a disabled state shows that the swatch exists, but is not available in that circumstance. Even though swatches can have a disabled state, hide unavailable swatches when possible to reduce visual clutter and ease cognitive load. Only show disabled swatches if hiding them would cause confusion to your users.
136
+
*/
137
+
exportconstDisabled=(args,context)=>Sizes({
138
+
Template: DisabledGroup,
139
+
withHeading: false,
140
+
...args,
141
+
},context);
142
+
Disabled.args={
143
+
isDisabled: true,
144
+
};
145
+
Disabled.tags=["!dev"];
146
+
Disabled.parameters={
147
+
chromatic: {disableSnapshot: true},
148
+
};
149
+
150
+
/**
151
+
* Default rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of “none” is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group.
152
+
*/
153
+
exportconstRounding=RoundingGroup.bind({});
154
+
Rounding.tags=["!dev"];
155
+
Rounding.args={
156
+
swatchColor: "rgba(174, 216, 230, 0.25)",
157
+
};
158
+
Rounding.parameters={
159
+
chromatic: {disableSnapshot: true},
160
+
};
161
+
162
+
/**
163
+
* A swatch can have a selected state to allow for selection. This is often used in a [swatch group](?path=/docs/components-swatch-group--docs).
164
+
*/
165
+
exportconstSelected=Template.bind({});
166
+
Selected.args={
167
+
isSelected: true,
168
+
};
169
+
Selected.tags=["!dev"];
170
+
Selected.parameters={
171
+
chromatic: {disableSnapshot: true},
172
+
};
173
+
174
+
/**
175
+
* By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations.
176
+
* - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class.
177
+
* - When and only when color swatches used in a swatch group have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class.
178
+
*/
179
+
exportconstBorder=BorderGroup.bind({});
180
+
Border.tags=["!dev"];
181
+
Border.parameters={
182
+
chromatic: {disableSnapshot: true},
183
+
};
184
+
185
+
/**
186
+
* Swatches can also have a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors).
187
+
*/
188
+
exportconstShape=Template.bind({});
189
+
Shape.args={
190
+
shape: "rectangle",
191
+
swatchColor: "rgba(174, 216, 230, 0.25)",
192
+
};
193
+
Shape.tags=["!dev"];
194
+
Shape.parameters={
195
+
chromatic: {disableSnapshot: true},
196
+
};
197
+
Shape.storyName="Shape - rectangle";
198
+
199
+
/**
200
+
* A swatch will appear "empty" when its preview is undefined, for instance when the image or gradient is undefined, or when a swatch color is transparent. The `.is-nothing` class is applied to the swatch in these cases. Implementations should ensure that the default border style is applied when a swatch is empty.
201
+
*/
202
+
exportconstEmpty=(args,context)=>Sizes({
203
+
Template: EmptyGroup,
204
+
withHeading: false,
205
+
...args,
206
+
},context);
207
+
Empty.args={
208
+
swatchColor: "transparent",
209
+
};
210
+
Empty.tags=["!dev"];
211
+
Empty.parameters={
212
+
chromatic: {disableSnapshot: true},
213
+
};
214
+
215
+
/**
216
+
* When a swatch represents multiple values that are not identical, the preview shows a `gray-50` fill and a dash UI icon.
0 commit comments