@fluentui/react-infolabel 9.3.7 → 9.4.0
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 +14 -2
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +97 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +40 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +56 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infolabel
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:39 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:39 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.3.7..@fluentui/react-infolabel_v9.4.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-label to v9.3.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
- Bump @fluentui/react-popover to v9.12.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.3.7)
|
|
8
20
|
|
|
9
|
-
Fri, 11 Jul 2025 15:
|
|
21
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.3.6..@fluentui/react-infolabel_v9.3.7)
|
|
11
23
|
|
|
12
24
|
### Patches
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
|
+
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
3
|
+
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
5
|
+
export const infoButtonClassNames = {
|
|
6
|
+
root: 'fui-InfoButton',
|
|
7
|
+
// this className won't be used, but it's needed to satisfy the type checker
|
|
8
|
+
popover: 'fui-InfoButton__popover',
|
|
9
|
+
info: 'fui-InfoButton__info'
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Styles for the root slot
|
|
13
|
+
*/ const useButtonStyles = makeStyles({
|
|
14
|
+
base: {
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
boxSizing: 'border-box',
|
|
17
|
+
display: 'inline-flex',
|
|
18
|
+
justifyContent: 'center',
|
|
19
|
+
textDecorationLine: 'none',
|
|
20
|
+
verticalAlign: 'middle',
|
|
21
|
+
position: 'relative',
|
|
22
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
23
|
+
color: tokens.colorNeutralForeground2,
|
|
24
|
+
...shorthands.borderStyle('none'),
|
|
25
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
26
|
+
margin: '0',
|
|
27
|
+
padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
|
|
28
|
+
[`& .${iconFilledClassName}`]: {
|
|
29
|
+
display: 'none'
|
|
30
|
+
},
|
|
31
|
+
[`& .${iconRegularClassName}`]: {
|
|
32
|
+
display: 'inline-flex'
|
|
33
|
+
},
|
|
34
|
+
':hover': {
|
|
35
|
+
backgroundColor: tokens.colorTransparentBackgroundHover,
|
|
36
|
+
color: tokens.colorNeutralForeground2BrandHover,
|
|
37
|
+
cursor: 'pointer',
|
|
38
|
+
[`& .${iconFilledClassName}`]: {
|
|
39
|
+
display: 'inline-flex'
|
|
40
|
+
},
|
|
41
|
+
[`& .${iconRegularClassName}`]: {
|
|
42
|
+
display: 'none'
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
':hover:active': {
|
|
46
|
+
backgroundColor: tokens.colorTransparentBackgroundPressed,
|
|
47
|
+
color: tokens.colorNeutralForeground2BrandPressed
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
selected: {
|
|
51
|
+
backgroundColor: tokens.colorTransparentBackgroundSelected,
|
|
52
|
+
color: tokens.colorNeutralForeground2BrandSelected,
|
|
53
|
+
[`& .${iconFilledClassName}`]: {
|
|
54
|
+
display: 'inline-flex'
|
|
55
|
+
},
|
|
56
|
+
[`& .${iconRegularClassName}`]: {
|
|
57
|
+
display: 'none'
|
|
58
|
+
},
|
|
59
|
+
'@media (forced-colors: active)': {
|
|
60
|
+
backgroundColor: 'Highlight',
|
|
61
|
+
color: 'Canvas'
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
highContrast: {
|
|
65
|
+
'@media (forced-colors: active)': {
|
|
66
|
+
color: 'CanvasText',
|
|
67
|
+
':hover,:hover:active': {
|
|
68
|
+
forcedColorAdjust: 'none',
|
|
69
|
+
backgroundColor: 'Highlight',
|
|
70
|
+
color: 'Canvas'
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
focusIndicator: createFocusOutlineStyle(),
|
|
75
|
+
large: {
|
|
76
|
+
padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
const usePopoverSurfaceStyles = makeStyles({
|
|
80
|
+
base: {
|
|
81
|
+
maxWidth: '264px'
|
|
82
|
+
},
|
|
83
|
+
smallMedium: typographyStyles.caption1,
|
|
84
|
+
large: typographyStyles.body1
|
|
85
|
+
});
|
|
86
|
+
/**
|
|
87
|
+
* Apply styling to the InfoButton slots based on the state
|
|
88
|
+
*/ export const useInfoButtonStyles_unstable = (state)=>{
|
|
89
|
+
'use no memo';
|
|
90
|
+
const { size } = state;
|
|
91
|
+
const { open } = state.popover;
|
|
92
|
+
const buttonStyles = useButtonStyles();
|
|
93
|
+
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
94
|
+
state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
95
|
+
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
96
|
+
return state;
|
|
97
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px',\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n 'use no memo';\n\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\n popoverSurfaceStyles.base,\n size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n state.info.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","large","spacingVerticalXXS","usePopoverSurfaceStyles","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { tokens } from '@fluentui/react-theme';
|
|
2
|
+
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
3
|
+
export const infoLabelClassNames = {
|
|
4
|
+
root: 'fui-InfoLabel',
|
|
5
|
+
label: 'fui-InfoLabel__label',
|
|
6
|
+
infoButton: 'fui-InfoLabel__infoButton'
|
|
7
|
+
};
|
|
8
|
+
const useLabelStyles = makeStyles({
|
|
9
|
+
base: {
|
|
10
|
+
verticalAlign: 'top',
|
|
11
|
+
cursor: 'inherit',
|
|
12
|
+
color: 'inherit'
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
const useInfoButtonStyles = makeStyles({
|
|
16
|
+
base: {
|
|
17
|
+
verticalAlign: 'top',
|
|
18
|
+
// Negative margin to align with the text
|
|
19
|
+
marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,
|
|
20
|
+
marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`
|
|
21
|
+
},
|
|
22
|
+
large: {
|
|
23
|
+
// Negative margin to align with the text
|
|
24
|
+
marginTop: '-1px',
|
|
25
|
+
marginBottom: '-1px'
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
/**
|
|
29
|
+
* Apply styling to the InfoLabel slots based on the state
|
|
30
|
+
*/ export const useInfoLabelStyles_unstable = (state)=>{
|
|
31
|
+
'use no memo';
|
|
32
|
+
state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
|
|
33
|
+
const labelStyles = useLabelStyles();
|
|
34
|
+
state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
35
|
+
const infoButtonStyles = useInfoButtonStyles();
|
|
36
|
+
if (state.infoButton) {
|
|
37
|
+
state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
38
|
+
}
|
|
39
|
+
return state;
|
|
40
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit',\n },\n});\n\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n },\n\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px',\n },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n 'use no memo';\n\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,iBAAiBN,WAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,OAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,OAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGjB,aAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
infoButtonClassNames: function() {
|
|
13
|
+
return infoButtonClassNames;
|
|
14
|
+
},
|
|
15
|
+
useInfoButtonStyles_unstable: function() {
|
|
16
|
+
return useInfoButtonStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
20
|
+
const _reacticons = require("@fluentui/react-icons");
|
|
21
|
+
const _react = require("@griffel/react");
|
|
22
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
23
|
+
const infoButtonClassNames = {
|
|
24
|
+
root: 'fui-InfoButton',
|
|
25
|
+
// this className won't be used, but it's needed to satisfy the type checker
|
|
26
|
+
popover: 'fui-InfoButton__popover',
|
|
27
|
+
info: 'fui-InfoButton__info'
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Styles for the root slot
|
|
31
|
+
*/ const useButtonStyles = (0, _react.makeStyles)({
|
|
32
|
+
base: {
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
boxSizing: 'border-box',
|
|
35
|
+
display: 'inline-flex',
|
|
36
|
+
justifyContent: 'center',
|
|
37
|
+
textDecorationLine: 'none',
|
|
38
|
+
verticalAlign: 'middle',
|
|
39
|
+
position: 'relative',
|
|
40
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
41
|
+
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
42
|
+
..._react.shorthands.borderStyle('none'),
|
|
43
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
44
|
+
margin: '0',
|
|
45
|
+
padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalXS}`,
|
|
46
|
+
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
47
|
+
display: 'none'
|
|
48
|
+
},
|
|
49
|
+
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
50
|
+
display: 'inline-flex'
|
|
51
|
+
},
|
|
52
|
+
':hover': {
|
|
53
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
|
54
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandHover,
|
|
55
|
+
cursor: 'pointer',
|
|
56
|
+
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
57
|
+
display: 'inline-flex'
|
|
58
|
+
},
|
|
59
|
+
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
60
|
+
display: 'none'
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
':hover:active': {
|
|
64
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
|
65
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
selected: {
|
|
69
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
|
70
|
+
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected,
|
|
71
|
+
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
72
|
+
display: 'inline-flex'
|
|
73
|
+
},
|
|
74
|
+
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
75
|
+
display: 'none'
|
|
76
|
+
},
|
|
77
|
+
'@media (forced-colors: active)': {
|
|
78
|
+
backgroundColor: 'Highlight',
|
|
79
|
+
color: 'Canvas'
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
highContrast: {
|
|
83
|
+
'@media (forced-colors: active)': {
|
|
84
|
+
color: 'CanvasText',
|
|
85
|
+
':hover,:hover:active': {
|
|
86
|
+
forcedColorAdjust: 'none',
|
|
87
|
+
backgroundColor: 'Highlight',
|
|
88
|
+
color: 'Canvas'
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
focusIndicator: (0, _reacttabster.createFocusOutlineStyle)(),
|
|
93
|
+
large: {
|
|
94
|
+
padding: `${_reacttheme.tokens.spacingVerticalXXS} ${_reacttheme.tokens.spacingVerticalXXS}`
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
const usePopoverSurfaceStyles = (0, _react.makeStyles)({
|
|
98
|
+
base: {
|
|
99
|
+
maxWidth: '264px'
|
|
100
|
+
},
|
|
101
|
+
smallMedium: _reacttheme.typographyStyles.caption1,
|
|
102
|
+
large: _reacttheme.typographyStyles.body1
|
|
103
|
+
});
|
|
104
|
+
const useInfoButtonStyles_unstable = (state)=>{
|
|
105
|
+
'use no memo';
|
|
106
|
+
const { size } = state;
|
|
107
|
+
const { open } = state.popover;
|
|
108
|
+
const buttonStyles = useButtonStyles();
|
|
109
|
+
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
110
|
+
state.info.className = (0, _react.mergeClasses)(infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
111
|
+
state.root.className = (0, _react.mergeClasses)(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
112
|
+
return state;
|
|
113
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n margin: '0',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxWidth: '264px',\n },\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n 'use no memo';\n\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\n popoverSurfaceStyles.base,\n size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n state.info.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["infoButtonClassNames","useInfoButtonStyles_unstable","root","popover","info","useButtonStyles","makeStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","tokens","colorTransparentBackground","color","colorNeutralForeground2","shorthands","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","iconFilledClassName","iconRegularClassName","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","createFocusOutlineStyle","large","spacingVerticalXXS","usePopoverSurfaceStyles","maxWidth","smallMedium","typographyStyles","caption1","body1","state","size","open","buttonStyles","popoverSurfaceStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
infoLabelClassNames: function() {
|
|
13
|
+
return infoLabelClassNames;
|
|
14
|
+
},
|
|
15
|
+
useInfoLabelStyles_unstable: function() {
|
|
16
|
+
return useInfoLabelStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
20
|
+
const _react = require("@griffel/react");
|
|
21
|
+
const infoLabelClassNames = {
|
|
22
|
+
root: 'fui-InfoLabel',
|
|
23
|
+
label: 'fui-InfoLabel__label',
|
|
24
|
+
infoButton: 'fui-InfoLabel__infoButton'
|
|
25
|
+
};
|
|
26
|
+
const useLabelStyles = (0, _react.makeStyles)({
|
|
27
|
+
base: {
|
|
28
|
+
verticalAlign: 'top',
|
|
29
|
+
cursor: 'inherit',
|
|
30
|
+
color: 'inherit'
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const useInfoButtonStyles = (0, _react.makeStyles)({
|
|
34
|
+
base: {
|
|
35
|
+
verticalAlign: 'top',
|
|
36
|
+
// Negative margin to align with the text
|
|
37
|
+
marginTop: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`,
|
|
38
|
+
marginBottom: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`
|
|
39
|
+
},
|
|
40
|
+
large: {
|
|
41
|
+
// Negative margin to align with the text
|
|
42
|
+
marginTop: '-1px',
|
|
43
|
+
marginBottom: '-1px'
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
const useInfoLabelStyles_unstable = (state)=>{
|
|
47
|
+
'use no memo';
|
|
48
|
+
state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
|
|
49
|
+
const labelStyles = useLabelStyles();
|
|
50
|
+
state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
51
|
+
const infoButtonStyles = useInfoButtonStyles();
|
|
52
|
+
if (state.infoButton) {
|
|
53
|
+
state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
54
|
+
}
|
|
55
|
+
return state;
|
|
56
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit',\n },\n});\n\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n },\n\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px',\n },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n 'use no memo';\n\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["infoLabelClassNames","useInfoLabelStyles_unstable","root","label","infoButton","useLabelStyles","makeStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","tokens","spacingVerticalXXS","marginBottom","large","state","className","mergeClasses","labelStyles","infoButtonStyles","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,mBAAAA;eAAAA;;IAiCAC,2BAAAA;eAAAA;;;4BAtCU;uBAEkB;AAGlC,MAAMD,sBAAsD;IACjEE,MAAM;IACNC,OAAO;IACPC,YAAY;AACd;AAEA,MAAMC,iBAAiBC,IAAAA,iBAAAA,EAAW;IAChCC,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBL,IAAAA,iBAAAA,EAAW;IACrCC,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEC,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEF,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCJ,WAAW;QACXG,cAAc;IAChB;AACF;AAKO,MAAMd,8BAA8B,CAACgB;IAC1C;IAEAA,MAAMf,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,oBAAoBE,IAAI,EAAEe,MAAMf,IAAI,CAACgB,SAAS;IAElF,MAAME,cAAcf;IACpBY,MAAMd,KAAK,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,oBAAoBG,KAAK,EAAEiB,YAAYb,IAAI,EAAEU,MAAMd,KAAK,CAACe,SAAS;IAEvG,MAAMG,mBAAmBV;IACzB,IAAIM,MAAMb,UAAU,EAAE;QACpBa,MAAMb,UAAU,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAC3BnB,oBAAoBI,UAAU,EAC9BiB,iBAAiBd,IAAI,EACrBU,MAAMK,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDC,MAAMb,UAAU,CAACc,SAAS;IAE9B;IAEA,OAAOD;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-infolabel",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.0",
|
|
4
4
|
"description": "InfoLabel component for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@fluentui/react-icons": "^2.0.245",
|
|
24
24
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
25
|
-
"@fluentui/react-label": "^9.
|
|
26
|
-
"@fluentui/react-popover": "^9.
|
|
27
|
-
"@fluentui/react-tabster": "^9.
|
|
25
|
+
"@fluentui/react-label": "^9.3.0",
|
|
26
|
+
"@fluentui/react-popover": "^9.12.0",
|
|
27
|
+
"@fluentui/react-tabster": "^9.26.0",
|
|
28
28
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
29
29
|
"@fluentui/react-theme": "^9.1.24",
|
|
30
30
|
"@fluentui/react-utilities": "^9.22.0",
|