Skip to content

Commit 7a5b4e7

Browse files
mainframevmainframev
committed
fix(stories): visual fixes to Tag, InteractionTag, TagGroup stories
1 parent da6ecd3 commit 7a5b4e7

8 files changed

Lines changed: 139 additions & 247 deletions

File tree

‎packages/react-components/react-headless-components-preview/stories/src/Tags/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export const HasPrimaryAction = (): React.ReactNode => (
1818
<PopoverSurface className={styles.popover}>
1919
<a href="https://en.wikipedia.org/wiki/Golden_Retriever">Find out more on wiki</a>
2020
<ul>
21-
<li>Size: Medium to large-sized dog breed.</li>
22-
<li>Coat: Luxurious double coat with a dense, water-repellent outer layer and a soft, dense undercoat.</li>
23-
<li>Color: Typically a luscious golden or cream color, with variations in shade.</li>
24-
<li>Build: Sturdy and well-proportioned body with a friendly and intelligent expression.</li>
21+
<li>Medium to large-sized breed</li>
22+
<li>Dense, water-repellent coat</li>
23+
<li>Golden or cream color</li>
24+
<li>Friendly, intelligent</li>
2525
</ul>
2626
</PopoverSurface>
2727
</Popover>

‎packages/react-components/react-headless-components-preview/stories/src/Tags/InteractionTag/InteractionTagSecondaryText.stories.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@ export const SecondaryText = (): React.ReactNode => (
88
<InteractionTag className={styles.interactionTag}>
99
<InteractionTagPrimary
1010
className={styles.primary}
11+
primaryText={{ className: styles.primaryText, children: 'Primary text' }}
1112
secondaryText={{ className: styles.secondaryText, children: 'Secondary text' }}
12-
>
13-
Primary text
14-
</InteractionTagPrimary>
13+
/>
1514
</InteractionTag>
1615
);
1716

‎packages/react-components/react-headless-components-preview/stories/src/Tags/InteractionTag/interactionTag.module.css‎

Lines changed: 77 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
.interactionTag {
22
display: inline-flex;
33
align-items: stretch;
4-
border-radius: var(--radius-pill);
4+
border-radius: var(--radius-md);
55
overflow: hidden;
66
border: 1px solid var(--border-strong);
77
background: var(--surface);
88
font-size: 12px;
9-
height: 28px;
9+
min-height: 28px;
10+
width: max-content;
11+
max-width: 100%;
1012
}
1113

1214
.interactionTag[data-selected] {
@@ -25,41 +27,84 @@
2527
background: transparent;
2628
color: inherit;
2729
font: inherit;
28-
padding: 0 12px;
30+
padding: 4px 12px;
2931
cursor: pointer;
30-
display: inline-flex;
32+
display: inline-grid;
33+
grid-template-areas:
34+
'media primary'
35+
'media secondary';
3136
align-items: center;
32-
gap: 6px;
37+
align-content: center;
38+
justify-items: start;
39+
border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
3340
}
3441

3542
.primary:hover {
3643
background: var(--surface-muted);
3744
}
3845

39-
.primary:focus-visible,
40-
.secondary:focus-visible {
41-
outline: none;
42-
box-shadow: 0 0 0 2px var(--bg-elev) inset, 0 0 0 4px var(--accent) inset;
46+
.interactionTag[data-selected] .primary:hover {
47+
background: color-mix(in srgb, var(--accent) 85%, white);
4348
}
4449

4550
.primary[data-disabled] {
4651
cursor: not-allowed;
4752
opacity: 0.5;
4853
}
4954

50-
.icon {
55+
.secondary {
56+
appearance: none;
57+
border: none;
58+
background: transparent;
59+
color: inherit;
60+
padding: 0 10px;
61+
cursor: pointer;
5162
display: inline-flex;
5263
align-items: center;
5364
justify-content: center;
54-
width: 14px;
55-
height: 14px;
56-
flex-shrink: 0;
65+
border-left: 1px solid var(--border);
66+
border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
67+
}
68+
69+
.secondary:hover {
70+
background: var(--surface-muted);
71+
}
72+
73+
.interactionTag[data-selected] .secondary {
74+
border-left-color: color-mix(in srgb, var(--accent-contrast) 30%, transparent);
75+
}
76+
77+
.interactionTag[data-selected] .secondary:hover {
78+
background: color-mix(in srgb, var(--accent) 85%, white);
79+
}
80+
81+
.interactionTag:not(:has(.secondary)) .primary {
82+
border-radius: calc(var(--radius-md) - 1px);
83+
}
84+
85+
.primary:focus-visible,
86+
.secondary:focus-visible {
87+
outline: 2px solid var(--accent);
88+
outline-offset: -2px;
89+
}
90+
91+
.interactionTag[data-selected] .primary:focus-visible,
92+
.interactionTag[data-selected] .secondary:focus-visible {
93+
outline-color: var(--accent-contrast);
94+
}
95+
96+
.icon {
97+
composes: icon from '../Tag/tag.module.css';
5798
}
5899

59100
.media {
101+
grid-area: media;
102+
align-self: center;
60103
display: inline-flex;
61104
align-items: center;
62105
justify-content: center;
106+
flex-shrink: 0;
107+
margin-right: 6px;
63108
width: 24px;
64109
height: 24px;
65110
margin-left: -6px;
@@ -71,31 +116,19 @@
71116
}
72117

73118
.primaryText {
74-
display: inline-flex;
75-
align-items: baseline;
119+
composes: primaryText from '../Tag/tag.module.css';
76120
}
77121

78-
.secondaryText {
79-
margin-left: 4px;
80-
font-size: 11px;
81-
color: var(--text-muted);
122+
.primary:not(:has(> .secondaryText)) > .primaryText {
123+
grid-row-end: secondary;
82124
}
83125

84-
.secondary {
85-
appearance: none;
86-
border: none;
87-
background: transparent;
88-
color: inherit;
89-
padding: 0 10px;
90-
cursor: pointer;
91-
display: inline-flex;
92-
align-items: center;
93-
justify-content: center;
94-
border-left: 1px solid var(--border);
126+
.secondaryText {
127+
composes: secondaryText from '../Tag/tag.module.css';
95128
}
96129

97-
.secondary:hover {
98-
background: var(--surface-muted);
130+
.interactionTag[data-selected] .secondaryText {
131+
color: color-mix(in srgb, var(--accent-contrast) 80%, transparent);
99132
}
100133

101134
.demo {
@@ -130,19 +163,26 @@
130163
}
131164

132165
.popover {
133-
width: 360px;
134-
max-width: 100%;
135-
padding: 16px;
166+
width: max-content;
167+
max-width: min(320px, calc(100vw - 32px));
168+
padding: 12px 14px;
136169
background: var(--surface);
137170
color: var(--text);
171+
font-size: 12px;
172+
line-height: 1.4;
138173
border: 1px solid var(--border);
139174
border-radius: var(--radius-md);
140175
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
176+
box-sizing: border-box;
141177
}
142178

143179
.popover ul {
144-
margin: 8px 0 0;
145-
padding-left: 20px;
180+
margin: 6px 0 0;
181+
padding-left: 18px;
182+
}
183+
184+
.popover li + li {
185+
margin-top: 2px;
146186
}
147187

148188
.popover a {

‎packages/react-components/react-headless-components-preview/stories/src/Tags/Tag/TagSecondaryText.stories.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { Tag } from '@fluentui/react-headless-components-preview/tag';
44
import styles from './tag.module.css';
55

66
export const SecondaryText = (): React.ReactNode => (
7-
<Tag className={styles.tag} secondaryText={{ className: styles.secondaryText, children: 'Secondary text' }}>
8-
Primary text
9-
</Tag>
7+
<Tag
8+
className={styles.tag}
9+
primaryText={{ className: styles.primaryText, children: 'Primary text' }}
10+
secondaryText={{ className: styles.secondaryText, children: 'Secondary text' }}
11+
/>
1012
);
1113

1214
SecondaryText.parameters = {

‎packages/react-components/react-headless-components-preview/stories/src/Tags/Tag/tag.module.css‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
/* tag — outlined pill with selectable + dismissible states */
21
.tag {
3-
display: inline-flex;
2+
display: inline-grid;
3+
grid-template-areas:
4+
'media primary dismiss'
5+
'media secondary dismiss';
46
align-items: center;
5-
gap: 6px;
6-
height: 28px;
7+
align-content: center;
8+
justify-items: start;
9+
min-height: 28px;
10+
width: max-content;
11+
max-width: 100%;
712
padding: 0 10px;
8-
border-radius: var(--radius-pill);
13+
border-radius: var(--radius-md);
914
border: 1px solid var(--border-strong);
1015
background: var(--surface);
1116
color: var(--text);
@@ -34,12 +39,20 @@
3439
box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
3540
}
3641

42+
.tag[data-selected][data-dismissible]:focus-visible {
43+
box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-contrast);
44+
}
45+
3746
.tag[data-selected] {
3847
background: var(--accent);
3948
color: var(--accent-contrast);
4049
border-color: var(--accent);
4150
}
4251

52+
.tag[data-selected][data-dismissible]:hover {
53+
background: color-mix(in srgb, var(--accent) 85%, white);
54+
}
55+
4356
.tag[data-disabled] {
4457
opacity: 0.4;
4558
cursor: not-allowed;
@@ -49,22 +62,27 @@
4962
background: var(--surface-muted);
5063
}
5164

52-
.icon {
65+
.icon,
66+
.media {
67+
grid-area: media;
68+
align-self: center;
5369
display: inline-flex;
5470
align-items: center;
5571
justify-content: center;
72+
flex-shrink: 0;
73+
}
74+
75+
.icon {
5676
width: 14px;
5777
height: 14px;
58-
flex-shrink: 0;
78+
margin-right: 6px;
5979
}
6080

6181
.media {
62-
display: inline-flex;
63-
align-items: center;
64-
justify-content: center;
6582
width: 22px;
6683
height: 22px;
6784
margin-left: -4px;
85+
margin-right: 6px;
6886
border-radius: 50%;
6987
background: var(--accent);
7088
color: var(--accent-contrast);
@@ -73,30 +91,42 @@
7391
}
7492

7593
.primaryText {
76-
display: inline-flex;
77-
align-items: baseline;
94+
grid-area: primary;
95+
line-height: 1.2;
96+
}
97+
98+
.tag:not(:has(> .secondaryText)) > .primaryText {
99+
grid-row-end: secondary;
78100
}
79101

80102
.secondaryText {
81-
margin-left: 4px;
103+
grid-area: secondary;
82104
font-size: 11px;
83105
color: var(--text-muted);
106+
line-height: 1.2;
84107
}
85108

86109
.dismissIcon {
110+
grid-area: dismiss;
111+
align-self: center;
87112
display: inline-flex;
88113
align-items: center;
89114
justify-content: center;
90115
width: 22px;
91116
height: 22px;
92-
margin-left: 2px;
93-
border-radius: 50%;
117+
margin-left: 6px;
118+
border-radius: var(--radius-sm, 4px);
119+
flex-shrink: 0;
94120
}
95121

96122
.tag[data-dismissible]:hover .dismissIcon {
97123
background: var(--surface);
98124
}
99125

126+
.tag[data-selected] .secondaryText {
127+
color: color-mix(in srgb, var(--accent-contrast) 80%, transparent);
128+
}
129+
100130
.demo {
101131
display: flex;
102132
flex-direction: column;

0 commit comments

Comments
 (0)