@carbon/styles 1.53.1 → 1.54.0-rc.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.
Files changed (11) hide show
  1. package/css/styles.css +238 -74
  2. package/css/styles.min.css +1 -1
  3. package/package.json +4 -4
  4. package/scss/components/data-table/action/_data-table-action.scss +10 -1
  5. package/scss/components/date-picker/_date-picker.scss +1 -0
  6. package/scss/components/link/_link.scss +2 -2
  7. package/scss/components/list-box/_list-box.scss +2 -2
  8. package/scss/components/popover/_popover.scss +296 -41
  9. package/scss/components/slug/_slug.scss +126 -0
  10. package/scss/components/ui-shell/content/_content.scss +2 -1
  11. package/scss/components/ui-shell/side-nav/_side-nav.scss +3 -2
package/scss/components/slug/_slug.scss CHANGED
@@ -262,6 +262,12 @@ $sizes: (
262
262
  .#{$prefix}--slug
263
263
  > .#{$prefix}--toggletip
264
264
  > .#{$prefix}--popover
265
+ > .#{$prefix}--popover-caret,
266
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
267
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
268
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
269
+ > .#{$prefix}--popover
270
+ > .#{$prefix}--popover-content
265
271
  > .#{$prefix}--popover-caret {
266
272
  background: transparent;
267
273
  clip-path: none;
@@ -284,6 +290,25 @@ $sizes: (
284
290
  .#{$prefix}--popover--right-bottom
285
291
  )
286
292
  > .#{$prefix}--popover
293
+ > .#{$prefix}--popover-caret::before,
294
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
295
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
296
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
297
+ .#{$prefix}--popover--top,
298
+ .#{$prefix}--popover--top-right,
299
+ .#{$prefix}--popover--top-left,
300
+ .#{$prefix}--popover--bottom,
301
+ .#{$prefix}--popover--bottom-right,
302
+ .#{$prefix}--popover--bottom-left,
303
+ .#{$prefix}--popover--left,
304
+ .#{$prefix}--popover--left-top,
305
+ .#{$prefix}--popover--left-bottom,
306
+ .#{$prefix}--popover--right,
307
+ .#{$prefix}--popover--right-top,
308
+ .#{$prefix}--popover--right-bottom
309
+ )
310
+ > .#{$prefix}--popover
311
+ > .#{$prefix}--popover-content
287
312
  > .#{$prefix}--popover-caret::before {
288
313
  position: absolute;
289
314
  display: block;
@@ -312,6 +337,25 @@ $sizes: (
312
337
  .#{$prefix}--popover--right-bottom
313
338
  )
314
339
  > .#{$prefix}--popover
340
+ > .#{$prefix}--popover-caret::after,
341
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
342
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
343
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
344
+ .#{$prefix}--popover--top,
345
+ .#{$prefix}--popover--top-right,
346
+ .#{$prefix}--popover--top-left,
347
+ .#{$prefix}--popover--bottom,
348
+ .#{$prefix}--popover--bottom-right,
349
+ .#{$prefix}--popover--bottom-left,
350
+ .#{$prefix}--popover--left,
351
+ .#{$prefix}--popover--left-top,
352
+ .#{$prefix}--popover--left-bottom,
353
+ .#{$prefix}--popover--right,
354
+ .#{$prefix}--popover--right-top,
355
+ .#{$prefix}--popover--right-bottom
356
+ )
357
+ > .#{$prefix}--popover
358
+ > .#{$prefix}--popover-content
315
359
  > .#{$prefix}--popover-caret::after {
316
360
  position: absolute;
317
361
  display: block;
@@ -329,6 +373,16 @@ $sizes: (
329
373
  .#{$prefix}--popover--top-left
330
374
  )
331
375
  > .#{$prefix}--popover
376
+ > .#{$prefix}--popover-caret,
377
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
378
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
379
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
380
+ .#{$prefix}--popover--top,
381
+ .#{$prefix}--popover--top-right,
382
+ .#{$prefix}--popover--top-left
383
+ )
384
+ > .#{$prefix}--popover
385
+ > .#{$prefix}--popover-content
332
386
  > .#{$prefix}--popover-caret {
333
387
  &::before {
334
388
  inset-block-end: convert.to-rem(1px);
@@ -366,6 +420,16 @@ $sizes: (
366
420
  .#{$prefix}--popover--right-top
367
421
  )
368
422
  > .#{$prefix}--popover
423
+ > .#{$prefix}--popover-caret,
424
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
425
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
426
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
427
+ .#{$prefix}--popover--right,
428
+ .#{$prefix}--popover--right-bottom,
429
+ .#{$prefix}--popover--right-top
430
+ )
431
+ > .#{$prefix}--popover
432
+ > .#{$prefix}--popover-content
369
433
  > .#{$prefix}--popover-caret {
370
434
  &::before {
371
435
  inset-inline-start: convert.to-rem(1px);
@@ -388,6 +452,16 @@ $sizes: (
388
452
  .#{$prefix}--popover--bottom-right
389
453
  )
390
454
  > .#{$prefix}--popover
455
+ > .#{$prefix}--popover-caret,
456
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
457
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
458
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
459
+ .#{$prefix}--popover--bottom,
460
+ .#{$prefix}--popover--bottom-left,
461
+ .#{$prefix}--popover--bottom-right
462
+ )
463
+ > .#{$prefix}--popover
464
+ > .#{$prefix}--popover-content
391
465
  > .#{$prefix}--popover-caret {
392
466
  &::before {
393
467
  inset-block-start: convert.to-rem(1px);
@@ -412,6 +486,16 @@ $sizes: (
412
486
  .#{$prefix}--popover--left-top
413
487
  )
414
488
  > .#{$prefix}--popover
489
+ > .#{$prefix}--popover-caret,
490
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
491
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
492
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
493
+ .#{$prefix}--popover--left,
494
+ .#{$prefix}--popover--left-bottom,
495
+ .#{$prefix}--popover--left-top
496
+ )
497
+ > .#{$prefix}--popover
498
+ > .#{$prefix}--popover-content
415
499
  > .#{$prefix}--popover-caret {
416
500
  &::before {
417
501
  inset-inline-end: convert.to-rem(1px);
@@ -433,6 +517,15 @@ $sizes: (
433
517
  .#{$prefix}--popover--right-bottom
434
518
  )
435
519
  > .#{$prefix}--popover
520
+ > .#{$prefix}--popover-caret::after,
521
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
522
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
523
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
524
+ .#{$prefix}--popover--left-bottom,
525
+ .#{$prefix}--popover--right-bottom
526
+ )
527
+ > .#{$prefix}--popover
528
+ > .#{$prefix}--popover-content
436
529
  > .#{$prefix}--popover-caret::after {
437
530
  background: transparent;
438
531
  }
@@ -447,6 +540,18 @@ $sizes: (
447
540
  .#{$prefix}--popover--top-left
448
541
  )
449
542
  > .#{$prefix}--popover
543
+ > .#{$prefix}--popover-caret,
544
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
545
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
546
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
547
+ .#{$prefix}--popover--left-bottom,
548
+ .#{$prefix}--popover--right-bottom,
549
+ .#{$prefix}--popover--top,
550
+ .#{$prefix}--popover--top-right,
551
+ .#{$prefix}--popover--top-left
552
+ )
553
+ > .#{$prefix}--popover
554
+ > .#{$prefix}--popover-content
450
555
  > .#{$prefix}--popover-caret {
451
556
  &::before {
452
557
  border-color: $ai-popover-caret-bottom;
@@ -464,6 +569,18 @@ $sizes: (
464
569
  .#{$prefix}--popover--top-left
465
570
  )
466
571
  > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
572
+ > .#{$prefix}--popover-caret,
573
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
574
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
575
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
576
+ .#{$prefix}--popover--left-bottom,
577
+ .#{$prefix}--popover--right-bottom,
578
+ .#{$prefix}--popover--top,
579
+ .#{$prefix}--popover--top-right,
580
+ .#{$prefix}--popover--top-left
581
+ )
582
+ > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
583
+ > .#{$prefix}--popover-content
467
584
  > .#{$prefix}--popover-caret {
468
585
  &::before {
469
586
  background: $ai-popover-caret-bottom-background-actions;
@@ -477,6 +594,15 @@ $sizes: (
477
594
  .#{$prefix}--popover--right
478
595
  )
479
596
  > .#{$prefix}--popover
597
+ > .#{$prefix}--popover-caret,
598
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
599
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
600
+ > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
601
+ .#{$prefix}--popover--left,
602
+ .#{$prefix}--popover--right
603
+ )
604
+ > .#{$prefix}--popover
605
+ > .#{$prefix}--popover-content
480
606
  > .#{$prefix}--popover-caret {
481
607
  &::before {
482
608
  border-color: $ai-popover-caret-center;
package/scss/components/ui-shell/content/_content.scss CHANGED
@@ -19,7 +19,8 @@
19
19
  will-change: margin-left;
20
20
  }
21
21
 
22
- .#{$prefix}--header ~ .#{$prefix}--content {
22
+ .#{$prefix}--header ~ .#{$prefix}--content,
23
+ div:has(.#{$prefix}--header) ~ .#{$prefix}--content {
23
24
  margin-block-start: mini-units(6);
24
25
  }
25
26
 
package/scss/components/ui-shell/side-nav/_side-nav.scss CHANGED
@@ -41,8 +41,9 @@
41
41
  inset-inline-start: 0;
42
42
  max-inline-size: mini-units(32);
43
43
  // TODO: sync with motion work
44
- transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
45
- will-change: width;
44
+ transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
45
+ transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
46
+ will-change: inline-size;
46
47
  }
47
48
 
48
49
  .#{$prefix}--side-nav--ux {