@fluentui/react-tags 0.0.0-nightly-20250717-0406.1 → 0.0.0-nightly-20250721-0406.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -15
- package/lib/components/InteractionTag/useInteractionTagStyles.styles.raw.js +38 -0
- package/lib/components/InteractionTag/useInteractionTagStyles.styles.raw.js.map +1 -0
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js +296 -0
- package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js.map +1 -0
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.raw.js +179 -0
- package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.raw.js.map +1 -0
- package/lib/components/Tag/useTagStyles.styles.raw.js +355 -0
- package/lib/components/Tag/useTagStyles.styles.raw.js.map +1 -0
- package/lib/components/TagGroup/useTagGroupStyles.styles.raw.js +30 -0
- package/lib/components/TagGroup/useTagGroupStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InteractionTag/useInteractionTagStyles.styles.raw.js +54 -0
- package/lib-commonjs/components/InteractionTag/useInteractionTagStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js +314 -0
- package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.raw.js +197 -0
- package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Tag/useTagStyles.styles.raw.js +383 -0
- package/lib-commonjs/components/Tag/useTagStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/TagGroup/useTagGroupStyles.styles.raw.js +46 -0
- package/lib-commonjs/components/TagGroup/useTagGroupStyles.styles.raw.js.map +1 -0
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,28 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tags
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 21 Jul 2025 04:21:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250721-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v0.0.0-nightly-20250721-0406.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.
|
|
9
|
+
Mon, 21 Jul 2025 04:21:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.0..@fluentui/react-tags_v0.0.0-nightly-20250721-0406.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
17
|
+
- Bump @fluentui/react-avatar to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
19
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
23
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
24
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
25
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250721-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/d866eeb4be9d6df8669dedffe9e870fa3306bcd0) by beachball)
|
|
26
|
+
|
|
27
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.0)
|
|
28
|
+
|
|
29
|
+
Thu, 17 Jul 2025 13:49:49 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.6.7..@fluentui/react-tags_v9.7.0)
|
|
31
|
+
|
|
32
|
+
### Minor changes
|
|
33
|
+
|
|
34
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
35
|
+
- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
36
|
+
- Bump @fluentui/react-avatar to v9.9.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
26
38
|
|
|
27
39
|
## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.6.7)
|
|
28
40
|
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
export const interactionTagClassNames = {
|
|
4
|
+
root: 'fui-InteractionTag'
|
|
5
|
+
};
|
|
6
|
+
const useRootBaseClassName = makeResetStyles({
|
|
7
|
+
display: 'inline-flex',
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
boxSizing: 'border-box',
|
|
10
|
+
width: 'fit-content'
|
|
11
|
+
});
|
|
12
|
+
const useRootStyles = makeStyles({
|
|
13
|
+
rounded: {
|
|
14
|
+
borderRadius: tokens.borderRadiusMedium
|
|
15
|
+
},
|
|
16
|
+
circular: {
|
|
17
|
+
borderRadius: tokens.borderRadiusCircular
|
|
18
|
+
},
|
|
19
|
+
medium: {
|
|
20
|
+
height: '32px'
|
|
21
|
+
},
|
|
22
|
+
small: {
|
|
23
|
+
height: '24px'
|
|
24
|
+
},
|
|
25
|
+
'extra-small': {
|
|
26
|
+
height: '20px'
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
/**
|
|
30
|
+
* Apply styling to the InteractionTag slots based on the state
|
|
31
|
+
*/ export const useInteractionTagStyles_unstable = (state)=>{
|
|
32
|
+
'use no memo';
|
|
33
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
34
|
+
const rootStyles = useRootStyles();
|
|
35
|
+
const { shape, size } = state;
|
|
36
|
+
state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
|
|
37
|
+
return state;
|
|
38
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InteractionTag/useInteractionTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {\n root: 'fui-InteractionTag',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content',\n});\n\nconst useRootStyles = makeStyles({\n rounded: { borderRadius: tokens.borderRadiusMedium },\n circular: { borderRadius: tokens.borderRadiusCircular },\n\n medium: {\n height: '32px',\n },\n small: {\n height: '24px',\n },\n 'extra-small': {\n height: '20px',\n },\n});\n\n/**\n * Apply styling to the InteractionTag slots based on the state\n */\nexport const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n const { shape, size } = state;\n\n state.root.className = mergeClasses(\n interactionTagClassNames.root,\n rootBaseClassName,\n rootStyles[shape],\n rootStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","display","alignItems","boxSizing","width","useRootStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","medium","height","small","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,OAAO;AACT;AAEA,MAAMC,gBAAgBV,WAAW;IAC/BW,SAAS;QAAEC,cAAcV,OAAOW,kBAAkB;IAAC;IACnDC,UAAU;QAAEF,cAAcV,OAAOa,oBAAoB;IAAC;IAEtDC,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBhB;IAC1B,MAAMiB,aAAaZ;IAEnB,MAAM,EAAEa,KAAK,EAAEC,IAAI,EAAE,GAAGJ;IAExBA,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,yBAAyBC,IAAI,EAC7BiB,mBACAC,UAAU,CAACC,MAAM,EACjBD,UAAU,CAACE,KAAK,EAChBJ,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
|
4
|
+
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
5
|
+
import { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';
|
|
6
|
+
export const interactionTagPrimaryClassNames = {
|
|
7
|
+
root: 'fui-InteractionTagPrimary',
|
|
8
|
+
media: 'fui-InteractionTagPrimary__media',
|
|
9
|
+
icon: 'fui-InteractionTagPrimary__icon',
|
|
10
|
+
primaryText: 'fui-InteractionTagPrimary__primaryText',
|
|
11
|
+
secondaryText: 'fui-InteractionTagPrimary__secondaryText'
|
|
12
|
+
};
|
|
13
|
+
const baseStyles = {
|
|
14
|
+
// reset default button style:
|
|
15
|
+
color: 'inherit',
|
|
16
|
+
fontFamily: 'inherit',
|
|
17
|
+
padding: '0px',
|
|
18
|
+
borderStyle: 'none',
|
|
19
|
+
appearance: 'button',
|
|
20
|
+
textAlign: 'unset',
|
|
21
|
+
backgroundColor: 'transparent',
|
|
22
|
+
display: 'inline-grid',
|
|
23
|
+
height: '100%',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
gridTemplateAreas: `
|
|
26
|
+
"media primary "
|
|
27
|
+
"media secondary"
|
|
28
|
+
`,
|
|
29
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
|
|
30
|
+
...createCustomFocusIndicatorStyle({
|
|
31
|
+
outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
|
|
32
|
+
zIndex: 1
|
|
33
|
+
})
|
|
34
|
+
};
|
|
35
|
+
const useRootRoundedBaseClassName = makeResetStyles({
|
|
36
|
+
...baseStyles,
|
|
37
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
38
|
+
/**
|
|
39
|
+
* Pseudo element to draw the border for windows high contrast mode -
|
|
40
|
+
* when Tag is with secondary text, primary text has negative margin that covers the border.
|
|
41
|
+
*/ '@media (forced-colors: active)': {
|
|
42
|
+
position: 'relative',
|
|
43
|
+
'::before': {
|
|
44
|
+
content: '""',
|
|
45
|
+
borderTop: `${tokens.strokeWidthThin} solid`,
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
top: '-1px',
|
|
48
|
+
left: '-1px',
|
|
49
|
+
right: '-1px',
|
|
50
|
+
bottom: '-1px',
|
|
51
|
+
borderTopLeftRadius: tokens.borderRadiusMedium,
|
|
52
|
+
borderTopRightRadius: tokens.borderRadiusMedium
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
const useRootCircularBaseClassName = makeResetStyles({
|
|
57
|
+
...baseStyles,
|
|
58
|
+
borderRadius: tokens.borderRadiusCircular,
|
|
59
|
+
/**
|
|
60
|
+
* Pseudo element to draw the border for windows high contrast mode -
|
|
61
|
+
* when Tag is with secondary text, primary text has negative margin that covers the border.
|
|
62
|
+
*/ '@media (forced-colors: active)': {
|
|
63
|
+
position: 'relative',
|
|
64
|
+
'::before': {
|
|
65
|
+
content: '""',
|
|
66
|
+
borderTop: `${tokens.strokeWidthThin} solid`,
|
|
67
|
+
borderLeft: `${tokens.strokeWidthThin} solid`,
|
|
68
|
+
position: 'absolute',
|
|
69
|
+
top: '-1px',
|
|
70
|
+
left: '-1px',
|
|
71
|
+
right: '-1px',
|
|
72
|
+
bottom: '-1px',
|
|
73
|
+
borderTopLeftRadius: tokens.borderRadiusCircular,
|
|
74
|
+
borderBottomLeftRadius: tokens.borderRadiusCircular
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
/**
|
|
79
|
+
* Style override for pseudo element that draws the border for windows high contrast mode
|
|
80
|
+
*/ const useRootCircularContrastStyles = makeStyles({
|
|
81
|
+
withoutSecondaryAction: {
|
|
82
|
+
'@media (forced-colors: active)': {
|
|
83
|
+
position: 'relative',
|
|
84
|
+
'::before': {
|
|
85
|
+
borderRight: `${tokens.strokeWidthThin} solid transparent`,
|
|
86
|
+
borderTopRightRadius: tokens.borderRadiusCircular,
|
|
87
|
+
borderBottomRightRadius: tokens.borderRadiusCircular
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
const useRootStyles = makeStyles({
|
|
93
|
+
filled: {
|
|
94
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
95
|
+
color: tokens.colorNeutralForeground2,
|
|
96
|
+
':hover': {
|
|
97
|
+
cursor: 'pointer',
|
|
98
|
+
backgroundColor: tokens.colorNeutralBackground3Hover,
|
|
99
|
+
color: tokens.colorNeutralForeground2Hover
|
|
100
|
+
},
|
|
101
|
+
':active': {
|
|
102
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed,
|
|
103
|
+
color: tokens.colorNeutralForeground2Pressed
|
|
104
|
+
},
|
|
105
|
+
'@media (forced-colors: active)': {
|
|
106
|
+
':hover': {
|
|
107
|
+
backgroundColor: 'HighlightText'
|
|
108
|
+
},
|
|
109
|
+
':active': {
|
|
110
|
+
backgroundColor: 'HighlightText'
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
outline: {
|
|
115
|
+
backgroundColor: tokens.colorSubtleBackground,
|
|
116
|
+
color: tokens.colorNeutralForeground2,
|
|
117
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1),
|
|
118
|
+
':hover': {
|
|
119
|
+
cursor: 'pointer',
|
|
120
|
+
backgroundColor: tokens.colorSubtleBackgroundHover,
|
|
121
|
+
color: tokens.colorNeutralForeground2Hover,
|
|
122
|
+
[`& .${iconFilledClassName}`]: {
|
|
123
|
+
display: 'inline',
|
|
124
|
+
color: tokens.colorNeutralForeground2BrandHover
|
|
125
|
+
},
|
|
126
|
+
[`& .${iconRegularClassName}`]: {
|
|
127
|
+
display: 'none'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
':active': {
|
|
131
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed,
|
|
132
|
+
color: tokens.colorNeutralForeground2Pressed,
|
|
133
|
+
[`& .${iconFilledClassName}`]: {
|
|
134
|
+
display: 'inline',
|
|
135
|
+
color: tokens.colorNeutralForeground2BrandPressed
|
|
136
|
+
},
|
|
137
|
+
[`& .${iconRegularClassName}`]: {
|
|
138
|
+
display: 'none'
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
'@media (forced-colors: active)': {
|
|
142
|
+
':hover': {
|
|
143
|
+
backgroundColor: 'HighlightText'
|
|
144
|
+
},
|
|
145
|
+
':active': {
|
|
146
|
+
backgroundColor: 'HighlightText'
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
brand: {
|
|
151
|
+
backgroundColor: tokens.colorBrandBackground2,
|
|
152
|
+
color: tokens.colorBrandForeground2,
|
|
153
|
+
':hover': {
|
|
154
|
+
cursor: 'pointer',
|
|
155
|
+
backgroundColor: tokens.colorBrandBackground2Hover,
|
|
156
|
+
color: tokens.colorCompoundBrandForeground1Hover
|
|
157
|
+
},
|
|
158
|
+
':active': {
|
|
159
|
+
backgroundColor: tokens.colorBrandBackground2Pressed,
|
|
160
|
+
color: tokens.colorCompoundBrandForeground1Pressed
|
|
161
|
+
},
|
|
162
|
+
'@media (forced-colors: active)': {
|
|
163
|
+
':hover': {
|
|
164
|
+
backgroundColor: 'HighlightText'
|
|
165
|
+
},
|
|
166
|
+
':active': {
|
|
167
|
+
backgroundColor: 'HighlightText'
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
selected: {
|
|
172
|
+
background: tokens.colorBrandBackground,
|
|
173
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
174
|
+
...shorthands.borderColor(tokens.colorBrandStroke1),
|
|
175
|
+
'@media (forced-colors: active)': {
|
|
176
|
+
forcedColorAdjust: 'none',
|
|
177
|
+
backgroundColor: 'Highlight',
|
|
178
|
+
color: 'HighlightText'
|
|
179
|
+
},
|
|
180
|
+
':hover': {
|
|
181
|
+
backgroundColor: tokens.colorBrandBackgroundHover,
|
|
182
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
183
|
+
[`& .${iconFilledClassName}`]: {
|
|
184
|
+
color: tokens.colorNeutralForegroundOnBrand
|
|
185
|
+
},
|
|
186
|
+
'@media (forced-colors: active)': {
|
|
187
|
+
backgroundColor: 'Highlight',
|
|
188
|
+
color: 'HighlightText'
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
':active': {
|
|
192
|
+
backgroundColor: tokens.colorBrandBackgroundPressed,
|
|
193
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
194
|
+
[`& .${iconFilledClassName}`]: {
|
|
195
|
+
color: tokens.colorNeutralForegroundOnBrand
|
|
196
|
+
},
|
|
197
|
+
'@media (forced-colors: active)': {
|
|
198
|
+
backgroundColor: 'Highlight',
|
|
199
|
+
color: 'HighlightText'
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
medium: {
|
|
204
|
+
paddingRight: '7px'
|
|
205
|
+
},
|
|
206
|
+
small: {
|
|
207
|
+
paddingRight: '5px'
|
|
208
|
+
},
|
|
209
|
+
'extra-small': {
|
|
210
|
+
paddingRight: '5px'
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
const useRootDisabledAppearances = makeStyles({
|
|
214
|
+
filled: {
|
|
215
|
+
cursor: 'not-allowed',
|
|
216
|
+
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
217
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
218
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)
|
|
219
|
+
},
|
|
220
|
+
outline: {
|
|
221
|
+
cursor: 'not-allowed',
|
|
222
|
+
backgroundColor: tokens.colorSubtleBackground,
|
|
223
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
224
|
+
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
|
|
225
|
+
},
|
|
226
|
+
brand: {
|
|
227
|
+
cursor: 'not-allowed',
|
|
228
|
+
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
229
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
230
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
/**
|
|
234
|
+
* Styles for InteractionTagPrimary without leading media/icon
|
|
235
|
+
*/ const useRootWithoutMediaStyles = makeStyles({
|
|
236
|
+
medium: {
|
|
237
|
+
paddingLeft: '7px'
|
|
238
|
+
},
|
|
239
|
+
small: {
|
|
240
|
+
paddingLeft: '5px'
|
|
241
|
+
},
|
|
242
|
+
'extra-small': {
|
|
243
|
+
paddingLeft: '5px'
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
/**
|
|
247
|
+
* Styles for InteractionTagPrimary when InteractionTag has a Secondary button
|
|
248
|
+
*/ const useRootWithSecondaryActionStyles = makeStyles({
|
|
249
|
+
base: {
|
|
250
|
+
borderTopRightRadius: tokens.borderRadiusNone,
|
|
251
|
+
borderBottomRightRadius: tokens.borderRadiusNone,
|
|
252
|
+
borderRightStyle: 'none',
|
|
253
|
+
...createCustomFocusIndicatorStyle({
|
|
254
|
+
borderTopRightRadius: tokens.borderRadiusNone,
|
|
255
|
+
borderBottomRightRadius: tokens.borderRadiusNone
|
|
256
|
+
})
|
|
257
|
+
},
|
|
258
|
+
medium: {
|
|
259
|
+
paddingRight: tokens.spacingHorizontalS
|
|
260
|
+
},
|
|
261
|
+
small: {
|
|
262
|
+
paddingRight: tokens.spacingHorizontalSNudge
|
|
263
|
+
},
|
|
264
|
+
'extra-small': {
|
|
265
|
+
paddingRight: tokens.spacingHorizontalSNudge
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
export const useInteractionTagPrimaryStyles_unstable = (state)=>{
|
|
269
|
+
'use no memo';
|
|
270
|
+
const rootRoundedBaseClassName = useRootRoundedBaseClassName();
|
|
271
|
+
const rootCircularBaseClassName = useRootCircularBaseClassName();
|
|
272
|
+
const rootStyles = useRootStyles();
|
|
273
|
+
const rootDisabledAppearances = useRootDisabledAppearances();
|
|
274
|
+
const rootWithoutMediaStyles = useRootWithoutMediaStyles();
|
|
275
|
+
const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();
|
|
276
|
+
const iconStyles = useIconStyles();
|
|
277
|
+
const mediaStyles = useMediaStyles();
|
|
278
|
+
const primaryTextStyles = usePrimaryTextStyles();
|
|
279
|
+
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
280
|
+
const rootCircularContrastStyles = useRootCircularContrastStyles();
|
|
281
|
+
const { disabled, shape, size, appearance, selected } = state;
|
|
282
|
+
state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
|
|
283
|
+
if (state.media) {
|
|
284
|
+
state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
|
|
285
|
+
}
|
|
286
|
+
if (state.icon) {
|
|
287
|
+
state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
|
|
288
|
+
}
|
|
289
|
+
if (state.primaryText) {
|
|
290
|
+
state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
|
|
291
|
+
}
|
|
292
|
+
if (state.secondaryText) {
|
|
293
|
+
state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
|
|
294
|
+
}
|
|
295
|
+
return state;
|
|
296
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["import { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n useIconStyles,\n useMediaStyles,\n usePrimaryTextStyles,\n useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText',\n};\n\nconst baseStyles: GriffelResetStyle = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium,\n },\n },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular,\n },\n },\n});\n\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */\nconst useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular,\n },\n },\n },\n});\n\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover,\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n },\n medium: {\n paddingRight: '7px',\n },\n small: {\n paddingRight: '5px',\n },\n 'extra-small': {\n paddingRight: '5px',\n },\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n});\n\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px',\n },\n small: {\n paddingLeft: '5px',\n },\n 'extra-small': {\n paddingLeft: '5px',\n },\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */\nconst useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n }),\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n 'use no memo';\n\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n const { disabled, shape, size, appearance, selected } = state;\n\n state.root.className = mergeClasses(\n interactionTagPrimaryClassNames.root,\n\n shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n selected && !disabled && rootStyles.selected,\n rootStyles[size],\n\n !state.media && !state.icon && rootWithoutMediaStyles[size],\n state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n state.root.className,\n );\n\n if (state.media) {\n state.media.className = mergeClasses(\n interactionTagPrimaryClassNames.media,\n mediaStyles.base,\n mediaStyles[size],\n state.media.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(\n interactionTagPrimaryClassNames.icon,\n iconStyles.base,\n iconStyles[size],\n state.icon.className,\n );\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.primaryText,\n\n primaryTextStyles.base,\n primaryTextStyles[size],\n\n state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n state.primaryText.className,\n );\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.secondaryText,\n secondaryTextBaseClassName,\n state.secondaryText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","position","content","borderTop","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
|
4
|
+
export const interactionTagSecondaryClassNames = {
|
|
5
|
+
root: 'fui-InteractionTagSecondary'
|
|
6
|
+
};
|
|
7
|
+
const mediumIconSize = '20px';
|
|
8
|
+
const smallIconSize = '16px';
|
|
9
|
+
const extraSmallIconSize = '12px';
|
|
10
|
+
const useRootBaseClassName = makeResetStyles({
|
|
11
|
+
// reset default button style:
|
|
12
|
+
color: 'inherit',
|
|
13
|
+
fontFamily: 'inherit',
|
|
14
|
+
padding: '0px',
|
|
15
|
+
borderStyle: 'none',
|
|
16
|
+
appearance: 'button',
|
|
17
|
+
textAlign: 'unset',
|
|
18
|
+
backgroundColor: 'transparent',
|
|
19
|
+
display: 'flex',
|
|
20
|
+
height: '100%',
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
...createCustomFocusIndicatorStyle({
|
|
23
|
+
outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`
|
|
24
|
+
}),
|
|
25
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
|
|
26
|
+
// divider:
|
|
27
|
+
borderLeftColor: tokens.colorNeutralStroke1,
|
|
28
|
+
borderTopLeftRadius: tokens.borderRadiusNone,
|
|
29
|
+
borderBottomLeftRadius: tokens.borderRadiusNone
|
|
30
|
+
});
|
|
31
|
+
const useRootStyles = makeStyles({
|
|
32
|
+
filled: {
|
|
33
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
34
|
+
color: tokens.colorNeutralForeground2,
|
|
35
|
+
':hover': {
|
|
36
|
+
cursor: 'pointer',
|
|
37
|
+
backgroundColor: tokens.colorNeutralBackground3Hover,
|
|
38
|
+
color: tokens.colorNeutralForeground2BrandHover
|
|
39
|
+
},
|
|
40
|
+
':active': {
|
|
41
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed,
|
|
42
|
+
color: tokens.colorNeutralForeground2BrandPressed
|
|
43
|
+
},
|
|
44
|
+
'@media (forced-colors: active)': {
|
|
45
|
+
':hover': {
|
|
46
|
+
backgroundColor: 'HighlightText'
|
|
47
|
+
},
|
|
48
|
+
':active': {
|
|
49
|
+
backgroundColor: 'HighlightText'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
outline: {
|
|
54
|
+
backgroundColor: tokens.colorSubtleBackground,
|
|
55
|
+
color: tokens.colorNeutralForeground2,
|
|
56
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1),
|
|
57
|
+
':hover': {
|
|
58
|
+
cursor: 'pointer',
|
|
59
|
+
backgroundColor: tokens.colorSubtleBackgroundHover,
|
|
60
|
+
color: tokens.colorNeutralForeground2BrandHover
|
|
61
|
+
},
|
|
62
|
+
':active': {
|
|
63
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed,
|
|
64
|
+
color: tokens.colorNeutralForeground2BrandPressed
|
|
65
|
+
},
|
|
66
|
+
'@media (forced-colors: active)': {
|
|
67
|
+
':hover': {
|
|
68
|
+
backgroundColor: 'HighlightText'
|
|
69
|
+
},
|
|
70
|
+
':active': {
|
|
71
|
+
backgroundColor: 'HighlightText'
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
brand: {
|
|
76
|
+
backgroundColor: tokens.colorBrandBackground2,
|
|
77
|
+
color: tokens.colorBrandForeground2,
|
|
78
|
+
borderLeftColor: tokens.colorBrandStroke2,
|
|
79
|
+
':hover': {
|
|
80
|
+
cursor: 'pointer',
|
|
81
|
+
backgroundColor: tokens.colorBrandBackground2Hover,
|
|
82
|
+
color: tokens.colorCompoundBrandForeground1Hover
|
|
83
|
+
},
|
|
84
|
+
':active': {
|
|
85
|
+
backgroundColor: tokens.colorBrandBackground2Pressed,
|
|
86
|
+
color: tokens.colorCompoundBrandForeground1Pressed
|
|
87
|
+
},
|
|
88
|
+
'@media (forced-colors: active)': {
|
|
89
|
+
':hover': {
|
|
90
|
+
backgroundColor: 'HighlightText'
|
|
91
|
+
},
|
|
92
|
+
':active': {
|
|
93
|
+
backgroundColor: 'HighlightText'
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
selected: {
|
|
98
|
+
background: tokens.colorBrandBackground,
|
|
99
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
100
|
+
...shorthands.borderColor(tokens.colorBrandStroke1),
|
|
101
|
+
'@media (forced-colors: active)': {
|
|
102
|
+
forcedColorAdjust: 'none',
|
|
103
|
+
backgroundColor: 'Highlight',
|
|
104
|
+
color: 'HighlightText'
|
|
105
|
+
},
|
|
106
|
+
':hover': {
|
|
107
|
+
backgroundColor: tokens.colorBrandBackgroundHover,
|
|
108
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
109
|
+
'@media (forced-colors: active)': {
|
|
110
|
+
backgroundColor: 'Highlight',
|
|
111
|
+
color: 'HighlightText'
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
':active': {
|
|
115
|
+
backgroundColor: tokens.colorBrandBackgroundPressed,
|
|
116
|
+
color: tokens.colorNeutralForegroundOnBrand,
|
|
117
|
+
'@media (forced-colors: active)': {
|
|
118
|
+
backgroundColor: 'Highlight',
|
|
119
|
+
color: 'HighlightText'
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
// divider
|
|
123
|
+
borderLeftColor: tokens.colorNeutralStrokeOnBrand2
|
|
124
|
+
},
|
|
125
|
+
rounded: {
|
|
126
|
+
borderTopRightRadius: tokens.borderRadiusMedium,
|
|
127
|
+
borderBottomRightRadius: tokens.borderRadiusMedium
|
|
128
|
+
},
|
|
129
|
+
circular: {
|
|
130
|
+
borderTopRightRadius: tokens.borderRadiusCircular,
|
|
131
|
+
borderBottomRightRadius: tokens.borderRadiusCircular
|
|
132
|
+
},
|
|
133
|
+
medium: {
|
|
134
|
+
fontSize: mediumIconSize,
|
|
135
|
+
paddingLeft: '5px',
|
|
136
|
+
paddingRight: '5px'
|
|
137
|
+
},
|
|
138
|
+
small: {
|
|
139
|
+
fontSize: smallIconSize,
|
|
140
|
+
paddingLeft: '3px',
|
|
141
|
+
paddingRight: '3px'
|
|
142
|
+
},
|
|
143
|
+
'extra-small': {
|
|
144
|
+
fontSize: extraSmallIconSize,
|
|
145
|
+
paddingLeft: '5px',
|
|
146
|
+
paddingRight: '5px'
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
const useRootDisabledStyles = makeStyles({
|
|
150
|
+
filled: {
|
|
151
|
+
cursor: 'not-allowed',
|
|
152
|
+
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
153
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
154
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
|
|
155
|
+
borderLeftColor: tokens.colorNeutralStrokeDisabled
|
|
156
|
+
},
|
|
157
|
+
outline: {
|
|
158
|
+
cursor: 'not-allowed',
|
|
159
|
+
backgroundColor: tokens.colorSubtleBackground,
|
|
160
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
161
|
+
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
|
|
162
|
+
},
|
|
163
|
+
brand: {
|
|
164
|
+
cursor: 'not-allowed',
|
|
165
|
+
backgroundColor: tokens.colorNeutralBackgroundDisabled,
|
|
166
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
167
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
|
|
168
|
+
borderLeftColor: tokens.colorNeutralStrokeDisabled
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
export const useInteractionTagSecondaryStyles_unstable = (state)=>{
|
|
172
|
+
'use no memo';
|
|
173
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
174
|
+
const rootStyles = useRootStyles();
|
|
175
|
+
const rootDisabledStyles = useRootDisabledStyles();
|
|
176
|
+
const { disabled, selected, shape, size, appearance } = state;
|
|
177
|
+
state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);
|
|
178
|
+
return state;
|
|
179
|
+
};
|