@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.
- package/AGENTS.md +239 -166
- package/CHANGELOG.md +28 -0
- package/dist/{RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js → RHFControlledTypeaheadComboboxV2-nSSYj16I.js} +3 -3
- package/dist/{RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js.map → RHFControlledTypeaheadComboboxV2-nSSYj16I.js.map} +1 -1
- package/dist/{WizardStepContentWrapper-6YTjeEaA.js → WizardStepContentWrapper-bbh_CoIf.js} +195 -257
- package/dist/WizardStepContentWrapper-bbh_CoIf.js.map +1 -0
- package/dist/dubois-colors.less +1 -1
- package/dist/icon-metadata.json +5 -0
- package/dist/{index-DiRpSwH2.js → index-CUCuUviS.js} +119 -109
- package/dist/index-CUCuUviS.js.map +1 -0
- package/dist/index-dark.css +135 -1
- package/dist/index-dark.mitigated.css +163 -16
- package/dist/index.css +182 -28
- package/dist/index.js +2 -2
- package/dist/index.mitigated.css +210 -43
- package/dist/patterns.js +1 -1
- package/dist-types/design-system/Alert/Alert.d.ts +21 -4
- package/dist-types/design-system/Button/Button.d.ts +2 -1
- package/dist-types/design-system/Icon/__generated/icons/SlidesIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/index.d.ts +1 -0
- package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxControls.d.ts +0 -2
- package/dist-types/design-system/index.d.ts +0 -1
- package/dist-types/design-system/utils/safex.d.ts +4 -2
- package/dist-types/theme/generalVariables.d.ts +0 -1
- package/package.json +5 -4
- package/setup.mjs +586 -0
- package/dist/WizardStepContentWrapper-6YTjeEaA.js.map +0 -1
- package/dist/index-DiRpSwH2.js.map +0 -1
- package/dist-types/design-system/LegacyTooltip/LegacyTooltip.d.ts +0 -47
- package/dist-types/design-system/LegacyTooltip/index.d.ts +0 -1
package/dist/index.mitigated.css
CHANGED
|
@@ -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
|
-
|
|
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-
|
|
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 =
|
|
6
|
-
export interface AlertProps extends
|
|
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?:
|
|
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
|
-
|
|
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;
|