Skip to content

Commit eec2584

Browse files
rise-erpeldingrise-erpelding
committed
fix(tag): make small tag's default size
1 parent f73d63e commit eec2584

File tree

4 files changed

+44
-44
lines changed

4 files changed

+44
-44
lines changed

‎components/tag/dist/metadata.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):focus-visible",
1313
".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):hover",
1414
".spectrum-Tag--sizeL",
15-
".spectrum-Tag--sizeS",
15+
".spectrum-Tag--sizeM",
1616
".spectrum-Tag.is-disabled",
1717
".spectrum-Tag.is-disabled .spectrum-Avatar",
1818
".spectrum-Tag.is-disabled .spectrum-Thumbnail",

‎components/tag/index.css

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -66,32 +66,32 @@
6666
--spectrum-tag-background-color-disabled: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)));
6767
--spectrum-tag-content-color-disabled: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)));
6868

69-
/* default size/sizeM */
70-
--spectrum-tag-height: var(--spectrum-component-height-100);
71-
--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium);
72-
--spectrum-tag-font-size: var(--spectrum-font-size-100);
73-
--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
74-
--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
69+
/* default size/sizeS */
70+
--spectrum-tag-height: var(--spectrum-component-height-75);
71+
--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small);
72+
--spectrum-tag-font-size: var(--spectrum-font-size-75);
73+
--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
74+
--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small);
7575

76-
--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100);
77-
--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
78-
--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium);
79-
--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium);
76+
--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75);
77+
--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
78+
--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small);
79+
--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small);
8080

81-
--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
82-
--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100);
81+
--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
82+
--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75);
8383

84-
--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
85-
--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
84+
--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
85+
--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
8686

87-
--spectrum-tag-avatar-size: var(--spectrum-avatar-size-100);
88-
--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
89-
--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
87+
--spectrum-tag-avatar-size: var(--spectrum-avatar-size-50);
88+
--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
89+
--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
9090

91-
--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75);
91+
--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50);
9292

93-
--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
94-
--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100);
93+
--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
94+
--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75);
9595

9696
/* @passthrough start for nested components */
9797
--mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size));
@@ -112,33 +112,33 @@
112112
}
113113
}
114114

115-
/* t-shirt sizes */
116-
.spectrum-Tag--sizeS {
117-
--spectrum-tag-height: var(--spectrum-component-height-75);
118-
--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small);
119-
--spectrum-tag-font-size: var(--spectrum-font-size-75);
120-
--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
121-
--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small);
115+
/* t-shirt sizes - small is default */
116+
.spectrum-Tag--sizeM {
117+
--spectrum-tag-height: var(--spectrum-component-height-100);
118+
--spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium);
119+
--spectrum-tag-font-size: var(--spectrum-font-size-100);
120+
--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
121+
--spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
122122

123-
--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75);
124-
--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
125-
--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small);
126-
--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small);
123+
--spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100);
124+
--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
125+
--spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium);
126+
--spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium);
127127

128-
--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
129-
--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75);
128+
--spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
129+
--spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100);
130130

131-
--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
132-
--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
131+
--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
132+
--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
133133

134-
--spectrum-tag-avatar-size: var(--spectrum-avatar-size-50);
135-
--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
136-
--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
134+
--spectrum-tag-avatar-size: var(--spectrum-avatar-size-100);
135+
--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
136+
--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
137137

138-
--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50);
138+
--spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75);
139139

140-
--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
141-
--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75);
140+
--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
141+
--spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100);
142142
}
143143

144144
.spectrum-Tag--sizeL {

‎components/tag/stories/tag.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default {
7979
},
8080
args: {
8181
rootClass: "spectrum-Tag",
82-
size: "m",
82+
size: "s",
8383
label: "Tag label",
8484
iconName: "Circle",
8585
avatarUrl: "example-ava.png",

‎components/tag/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import "../index.css";
1313

1414
export const Template = ({
1515
rootClass = "spectrum-Tag",
16-
size = "m",
16+
size = "s",
1717
iconName = "",
1818
avatarUrl = "",
1919
thumbnailUrl = "",

0 commit comments

Comments
 (0)