@cloudscape-design/components 3.0.1307 → 3.0.1308
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/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.js +4 -2
- package/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.js +4 -2
- package/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.js +3 -2
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.js +2 -2
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts +1 -0
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/state/use-app-layout.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/state/use-app-layout.js +12 -1
- package/app-layout/visual-refresh-toolbar/state/use-app-layout.js.map +1 -1
- package/badge/styles.css.js +10 -10
- package/badge/styles.scoped.css +29 -16
- package/badge/styles.selectors.js +10 -10
- package/expandable-section/styles.css.js +35 -35
- package/expandable-section/styles.scoped.css +68 -68
- package/expandable-section/styles.selectors.js +35 -35
- package/icon/interfaces.d.ts +1 -1
- package/icon/interfaces.d.ts.map +1 -1
- package/icon/interfaces.js.map +1 -1
- package/icon/internal.js +2 -2
- package/icon/internal.js.map +1 -1
- package/icon/styles.css.js +41 -39
- package/icon/styles.scoped.css +104 -85
- package/icon/styles.selectors.js +41 -39
- package/internal/base-component/styles.scoped.css +35 -3
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/generated/styles/tokens.d.ts +23 -1
- package/internal/generated/styles/tokens.js +23 -1
- package/internal/generated/theming/index.cjs +476 -4
- package/internal/generated/theming/index.cjs.d.ts +216 -0
- package/internal/generated/theming/index.d.ts +216 -0
- package/internal/generated/theming/index.js +476 -4
- package/internal/hooks/use-width-change/index.d.ts +12 -0
- package/internal/hooks/use-width-change/index.d.ts.map +1 -0
- package/internal/hooks/use-width-change/index.js +33 -0
- package/internal/hooks/use-width-change/index.js.map +1 -0
- package/internal/manifest.json +1 -1
- package/manifest.json +2 -2
- package/package.json +1 -1
- package/prompt-input/internal.d.ts.map +1 -1
- package/prompt-input/internal.js +9 -2
- package/prompt-input/internal.js.map +1 -1
- package/prompt-input/tokens/use-token-mode.d.ts.map +1 -1
- package/prompt-input/tokens/use-token-mode.js +0 -9
- package/prompt-input/tokens/use-token-mode.js.map +1 -1
- package/wizard/wizard-step-list.js +4 -4
- package/wizard/wizard-step-list.js.map +1 -1
|
@@ -158,10 +158,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
158
158
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
159
159
|
SPDX-License-Identifier: Apache-2.0
|
|
160
160
|
*/
|
|
161
|
-
.awsui_content-
|
|
162
|
-
animation: awsui_awsui-motion-fade-
|
|
161
|
+
.awsui_content-enter_gwq0h_1sjri_161:not(#\9) {
|
|
162
|
+
animation: awsui_awsui-motion-fade-in_gwq0h_1sjri_1 var(--motion-duration-show-paced-otsjh8, 180ms) var(--motion-easing-show-paced-ym6eyn, ease-out);
|
|
163
163
|
}
|
|
164
|
-
@keyframes awsui_awsui-motion-fade-
|
|
164
|
+
@keyframes awsui_awsui-motion-fade-in_gwq0h_1sjri_1 {
|
|
165
165
|
from {
|
|
166
166
|
opacity: 0.2;
|
|
167
167
|
}
|
|
@@ -170,45 +170,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
@media (prefers-reduced-motion: reduce) {
|
|
173
|
-
.awsui_content-
|
|
173
|
+
.awsui_content-enter_gwq0h_1sjri_161:not(#\9) {
|
|
174
174
|
animation: none;
|
|
175
175
|
transition: none;
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
|
-
.awsui-motion-disabled .awsui_content-
|
|
178
|
+
.awsui-motion-disabled .awsui_content-enter_gwq0h_1sjri_161:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1sjri_161:not(#\9) {
|
|
179
179
|
animation: none;
|
|
180
180
|
transition: none;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
-
.awsui_trigger-
|
|
183
|
+
.awsui_trigger-expanded_gwq0h_1sjri_183:not(#\9) {
|
|
184
184
|
transition: border-bottom-color var(--motion-duration-show-paced-otsjh8, 180ms) var(--motion-easing-show-paced-ym6eyn, ease-out);
|
|
185
185
|
}
|
|
186
186
|
@media (prefers-reduced-motion: reduce) {
|
|
187
|
-
.awsui_trigger-
|
|
187
|
+
.awsui_trigger-expanded_gwq0h_1sjri_183:not(#\9) {
|
|
188
188
|
animation: none;
|
|
189
189
|
transition: none;
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
|
-
.awsui-motion-disabled .awsui_trigger-
|
|
192
|
+
.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1sjri_183:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1sjri_183:not(#\9) {
|
|
193
193
|
animation: none;
|
|
194
194
|
transition: none;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
.
|
|
197
|
+
.awsui_icon_gwq0h_1sjri_197:not(#\9) {
|
|
198
198
|
transition: transform var(--motion-duration-rotate-90-lyzb0k, 135ms) var(--motion-easing-rotate-90-jhbqg9, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
199
199
|
}
|
|
200
200
|
@media (prefers-reduced-motion: reduce) {
|
|
201
|
-
.
|
|
201
|
+
.awsui_icon_gwq0h_1sjri_197:not(#\9) {
|
|
202
202
|
animation: none;
|
|
203
203
|
transition: none;
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
|
-
.awsui-motion-disabled .
|
|
206
|
+
.awsui-motion-disabled .awsui_icon_gwq0h_1sjri_197:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1sjri_197:not(#\9) {
|
|
207
207
|
animation: none;
|
|
208
208
|
transition: none;
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
.
|
|
211
|
+
.awsui_root_gwq0h_1sjri_211:not(#\9) {
|
|
212
212
|
border-collapse: separate;
|
|
213
213
|
border-spacing: 0;
|
|
214
214
|
box-sizing: border-box;
|
|
@@ -243,33 +243,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
243
243
|
display: block;
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
-
.awsui_expand-
|
|
246
|
+
.awsui_expand-button_gwq0h_1sjri_246:not(#\9) {
|
|
247
247
|
outline: none;
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
-
.
|
|
250
|
+
.awsui_icon_gwq0h_1sjri_197:not(#\9) {
|
|
251
251
|
transform: rotate(-90deg);
|
|
252
252
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
253
253
|
}
|
|
254
|
-
.
|
|
254
|
+
.awsui_icon_gwq0h_1sjri_197.awsui_expanded_gwq0h_1sjri_254:not(#\9) {
|
|
255
255
|
transform: rotate(0deg);
|
|
256
256
|
}
|
|
257
|
-
.
|
|
257
|
+
.awsui_icon_gwq0h_1sjri_197:not(#\9):dir(rtl) {
|
|
258
258
|
transform: rotate(90deg);
|
|
259
259
|
}
|
|
260
|
-
.
|
|
260
|
+
.awsui_icon_gwq0h_1sjri_197:not(#\9):dir(rtl).awsui_expanded_gwq0h_1sjri_254 {
|
|
261
261
|
transform: rotate(0deg);
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
.awsui_icon-
|
|
264
|
+
.awsui_icon-container_gwq0h_1sjri_264:not(#\9) {
|
|
265
265
|
position: relative;
|
|
266
266
|
margin-inline: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2) calc(var(--space-xxs-hwfkai, 4px) + var(--border-divider-list-width-tdfx1x, 1px));
|
|
267
267
|
}
|
|
268
|
-
.awsui_icon-container-
|
|
268
|
+
.awsui_icon-container-container_gwq0h_1sjri_268:not(#\9) {
|
|
269
269
|
margin-inline-end: var(--space-xs-ymlm0b, 8px);
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
-
.
|
|
272
|
+
.awsui_wrapper_gwq0h_1sjri_272:not(#\9) {
|
|
273
273
|
box-sizing: border-box;
|
|
274
274
|
border-block: none;
|
|
275
275
|
border-inline: none;
|
|
@@ -277,81 +277,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
277
277
|
line-height: var(--line-height-body-m-2mh3ke, 20px);
|
|
278
278
|
text-align: start;
|
|
279
279
|
}
|
|
280
|
-
.awsui_wrapper-
|
|
280
|
+
.awsui_wrapper-default_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-inline_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9) {
|
|
281
281
|
border-block: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
|
|
282
282
|
border-inline: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
|
|
283
283
|
}
|
|
284
|
-
.awsui_wrapper-
|
|
284
|
+
.awsui_wrapper-navigation_gwq0h_1sjri_284:not(#\9) {
|
|
285
285
|
border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
|
|
286
286
|
}
|
|
287
|
-
.awsui_wrapper-
|
|
287
|
+
.awsui_wrapper-navigation_gwq0h_1sjri_284:not(#\9), .awsui_wrapper-container_gwq0h_1sjri_287:not(#\9) {
|
|
288
288
|
display: flex;
|
|
289
289
|
font-weight: var(--font-weight-heading-s-lcx0ai, 700);
|
|
290
290
|
}
|
|
291
|
-
.awsui_wrapper-
|
|
291
|
+
.awsui_wrapper-default_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-inline_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-navigation_gwq0h_1sjri_284:not(#\9), .awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-compact_gwq0h_1sjri_291:not(#\9) {
|
|
292
292
|
color: var(--color-text-expandable-section-default-ynw8my, #0f141a);
|
|
293
293
|
-webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
|
|
294
294
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
|
|
295
295
|
}
|
|
296
|
-
.awsui_wrapper-
|
|
297
|
-
font-size: var(--font-expandable-heading-
|
|
296
|
+
.awsui_wrapper-default_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-inline_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-navigation_gwq0h_1sjri_284:not(#\9), .awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9) {
|
|
297
|
+
font-size: var(--font-size-expandable-heading-duh2ta, 16px);
|
|
298
298
|
letter-spacing: var(--letter-spacing-heading-s-4st9ep, -0.005em);
|
|
299
299
|
}
|
|
300
|
-
.awsui_wrapper-
|
|
300
|
+
.awsui_wrapper-default_gwq0h_1sjri_280:not(#\9) {
|
|
301
301
|
padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
302
302
|
padding-inline-end: var(--space-xxs-hwfkai, 4px);
|
|
303
303
|
}
|
|
304
|
-
.awsui_wrapper-
|
|
304
|
+
.awsui_wrapper-default_gwq0h_1sjri_280.awsui_header-deprecated_gwq0h_1sjri_304:not(#\9) {
|
|
305
305
|
padding-inline-start: var(--space-xxs-hwfkai, 4px);
|
|
306
306
|
}
|
|
307
|
-
.awsui_wrapper-
|
|
307
|
+
.awsui_wrapper-default_gwq0h_1sjri_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1sjri_304), .awsui_wrapper-inline_gwq0h_1sjri_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1sjri_304) {
|
|
308
308
|
padding-inline-start: calc(var(--size-icon-normal-levt08, 16px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xxs-hwfkai, 4px) + var(--border-divider-list-width-tdfx1x, 1px));
|
|
309
309
|
}
|
|
310
|
-
.awsui_wrapper-
|
|
310
|
+
.awsui_wrapper-default_gwq0h_1sjri_280.awsui_wrapper-expanded_gwq0h_1sjri_310:not(#\9), .awsui_wrapper-inline_gwq0h_1sjri_280.awsui_wrapper-expanded_gwq0h_1sjri_310:not(#\9) {
|
|
311
311
|
padding-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
312
|
-
border-block-end-color: var(--color-border-
|
|
312
|
+
border-block-end-color: var(--color-border-expandable-section-default-inl8g4, #c6c6cd);
|
|
313
313
|
}
|
|
314
|
-
.awsui_wrapper-
|
|
314
|
+
.awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9) {
|
|
315
315
|
padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
316
316
|
}
|
|
317
|
-
.awsui_wrapper-
|
|
317
|
+
.awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9), .awsui_wrapper-compact_gwq0h_1sjri_291:not(#\9) {
|
|
318
318
|
padding-inline-end: 0;
|
|
319
319
|
}
|
|
320
|
-
.awsui_wrapper-
|
|
320
|
+
.awsui_wrapper-footer_gwq0h_1sjri_280.awsui_header-deprecated_gwq0h_1sjri_304:not(#\9), .awsui_wrapper-compact_gwq0h_1sjri_291.awsui_header-deprecated_gwq0h_1sjri_304:not(#\9) {
|
|
321
321
|
padding-inline-start: 0;
|
|
322
322
|
}
|
|
323
|
-
.awsui_wrapper-
|
|
323
|
+
.awsui_wrapper-footer_gwq0h_1sjri_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1sjri_304), .awsui_wrapper-compact_gwq0h_1sjri_291:not(#\9):not(.awsui_header-deprecated_gwq0h_1sjri_304) {
|
|
324
324
|
padding-inline-start: calc(var(--size-icon-normal-levt08, 16px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xxs-hwfkai, 4px) + var(--border-divider-list-width-tdfx1x, 1px));
|
|
325
325
|
}
|
|
326
|
-
.awsui_wrapper-
|
|
326
|
+
.awsui_wrapper-container_gwq0h_1sjri_287:not(#\9) {
|
|
327
327
|
padding-block: var(--space-container-header-top-am4vzw, 12px) var(--space-container-header-bottom-2taq8v, 8px);
|
|
328
328
|
padding-inline-end: var(--space-container-horizontal-nqrzyh, 20px);
|
|
329
329
|
}
|
|
330
|
-
.awsui_wrapper-
|
|
330
|
+
.awsui_wrapper-container_gwq0h_1sjri_287:not(#\9):not(.awsui_wrapper-expanded_gwq0h_1sjri_310) {
|
|
331
331
|
padding-block-end: var(--space-container-header-top-am4vzw, 12px);
|
|
332
332
|
}
|
|
333
|
-
.awsui_wrapper-
|
|
333
|
+
.awsui_wrapper-container_gwq0h_1sjri_287.awsui_wrapper-not-expanded-without-actions_gwq0h_1sjri_333:not(#\9) {
|
|
334
334
|
padding-block-end: calc(var(--space-container-header-top-am4vzw, 12px) + var(--space-scaled-xxs-pfm1nx, 4px));
|
|
335
335
|
}
|
|
336
|
-
.awsui_wrapper-
|
|
336
|
+
.awsui_wrapper-container_gwq0h_1sjri_287.awsui_header-deprecated_gwq0h_1sjri_304:not(#\9) {
|
|
337
337
|
padding-inline-start: var(--space-container-horizontal-nqrzyh, 20px);
|
|
338
338
|
}
|
|
339
|
-
.awsui_wrapper-
|
|
339
|
+
.awsui_wrapper-container_gwq0h_1sjri_287:not(#\9):not(.awsui_header-deprecated_gwq0h_1sjri_304) {
|
|
340
340
|
padding-inline-start: calc(var(--space-container-horizontal-nqrzyh, 20px) + calc(var(--size-icon-medium-uv8xcz, 20px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xs-ymlm0b, 8px)));
|
|
341
341
|
}
|
|
342
|
-
body[data-awsui-focus-visible=true] .awsui_wrapper-
|
|
342
|
+
body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1sjri_287:not(#\9):focus {
|
|
343
343
|
padding-block: calc(var(--space-scaled-s-8ozaad, 12px) - var(--border-divider-section-width-uwo8my, 1px));
|
|
344
344
|
padding-inline: calc(var(--space-l-2ud1p3, 20px) - var(--border-divider-section-width-uwo8my, 1px));
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
.
|
|
347
|
+
.awsui_header_gwq0h_1sjri_304:not(#\9) {
|
|
348
348
|
/* used in test-utils */
|
|
349
349
|
}
|
|
350
|
-
.awsui_header-
|
|
350
|
+
.awsui_header-wrapper_gwq0h_1sjri_350:not(#\9), .awsui_header-deprecated_gwq0h_1sjri_304:not(#\9) {
|
|
351
351
|
display: flex;
|
|
352
352
|
font-weight: var(--font-weight-heading-s-lcx0ai, 700);
|
|
353
353
|
}
|
|
354
|
-
.awsui_header-
|
|
354
|
+
.awsui_header-wrapper_gwq0h_1sjri_350:not(#\9) {
|
|
355
355
|
font-size: inherit;
|
|
356
356
|
letter-spacing: inherit;
|
|
357
357
|
margin-block: 0;
|
|
@@ -359,20 +359,20 @@ body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1tk4s_287:not
|
|
|
359
359
|
padding-block: 0;
|
|
360
360
|
padding-inline: 0;
|
|
361
361
|
}
|
|
362
|
-
.awsui_header-actions-
|
|
362
|
+
.awsui_header-actions-wrapper_gwq0h_1sjri_362:not(#\9) {
|
|
363
363
|
display: flex;
|
|
364
364
|
flex-direction: row;
|
|
365
365
|
justify-content: space-between;
|
|
366
366
|
align-items: center;
|
|
367
367
|
}
|
|
368
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
368
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1sjri_368:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1sjri_368:not(#\9):focus {
|
|
369
369
|
position: relative;
|
|
370
370
|
}
|
|
371
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
371
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1sjri_368:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1sjri_368:not(#\9):focus {
|
|
372
372
|
outline: 2px dotted transparent;
|
|
373
373
|
outline-offset: calc(0px - 1px);
|
|
374
374
|
}
|
|
375
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
375
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1sjri_368:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1sjri_368:not(#\9):focus::before {
|
|
376
376
|
content: " ";
|
|
377
377
|
display: block;
|
|
378
378
|
position: absolute;
|
|
@@ -386,21 +386,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1tk4s_368:not(#\9
|
|
|
386
386
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
387
387
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
|
|
388
388
|
}
|
|
389
|
-
.awsui_header-
|
|
389
|
+
.awsui_header-button_gwq0h_1sjri_368:not(#\9) {
|
|
390
390
|
box-sizing: border-box;
|
|
391
391
|
display: flex;
|
|
392
392
|
margin-inline-start: calc(-1 * calc(var(--size-icon-normal-levt08, 16px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xxs-hwfkai, 4px) + var(--border-divider-list-width-tdfx1x, 1px)));
|
|
393
393
|
}
|
|
394
|
-
.awsui_header-container-
|
|
394
|
+
.awsui_header-container-button_gwq0h_1sjri_368:not(#\9) {
|
|
395
395
|
margin-inline-start: calc(-1 * calc(var(--size-icon-medium-uv8xcz, 20px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xs-ymlm0b, 8px)));
|
|
396
396
|
}
|
|
397
|
-
.awsui_header-
|
|
397
|
+
.awsui_header-container_gwq0h_1sjri_368:not(#\9) {
|
|
398
398
|
inline-size: 100%;
|
|
399
399
|
}
|
|
400
|
-
.awsui_header-
|
|
400
|
+
.awsui_header-container_gwq0h_1sjri_368 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9) {
|
|
401
401
|
margin-block-start: var(--space-expandable-section-icon-offset-top-cntyn8, 4px);
|
|
402
402
|
}
|
|
403
|
-
.awsui_header-
|
|
403
|
+
.awsui_header-navigation_gwq0h_1sjri_403 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9) {
|
|
404
404
|
display: inline-flex;
|
|
405
405
|
cursor: pointer;
|
|
406
406
|
color: var(--color-text-expandable-section-navigation-icon-default-mklu1s, #424650);
|
|
@@ -413,17 +413,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1tk4s_368:not(#\9
|
|
|
413
413
|
text-decoration: none;
|
|
414
414
|
flex-direction: column;
|
|
415
415
|
}
|
|
416
|
-
.awsui_header-
|
|
416
|
+
.awsui_header-navigation_gwq0h_1sjri_403 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9):hover {
|
|
417
417
|
color: var(--color-text-expandable-section-hover-ojzwhd, #006ce0);
|
|
418
418
|
}
|
|
419
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
419
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1sjri_403 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9):focus {
|
|
420
420
|
position: relative;
|
|
421
421
|
}
|
|
422
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
422
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1sjri_403 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9):focus {
|
|
423
423
|
outline: 2px dotted transparent;
|
|
424
424
|
outline-offset: calc(2px - 1px);
|
|
425
425
|
}
|
|
426
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
426
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1sjri_403 > .awsui_icon-container_gwq0h_1sjri_264:not(#\9):focus::before {
|
|
427
427
|
content: " ";
|
|
428
428
|
display: block;
|
|
429
429
|
position: absolute;
|
|
@@ -437,39 +437,39 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1tk4s_403 > .
|
|
|
437
437
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
|
|
438
438
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
|
|
439
439
|
}
|
|
440
|
-
.awsui_header-
|
|
440
|
+
.awsui_header-text_gwq0h_1sjri_440:not(#\9) {
|
|
441
441
|
/* used in test-utils */
|
|
442
442
|
}
|
|
443
443
|
|
|
444
|
-
:not(#\9):not(.awsui_wrapper-
|
|
444
|
+
:not(#\9):not(.awsui_wrapper-compact_gwq0h_1sjri_291) > .awsui_header-actions-wrapper_gwq0h_1sjri_362 {
|
|
445
445
|
flex-wrap: wrap;
|
|
446
446
|
column-gap: var(--space-xs-ymlm0b, 8px);
|
|
447
447
|
row-gap: var(--space-scaled-xxxs-oo06c7, 2px);
|
|
448
448
|
}
|
|
449
449
|
|
|
450
|
-
.
|
|
450
|
+
.awsui_content_gwq0h_1sjri_161:not(#\9) {
|
|
451
451
|
display: none;
|
|
452
452
|
}
|
|
453
|
-
.awsui_content-
|
|
453
|
+
.awsui_content-default_gwq0h_1sjri_453:not(#\9), .awsui_content-inline_gwq0h_1sjri_453:not(#\9) {
|
|
454
454
|
padding-block: var(--space-scaled-xs-xwoogq, 8px);
|
|
455
455
|
padding-inline: 0;
|
|
456
456
|
}
|
|
457
|
-
.awsui_content-
|
|
457
|
+
.awsui_content-footer_gwq0h_1sjri_457:not(#\9) {
|
|
458
458
|
padding-block: var(--space-xs-ymlm0b, 8px);
|
|
459
459
|
padding-inline: 0;
|
|
460
460
|
}
|
|
461
|
-
.awsui_content-
|
|
461
|
+
.awsui_content-expanded_gwq0h_1sjri_461:not(#\9) {
|
|
462
462
|
display: block;
|
|
463
463
|
}
|
|
464
|
-
.awsui_content-
|
|
464
|
+
.awsui_content-compact_gwq0h_1sjri_464:not(#\9) {
|
|
465
465
|
padding-inline-start: calc(var(--size-icon-normal-levt08, 16px) + (var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / -2 + var(--space-xxs-hwfkai, 4px) + var(--border-divider-list-width-tdfx1x, 1px));
|
|
466
466
|
}
|
|
467
467
|
|
|
468
|
-
.
|
|
468
|
+
.awsui_focusable_gwq0h_1sjri_468:not(#\9):focus {
|
|
469
469
|
outline: none;
|
|
470
470
|
text-decoration: none;
|
|
471
471
|
}
|
|
472
|
-
body[data-awsui-focus-visible=true] .
|
|
472
|
+
body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1sjri_468:not(#\9):focus {
|
|
473
473
|
outline: 2px dotted transparent;
|
|
474
474
|
border-block: var(--border-width-button-jm0qg7, 2px) solid var(--color-border-item-focused-uk47pl, #006ce0);
|
|
475
475
|
border-inline: var(--border-width-button-jm0qg7, 2px) solid var(--color-border-item-focused-uk47pl, #006ce0);
|
|
@@ -480,9 +480,9 @@ body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1tk4s_468:not(#\9):fo
|
|
|
480
480
|
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
|
|
481
481
|
}
|
|
482
482
|
|
|
483
|
-
.awsui_click-
|
|
483
|
+
.awsui_click-target_gwq0h_1sjri_483:not(#\9) {
|
|
484
484
|
cursor: pointer;
|
|
485
485
|
}
|
|
486
|
-
.awsui_click-
|
|
486
|
+
.awsui_click-target_gwq0h_1sjri_483:not(#\9):not(.awsui_wrapper-container_gwq0h_1sjri_287):not(.awsui_header-container-button_gwq0h_1sjri_368):hover {
|
|
487
487
|
color: var(--color-text-expandable-section-hover-ojzwhd, #006ce0);
|
|
488
488
|
}
|
|
@@ -2,40 +2,40 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content-enter": "awsui_content-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"trigger-expanded": "awsui_trigger-
|
|
8
|
-
"icon": "
|
|
9
|
-
"root": "
|
|
10
|
-
"expand-button": "awsui_expand-
|
|
11
|
-
"expanded": "
|
|
12
|
-
"icon-container": "awsui_icon-
|
|
13
|
-
"icon-container-container": "awsui_icon-container-
|
|
14
|
-
"wrapper": "
|
|
15
|
-
"wrapper-default": "awsui_wrapper-
|
|
16
|
-
"wrapper-inline": "awsui_wrapper-
|
|
17
|
-
"wrapper-footer": "awsui_wrapper-
|
|
18
|
-
"wrapper-navigation": "awsui_wrapper-
|
|
19
|
-
"wrapper-container": "awsui_wrapper-
|
|
20
|
-
"wrapper-compact": "awsui_wrapper-
|
|
21
|
-
"header-deprecated": "awsui_header-
|
|
22
|
-
"wrapper-expanded": "awsui_wrapper-
|
|
23
|
-
"wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-
|
|
24
|
-
"header": "
|
|
25
|
-
"header-wrapper": "awsui_header-
|
|
26
|
-
"header-actions-wrapper": "awsui_header-actions-
|
|
27
|
-
"header-button": "awsui_header-
|
|
28
|
-
"header-container-button": "awsui_header-container-
|
|
29
|
-
"header-container": "awsui_header-
|
|
30
|
-
"header-navigation": "awsui_header-
|
|
31
|
-
"header-text": "awsui_header-
|
|
32
|
-
"content": "
|
|
33
|
-
"content-default": "awsui_content-
|
|
34
|
-
"content-inline": "awsui_content-
|
|
35
|
-
"content-footer": "awsui_content-
|
|
36
|
-
"content-expanded": "awsui_content-
|
|
37
|
-
"content-compact": "awsui_content-
|
|
38
|
-
"focusable": "
|
|
39
|
-
"click-target": "awsui_click-
|
|
5
|
+
"content-enter": "awsui_content-enter_gwq0h_1sjri_161",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1sjri_1",
|
|
7
|
+
"trigger-expanded": "awsui_trigger-expanded_gwq0h_1sjri_183",
|
|
8
|
+
"icon": "awsui_icon_gwq0h_1sjri_197",
|
|
9
|
+
"root": "awsui_root_gwq0h_1sjri_211",
|
|
10
|
+
"expand-button": "awsui_expand-button_gwq0h_1sjri_246",
|
|
11
|
+
"expanded": "awsui_expanded_gwq0h_1sjri_254",
|
|
12
|
+
"icon-container": "awsui_icon-container_gwq0h_1sjri_264",
|
|
13
|
+
"icon-container-container": "awsui_icon-container-container_gwq0h_1sjri_268",
|
|
14
|
+
"wrapper": "awsui_wrapper_gwq0h_1sjri_272",
|
|
15
|
+
"wrapper-default": "awsui_wrapper-default_gwq0h_1sjri_280",
|
|
16
|
+
"wrapper-inline": "awsui_wrapper-inline_gwq0h_1sjri_280",
|
|
17
|
+
"wrapper-footer": "awsui_wrapper-footer_gwq0h_1sjri_280",
|
|
18
|
+
"wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1sjri_284",
|
|
19
|
+
"wrapper-container": "awsui_wrapper-container_gwq0h_1sjri_287",
|
|
20
|
+
"wrapper-compact": "awsui_wrapper-compact_gwq0h_1sjri_291",
|
|
21
|
+
"header-deprecated": "awsui_header-deprecated_gwq0h_1sjri_304",
|
|
22
|
+
"wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1sjri_310",
|
|
23
|
+
"wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_1sjri_333",
|
|
24
|
+
"header": "awsui_header_gwq0h_1sjri_304",
|
|
25
|
+
"header-wrapper": "awsui_header-wrapper_gwq0h_1sjri_350",
|
|
26
|
+
"header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1sjri_362",
|
|
27
|
+
"header-button": "awsui_header-button_gwq0h_1sjri_368",
|
|
28
|
+
"header-container-button": "awsui_header-container-button_gwq0h_1sjri_368",
|
|
29
|
+
"header-container": "awsui_header-container_gwq0h_1sjri_368",
|
|
30
|
+
"header-navigation": "awsui_header-navigation_gwq0h_1sjri_403",
|
|
31
|
+
"header-text": "awsui_header-text_gwq0h_1sjri_440",
|
|
32
|
+
"content": "awsui_content_gwq0h_1sjri_161",
|
|
33
|
+
"content-default": "awsui_content-default_gwq0h_1sjri_453",
|
|
34
|
+
"content-inline": "awsui_content-inline_gwq0h_1sjri_453",
|
|
35
|
+
"content-footer": "awsui_content-footer_gwq0h_1sjri_457",
|
|
36
|
+
"content-expanded": "awsui_content-expanded_gwq0h_1sjri_461",
|
|
37
|
+
"content-compact": "awsui_content-compact_gwq0h_1sjri_464",
|
|
38
|
+
"focusable": "awsui_focusable_gwq0h_1sjri_468",
|
|
39
|
+
"click-target": "awsui_click-target_gwq0h_1sjri_483"
|
|
40
40
|
};
|
|
41
41
|
|
package/icon/interfaces.d.ts
CHANGED
|
@@ -79,5 +79,5 @@ export interface IconProps extends BaseComponentProps {
|
|
|
79
79
|
export declare namespace IconProps {
|
|
80
80
|
type Name = BuiltInIconName | IconRegistryIconName;
|
|
81
81
|
type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';
|
|
82
|
-
type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';
|
|
82
|
+
type Size = 'x-small' | 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';
|
|
83
83
|
}
|
package/icon/interfaces.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAEtB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,IAAI,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAE1D,KAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAE/G,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAEtB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,IAAI,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAE1D,KAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAE/G,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5F"}
|
package/icon/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BuiltInIconName, IconRegistryIconName } from '../icon-provider/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface IconProps extends BaseComponentProps {\n /**\n * Specifies the icon to be displayed.\n */\n name?: IconProps.Name;\n\n /**\n * Specifies the size of the icon.\n *\n * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n * The icon will be vertically centered based on the height.\n *\n * @visualrefresh `medium` size\n */\n size?: IconProps.Size;\n\n /**\n * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n */\n variant?: IconProps.Variant;\n\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n * For SVG icons, use the `svg` slot instead.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n */\n url?: string;\n\n /**\n * Specifies alternate text for a custom icon (using the `url` attribute).\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n *\n * @deprecated Use `ariaLabel` instead.\n */\n alt?: string;\n\n /**\n * Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n */\n ariaLabel?: string;\n\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n svg?: React.ReactNode;\n\n /**\n * Attributes to add to the native element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace IconProps {\n export type Name = BuiltInIconName | IconRegistryIconName;\n\n export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BuiltInIconName, IconRegistryIconName } from '../icon-provider/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface IconProps extends BaseComponentProps {\n /**\n * Specifies the icon to be displayed.\n */\n name?: IconProps.Name;\n\n /**\n * Specifies the size of the icon.\n *\n * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n * The icon will be vertically centered based on the height.\n *\n * @visualrefresh `medium` size\n */\n size?: IconProps.Size;\n\n /**\n * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n */\n variant?: IconProps.Variant;\n\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n * For SVG icons, use the `svg` slot instead.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n */\n url?: string;\n\n /**\n * Specifies alternate text for a custom icon (using the `url` attribute).\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n *\n * @deprecated Use `ariaLabel` instead.\n */\n alt?: string;\n\n /**\n * Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n */\n ariaLabel?: string;\n\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `url` and `svg`, `svg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n svg?: React.ReactNode;\n\n /**\n * Attributes to add to the native element.\n * Some attributes will be automatically combined with internal attribute values:\n * - `className` will be appended.\n * - Event handlers will be chained, unless the default is prevented.\n *\n * We do not support using this attribute to apply custom styling.\n *\n * @awsuiSystem core\n */\n nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace IconProps {\n export type Name = BuiltInIconName | IconRegistryIconName;\n\n export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n export type Size = 'x-small' | 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}
|
package/icon/internal.js
CHANGED
|
@@ -25,7 +25,7 @@ function iconSizeMap(height, fontSize) {
|
|
|
25
25
|
return 'medium';
|
|
26
26
|
}
|
|
27
27
|
else if (height <= 16) {
|
|
28
|
-
return 'small';
|
|
28
|
+
return !!fontSize && fontSize <= 12 ? 'x-small' : 'small';
|
|
29
29
|
}
|
|
30
30
|
else {
|
|
31
31
|
return 'normal';
|
|
@@ -72,7 +72,7 @@ const InternalIcon = ({ name, size = 'normal', variant = 'normal', url, alt, ari
|
|
|
72
72
|
}
|
|
73
73
|
const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);
|
|
74
74
|
function iconMap(name) {
|
|
75
|
-
if (name === 'gen-ai' && iconSize === 'small') {
|
|
75
|
+
if (name === 'gen-ai' && (iconSize === 'small' || iconSize === 'x-small')) {
|
|
76
76
|
return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true", "data-testid": "gen-ai-filled" },
|
|
77
77
|
React.createElement("path", { d: "m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z", className: "filled" })));
|
|
78
78
|
}
|
package/icon/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/icon/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalIconContext } from '../icon-provider/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { IconProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalIconProps = IconProps &\n InternalBaseComponentProps & {\n badge?: boolean;\n };\n\nfunction iconSizeMap(height: number | null, fontSize?: number | null) {\n if (height === null) {\n // This is the best guess for the contextual height while server rendering.\n return 'normal';\n }\n\n // Only display medium size icon when both line-height >= 24px AND font-size >= 20px\n // This prevents icons from becoming medium size inappropriately\n if (height >= 50) {\n return 'large';\n } else if (height >= 36) {\n return 'big';\n } else if (height >= 24 && !!fontSize && fontSize >= 20) {\n return 'medium';\n } else if (height <= 16) {\n return 'small';\n } else {\n return 'normal';\n }\n}\n\nconst InternalIcon = ({\n name,\n size = 'normal',\n variant = 'normal',\n url,\n alt,\n ariaLabel,\n svg,\n badge,\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalIconProps) => {\n const icons = useContext(InternalIconContext);\n const iconRef = useRef<HTMLElement>(null);\n // To ensure a re-render is triggered on visual mode changes\n useVisualRefresh();\n const [parentHeight, setParentHeight] = useState<number | null>(null);\n const [parentFontSize, setParentFontSize] = useState<number | null>(null);\n const contextualSize = size === 'inherit';\n const iconSize = contextualSize ? iconSizeMap(parentHeight, parentFontSize) : size;\n const inlineStyles = contextualSize && parentHeight !== null ? { height: `${parentHeight}px` } : {};\n const baseProps = getBaseProps(props);\n\n baseProps.className = clsx(\n baseProps.className,\n styles.icon,\n contextualSize && styles['icon-flex-height'],\n badge && styles.badge,\n !contextualSize && styles[`size-${iconSize}-mapped-height`],\n styles[`size-${iconSize}`],\n styles[`variant-${variant}`],\n styles[`name-${name}`]\n );\n\n // Possible infinite loop is not a concern here because line\n // height should not change without an external state update.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!contextualSize || !iconRef.current) {\n return;\n }\n const computedStyle = getComputedStyle(iconRef.current);\n const { lineHeight, fontSize } = computedStyle;\n const newParentHeight = parseInt(lineHeight, 10);\n const newParentFontSize = parseInt(fontSize, 10);\n setParentHeight(newParentHeight);\n setParentFontSize(newParentFontSize);\n });\n\n const mergedRef = useMergeRefs(iconRef, __internalRootRef);\n const hasAriaLabel = typeof ariaLabel === 'string';\n const labelAttributes = hasAriaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};\n\n if (svg) {\n if (url) {\n warnOnce(\n 'Icon',\n 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.'\n );\n }\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n aria-hidden={!hasAriaLabel}\n style={inlineStyles}\n >\n {svg}\n </WithNativeAttributes>\n );\n }\n\n if (url) {\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n <img src={url} alt={ariaLabel ?? alt} />\n </WithNativeAttributes>\n );\n }\n\n const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);\n\n function iconMap(name: IconProps.Name) {\n if (name === 'gen-ai' && iconSize === 'small') {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n data-testid=\"gen-ai-filled\"\n >\n <path\n d=\"m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z\"\n className=\"filled\"\n />\n </svg>\n );\n } else {\n const icon = icons[name];\n if (!icon) {\n warnOnce(\n 'Icon',\n `You have specified \\`name=\"${name}\"\\` but no icon with that name was found in the current IconProvider context. If this is a custom icon, ensure your app is wrapped in an \\`IconProvider\\` with the icon defined via \\`defineIcons\\`.`\n );\n }\n return icon;\n }\n }\n\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n {validIcon ? iconMap(name) : undefined}\n </WithNativeAttributes>\n );\n};\n\nexport { InternalIconProps };\nexport default InternalIcon;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/icon/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalIconContext } from '../icon-provider/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { IconProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalIconProps = IconProps &\n InternalBaseComponentProps & {\n badge?: boolean;\n };\n\nfunction iconSizeMap(height: number | null, fontSize?: number | null) {\n if (height === null) {\n // This is the best guess for the contextual height while server rendering.\n return 'normal';\n }\n\n // Only display medium size icon when both line-height >= 24px AND font-size >= 20px\n // This prevents icons from becoming medium size inappropriately\n if (height >= 50) {\n return 'large';\n } else if (height >= 36) {\n return 'big';\n } else if (height >= 24 && !!fontSize && fontSize >= 20) {\n return 'medium';\n } else if (height <= 16) {\n return !!fontSize && fontSize <= 12 ? 'x-small' : 'small';\n } else {\n return 'normal';\n }\n}\n\nconst InternalIcon = ({\n name,\n size = 'normal',\n variant = 'normal',\n url,\n alt,\n ariaLabel,\n svg,\n badge,\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalIconProps) => {\n const icons = useContext(InternalIconContext);\n const iconRef = useRef<HTMLElement>(null);\n // To ensure a re-render is triggered on visual mode changes\n useVisualRefresh();\n const [parentHeight, setParentHeight] = useState<number | null>(null);\n const [parentFontSize, setParentFontSize] = useState<number | null>(null);\n const contextualSize = size === 'inherit';\n const iconSize = contextualSize ? iconSizeMap(parentHeight, parentFontSize) : size;\n const inlineStyles = contextualSize && parentHeight !== null ? { height: `${parentHeight}px` } : {};\n const baseProps = getBaseProps(props);\n\n baseProps.className = clsx(\n baseProps.className,\n styles.icon,\n contextualSize && styles['icon-flex-height'],\n badge && styles.badge,\n !contextualSize && styles[`size-${iconSize}-mapped-height`],\n styles[`size-${iconSize}`],\n styles[`variant-${variant}`],\n styles[`name-${name}`]\n );\n\n // Possible infinite loop is not a concern here because line\n // height should not change without an external state update.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!contextualSize || !iconRef.current) {\n return;\n }\n const computedStyle = getComputedStyle(iconRef.current);\n const { lineHeight, fontSize } = computedStyle;\n const newParentHeight = parseInt(lineHeight, 10);\n const newParentFontSize = parseInt(fontSize, 10);\n setParentHeight(newParentHeight);\n setParentFontSize(newParentFontSize);\n });\n\n const mergedRef = useMergeRefs(iconRef, __internalRootRef);\n const hasAriaLabel = typeof ariaLabel === 'string';\n const labelAttributes = hasAriaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};\n\n if (svg) {\n if (url) {\n warnOnce(\n 'Icon',\n 'You have specified both `url` and `svg`. `svg` will take precedence and `url` will be ignored.'\n );\n }\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n aria-hidden={!hasAriaLabel}\n style={inlineStyles}\n >\n {svg}\n </WithNativeAttributes>\n );\n }\n\n if (url) {\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n <img src={url} alt={ariaLabel ?? alt} />\n </WithNativeAttributes>\n );\n }\n\n const validIcon = name && Object.prototype.hasOwnProperty.call(icons, name);\n\n function iconMap(name: IconProps.Name) {\n if (name === 'gen-ai' && (iconSize === 'small' || iconSize === 'x-small')) {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n data-testid=\"gen-ai-filled\"\n >\n <path\n d=\"m8 4.4 1.018 2.582L11.6 8 9.018 9.018 8 11.6 6.982 9.018 4.4 8l2.582-1.018L8 4.4ZM2.405 2.41l.002-.003.003-.002-.003-.002-.002-.003-.002.003-.003.002.003.002.002.003Z\"\n className=\"filled\"\n />\n </svg>\n );\n } else {\n const icon = icons[name];\n if (!icon) {\n warnOnce(\n 'Icon',\n `You have specified \\`name=\"${name}\"\\` but no icon with that name was found in the current IconProvider context. If this is a custom icon, ensure your app is wrapped in an \\`IconProvider\\` with the icon defined via \\`defineIcons\\`.`\n );\n }\n return icon;\n }\n }\n\n return (\n <WithNativeAttributes\n {...baseProps}\n {...labelAttributes}\n tag=\"span\"\n componentName=\"Icon\"\n nativeAttributes={nativeAttributes}\n ref={mergedRef}\n style={inlineStyles}\n >\n {validIcon ? iconMap(name) : undefined}\n </WithNativeAttributes>\n );\n};\n\nexport { InternalIconProps };\nexport default InternalIcon;\n"]}
|