@box/blueprint-web 12.78.5 → 12.78.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/dist/lib-esm/collapsible/collapsible-section.js +10 -4
- package/dist/lib-esm/collapsible/collapsible-section.module.js +1 -1
- package/dist/lib-esm/index.css +54 -47
- package/dist/lib-esm/trigger-button/trigger-button.js +7 -3
- package/dist/lib-esm/trigger-button/trigger-button.module.js +1 -1
- package/package.json +3 -3
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { PointerChevronUp, PointerChevronDown } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
|
|
3
4
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
|
4
5
|
import clsx from 'clsx';
|
|
5
|
-
import { forwardRef, useState, useEffect, useCallback } from 'react';
|
|
6
|
+
import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
|
|
7
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
8
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
7
9
|
import { Slot } from '../primitives/slot.js';
|
|
8
10
|
import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
|
|
9
11
|
import styles from './collapsible-section.module.js';
|
|
10
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
11
12
|
|
|
12
13
|
const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
13
14
|
const {
|
|
@@ -31,6 +32,11 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
31
32
|
setCollapsibleSectionOpen(isOpen);
|
|
32
33
|
onOpenChange?.(isOpen);
|
|
33
34
|
}, [onOpenChange]);
|
|
35
|
+
const icon = useMemo(() => ({
|
|
36
|
+
up: enableModernizedComponents ? ChevronUp : PointerChevronUp,
|
|
37
|
+
down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
|
|
38
|
+
size: enableModernizedComponents ? 'large' : 'x-small'
|
|
39
|
+
}), [enableModernizedComponents]);
|
|
34
40
|
return jsxs(Collapsible.Root, {
|
|
35
41
|
...rest,
|
|
36
42
|
ref: forwardedRef,
|
|
@@ -46,8 +52,8 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
46
52
|
children: [headerSlot?.props.children, jsx(IconButton, {
|
|
47
53
|
"aria-label": collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel,
|
|
48
54
|
className: styles.collapsibleSectionHeaderArrow,
|
|
49
|
-
icon: collapsibleSectionOpen ?
|
|
50
|
-
size:
|
|
55
|
+
icon: collapsibleSectionOpen ? icon.up : icon.down,
|
|
56
|
+
size: icon.size,
|
|
51
57
|
type: "button"
|
|
52
58
|
})]
|
|
53
59
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--
|
|
2
|
+
var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--35a18","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--35a18","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--35a18","slideDown":"bp_collapsible_section_module_slideDown--35a18","slideUp":"bp_collapsible_section_module_slideUp--35a18","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--35a18"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -2051,36 +2051,40 @@
|
|
|
2051
2051
|
height:var(--icon-button-size-x-small);
|
|
2052
2052
|
width:var(--icon-button-size-x-small);
|
|
2053
2053
|
}
|
|
2054
|
-
.bp_collapsible_section_module_collapsibleSection--
|
|
2054
|
+
.bp_collapsible_section_module_collapsibleSection--35a18[data-modern=false]{
|
|
2055
|
+
--collapsible-section-header-padding:var(--space-5);
|
|
2056
|
+
--collapsible-section-body-padding:var(--space-5);
|
|
2055
2057
|
--collapsible-section-padding:var(--space-5);
|
|
2056
2058
|
--collapsible-section-border-radius:var(--radius-3);
|
|
2057
2059
|
--collapsible-section-outline-border-radius:var(--radius-2);
|
|
2058
|
-
--collapsible-section-background-color:var(--surface-surface);
|
|
2059
2060
|
--collapsible-section-border:var(--border-1) solid var(--border-collapsible-border);
|
|
2060
2061
|
--collapsible-section-outline-width:var(--border-2);
|
|
2061
2062
|
--collapsible-section-outline-offset:var(--space-05);
|
|
2062
2063
|
--collapsible-section-header-focus-color:var(--outline-focus-on-light);
|
|
2063
2064
|
--collapsible-section-header-background-color:var(--surface-surface);
|
|
2064
2065
|
--collapsible-section-content-background-color:var(--surface-surface);
|
|
2066
|
+
--collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
|
|
2065
2067
|
}
|
|
2066
2068
|
|
|
2067
|
-
.bp_collapsible_section_module_collapsibleSection--
|
|
2069
|
+
.bp_collapsible_section_module_collapsibleSection--35a18[data-modern=true]{
|
|
2070
|
+
--collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
|
|
2071
|
+
--collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
|
|
2068
2072
|
--collapsible-section-padding:var(--bp-space-050);
|
|
2069
2073
|
--collapsible-section-border-radius:var(--bp-radius-10);
|
|
2070
2074
|
--collapsible-section-outline-border-radius:var(--bp-radius-03);
|
|
2071
|
-
--collapsible-section-background-color:var(--bp-surface-surface);
|
|
2072
2075
|
--collapsible-section-border:var(--bp-border-01) solid var(--bp-border-collapsible-section-border);
|
|
2073
2076
|
--collapsible-section-outline-width:var(--bp-border-02);
|
|
2074
2077
|
--collapsible-section-outline-offset:var(--bp-space-005);
|
|
2075
2078
|
--collapsible-section-header-focus-color:var(--bp-outline-focus-on-light);
|
|
2076
|
-
--collapsible-section-header-background-color:var(--bp-surface-surface);
|
|
2077
|
-
--collapsible-section-content-background-color:var(--bp-surface-surface);
|
|
2079
|
+
--collapsible-section-header-background-color:var(--bp-surface-collapsible-section-surface);
|
|
2080
|
+
--collapsible-section-content-background-color:var(--bp-surface-collapsible-section-surface);
|
|
2081
|
+
--collapsible-section-header-expanded-border-bottom:none;
|
|
2078
2082
|
}
|
|
2079
2083
|
|
|
2080
|
-
.bp_collapsible_section_module_collapsibleSection--
|
|
2084
|
+
.bp_collapsible_section_module_collapsibleSection--35a18{
|
|
2081
2085
|
width:100%;
|
|
2082
2086
|
}
|
|
2083
|
-
.bp_collapsible_section_module_collapsibleSectionHeader--
|
|
2087
|
+
.bp_collapsible_section_module_collapsibleSectionHeader--35a18{
|
|
2084
2088
|
align-items:center;
|
|
2085
2089
|
background:var(--collapsible-section-header-background-color);
|
|
2086
2090
|
border:var(--collapsible-section-border);
|
|
@@ -2097,7 +2101,7 @@
|
|
|
2097
2101
|
user-select:none;
|
|
2098
2102
|
width:100%;
|
|
2099
2103
|
}
|
|
2100
|
-
.bp_collapsible_section_module_collapsibleSectionHeader--
|
|
2104
|
+
.bp_collapsible_section_module_collapsibleSectionHeader--35a18:focus::before{
|
|
2101
2105
|
border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
|
|
2102
2106
|
border-radius:var(--collapsible-section-outline-border-radius);
|
|
2103
2107
|
bottom:var(--collapsible-section-outline-offset);
|
|
@@ -2107,27 +2111,29 @@
|
|
|
2107
2111
|
right:var(--collapsible-section-outline-offset);
|
|
2108
2112
|
top:var(--collapsible-section-outline-offset);
|
|
2109
2113
|
}
|
|
2110
|
-
.bp_collapsible_section_module_collapsibleSectionHeader--
|
|
2114
|
+
.bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--35a18[aria-expanded=true]::before{
|
|
2115
|
+
border-bottom:var(--collapsible-section-header-expanded-border-bottom);
|
|
2111
2116
|
border-end-end-radius:0;
|
|
2112
2117
|
border-end-start-radius:0;
|
|
2118
|
+
padding-block:var(--collapsible-section-header-padding);
|
|
2113
2119
|
}
|
|
2114
|
-
.bp_collapsible_section_module_collapsibleSectionHeaderArrow--
|
|
2120
|
+
.bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18{
|
|
2115
2121
|
display:block;
|
|
2116
2122
|
margin-inline-start:var(--collapsible-section-padding);
|
|
2117
2123
|
}
|
|
2118
|
-
.bp_collapsible_section_module_collapsibleSectionHeaderArrow--
|
|
2124
|
+
.bp_collapsible_section_module_collapsibleSectionHeaderArrow--35a18 > svg{
|
|
2119
2125
|
vertical-align:middle;
|
|
2120
2126
|
}
|
|
2121
|
-
.bp_collapsible_section_module_collapsibleSectionContent--
|
|
2127
|
+
.bp_collapsible_section_module_collapsibleSectionContent--35a18{
|
|
2122
2128
|
overflow:hidden;
|
|
2123
2129
|
}
|
|
2124
|
-
.bp_collapsible_section_module_collapsibleSectionContent--
|
|
2125
|
-
animation:bp_collapsible_section_module_slideDown--
|
|
2130
|
+
.bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=open]{
|
|
2131
|
+
animation:bp_collapsible_section_module_slideDown--35a18 .25s ease-out;
|
|
2126
2132
|
}
|
|
2127
|
-
.bp_collapsible_section_module_collapsibleSectionContent--
|
|
2128
|
-
animation:bp_collapsible_section_module_slideUp--
|
|
2133
|
+
.bp_collapsible_section_module_collapsibleSectionContent--35a18[data-state=closed]{
|
|
2134
|
+
animation:bp_collapsible_section_module_slideUp--35a18 .25s ease-out;
|
|
2129
2135
|
}
|
|
2130
|
-
.bp_collapsible_section_module_collapsibleSectionBody--
|
|
2136
|
+
.bp_collapsible_section_module_collapsibleSectionBody--35a18{
|
|
2131
2137
|
align-items:center;
|
|
2132
2138
|
background:var(--collapsible-section-content-background-color);
|
|
2133
2139
|
border:var(--collapsible-section-border);
|
|
@@ -2136,11 +2142,11 @@
|
|
|
2136
2142
|
border-top:none;
|
|
2137
2143
|
display:flex;
|
|
2138
2144
|
justify-content:space-between;
|
|
2139
|
-
padding-block:var(--collapsible-section-padding);
|
|
2145
|
+
padding-block:var(--collapsible-section-body-padding);
|
|
2140
2146
|
padding-inline:var(--collapsible-section-padding);
|
|
2141
2147
|
}
|
|
2142
2148
|
|
|
2143
|
-
@keyframes bp_collapsible_section_module_slideDown--
|
|
2149
|
+
@keyframes bp_collapsible_section_module_slideDown--35a18{
|
|
2144
2150
|
from{
|
|
2145
2151
|
height:0;
|
|
2146
2152
|
}
|
|
@@ -2148,7 +2154,7 @@
|
|
|
2148
2154
|
height:var(--radix-collapsible-content-height);
|
|
2149
2155
|
}
|
|
2150
2156
|
}
|
|
2151
|
-
@keyframes bp_collapsible_section_module_slideUp--
|
|
2157
|
+
@keyframes bp_collapsible_section_module_slideUp--35a18{
|
|
2152
2158
|
from{
|
|
2153
2159
|
height:var(--radix-collapsible-content-height);
|
|
2154
2160
|
}
|
|
@@ -9080,7 +9086,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9080
9086
|
width:fit-content;
|
|
9081
9087
|
}
|
|
9082
9088
|
|
|
9083
|
-
.bp_trigger_button_module_triggerButton--
|
|
9089
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=false].bp_trigger_button_module_secondary--eb52b{
|
|
9084
9090
|
--trigger-button-background:var(--surface-dropdown-secondary-surface);
|
|
9085
9091
|
--trigger-button-border:var(--border-1) solid var(--border-cta-border-secondary);
|
|
9086
9092
|
--trigger-button-focus-or-hover-background:var(--surface-dropdown-secondary-surface-hover);
|
|
@@ -9088,79 +9094,80 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
9088
9094
|
--trigger-button-active-background:var(--surface-dropdown-secondary-surface-pressed);
|
|
9089
9095
|
--trigger-button-active-border:var(--border-1) solid var(--border-cta-border-secondary);
|
|
9090
9096
|
}
|
|
9091
|
-
.bp_trigger_button_module_triggerButton--
|
|
9097
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=false].bp_trigger_button_module_tertiary--eb52b{
|
|
9092
9098
|
--trigger-button-focus-or-hover-background:var(--surface-dropdown-primary-surface-hover);
|
|
9093
9099
|
--trigger-button-active-background:var(--surface-dropdown-primary-surface-pressed);
|
|
9094
9100
|
}
|
|
9095
|
-
.bp_trigger_button_module_triggerButton--
|
|
9101
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=false].bp_trigger_button_module_extraSmall--eb52b{
|
|
9096
9102
|
--button-xsmall-gap:var(--space-1);
|
|
9097
9103
|
--button-xsmall-height:var(--size-6);
|
|
9098
9104
|
--button-xsmall-padding:0.375rem var(--space-1);
|
|
9099
9105
|
}
|
|
9100
|
-
.bp_trigger_button_module_triggerButton--
|
|
9106
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=false].bp_trigger_button_module_small--eb52b{
|
|
9101
9107
|
--button-small-padding:0.375rem var(--space-2);
|
|
9102
9108
|
}
|
|
9103
|
-
.bp_trigger_button_module_triggerButton--
|
|
9109
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=false].bp_trigger_button_module_large--eb52b{
|
|
9104
9110
|
--button-large-padding:0.375rem var(--space-3) 0.375rem var(--space-2);
|
|
9105
9111
|
}
|
|
9106
9112
|
|
|
9107
|
-
.bp_trigger_button_module_triggerButton--
|
|
9108
|
-
--trigger-button-background:var(--bp-surface-dropdown-surface
|
|
9113
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=true].bp_trigger_button_module_secondary--eb52b{
|
|
9114
|
+
--trigger-button-background:var(--bp-surface-dropdown-secondary-surface);
|
|
9109
9115
|
--trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
|
|
9110
9116
|
--trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
|
|
9111
9117
|
--trigger-button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
|
|
9112
9118
|
--trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
|
|
9113
9119
|
--trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
|
|
9114
9120
|
}
|
|
9115
|
-
.bp_trigger_button_module_triggerButton--
|
|
9121
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=true].bp_trigger_button_module_tertiary--eb52b{
|
|
9116
9122
|
--trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
|
|
9117
9123
|
--trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
|
|
9118
9124
|
}
|
|
9119
|
-
.bp_trigger_button_module_triggerButton--
|
|
9125
|
+
.bp_trigger_button_module_triggerButton--eb52b[data-modern=true].bp_trigger_button_module_extraSmall--eb52b{
|
|
9120
9126
|
--button-xsmall-gap:var(--bp-space-010);
|
|
9121
9127
|
--button-xsmall-height:var(--bp-size-060);
|
|
9122
|
-
--button-xsmall-padding:0.375rem var(--bp-space-010);
|
|
9123
|
-
}
|
|
9124
|
-
.bp_trigger_button_module_triggerButton--d2fa6[data-modern=true].bp_trigger_button_module_small--d2fa6{
|
|
9125
|
-
--button-small-padding:0.375rem var(--bp-space-020);
|
|
9126
|
-
}
|
|
9127
|
-
.bp_trigger_button_module_triggerButton--d2fa6[data-modern=true].bp_trigger_button_module_large--d2fa6{
|
|
9128
|
-
--button-large-padding:0.375rem var(--bp-space-030) 0.375rem var(--bp-space-020);
|
|
9129
9128
|
}
|
|
9130
9129
|
|
|
9131
|
-
.bp_trigger_button_module_triggerButton--
|
|
9130
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_secondary--eb52b{
|
|
9132
9131
|
background:var(--trigger-button-background);
|
|
9133
9132
|
border:var(--trigger-button-border);
|
|
9134
9133
|
}
|
|
9135
|
-
.bp_trigger_button_module_triggerButton--
|
|
9134
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_secondary--eb52b:not(:disabled):hover,.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_secondary--eb52b:not(:disabled)[data-focus-visible]{
|
|
9136
9135
|
background:var(--trigger-button-focus-or-hover-background);
|
|
9137
9136
|
border:var(--trigger-button-focus-or-hover-border);
|
|
9138
9137
|
}
|
|
9139
|
-
.bp_trigger_button_module_triggerButton--
|
|
9138
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_secondary--eb52b:not(:disabled):active{
|
|
9140
9139
|
background:var(--trigger-button-active-background);
|
|
9141
9140
|
border:var(--trigger-button-active-border);
|
|
9142
9141
|
}
|
|
9143
|
-
.bp_trigger_button_module_triggerButton--
|
|
9142
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_tertiary--eb52b{
|
|
9144
9143
|
background:var(--trigger-button-background);
|
|
9145
9144
|
border:var(--trigger-button-border);
|
|
9146
9145
|
}
|
|
9147
|
-
.bp_trigger_button_module_triggerButton--
|
|
9146
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_tertiary--eb52b:not(:disabled):hover,.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_tertiary--eb52b:not(:disabled)[data-focus-visible]{
|
|
9148
9147
|
background:var(--trigger-button-focus-or-hover-background);
|
|
9149
9148
|
}
|
|
9150
|
-
.bp_trigger_button_module_triggerButton--
|
|
9149
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_tertiary--eb52b:not(:disabled):active{
|
|
9151
9150
|
background:var(--trigger-button-active-background);
|
|
9152
9151
|
}
|
|
9153
|
-
.bp_trigger_button_module_triggerButton--
|
|
9152
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_extraSmall--eb52b{
|
|
9154
9153
|
gap:var(--button-xsmall-gap);
|
|
9155
9154
|
height:var(--button-xsmall-height);
|
|
9156
|
-
padding:var(--button-xsmall-padding);
|
|
9157
9155
|
}
|
|
9158
|
-
.bp_trigger_button_module_triggerButton--
|
|
9156
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_extraSmall--eb52b.bp_trigger_button_module_startIcon--eb52b{
|
|
9157
|
+
padding-left:.625rem;
|
|
9158
|
+
}
|
|
9159
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_small--eb52b{
|
|
9159
9160
|
padding:var(--button-small-padding);
|
|
9160
9161
|
}
|
|
9161
|
-
.bp_trigger_button_module_triggerButton--
|
|
9162
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_small--eb52b.bp_trigger_button_module_startIcon--eb52b{
|
|
9163
|
+
padding-left:.625rem;
|
|
9164
|
+
}
|
|
9165
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_large--eb52b{
|
|
9162
9166
|
padding:var(--button-large-padding);
|
|
9163
9167
|
}
|
|
9168
|
+
.bp_trigger_button_module_triggerButton--eb52b.bp_trigger_button_module_large--eb52b.bp_trigger_button_module_startIcon--eb52b{
|
|
9169
|
+
padding-left:.625rem;
|
|
9170
|
+
}
|
|
9164
9171
|
.bp_styles_module_splitButton--75e0b[data-modern=false]{
|
|
9165
9172
|
--split-button-left-width:100%;
|
|
9166
9173
|
--split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
|
|
@@ -9,7 +9,7 @@ import styles from './trigger-button.module.js';
|
|
|
9
9
|
|
|
10
10
|
const buttonSizeToStartIconSizeMap = {
|
|
11
11
|
extraSmall: 16,
|
|
12
|
-
small:
|
|
12
|
+
small: 12,
|
|
13
13
|
large: 24
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
@@ -34,15 +34,19 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
34
34
|
const baseButtonSize = size === 'extraSmall' ? 'small' : size;
|
|
35
35
|
return jsxs(BaseButton, {
|
|
36
36
|
ref: forwardedRef,
|
|
37
|
-
className: clsx(styles.triggerButton, styles[size], styles[variant],
|
|
37
|
+
className: clsx(styles.triggerButton, styles[size], styles[variant], {
|
|
38
|
+
[styles.startIcon]: !!startIcon
|
|
39
|
+
}, className),
|
|
38
40
|
"data-modern": enableModernizedComponents,
|
|
39
41
|
size: baseButtonSize,
|
|
40
42
|
variant: variant,
|
|
41
43
|
...rest,
|
|
42
44
|
children: [startIcon && jsx(BaseButton.Icon, {
|
|
45
|
+
className: styles.startIcon,
|
|
43
46
|
icon: startIcon,
|
|
44
47
|
iconProps: {
|
|
45
|
-
height: startIconSize
|
|
48
|
+
height: startIconSize,
|
|
49
|
+
width: startIconSize
|
|
46
50
|
}
|
|
47
51
|
}), label && jsx(BaseButton.Label, {
|
|
48
52
|
children: label
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--
|
|
2
|
+
var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--eb52b","secondary":"bp_trigger_button_module_secondary--eb52b","tertiary":"bp_trigger_button_module_tertiary--eb52b","extraSmall":"bp_trigger_button_module_extraSmall--eb52b","small":"bp_trigger_button_module_small--eb52b","large":"bp_trigger_button_module_large--eb52b","startIcon":"bp_trigger_button_module_startIcon--eb52b"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "12.78.
|
|
3
|
+
"version": "12.78.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.71.0",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.14.
|
|
80
|
+
"@box/storybook-utils": "^0.14.7",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|