@databricks/design-system 2.0.6 → 2.0.7

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 (30) hide show
  1. package/AGENTS.md +239 -166
  2. package/CHANGELOG.md +28 -0
  3. package/dist/{RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js → RHFControlledTypeaheadComboboxV2-nSSYj16I.js} +3 -3
  4. package/dist/{RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js.map → RHFControlledTypeaheadComboboxV2-nSSYj16I.js.map} +1 -1
  5. package/dist/{WizardStepContentWrapper-6YTjeEaA.js → WizardStepContentWrapper-bbh_CoIf.js} +195 -257
  6. package/dist/WizardStepContentWrapper-bbh_CoIf.js.map +1 -0
  7. package/dist/dubois-colors.less +1 -1
  8. package/dist/icon-metadata.json +5 -0
  9. package/dist/{index-DiRpSwH2.js → index-CUCuUviS.js} +119 -109
  10. package/dist/index-CUCuUviS.js.map +1 -0
  11. package/dist/index-dark.css +135 -1
  12. package/dist/index-dark.mitigated.css +163 -16
  13. package/dist/index.css +182 -28
  14. package/dist/index.js +2 -2
  15. package/dist/index.mitigated.css +210 -43
  16. package/dist/patterns.js +1 -1
  17. package/dist-types/design-system/Alert/Alert.d.ts +21 -4
  18. package/dist-types/design-system/Button/Button.d.ts +2 -1
  19. package/dist-types/design-system/Icon/__generated/icons/SlidesIcon.d.ts +4 -0
  20. package/dist-types/design-system/Icon/__generated/icons/index.d.ts +1 -0
  21. package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxControls.d.ts +0 -2
  22. package/dist-types/design-system/index.d.ts +0 -1
  23. package/dist-types/design-system/utils/safex.d.ts +4 -2
  24. package/dist-types/theme/generalVariables.d.ts +0 -1
  25. package/package.json +5 -4
  26. package/setup.mjs +586 -0
  27. package/dist/WizardStepContentWrapper-6YTjeEaA.js.map +0 -1
  28. package/dist/index-DiRpSwH2.js.map +0 -1
  29. package/dist-types/design-system/LegacyTooltip/LegacyTooltip.d.ts +0 -47
  30. package/dist-types/design-system/LegacyTooltip/index.d.ts +0 -1
@@ -16041,6 +16041,18 @@ span.du-bois-light-typography-ellipsis-single-line {
16041
16041
  --db-shape-pill: 999px;
16042
16042
  }
16043
16043
 
16044
+ :where(:root), :where(.du-bois-light) {
16045
+ /* Shape */
16046
+ /* Mirrors the ShapeTokens host-override var used by Card; falls back to the theme radius. */
16047
+ --db-card-border-radius: var(--info-container-border-radius, 8px);
16048
+
16049
+ /* Color */
16050
+ --db-card-surface: var(--db-surface-base);
16051
+ --db-card-text: var(--db-text-base);
16052
+ --db-card-border: var(--db-border-base);
16053
+ --db-card-border-hover: var(--db-border-strong);
16054
+ }
16055
+
16044
16056
  :where(:root), :where(.du-bois-light) {
16045
16057
  /* Shape */
16046
16058
  /* Mirrors the ShapeTokens host-override var used by list items; falls back to the theme radius. */
@@ -16117,6 +16129,28 @@ span.du-bois-light-typography-ellipsis-single-line {
16117
16129
  --db-selection-toggle-transition-duration: 120ms;
16118
16130
  }
16119
16131
 
16132
+ :where(:root), :where(.du-bois-light) {
16133
+ /* Shape */
16134
+ --db-avatar-border-radius: var(--db-radius-sm);
16135
+
16136
+ /* Density */
16137
+ --db-avatar-group-gap: var(--db-space-1);
16138
+ --db-avatar-group-border-width: 1px;
16139
+
16140
+ /* Color */
16141
+ /* No v2 token holds the secondary icon glyph yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
16142
+ --db-avatar-icon: var(--db-color-text-secondary);
16143
+ /* No v2 token holds the default avatar surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
16144
+ --db-avatar-surface: var(--db-color-tag-background-default);
16145
+ /* No v2 token holds the group divider border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
16146
+ --db-avatar-group-border-color: var(--db-color-background-primary);
16147
+ }
16148
+
16149
+ :where(:root), :where(.du-bois-light) {
16150
+ /* Color */
16151
+ /* No v2 token holds the initials/icon glyph on a colored avatar yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
16152
+ --db-avatar-text: #ffffff;
16153
+ }
16120
16154
 
16121
16155
 
16122
16156
  /* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
@@ -16414,10 +16448,11 @@ span.du-bois-light-typography-ellipsis-single-line {
16414
16448
  color: var(--db-btn-text-active) !important;
16415
16449
  }
16416
16450
  .db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
16417
- > .anticon {
16451
+ > .anticon, .db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
16452
+ > .db-icon {
16418
16453
  color: var(--db-btn-icon-glyph);
16419
16454
  }
16420
- .db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon {
16455
+ .db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon, .db-btn-icon-only.db-btn-danger:not(:hover, :active) > .db-icon {
16421
16456
  color: var(--db-btn-text);
16422
16457
  }
16423
16458
  .db-btn-icon-only.db-btn-danger:hover:not(:disabled, .db-btn-loading) {
@@ -16447,7 +16482,8 @@ span.du-bois-light-typography-ellipsis-single-line {
16447
16482
  .db-btn-icon-only:disabled:hover {
16448
16483
  background-color: transparent !important;
16449
16484
  }
16450
- .db-btn:disabled > .anticon {
16485
+ .db-btn:disabled > .anticon,
16486
+ .db-btn:disabled > .db-icon {
16451
16487
  color: inherit !important;
16452
16488
  }
16453
16489
 
@@ -16456,17 +16492,23 @@ span.du-bois-light-typography-ellipsis-single-line {
16456
16492
  * so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
16457
16493
  * sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
16458
16494
  .db-btn > .anticon,
16495
+ .db-btn > .db-icon,
16459
16496
  .db-btn-end-icon,
16460
- .db-btn-end-icon > .anticon {
16497
+ .db-btn-end-icon > .anticon,
16498
+ .db-btn-end-icon > .db-icon {
16461
16499
  display: inline-flex;
16462
16500
  align-items: center;
16463
16501
  font-size: var(--db-btn-icon-size) !important;
16464
16502
  line-height: 0;
16465
16503
  }
16466
- .db-btn-small > .anticon .anticon {
16504
+ .db-btn-small > .anticon .anticon,
16505
+ .db-btn-small > .anticon .db-icon,
16506
+ .db-btn-small > .db-icon .anticon,
16507
+ .db-btn-small > .db-icon .db-icon {
16467
16508
  line-height: 0;
16468
16509
  }
16469
- .db-btn > .db-btn-content > .anticon {
16510
+ .db-btn > .db-btn-content > .anticon,
16511
+ .db-btn > .db-btn-content > .db-icon {
16470
16512
  display: inline-flex;
16471
16513
  align-items: center;
16472
16514
  line-height: 0;
@@ -16475,7 +16517,8 @@ span.du-bois-light-typography-ellipsis-single-line {
16475
16517
  display: inline-flex;
16476
16518
  align-items: center;
16477
16519
  }
16478
- .db-btn > .anticon + .db-btn-content {
16520
+ .db-btn > .anticon + .db-btn-content,
16521
+ .db-btn > .db-icon + .db-btn-content {
16479
16522
  margin-inline-start: var(--db-btn-gap) !important;
16480
16523
  }
16481
16524
  .db-btn-end-icon {
@@ -16484,7 +16527,7 @@ span.du-bois-light-typography-ellipsis-single-line {
16484
16527
  .db-btn-small .db-btn-end-icon {
16485
16528
  margin-inline-start: var(--db-btn-end-icon-gap-small) !important;
16486
16529
  }
16487
- .db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon {
16530
+ .db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon, .db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .db-icon {
16488
16531
  color: var(--db-btn-icon-glyph);
16489
16532
  }
16490
16533
  .db-btn-default[href]:not(.db-btn-danger, :hover, :active, :disabled) .db-btn-end-icon {
@@ -16493,7 +16536,10 @@ span.du-bois-light-typography-ellipsis-single-line {
16493
16536
  .db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
16494
16537
  > .db-btn-content
16495
16538
  > .db-btn-end-icon
16496
- > .anticon {
16539
+ > .anticon, .db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
16540
+ > .db-btn-content
16541
+ > .db-btn-end-icon
16542
+ > .db-icon {
16497
16543
  color: var(--db-btn-icon-glyph);
16498
16544
  }
16499
16545
 
@@ -16857,6 +16903,17 @@ span.du-bois-light-typography-ellipsis-single-line {
16857
16903
  }
16858
16904
 
16859
16905
 
16906
+ :where(:root), :where(.du-bois-light) {
16907
+ /* Color */
16908
+ --db-empty-text: var(--db-text-subtle);
16909
+ --db-empty-image-color: var(--db-text-disabled);
16910
+
16911
+ /* Density */
16912
+ --db-empty-image-size: calc(var(--db-size-8) * 2);
16913
+ --db-empty-image-spacing: var(--db-space-4);
16914
+ --db-empty-description-spacing: var(--db-space-4);
16915
+ --db-empty-max-width: 600px;
16916
+ }
16860
16917
 
16861
16918
 
16862
16919
 
@@ -16920,7 +16977,17 @@ span.du-bois-light-typography-ellipsis-single-line {
16920
16977
  color: var(--db-icon-color-success);
16921
16978
  }
16922
16979
 
16923
- .db-icon-ai svg * {
16980
+ .db-icon-ai svg path,
16981
+ .db-icon-ai svg rect,
16982
+ .db-icon-ai svg circle,
16983
+ .db-icon-ai svg ellipse,
16984
+ .db-icon-ai svg line,
16985
+ .db-icon-ai svg polygon,
16986
+ .db-icon-ai svg polyline,
16987
+ .db-icon-ai svg text,
16988
+ .db-icon-ai svg tspan,
16989
+ .db-icon-ai svg textPath,
16990
+ .db-icon-ai svg use {
16924
16991
  fill: var(--db-icon-gradient);
16925
16992
  }
16926
16993
 
@@ -16966,6 +17033,21 @@ span.du-bois-light-typography-ellipsis-single-line {
16966
17033
  }
16967
17034
 
16968
17035
 
17036
+ :where(:root), :where(.du-bois-light) {
17037
+ /* Shape */
17038
+ --db-listbox-border-radius: var(--db-list-item-border-radius);
17039
+ --db-listbox-focus-ring-width: var(--db-focus-ring-width);
17040
+
17041
+ /* Color */
17042
+ --db-listbox-surface: var(--db-list-surface);
17043
+ --db-listbox-empty-text: var(--db-text-subtle);
17044
+ --db-listbox-focus-ring-color: var(--db-focus-ring-color);
17045
+
17046
+ /* Density */
17047
+ --db-listbox-spacing: var(--db-space-2);
17048
+ --db-listbox-empty-spacing-horizontal: var(--db-space-3);
17049
+ --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
17050
+ }
16969
17051
 
16970
17052
 
16971
17053
  :where(:root), :where(.du-bois-light) {
@@ -16992,6 +17074,35 @@ span.du-bois-light-typography-ellipsis-single-line {
16992
17074
  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
16993
17075
  }
16994
17076
 
17077
+ :where(:root), :where(.du-bois-light) {
17078
+ /* Shape */
17079
+ --db-notification-border-radius: var(--db-popup-border-radius);
17080
+
17081
+ /* Density */
17082
+ --db-notification-padding: var(--db-space-3);
17083
+ --db-notification-column-gap: var(--db-space-1);
17084
+ --db-notification-description-gap: var(--db-space-1);
17085
+ --db-notification-close-offset: calc(var(--db-space-1) * 1.5);
17086
+ --db-notification-close-size: var(--db-size-5);
17087
+ --db-notification-viewport-padding: var(--db-space-3);
17088
+ --db-notification-viewport-gap: var(--db-space-3);
17089
+ --db-notification-viewport-margin: var(--db-space-6);
17090
+ --db-notification-viewport-width: 440px;
17091
+
17092
+ /* Color */
17093
+ --db-notification-surface: var(--db-popup-surface);
17094
+ --db-notification-border: var(--db-popup-border);
17095
+ --db-notification-text: var(--db-popup-text);
17096
+ --db-notification-icon: var(--db-text-subtle);
17097
+ --db-notification-icon-success: var(--db-positive-text);
17098
+ --db-notification-icon-warning: var(--db-caution-text);
17099
+ --db-notification-icon-error: var(--db-negative-text);
17100
+ }
17101
+
17102
+ :where(:root), :where(.du-bois-light) {
17103
+ /* Elevation */
17104
+ --db-notification-shadow: var(--db-elevation-med);
17105
+ }
16995
17106
 
16996
17107
  :where(:root), :where(.du-bois-light) {
16997
17108
  /* Color */
@@ -17032,6 +17143,44 @@ span.du-bois-light-typography-ellipsis-single-line {
17032
17143
  --db-popover-shadow: var(--db-popup-elevation);
17033
17144
  }
17034
17145
 
17146
+ :where(:root), :where(.du-bois-light) {
17147
+ /* Shape */
17148
+ --db-preview-card-border-radius: var(--db-card-border-radius);
17149
+ --db-preview-card-image-border-radius: var(--info-container-border-radius, 4px);
17150
+ --db-preview-card-border-width: 1px;
17151
+
17152
+ /* Density */
17153
+ --db-preview-card-padding: var(--db-space-4);
17154
+ --db-preview-card-padding-large: var(--db-space-6);
17155
+ --db-preview-card-gap: var(--db-space-2);
17156
+ --db-preview-card-gap-large: var(--db-space-4);
17157
+ --db-preview-card-action-spacing: var(--db-space-4);
17158
+
17159
+ /* Color */
17160
+ --db-preview-card-text: var(--db-text-subtle);
17161
+ --db-preview-card-title-text: var(--db-card-text);
17162
+ --db-preview-card-border: var(--db-card-border);
17163
+ /* No v2 token holds the active/focus border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
17164
+ --db-preview-card-border-hover: var(--db-color-action-default-border-hover);
17165
+ /* No v2 token holds the focus outline ring yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
17166
+ --db-preview-card-border-focus: var(--db-color-action-default-border-focus);
17167
+ /* No v2 token holds the active surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
17168
+ --db-preview-card-surface-active: var(--db-color-action-tertiary-background-press);
17169
+ --db-preview-card-surface-disabled: var(--db-surface-disabled);
17170
+ /* No v2 token holds the disabled border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
17171
+ --db-preview-card-border-disabled: var(--db-color-action-disabled-border);
17172
+ --db-preview-card-text-disabled: var(--db-text-disabled);
17173
+
17174
+ /* Typography */
17175
+ --db-preview-card-title-font-weight: var(--db-font-weight-semibold);
17176
+ }
17177
+
17178
+ :where(:root), :where(.du-bois-light) {
17179
+ /* Elevation */
17180
+ --db-preview-card-shadow: var(--db-elevation-low);
17181
+ /* No v2 elevation token holds the hover/focus shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
17182
+ --db-preview-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
17183
+ }
17035
17184
 
17036
17185
  /* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
17037
17186
  * `.du-bois-dark` subtree instead of freezing at the light values. */
@@ -17532,12 +17681,17 @@ span.du-bois-light-typography-ellipsis-single-line {
17532
17681
  margin-inline-end: var(--db-switch-label-spacing);
17533
17682
  }
17534
17683
 
17535
- .db-switch:has(input:disabled) {
17684
+ .db-switch:has(.db-switch-input:disabled) {
17536
17685
  cursor: not-allowed;
17537
17686
  }
17538
17687
 
17539
- /* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
17540
- .db-switch input {
17688
+ /* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled.
17689
+ * Scoped via the `.db-switch-input` class, never a bare `input`: `.db-switch .db-switch-input` is
17690
+ * specificity (0,2,0), which out-ranks a host app's `input[type='checkbox'] { width: auto }` reset
17691
+ * (e.g. Bootstrap, loaded in webapp). A bare `.db-switch input` (0,1,1) merely ties that reset and, losing
17692
+ * on load order, has its `inline-size` overridden to `auto` — collapsing the track to zero width and
17693
+ * leaving only the floating thumb. Mirrors NativeCheckbox's `.db-checkbox-input`. */
17694
+ .db-switch .db-switch-input {
17541
17695
  appearance: none;
17542
17696
  position: relative;
17543
17697
  flex-shrink: 0;
@@ -17556,7 +17710,7 @@ span.du-bois-light-typography-ellipsis-single-line {
17556
17710
 
17557
17711
  /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
17558
17712
  * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
17559
- .db-switch input::before {
17713
+ .db-switch .db-switch-input::before {
17560
17714
  content: '';
17561
17715
  position: absolute;
17562
17716
  top: 50%;
@@ -17573,32 +17727,32 @@ span.du-bois-light-typography-ellipsis-single-line {
17573
17727
  }
17574
17728
 
17575
17729
  /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
17576
- .db-switch:hover input:not(:disabled):not(:checked) {
17730
+ .db-switch:hover .db-switch-input:not(:disabled):not(:checked) {
17577
17731
  background-color: var(--db-switch-surface-hover);
17578
17732
  border-color: var(--db-switch-border-hover);
17579
17733
  }
17580
17734
 
17581
- .db-switch:active input:not(:disabled):not(:checked) {
17735
+ .db-switch:active .db-switch-input:not(:disabled):not(:checked) {
17582
17736
  background-color: var(--db-switch-surface-active);
17583
17737
  border-color: var(--db-switch-border-active);
17584
17738
  }
17585
17739
 
17586
- .db-switch input:checked {
17740
+ .db-switch .db-switch-input:checked {
17587
17741
  background-color: var(--db-switch-surface-checked);
17588
17742
  border-color: var(--db-switch-border-checked);
17589
17743
  }
17590
17744
 
17591
- .db-switch:hover input:checked:not(:disabled) {
17745
+ .db-switch:hover .db-switch-input:checked:not(:disabled) {
17592
17746
  background-color: var(--db-switch-surface-checked-hover);
17593
17747
  border-color: var(--db-switch-border-checked-hover);
17594
17748
  }
17595
17749
 
17596
- .db-switch:active input:checked:not(:disabled) {
17750
+ .db-switch:active .db-switch-input:checked:not(:disabled) {
17597
17751
  background-color: var(--db-switch-surface-checked-active);
17598
17752
  border-color: var(--db-switch-border-checked-active);
17599
17753
  }
17600
17754
 
17601
- .db-switch input:checked::before {
17755
+ .db-switch .db-switch-input:checked::before {
17602
17756
  transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
17603
17757
  }
17604
17758
 
@@ -17606,31 +17760,31 @@ span.du-bois-light-typography-ellipsis-single-line {
17606
17760
  * the ring sits flush when off and gains a 1px offset when checked.
17607
17761
  * TODO: width/offset are hardcoded 1px to preserve the AntD look; adopt the system 2px focus ring
17608
17762
  * (var(--db-focus-ring-width)) in a separate change. */
17609
- .db-switch input:focus-visible {
17763
+ .db-switch .db-switch-input:focus-visible {
17610
17764
  border-color: var(--db-switch-border-focus);
17611
17765
  outline: 1px solid var(--db-focus-ring-color);
17612
17766
  outline-offset: 0;
17613
17767
  }
17614
17768
 
17615
- .db-switch input:checked:focus-visible {
17769
+ .db-switch .db-switch-input:checked:focus-visible {
17616
17770
  outline-offset: 1px;
17617
17771
  }
17618
17772
 
17619
- .db-switch input:disabled {
17773
+ .db-switch .db-switch-input:disabled {
17620
17774
  cursor: not-allowed;
17621
17775
  background-color: var(--db-switch-surface-disabled);
17622
17776
  border-color: var(--db-switch-border-disabled);
17623
17777
  }
17624
17778
 
17625
17779
  /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
17626
- .db-switch input:checked:disabled {
17780
+ .db-switch .db-switch-input:checked:disabled {
17627
17781
  background-color: var(--db-switch-surface-checked-disabled);
17628
17782
  border-color: var(--db-switch-surface-checked-disabled);
17629
17783
  }
17630
17784
 
17631
17785
  @media (prefers-reduced-motion: reduce) {
17632
- .db-switch input,
17633
- .db-switch input::before {
17786
+ .db-switch .db-switch-input,
17787
+ .db-switch .db-switch-input::before {
17634
17788
  transition: none;
17635
17789
  }
17636
17790
  }
@@ -17656,8 +17810,8 @@ span.du-bois-light-typography-ellipsis-single-line {
17656
17810
  }
17657
17811
 
17658
17812
  /* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
17659
- .db-switch-wrapper:has(input:disabled) .du-bois-light-label,
17660
- .db-switch-wrapper:has(input:disabled) .du-bois-dark-label {
17813
+ .db-switch-wrapper:has(.db-switch-input:disabled) .du-bois-light-label,
17814
+ .db-switch-wrapper:has(.db-switch-input:disabled) .du-bois-dark-label {
17661
17815
  color: var(--db-switch-text-disabled);
17662
17816
  }
17663
17817
 
@@ -17784,17 +17938,20 @@ span.du-bois-light-typography-ellipsis-single-line {
17784
17938
 
17785
17939
 
17786
17940
  :where(.du-bois-light-btn-icon-only) > :where(.anticon),
17787
- :where(.du-bois-light-btn-icon-only) > :where(.du-bois-light-btn-loading-icon) {
17941
+ :where(.du-bois-light-btn-icon-only) > :where(.du-bois-light-btn-loading-icon),
17942
+ :where(.du-bois-light-btn-icon-only) > :where(.db-icon) {
17788
17943
  font-size: 15px;
17789
17944
  }
17790
17945
 
17791
17946
  .du-bois-light-btn-icon-only:where(.du-bois-light-btn-lg) > .anticon,
17792
- .du-bois-light-btn-icon-only:where(.du-bois-light-btn-lg) > .du-bois-light-btn-loading-icon {
17947
+ .du-bois-light-btn-icon-only:where(.du-bois-light-btn-lg) > .du-bois-light-btn-loading-icon,
17948
+ .du-bois-light-btn-icon-only:where(.du-bois-light-btn-lg) > .db-icon {
17793
17949
  font-size: 20px;
17794
17950
  }
17795
17951
 
17796
17952
  .du-bois-light-btn-icon-only:where(.du-bois-light-btn-sm) > .anticon,
17797
- .du-bois-light-btn-icon-only:where(.du-bois-light-btn-sm) > .du-bois-light-btn-loading-icon {
17953
+ .du-bois-light-btn-icon-only:where(.du-bois-light-btn-sm) > .du-bois-light-btn-loading-icon,
17954
+ .du-bois-light-btn-icon-only:where(.du-bois-light-btn-sm) > .db-icon {
17798
17955
  font-size: 13px;
17799
17956
  }
17800
17957
 
@@ -17821,7 +17978,8 @@ span.du-bois-light-typography-ellipsis-single-line {
17821
17978
 
17822
17979
 
17823
17980
  .du-bois-light-btn:where([disabled]) > .anticon,
17824
- .du-bois-light-btn:where([disabled]) > .du-bois-light-btn-loading-icon {
17981
+ .du-bois-light-btn:where([disabled]) > .du-bois-light-btn-loading-icon,
17982
+ .du-bois-light-btn:where([disabled]) > .db-icon {
17825
17983
  pointer-events: none;
17826
17984
  }
17827
17985
 
@@ -17859,13 +18017,15 @@ span.du-bois-light-typography-ellipsis-single-line {
17859
18017
 
17860
18018
 
17861
18019
  :where(.du-bois-light-select-multiple) .du-bois-light-select-selection-item-remove > .anticon,
17862
- :where(.du-bois-light-select-multiple) .du-bois-light-select-selection-item-remove > .du-bois-light-select-selection-item-remove-icon {
18020
+ :where(.du-bois-light-select-multiple) .du-bois-light-select-selection-item-remove > .du-bois-light-select-selection-item-remove-icon,
18021
+ :where(.du-bois-light-select-multiple) .du-bois-light-select-selection-item-remove > .db-icon {
17863
18022
  line-height: 1;
17864
18023
  }
17865
18024
 
17866
18025
 
17867
18026
  :where(.du-bois-light-select-arrow) > .anticon,
17868
- :where(.du-bois-light-select-arrow) > .du-bois-light-select-arrow-icon {
18027
+ :where(.du-bois-light-select-arrow) > .du-bois-light-select-arrow-icon,
18028
+ :where(.du-bois-light-select-arrow) > .db-icon {
17869
18029
  line-height: 1;
17870
18030
  }
17871
18031
 
@@ -17896,12 +18056,14 @@ span.du-bois-light-typography-ellipsis-single-line {
17896
18056
  }
17897
18057
 
17898
18058
 
17899
- :where(.du-bois-light-picker-suffix) > .anticon {
18059
+ :where(.du-bois-light-picker-suffix) > .anticon,
18060
+ :where(.du-bois-light-picker-suffix) > .db-icon {
17900
18061
  vertical-align: top;
17901
18062
  }
17902
18063
 
17903
18064
 
17904
- :where(.du-bois-light-picker-clear) > .anticon {
18065
+ :where(.du-bois-light-picker-clear) > .anticon,
18066
+ :where(.du-bois-light-picker-clear) > .db-icon {
17905
18067
  vertical-align: top;
17906
18068
  }
17907
18069
 
@@ -17982,7 +18144,7 @@ span.du-bois-light-typography-ellipsis-single-line {
17982
18144
  }
17983
18145
 
17984
18146
 
17985
- .du-bois-light-menu-item:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content, .du-bois-light-menu-submenu-title:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content {
18147
+ .du-bois-light-menu-item:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content, .du-bois-light-menu-submenu-title:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content, .du-bois-light-menu-item:has(> .du-bois-light-menu-item-icon, > .db-icon) > .du-bois-light-menu-title-content, .du-bois-light-menu-submenu-title:has(> .du-bois-light-menu-item-icon, > .db-icon) > .du-bois-light-menu-title-content {
17986
18148
  margin-left: 10px;
17987
18149
  opacity: 1;
17988
18150
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
@@ -17996,12 +18158,13 @@ span.du-bois-light-typography-ellipsis-single-line {
17996
18158
  color: #fff;
17997
18159
  }
17998
18160
 
17999
- .du-bois-light-menu-dark .du-bois-light-menu-item-selected:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content {
18161
+ .du-bois-light-menu-dark .du-bois-light-menu-item-selected:has(> .du-bois-light-menu-item-icon, > .anticon) > .du-bois-light-menu-title-content, .du-bois-light-menu-dark .du-bois-light-menu-item-selected:has(> .du-bois-light-menu-item-icon, > .db-icon) > .du-bois-light-menu-title-content {
18000
18162
  color: #fff;
18001
18163
  }
18002
18164
 
18003
18165
 
18004
- .du-bois-light-breadcrumb-link > .anticon:not(:last-child) {
18166
+ .du-bois-light-breadcrumb-link > .anticon:not(:last-child),
18167
+ .du-bois-light-breadcrumb-link > .db-icon:not(:last-child) {
18005
18168
  margin-inline-end: 4px;
18006
18169
  }
18007
18170
 
@@ -18032,7 +18195,8 @@ span.du-bois-light-typography-ellipsis-single-line {
18032
18195
  }
18033
18196
 
18034
18197
 
18035
- .du-bois-light-btn > .anticon {
18198
+ .du-bois-light-btn > .anticon,
18199
+ .du-bois-light-btn > .db-icon {
18036
18200
  display: inline-block;
18037
18201
  }
18038
18202
 
@@ -18047,14 +18211,17 @@ span.du-bois-light-typography-ellipsis-single-line {
18047
18211
  }
18048
18212
 
18049
18213
 
18050
- :where(.du-bois-light-tag) > .anticon:first-child {
18214
+ :where(.du-bois-light-tag) > .anticon:first-child,
18215
+ :where(.du-bois-light-tag) > .db-icon:first-child {
18051
18216
  margin-right: 7px;
18052
18217
  }
18053
- :where(.du-bois-light-tag):has(> .anticon:first-child) > .anticon:not(:first-child) {
18218
+ :where(.du-bois-light-tag):has(> .anticon:first-child) > .anticon:not(:first-child),
18219
+ :where(.du-bois-light-tag):has(> .db-icon:first-child) > .db-icon:not(:first-child) {
18054
18220
  margin-left: 7px;
18055
18221
  }
18056
18222
 
18057
18223
 
18058
- .du-bois-light-btn > .anticon:not(:first-child) {
18224
+ .du-bois-light-btn > .anticon:not(:first-child),
18225
+ .du-bois-light-btn > .db-icon:not(:first-child) {
18059
18226
  margin-left: 8px;
18060
18227
  }
package/dist/patterns.js CHANGED
@@ -1,4 +1,4 @@
1
- export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, d as WizardStepNavigationProvider, u as useWizardCurrentStep, e as useWizardStepNavigation } from './WizardStepContentWrapper-6YTjeEaA.js';
1
+ export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, d as WizardStepNavigationProvider, u as useWizardCurrentStep, e as useWizardStepNavigation } from './WizardStepContentWrapper-bbh_CoIf.js';
2
2
  import '@emotion/react/jsx-runtime';
3
3
  import 'lodash/isUndefined';
4
4
  import 'react';
@@ -1,10 +1,27 @@
1
- import type { AlertProps as AntDAlertProps } from "antd";
2
1
  import type { ButtonProps } from "../Button";
3
2
  import { DesignSystemEventProviderAnalyticsEventTypes } from "../DesignSystemEventProvider";
4
3
  import type { AnalyticsEventProps, DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
5
- export type AlertType = NonNullable<AntDAlertProps["type"]>;
6
- export interface AlertProps extends Omit<AntDAlertProps, "closeText" | "showIcon" | "type" | "icon">, HTMLDataAttributes, DangerouslySetAntdProps<Partial<Pick<AntDAlertProps, "showIcon" | "icon" | "message" | "description" | "type">>>, AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnView> {
4
+ export type AlertType = "success" | "info" | "warning" | "error";
5
+ export interface AlertProps extends HTMLDataAttributes, DangerouslySetAntdProps<{
6
+ showIcon?: boolean;
7
+ icon?: React.ReactNode;
8
+ message?: React.ReactNode;
9
+ description?: React.ReactNode;
10
+ type?: AlertType;
11
+ }>, AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnView> {
7
12
  type: AlertType;
13
+ message: React.ReactNode;
14
+ description?: React.ReactNode;
15
+ closable?: boolean;
16
+ onClose?: React.MouseEventHandler<HTMLButtonElement>;
17
+ afterClose?: () => void;
18
+ role?: string;
19
+ style?: React.CSSProperties;
20
+ className?: string;
21
+ prefixCls?: string;
22
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
23
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
24
+ onClick?: React.MouseEventHandler<HTMLDivElement>;
8
25
  closeIconLabel?: string;
9
26
  /**
10
27
  * @deprecated Use CEP-governed banners instead. go/banner/create go/getabanner go/banner
@@ -13,7 +30,7 @@ export interface AlertProps extends Omit<AntDAlertProps, "closeText" | "showIcon
13
30
  /**
14
31
  * @deprecated Please use `actions` instead.
15
32
  */
16
- action?: AntDAlertProps["action"];
33
+ action?: React.ReactNode;
17
34
  /** Array of button props to render as footer actions. All buttons will be rendered as small size. */
18
35
  actions?: Omit<ButtonProps, "size" | "type">[];
19
36
  /** Force actions to be rendered beneath the description. */
@@ -5,6 +5,7 @@ import type { WithLoadingState } from "../LoadingState/LoadingState";
5
5
  import type { AnalyticsEventPropsWithStartInteraction, HTMLDataAttributes } from "../types";
6
6
  export { SMALL_BUTTON_HEIGHT, getButtonEmotionStyles, getMemoizedButtonEmotionStyles } from "./AntDButtonInternal";
7
7
  export type ButtonSize = "middle" | "small";
8
+ export type ButtonForceMode = "native" | "legacy-antd" | "flag";
8
9
  export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "shape" | "size">, HTMLDataAttributes, Omit<WithLoadingState, "loading">, AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
9
10
  type?: "primary" | "link" | "tertiary";
10
11
  size?: ButtonSize;
@@ -12,6 +13,6 @@ export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "s
12
13
  dangerouslySetForceIconStyles?: boolean;
13
14
  dangerouslyUseFocusPseudoClass?: boolean;
14
15
  dangerouslyAppendWrapperCss?: React.CSSProperties;
15
- useNativeButtonOverride?: boolean;
16
+ forceMode?: ButtonForceMode;
16
17
  }
17
18
  export declare const Button: ForwardRefExoticComponent<PropsWithoutRef<ButtonProps> & RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,4 @@
1
+ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
2
+ import type { IconProps } from "../../Icon";
3
+ declare const SlidesIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
4
+ export default SlidesIcon;
@@ -385,6 +385,7 @@ export { default as SidebarOpenIcon } from "./SidebarOpenIcon";
385
385
  export { default as SidebarSyncIcon } from "./SidebarSyncIcon";
386
386
  export { default as SlashSquareIcon } from "./SlashSquareIcon";
387
387
  export { default as SlidersIcon } from "./SlidersIcon";
388
+ export { default as SlidesIcon } from "./SlidesIcon";
388
389
  export { default as SnippetIcon } from "./SnippetIcon";
389
390
  export { default as SortAscendingIcon } from "./SortAscendingIcon";
390
391
  export { default as SortCustomHorizontalIcon } from "./SortCustomHorizontalIcon";
@@ -1,8 +1,6 @@
1
1
  import type { UseComboboxGetToggleButtonPropsOptions } from "downshift";
2
2
  import { type DownshiftToggleButtonProps } from "./TypeaheadComboboxToggleButton";
3
3
  import type { ButtonSize } from "../Button";
4
- /** Height of the non-inline controls block, for callers that position it themselves. */
5
- export declare const TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT = 16;
6
4
  export interface TypeaheadComboboxControlsProps {
7
5
  getDownshiftToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions) => DownshiftToggleButtonProps;
8
6
  showClearSelectionButton?: boolean;
@@ -35,7 +35,6 @@ export * from "./LegacyPopover";
35
35
  export * from "./LegacySelect";
36
36
  export * from "./LegacySkeleton";
37
37
  export * from "./LegacyTable";
38
- export * from "./LegacyTooltip";
39
38
  export * from "./Listbox";
40
39
  export * from "./LoadingState";
41
40
  export * from "./Menu";
@@ -9,9 +9,10 @@ export type SAFEXValueType = boolean | number;
9
9
  *
10
10
  * @param flag The name of the flag to check
11
11
  * @param defaultValue The default value to return if the flag is not set
12
+ * @param testDefault The default to use in Jest or UiTestServer tests
12
13
  * @returns
13
14
  */
14
- export declare const safex: <T extends SAFEXValueType>(flag: string, defaultValue: T) => T;
15
+ export declare const safex: <T extends SAFEXValueType>(flag: string, defaultValue: T, testDefault?: T) => T;
15
16
  /**
16
17
  * Reads a server-side feature flag value. Delegates to `window.__debug__serverSideSafe`
17
18
  * which is set by `@databricks/web-shared` and includes full flag resolution with
@@ -21,6 +22,7 @@ export declare const safex: <T extends SAFEXValueType>(flag: string, defaultValu
21
22
  *
22
23
  * @param flag The name of the flag to check
23
24
  * @param defaultValue The default value to return if the flag is not set
25
+ * @param testDefault The default to use in Jest or UiTestServer tests
24
26
  * @returns
25
27
  */
26
- export declare const serverSideSafe: <T extends SAFEXValueType>(flag: string, defaultValue: T) => T;
28
+ export declare const serverSideSafe: <T extends SAFEXValueType>(flag: string, defaultValue: T, testDefault?: T) => T;
@@ -1,6 +1,5 @@
1
1
  declare const antdGeneralVariables: {
2
2
  classnamePrefix: string;
3
- iconfontCssPrefix: string;
4
3
  borderRadiusBase: number;
5
4
  borderWidth: number;
6
5
  heightSm: number;