Skip to content

Commit 614e8b5

Browse files
krystofmatejkaKryštof Matějkasopranopillow
authored
fix(TagItem v8): add missing data-id attribute (#31956)
Co-authored-by: Kryštof Matějka <kmatejka@microsoft.com> Co-authored-by: Esteban Munoz Facusse <estebanmu@microsoft.com>
1 parent a8c0c46 commit 614e8b5

File tree

7 files changed

+294
-0
lines changed

7 files changed

+294
-0
lines changed

‎change/@fluentui-react-aeee29c3-70b1-47de-a1a6-ee1ec2c0597d.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "add missing data-id attribute to close button in TagItem",
4+
"packageName": "@fluentui/react",
5+
"email": "kmatejka@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react/etc/react.api.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9205,11 +9205,17 @@ export interface ITag {
92059205
export interface ITagItemProps extends IPickerItemProps<ITag> {
92069206
className?: string;
92079207
enableTagFocusInDisabledPicker?: boolean;
9208+
removeButtonProps?: ITagItemRemoveButtonProps;
92089209
styles?: IStyleFunctionOrObject<ITagItemStyleProps, ITagItemStyles>;
92099210
theme?: ITheme;
92109211
title?: string;
92119212
}
92129213

9214+
// @public
9215+
export interface ITagItemRemoveButtonProps extends IButtonProps {
9216+
'data-id'?: string;
9217+
}
9218+
92139219
// @public
92149220
export type ITagItemStyleProps = Required<Pick<ITagItemProps, 'theme'>> & Pick<ITagItemProps, 'className' | 'selected' | 'disabled'> & {};
92159221

‎packages/react/src/components/pickers/TagPicker/TagItem.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,14 @@ describe('TagItem', () => {
3939
const tree = component.toJSON();
4040
expect(tree).toMatchSnapshot();
4141
});
42+
43+
it('accepts remove-button-data-id', () => {
44+
const component = renderer.create(
45+
<TagItem item={{ name: 'Red', key: 'red' }} index={0} removeButtonProps={{ 'data-id': 'close-red-x' }}>
46+
Red color
47+
</TagItem>,
48+
);
49+
const tree = component.toJSON();
50+
expect(tree).toMatchSnapshot();
51+
});
4252
});

‎packages/react/src/components/pickers/TagPicker/TagItem.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const TagItemBase = (props: ITagItemProps) => {
2525
removeButtonAriaLabel,
2626
title = typeof props.children === 'string' ? props.children : props.item.name,
2727
removeButtonIconProps,
28+
removeButtonProps,
2829
} = props;
2930

3031
const buttonRef = React.createRef<IButton>();
@@ -65,6 +66,7 @@ export const TagItemBase = (props: ITagItemProps) => {
6566
styles={{ icon: { fontSize: '12px' } }}
6667
className={classNames.close}
6768
aria-labelledby={`${itemId}-removeLabel ${itemId}-text`}
69+
{...removeButtonProps}
6870
/>
6971
<span id={`${itemId}-removeLabel`} hidden>
7072
{removeButtonAriaLabel}

‎packages/react/src/components/pickers/TagPicker/TagPicker.types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { IStyle, ITheme } from '../../../Styling';
33
import type { IStyleFunctionOrObject } from '../../../Utilities';
44
import type { IPickerItemProps } from '../PickerItem.types';
55
import type { IBasePickerProps } from '../BasePicker.types';
6+
import type { IButtonProps } from '../../Button/Button.types';
67

78
/**
89
* TagPickerItem item interface.
@@ -22,6 +23,15 @@ export interface ITag {
2223
*/
2324
export interface ITagPickerProps extends IBasePickerProps<ITag> {}
2425

26+
/**
27+
* TagItem remove button component props
28+
* {@docCategory TagPicker}
29+
*/
30+
export interface ITagItemRemoveButtonProps extends IButtonProps {
31+
/** data-id to manually trigger interaction or to identify users' interactions */
32+
'data-id'?: string;
33+
}
34+
2535
/**
2636
* TagItem component props
2737
* {@docCategory TagPicker}
@@ -47,6 +57,9 @@ export interface ITagItemProps extends IPickerItemProps<ITag> {
4757

4858
/** Theme provided by High-Order Component. */
4959
theme?: ITheme;
60+
61+
/** Allows to pass any additional props directly to the remove IconButton. */
62+
removeButtonProps?: ITagItemRemoveButtonProps;
5063
}
5164

5265
/**

‎packages/react/src/components/pickers/TagPicker/__snapshots__/TagItem.test.tsx.snap‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,260 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`TagItem accepts remove-button-data-id 1`] = `
4+
<div
5+
className=
6+
ms-TagItem
7+
{
8+
-moz-osx-font-smoothing: grayscale;
9+
-webkit-font-smoothing: antialiased;
10+
background: #f3f2f1;
11+
border-radius: 2px;
12+
box-sizing: content-box;
13+
color: #323130;
14+
cursor: default;
15+
display: flex;
16+
flex-shrink: 1;
17+
flex-wrap: nowrap;
18+
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
19+
font-size: 14px;
20+
font-weight: 400;
21+
height: 26px;
22+
line-height: 26px;
23+
margin-bottom: 2px;
24+
margin-left: 2px;
25+
margin-right: 2px;
26+
margin-top: 2px;
27+
max-width: 300px;
28+
min-width: 0px;
29+
outline: transparent;
30+
position: relative;
31+
user-select: none;
32+
}
33+
&::-moz-focus-inner {
34+
border: 0;
35+
}
36+
.ms-Fabric--isFocusVisible &:focus:after {
37+
border: 1px solid #ffffff;
38+
bottom: 1px;
39+
content: "";
40+
left: 1px;
41+
outline: 1px solid #605e5c;
42+
position: absolute;
43+
right: 1px;
44+
top: 1px;
45+
z-index: 1;
46+
}
47+
:host(.ms-Fabric--isFocusVisible) &:focus:after {
48+
border: 1px solid #ffffff;
49+
bottom: 1px;
50+
content: "";
51+
left: 1px;
52+
outline: 1px solid #605e5c;
53+
position: absolute;
54+
right: 1px;
55+
top: 1px;
56+
z-index: 1;
57+
}
58+
&:hover {
59+
background: #edebe9;
60+
color: #201f1e;
61+
}
62+
&:hover .ms-TagItem-close {
63+
color: #323130;
64+
}
65+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
66+
border: 1px solid WindowText;
67+
}
68+
data-selection-index={0}
69+
onClick={[Function]}
70+
role="listitem"
71+
>
72+
<span
73+
className=
74+
ms-TagItem-text
75+
{
76+
margin-bottom: 0;
77+
margin-left: 8px;
78+
margin-right: 8px;
79+
margin-top: 0;
80+
min-width: 30px;
81+
overflow: hidden;
82+
text-overflow: ellipsis;
83+
white-space: nowrap;
84+
}
85+
id="id__0-text"
86+
title="Red color"
87+
>
88+
Red color
89+
</span>
90+
<button
91+
aria-labelledby="id__0-removeLabel id__0-text"
92+
className=
93+
ms-Button
94+
ms-Button--icon
95+
ms-TagItem-close
96+
{
97+
-moz-osx-font-smoothing: grayscale;
98+
-webkit-font-smoothing: antialiased;
99+
align-items: center;
100+
background-color: transparent;
101+
border-radius: 0 2px 2px 0;
102+
border: none;
103+
box-sizing: border-box;
104+
color: #605e5c;
105+
cursor: pointer;
106+
display: inline-flex;
107+
flex: 0 0 auto;
108+
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
109+
font-size: 14px;
110+
font-weight: 400;
111+
height: 100%;
112+
justify-content: center;
113+
outline: transparent;
114+
padding-bottom: 0;
115+
padding-left: 4px;
116+
padding-right: 4px;
117+
padding-top: 0;
118+
position: relative;
119+
text-align: center;
120+
text-decoration: none;
121+
user-select: none;
122+
width: 30px;
123+
}
124+
&::-moz-focus-inner {
125+
border: 0;
126+
}
127+
.ms-Fabric--isFocusVisible &:focus:after {
128+
border: 1px solid transparent;
129+
bottom: 2px;
130+
content: "";
131+
left: 2px;
132+
outline: 1px solid #ffffff;
133+
position: absolute;
134+
right: 2px;
135+
top: 2px;
136+
z-index: 1;
137+
}
138+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
139+
bottom: -2px;
140+
left: -2px;
141+
outline-color: ButtonText;
142+
right: -2px;
143+
top: -2px;
144+
}
145+
:host(.ms-Fabric--isFocusVisible) &:focus:after {
146+
border: 1px solid transparent;
147+
bottom: 2px;
148+
content: "";
149+
left: 2px;
150+
outline: 1px solid #ffffff;
151+
position: absolute;
152+
right: 2px;
153+
top: 2px;
154+
z-index: 1;
155+
}
156+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
157+
bottom: -2px;
158+
left: -2px;
159+
outline-color: ButtonText;
160+
right: -2px;
161+
top: -2px;
162+
}
163+
&:active > span {
164+
left: 0px;
165+
position: relative;
166+
top: 0px;
167+
}
168+
&:hover {
169+
background-color: #f3f2f1;
170+
background: #e1dfdd;
171+
color: #323130;
172+
}
173+
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
174+
border-color: Highlight;
175+
color: Highlight;
176+
}
177+
&:active {
178+
background-color: #005a9e;
179+
color: #ffffff;
180+
}
181+
.is-selected &:focus {
182+
background: #0078d4;
183+
color: #ffffff;
184+
}
185+
&:focus:hover {
186+
background: #005a9e;
187+
color: #ffffff;
188+
}
189+
data-id="close-red-x"
190+
data-is-focusable={true}
191+
id="id__0"
192+
onClick={[Function]}
193+
onKeyDown={[Function]}
194+
onKeyPress={[Function]}
195+
onKeyUp={[Function]}
196+
onMouseDown={[Function]}
197+
onMouseUp={[Function]}
198+
type="button"
199+
>
200+
<span
201+
className=
202+
ms-Button-flexContainer
203+
{
204+
align-items: center;
205+
display: flex;
206+
flex-wrap: nowrap;
207+
height: 100%;
208+
justify-content: center;
209+
}
210+
data-automationid="splitbuttonprimary"
211+
>
212+
<i
213+
aria-hidden={true}
214+
className=
215+
ms-Icon
216+
ms-Button-icon
217+
{
218+
display: inline-block;
219+
text-decoration: inherit;
220+
}
221+
{
222+
-moz-osx-font-smoothing: grayscale;
223+
-webkit-font-smoothing: antialiased;
224+
font-family: "FabricMDL2Icons";
225+
font-style: normal;
226+
font-weight: normal;
227+
speak: none;
228+
}
229+
{
230+
flex-shrink: 0;
231+
font-size: 12px;
232+
height: 16px;
233+
line-height: 16px;
234+
margin-bottom: 0;
235+
margin-left: 4px;
236+
margin-right: 4px;
237+
margin-top: 0;
238+
text-align: center;
239+
}
240+
data-icon-name="Cancel"
241+
style={
242+
Object {
243+
"fontFamily": "\\"FabricMDL2Icons\\"",
244+
}
245+
}
246+
>
247+
248+
</i>
249+
</span>
250+
</button>
251+
<span
252+
hidden={true}
253+
id="id__0-removeLabel"
254+
/>
255+
</div>
256+
`;
257+
3258
exports[`TagItem accepts title override 1`] = `
4259
<div
5260
className=

‎packages/react/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -844,6 +844,7 @@ export type {
844844
ITagItemSuggestionProps,
845845
ITagItemSuggestionStyleProps,
846846
ITagItemSuggestionStyles,
847+
ITagItemRemoveButtonProps,
847848
ITagPickerProps,
848849
} from './Pickers';
849850
export {

0 commit comments

Comments
 (0)