@fluentui/react-infobutton 9.0.0-beta.2 → 9.0.0-beta.21
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.json +530 -1
- package/CHANGELOG.md +210 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.js +0 -1
- package/lib/components/InfoButton/InfoButton.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib/components/InfoButton/renderInfoButton.js +6 -4
- package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +3 -3
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.js +108 -142
- package/lib/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/InfoButton.js +0 -2
- package/lib-commonjs/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +0 -2
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js +0 -6
- package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib-commonjs/components/InfoButton/index.js +0 -6
- package/lib-commonjs/components/InfoButton/index.js.map +1 -1
- package/lib-commonjs/components/InfoButton/renderInfoButton.js +6 -9
- package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +3 -10
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +107 -147
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
- package/Spec.md +0 -143
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useInfoButtonStyles_unstable = exports.infoButtonClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
|
-
|
|
10
8
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
11
|
-
|
|
12
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
13
|
-
|
|
14
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
15
|
-
|
|
16
11
|
exports.infoButtonClassNames = {
|
|
17
12
|
root: 'fui-InfoButton',
|
|
18
13
|
// this className won't be used, but it's needed to satisfy the type checker
|
|
@@ -22,166 +17,132 @@ exports.infoButtonClassNames = {
|
|
|
22
17
|
/**
|
|
23
18
|
* Styles for the root slot
|
|
24
19
|
*/
|
|
25
|
-
|
|
26
20
|
const useButtonStyles = /*#__PURE__*/react_1.__styles({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"uwmqm3": ["fruq291", "f7x41pl"],
|
|
62
|
-
"D0sxk3": "f16u1re",
|
|
63
|
-
"t6yez3": "f1rw4040",
|
|
64
|
-
"Jwef8y": "fjxutwb",
|
|
65
|
-
"Bi91k9c": "f139oj5f",
|
|
66
|
-
"Bk3fhr4": "f1jpd6y0",
|
|
67
|
-
"Bmfj8id": "fuxngvv",
|
|
68
|
-
"iro3zm": "fwiml72",
|
|
69
|
-
"B2d53fq": "f1fg1p5m"
|
|
21
|
+
base: {
|
|
22
|
+
Bt984gj: "f122n59",
|
|
23
|
+
B7ck84d: "f1ewtqcl",
|
|
24
|
+
mc9l5x: "ftuwxu6",
|
|
25
|
+
Brf1p80: "f4d9j23",
|
|
26
|
+
w71qe1: "f1iuv45f",
|
|
27
|
+
ha4doy: "fmrv4ls",
|
|
28
|
+
qhf8xq: "f10pi13n",
|
|
29
|
+
De3pzq: "f1c21dwh",
|
|
30
|
+
sj55zd: "fkfq4zb",
|
|
31
|
+
icvyot: "f1ern45e",
|
|
32
|
+
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
33
|
+
oivjwe: "f1h8hb77",
|
|
34
|
+
wvpqe5: ["f1deefiw", "f1n71otn"],
|
|
35
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
36
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
37
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
38
|
+
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
39
|
+
B6of3ja: "f1hu3pq6",
|
|
40
|
+
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
41
|
+
jrapky: "f19f4twv",
|
|
42
|
+
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
43
|
+
z8tnut: "f1ywm7hm",
|
|
44
|
+
z189sj: ["f7x41pl", "fruq291"],
|
|
45
|
+
Byoj8tv: "f14wxoun",
|
|
46
|
+
uwmqm3: ["fruq291", "f7x41pl"],
|
|
47
|
+
D0sxk3: "f16u1re",
|
|
48
|
+
t6yez3: "f1rw4040",
|
|
49
|
+
Jwef8y: "fjxutwb",
|
|
50
|
+
Bi91k9c: "f139oj5f",
|
|
51
|
+
Bk3fhr4: "f1jpd6y0",
|
|
52
|
+
Bmfj8id: "fuxngvv",
|
|
53
|
+
iro3zm: "fwiml72",
|
|
54
|
+
B2d53fq: "f1fg1p5m"
|
|
70
55
|
},
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
"Bn1d65q": ["f1xeojaw", "f1hodmrf"],
|
|
79
|
-
"Bxeuatn": "fcbbwn3",
|
|
80
|
-
"n51gp8": ["f1hodmrf", "f1xeojaw"],
|
|
81
|
-
"Bbusuzp": "f1cg6951"
|
|
56
|
+
selected: {
|
|
57
|
+
De3pzq: "f1q9pm1r",
|
|
58
|
+
sj55zd: "f1qj7y59",
|
|
59
|
+
D0sxk3: "fgzdkf0",
|
|
60
|
+
t6yez3: "f15q0o9g",
|
|
61
|
+
Bsw6fvg: "f1rirnrt",
|
|
62
|
+
Bbusuzp: "f1cg6951"
|
|
82
63
|
},
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
"Bbusuzp": "fn0tkbb",
|
|
89
|
-
"w76p1f": "f18rpr9v",
|
|
90
|
-
"B3sm7at": "f5mt1fw",
|
|
91
|
-
"fe9h6n": "f17188ff",
|
|
92
|
-
"Bmhq1k7": ["fzyms9j", "f12bfk5t"],
|
|
93
|
-
"E428ku": "f1ucftwv",
|
|
94
|
-
"Bipfp3": ["f12bfk5t", "fzyms9j"],
|
|
95
|
-
"nrfbsj": "f10s0nbj"
|
|
64
|
+
highContrast: {
|
|
65
|
+
Bbusuzp: "fn0tkbb",
|
|
66
|
+
Bs6v0vm: "f1rp3av6",
|
|
67
|
+
B46dtvo: "f1u7gwqv",
|
|
68
|
+
gh1jta: "fl6kagl"
|
|
96
69
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
"
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
70
|
+
focusIndicator: {
|
|
71
|
+
Brovlpu: "ftqa4ok",
|
|
72
|
+
B486eqv: "f2hkw1w",
|
|
73
|
+
B8q5s1w: "f8hki3x",
|
|
74
|
+
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
75
|
+
n8qw10: "f1bjia2o",
|
|
76
|
+
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
77
|
+
Bm4h7ae: "f15bsgw9",
|
|
78
|
+
B7ys5i9: "f14e48fq",
|
|
79
|
+
Busjfv9: "f18yb2kv",
|
|
80
|
+
Bhk32uz: "fd6o370",
|
|
81
|
+
Bf4ptjt: "fh1cnn4",
|
|
82
|
+
kclons: ["fy7oxxb", "f184ne2d"],
|
|
83
|
+
Bhdgwq3: "fpukqih",
|
|
84
|
+
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
85
|
+
Bqtpl0w: "frrh606",
|
|
86
|
+
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
87
|
+
hgwjuy: "ful5kiu",
|
|
88
|
+
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
89
|
+
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
90
|
+
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
91
|
+
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
92
|
+
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
93
|
+
B6dhp37: "f1dvezut",
|
|
94
|
+
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
95
|
+
Boxcth7: "fjvm52t",
|
|
96
|
+
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
97
|
+
J0r882: "fdiulkx",
|
|
98
|
+
Bjwuhne: "f1yalx80",
|
|
99
|
+
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
100
|
+
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
113
101
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
102
|
+
large: {
|
|
103
|
+
z8tnut: "fclwglc",
|
|
104
|
+
z189sj: ["f1w3695s", "f1b0r8ql"],
|
|
105
|
+
Byoj8tv: "fywfov9",
|
|
106
|
+
uwmqm3: ["f1b0r8ql", "f1w3695s"]
|
|
119
107
|
}
|
|
120
108
|
}, {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
126
|
-
"m": "(forced-colors: active)"
|
|
127
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
128
|
-
"m": "(forced-colors: active)"
|
|
129
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
130
|
-
"m": "(forced-colors: active)"
|
|
131
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
132
|
-
"m": "(forced-colors: active)"
|
|
109
|
+
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
|
|
110
|
+
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
111
|
+
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
112
|
+
m: "(forced-colors: active)"
|
|
133
113
|
}], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
|
|
134
|
-
|
|
135
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
136
|
-
"m": "(forced-colors: active)"
|
|
137
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
138
|
-
"m": "(forced-colors: active)"
|
|
139
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
140
|
-
"m": "(forced-colors: active)"
|
|
141
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
142
|
-
"m": "(forced-colors: active)"
|
|
114
|
+
m: "(forced-colors: active)"
|
|
143
115
|
}], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
|
|
144
|
-
|
|
145
|
-
}], ["@media (forced-colors: active){.
|
|
146
|
-
|
|
147
|
-
}], ["@media (forced-colors: active){.
|
|
148
|
-
|
|
149
|
-
}], ["@media (forced-colors: active){.
|
|
150
|
-
|
|
151
|
-
}], ["@media (forced-colors: active){.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}}", {
|
|
152
|
-
"m": "(forced-colors: active)"
|
|
153
|
-
}], ["@media (forced-colors: active){.f1ucftwv:hover,.f1ucftwv :hover:active{border-bottom-color:Canvas;}}", {
|
|
154
|
-
"m": "(forced-colors: active)"
|
|
155
|
-
}], ["@media (forced-colors: active){.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}}", {
|
|
156
|
-
"m": "(forced-colors: active)"
|
|
157
|
-
}], ["@media (forced-colors: active){.f10s0nbj:hover,.f10s0nbj :hover:active{color:Canvas;}}", {
|
|
158
|
-
"m": "(forced-colors: active)"
|
|
116
|
+
m: "(forced-colors: active)"
|
|
117
|
+
}], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
|
|
118
|
+
m: "(forced-colors: active)"
|
|
119
|
+
}], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
|
|
120
|
+
m: "(forced-colors: active)"
|
|
121
|
+
}], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}", {
|
|
122
|
+
m: "(forced-colors: active)"
|
|
159
123
|
}]],
|
|
160
|
-
|
|
161
|
-
|
|
124
|
+
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
125
|
+
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
162
126
|
});
|
|
163
|
-
|
|
164
127
|
const usePopoverSurfaceStyles = /*#__PURE__*/react_1.__styles({
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
128
|
+
smallMedium: {
|
|
129
|
+
Bahqtrf: "fk6fouc",
|
|
130
|
+
Be2twd7: "fy9rknc",
|
|
131
|
+
Bhrd7zp: "figsok6",
|
|
132
|
+
Bg96gwp: "fwrc4pm"
|
|
170
133
|
},
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
134
|
+
large: {
|
|
135
|
+
Bahqtrf: "fk6fouc",
|
|
136
|
+
Be2twd7: "fkhj508",
|
|
137
|
+
Bhrd7zp: "figsok6",
|
|
138
|
+
Bg96gwp: "f1i3iumi"
|
|
176
139
|
}
|
|
177
140
|
}, {
|
|
178
|
-
|
|
141
|
+
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
179
142
|
});
|
|
180
143
|
/**
|
|
181
144
|
* Apply styling to the InfoButton slots based on the state
|
|
182
145
|
*/
|
|
183
|
-
|
|
184
|
-
|
|
185
146
|
const useInfoButtonStyles_unstable = state => {
|
|
186
147
|
const {
|
|
187
148
|
size
|
|
@@ -195,6 +156,5 @@ const useInfoButtonStyles_unstable = state => {
|
|
|
195
156
|
state.root.className = react_1.mergeClasses(exports.infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
196
157
|
return state;
|
|
197
158
|
};
|
|
198
|
-
|
|
199
159
|
exports.useInfoButtonStyles_unstable = useInfoButtonStyles_unstable;
|
|
200
160
|
//# sourceMappingURL=useInfoButtonStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["react_tabster_1","require","react_icons_1","react_1","react_theme_1","exports","infoButtonClassNames","root","popover","content","useButtonStyles","__styles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","large","d","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className","mergeClasses"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.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 content: 'fui-InfoButton__content',\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 ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.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\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 ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\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 const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.content.className = mergeClasses(\n infoButtonClassNames.content,\n size === 'large' && popoverSurfaceStyles.large,\n state.content.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"],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useInfoButton_unstable = exports.useInfoButtonStyles_unstable = exports.renderInfoButton_unstable = exports.infoButtonClassNames = exports.InfoButton = void 0;
|
|
7
|
-
|
|
8
7
|
var InfoButton_1 = /*#__PURE__*/require("./InfoButton");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "InfoButton", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-infobutton/src/index.ts"],"
|
|
1
|
+
{"version":3,"names":["InfoButton_1","require","Object","defineProperty","exports","enumerable","get","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"sources":["../src/packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAO,UAAU;EAAA;AAAA;AACVL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAQ,oBAAoB;EAAA;AAAA;AACpBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAS,yBAAyB;EAAA;AAAA;AACzBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAU,4BAA4B;EAAA;AAAA;AAC5BR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAW,sBAAsB;EAAA;AAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.21",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,17 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
+
"@fluentui/scripts-api-extractor": "*",
|
|
32
|
+
"@fluentui/scripts-tasks": "*"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-popover": "^9.
|
|
36
|
-
"@fluentui/react-tabster": "^9.
|
|
37
|
-
"@fluentui/react-theme": "^9.1.
|
|
38
|
-
"@fluentui/react-utilities": "^9.
|
|
39
|
-
"@griffel/react": "^1.
|
|
36
|
+
"@fluentui/react-popover": "^9.5.3",
|
|
37
|
+
"@fluentui/react-tabster": "^9.5.7",
|
|
38
|
+
"@fluentui/react-theme": "^9.1.6",
|
|
39
|
+
"@fluentui/react-utilities": "^9.7.0",
|
|
40
|
+
"@griffel/react": "^1.5.2",
|
|
40
41
|
"tslib": "^2.1.0"
|
|
41
42
|
},
|
|
42
43
|
"peerDependencies": {
|
package/Spec.md
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-infobutton Spec
|
|
2
|
-
|
|
3
|
-
Convergence epic issue: [#25062](https://github.com/microsoft/fluentui/issues/25062)
|
|
4
|
-
|
|
5
|
-
## Background
|
|
6
|
-
|
|
7
|
-
An InfoButton provides a way for users to get more information about a particular UI element. It is a button containing an icon that, when clicked, displays a Popover with the additional information. InfoButton may contain focusable items inside the Popover.
|
|
8
|
-
|
|
9
|
-
Because the Popover isn't always visible, it should not contain information that people must know in order to complete the field.
|
|
10
|
-
|
|
11
|
-
### Anatomy
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Prior Art
|
|
16
|
-
|
|
17
|
-
| Name | library | Notes |
|
|
18
|
-
| --------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
19
|
-
| IconButtonTooltip | [Carbon Design System](https://www.carbondesignsystem.com/components/tooltip/usage) | This is an example within the tooltip component. |
|
|
20
|
-
| Tooltip with card appearance and general tooltip | [EverGreen](https://evergreen.segment.com/components/tooltip) | This are examples within the tooltip component. This library doesn't use a button, instead just an icon. |
|
|
21
|
-
| Input and guidance to add info button | [Salesforce](https://www.lightningdesignsystem.com/components/input/) | This component lives within Input and shows how to build an info button instead. |
|
|
22
|
-
| TextField with example on how to add an info button | [v8](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield) | This is just an example and on how to implement it. |
|
|
23
|
-
| ContextualHelp | [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/ContextualHelp.html) | It's a full component and uses a Popover instead of tooltip. |
|
|
24
|
-
|
|
25
|
-
#### Comparison with v0 and v8
|
|
26
|
-
|
|
27
|
-
- v0 does not have an InfoButton component.
|
|
28
|
-
- v8 does not have an InfoButton component, but does have a TextField component that has an example of how to add an info button to a TextField, see "Prior Art" section above for more details.
|
|
29
|
-
|
|
30
|
-
## Sample Code
|
|
31
|
-
|
|
32
|
-
```jsx
|
|
33
|
-
<InfoButton content="This is some additional information." />
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## API
|
|
37
|
-
|
|
38
|
-
#### Props
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
export type InfoButtonSlots = {
|
|
42
|
-
root: NonNullable<Slot<'button'>>;
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
|
|
46
|
-
*/
|
|
47
|
-
popover: NonNullable<Slot<PopoverProps>>;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* The content to be displayed in the PopoverSurface when the button is pressed.
|
|
51
|
-
*/
|
|
52
|
-
content: NonNullable<Slot<typeof PopoverSurface>>;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* InfoButton Props
|
|
57
|
-
*/
|
|
58
|
-
export type InfoButtonProps = ComponentProps<Partial<InfoButtonSlots>>;
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* State used in rendering InfoButton
|
|
62
|
-
*/
|
|
63
|
-
export type InfoButtonState = ComponentState<InfoButtonSlots>;
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
## Structure
|
|
67
|
-
|
|
68
|
-
_**Public**_
|
|
69
|
-
|
|
70
|
-
```jsx
|
|
71
|
-
<InfoButton
|
|
72
|
-
content={
|
|
73
|
-
<>
|
|
74
|
-
Popover above-start lorem ipsum dolor sit amet consectetur.
|
|
75
|
-
<Link href="https://react.fluentui.dev">Learn more</Link>
|
|
76
|
-
</>
|
|
77
|
-
}
|
|
78
|
-
/>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
_**Internal**_
|
|
82
|
-
|
|
83
|
-
```jsx
|
|
84
|
-
return (
|
|
85
|
-
<slots.popover {...(slotProps.popover as PopoverProps)}>
|
|
86
|
-
<PopoverTrigger>
|
|
87
|
-
<slots.root {...slotProps.root} />
|
|
88
|
-
</PopoverTrigger>
|
|
89
|
-
<slots.content {...slotProps.content} />
|
|
90
|
-
</slots.popover>
|
|
91
|
-
);
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
_**DOM**_
|
|
95
|
-
|
|
96
|
-
```html
|
|
97
|
-
<button type="button" class="fui-Button fui-InfoButton__button">
|
|
98
|
-
<!-- icon -->
|
|
99
|
-
</button>
|
|
100
|
-
|
|
101
|
-
<!-- on document.body -->
|
|
102
|
-
<div role="tooltip" class="fui-PopoverSurface fui-InfoButton__content">
|
|
103
|
-
Popover above-start lorem ipsum dolor sit amet consectetur.
|
|
104
|
-
<a href="https://react.fluentui.dev">Learn more</a>
|
|
105
|
-
</div>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## Migration
|
|
109
|
-
|
|
110
|
-
There's no migration guide as `v0` and `v8` do not have an InfoButton component.
|
|
111
|
-
|
|
112
|
-
## Behaviors
|
|
113
|
-
|
|
114
|
-
> Note: The behavior will change when used in conjunction with the `Field` component. It is mentioned that when a form has many InfoButtons, it may be better to not make a full tab stop in the button. The idea is to have each field have a "shortcut" that will let you focus on the infobutton. This will be implemented by Field if needed.
|
|
115
|
-
|
|
116
|
-
- _Component States_
|
|
117
|
-
- Popover open: The Popover is open and content visible.
|
|
118
|
-
- _Interaction_
|
|
119
|
-
- _Keyboard_
|
|
120
|
-
- `Enter` or `Space` key: Opens the Popover.
|
|
121
|
-
- Focusable items in Popover: Item should trap focus within the Popover.
|
|
122
|
-
- No focusable items in Popover: Focus should stay on the button.
|
|
123
|
-
- `Escape` key: Closes the Popover.
|
|
124
|
-
- _Cursor_
|
|
125
|
-
- `Click`: Opens the Popover.
|
|
126
|
-
- `Click` outside of Popover: Closes the Popover.
|
|
127
|
-
- _Touch_
|
|
128
|
-
- `Tap`: Opens the Popover.
|
|
129
|
-
- `Tap` outside of Popover: Closes the Popover.
|
|
130
|
-
- _Screen readers_
|
|
131
|
-
- When screen reader is on the button, it should announce that it is a button, that it can be used to open a Popover, and read out the aria-label of the button.
|
|
132
|
-
- When screen reader is on the Popover, it should announce that it is a dialog, and read out the content of the Popover.
|
|
133
|
-
|
|
134
|
-
## Accessibility
|
|
135
|
-
|
|
136
|
-
- `role="tooltip"` is used on the PopoverSurface.
|
|
137
|
-
- Tab order
|
|
138
|
-
- When tabbing through the page, the button should be a tab stop.
|
|
139
|
-
- When focused on the button, pressing `Enter` or `Space` should open the Popover.
|
|
140
|
-
- If the popover does not contain any focusable items, focus should stay on the button.
|
|
141
|
-
- When focused on the button, pressing `Escape` should close the Popover.
|
|
142
|
-
- When the Popover is open and it has focusable items, tabbing should move to the next focusable item.
|
|
143
|
-
- When focused on an item inside the Popover, pressing `Escape` should close the Popover and return to the button.
|