Skip to content

Commit db0370d

Browse files
cdransfcdransf
committed
chore(swatch+swatchgroup): swap none to partial rounding as the default; add missing isAddSwatch arg for swatchgroup story
1 parent 044c357 commit db0370d

File tree

6 files changed

+26
-24
lines changed

6 files changed

+26
-24
lines changed

‎components/swatch/dist/metadata.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
1616
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after",
1717
".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before",
18-
".spectrum-Swatch--roundingPartial",
19-
".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill",
20-
".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill:before",
21-
".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill",
22-
".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill:before",
23-
".spectrum-Swatch--roundingPartial:after",
24-
".spectrum-Swatch--roundingPartial:before",
18+
".spectrum-Swatch--roundingNone",
19+
".spectrum-Swatch--roundingNone .spectrum-Swatch-fill",
20+
".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before",
21+
".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
22+
".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
23+
".spectrum-Swatch--roundingNone:after",
24+
".spectrum-Swatch--roundingNone:before",
2525
".spectrum-Swatch--sizeL",
2626
".spectrum-Swatch--sizeM",
2727
".spectrum-Swatch--sizeXS",

‎components/swatch/index.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
/* Size */
2121
--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
22-
--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
22+
--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
2323
--spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100));
2424
--spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200));
2525
--spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
@@ -328,16 +328,16 @@
328328
inline-size: calc(var(--spectrum-swatch-size) * var(--spectrum-swatch-rectangle-width-multiplier));
329329
}
330330

331-
/* Variant: Rounding - Partial */
332-
.spectrum-Swatch--roundingPartial {
331+
/* Variant: Rounding - None */
332+
.spectrum-Swatch--roundingNone {
333333
&,
334334
&::before,
335335
&::after,
336336
.spectrum-Swatch-fill,
337337
.spectrum-Swatch-fill::before,
338338
&.is-selected .spectrum-Swatch-fill,
339339
&.is-selected .spectrum-Swatch-fill::before {
340-
border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
340+
border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
341341
}
342342
}
343343

‎components/swatch/stories/swatch.stories.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ export default {
3131
rounding: {
3232
name: "Rounding",
3333
description: "The amount of corner rounding for a swatch.",
34-
defaultValue: "regular",
34+
defaultValue: "partial",
3535
type: { name: "string" },
3636
table: {
3737
type: { summary: "string", required: true },
3838
category: "Component",
39-
defaultValue: { summary: "regular", },
39+
defaultValue: { summary: "partial", },
4040
},
41-
options: ["regular", "partial", "full"],
41+
options: ["partial", "none", "full"],
4242
control: "select",
4343
},
4444
isDisabled,
@@ -111,7 +111,7 @@ export default {
111111
isDisabled: false,
112112
isHovered: false,
113113
isKeyboardFocused: false,
114-
rounding: "regular",
114+
rounding: "partial",
115115
swatchColor: "rgb(174, 216, 230)",
116116
borderStyle: "default",
117117
shape: "square",
@@ -165,7 +165,7 @@ Disabled.parameters = {
165165
};
166166

167167
/**
168-
* Full rounding is usually used when a swatch is presented by itself near other components.
168+
* 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.
169169
*/
170170
export const Rounding = RoundingGroup.bind({});
171171
Rounding.tags = ["!dev"];

‎components/swatch/stories/template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const Template = ({
2222
isDisabled = false,
2323
isHovered = false,
2424
isKeyboardFocused = false,
25-
rounding = "regular",
25+
rounding = "partial",
2626
customClasses = [],
2727
swatchColor,
2828
customStyles = {},
@@ -55,7 +55,7 @@ export const Template = ({
5555
typeof size !== "undefined",
5656
[`${rootClass}--rounding${capitalize(
5757
lowerCase(rounding)
58-
)}`]: typeof rounding !== "undefined" && rounding !== "regular",
58+
)}`]: typeof rounding !== "undefined" && rounding !== "partial",
5959
[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
6060
"is-selected": !isDisabled && isSelected,
6161
"is-disabled": isDisabled,

‎components/swatchgroup/stories/swatchgroup.stories.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,14 @@ export default {
5151
},
5252
rounding: {
5353
...Swatch.argTypes.rounding,
54-
defaultValue: "regular",
54+
defaultValue: "partial",
5555
table: {
5656
type: { summary: "string", required: true },
5757
category: "Component",
58-
defaultValue: { summary: "regular", },
58+
defaultValue: { summary: "partial", },
5959
},
6060
},
61+
isKeyboardFocused: { table: { disable: true } },
6162
borderStyle: {
6263
...Swatch.argTypes.borderStyle,
6364
defaultValue: "noBorder",
@@ -75,11 +76,12 @@ export default {
7576
rootClass: "spectrum-SwatchGroup",
7677
size: "m",
7778
density: "regular",
78-
rounding: "regular",
79+
rounding: "partial",
7980
borderStyle: "noBorder",
8081
containerWidth: "200px",
8182
isDisabled: false,
8283
isSelected: false,
84+
isAddSwatch: false,
8385
items: [
8486
{swatchColor: "rgb(184, 109, 70)",},
8587
{swatchColor: "rgb(240, 56, 35)",},

‎components/swatchgroup/stories/template.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Template = ({
1212
customClasses = [],
1313
size = "m",
1414
density = "regular",
15-
rounding = "regular",
15+
rounding = "partial",
1616
borderStyle = "noBorder",
1717
containerWidth,
1818
items = [],
@@ -62,11 +62,11 @@ export const RoundingTemplate = (args, context) => Container({
6262
}, context)}
6363
${Container({
6464
withBorder: false,
65-
heading: "Regular",
65+
heading: "Partial",
6666
containerStyles: {"gap": "8px",},
6767
content: Template({
6868
...args,
69-
rounding: "regular",
69+
rounding: "partial",
7070
}, context)
7171
}, context)}
7272
${Container({

0 commit comments

Comments
 (0)