@box/blueprint-web 14.4.4 → 14.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/lib-esm/index.css
CHANGED
|
@@ -2473,7 +2473,7 @@
|
|
|
2473
2473
|
.bp_base_badge_module_numericBadgeMoreDigits--15c80{
|
|
2474
2474
|
padding:1px 3px;
|
|
2475
2475
|
}
|
|
2476
|
-
.bp_icon_button_module_iconButton--
|
|
2476
|
+
.bp_icon_button_module_iconButton--2eb85[data-modern=false]{
|
|
2477
2477
|
--icon-button-radius:var(--radius-2);
|
|
2478
2478
|
--icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
|
|
2479
2479
|
--icon-button-gray:var(--gray-50);
|
|
@@ -2505,7 +2505,7 @@
|
|
|
2505
2505
|
--icon-button-size-x-small:var(--size-6);
|
|
2506
2506
|
}
|
|
2507
2507
|
|
|
2508
|
-
.bp_icon_button_module_iconButton--
|
|
2508
|
+
.bp_icon_button_module_iconButton--2eb85[data-modern=true]{
|
|
2509
2509
|
--icon-button-radius:var(--bp-radius-10);
|
|
2510
2510
|
--icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
|
|
2511
2511
|
--icon-button-gray:var(--bp-gray-50);
|
|
@@ -2537,7 +2537,16 @@
|
|
|
2537
2537
|
--icon-button-size-x-small:var(--bp-size-060);
|
|
2538
2538
|
}
|
|
2539
2539
|
|
|
2540
|
-
.bp_icon_button_module_iconButton--
|
|
2540
|
+
.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]{
|
|
2541
|
+
transition-duration:var(--bp-duration-short);
|
|
2542
|
+
transition-property:background;
|
|
2543
|
+
transition-timing-function:var(--bp-curve-small-off);
|
|
2544
|
+
}
|
|
2545
|
+
.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]:active,.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true]:hover,.bp_icon_button_module_iconButton--2eb85[data-bp-animated=true][data-active]{
|
|
2546
|
+
transition-timing-function:var(--bp-curve-small-on);
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2549
|
+
.bp_icon_button_module_iconButton--2eb85{
|
|
2541
2550
|
align-items:center;
|
|
2542
2551
|
border-radius:var(--icon-button-radius);
|
|
2543
2552
|
border-style:none;
|
|
@@ -2547,109 +2556,109 @@
|
|
|
2547
2556
|
justify-content:center;
|
|
2548
2557
|
padding:0;
|
|
2549
2558
|
}
|
|
2550
|
-
.bp_icon_button_module_iconButton--
|
|
2559
|
+
.bp_icon_button_module_iconButton--2eb85[aria-disabled=true]{
|
|
2551
2560
|
background:var(--icon-button-surface-disabled);
|
|
2552
2561
|
opacity:.3;
|
|
2553
2562
|
}
|
|
2554
|
-
.bp_icon_button_module_iconButton--
|
|
2563
|
+
.bp_icon_button_module_iconButton--2eb85[aria-disabled=true] .bp_icon_button_module_icon--2eb85 *{
|
|
2555
2564
|
fill:var(--icon-button-gray);
|
|
2556
2565
|
}
|
|
2557
|
-
.bp_icon_button_module_iconButton--
|
|
2566
|
+
.bp_icon_button_module_iconButton--2eb85:focus-visible{
|
|
2558
2567
|
outline:none;
|
|
2559
2568
|
}
|
|
2560
|
-
.bp_icon_button_module_iconButton--
|
|
2569
|
+
.bp_icon_button_module_iconButton--2eb85[data-focus-visible]{
|
|
2561
2570
|
outline:var(--icon-button-border) solid var(--icon-button-outline);
|
|
2562
2571
|
}
|
|
2563
|
-
.bp_icon_button_module_iconButton--
|
|
2572
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85{
|
|
2564
2573
|
background:var(--icon-button-surface);
|
|
2565
2574
|
}
|
|
2566
|
-
.bp_icon_button_module_iconButton--
|
|
2575
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85 .bp_icon_button_module_icon--2eb85 *{
|
|
2567
2576
|
fill:var(--icon-button-icon);
|
|
2568
2577
|
}
|
|
2569
|
-
.bp_icon_button_module_iconButton--
|
|
2578
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-focus-visible]{
|
|
2570
2579
|
background:var(--icon-button-surface-hover);
|
|
2571
2580
|
}
|
|
2572
|
-
.bp_icon_button_module_iconButton--
|
|
2581
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
|
|
2573
2582
|
fill:var(--icon-button-icon-hover);
|
|
2574
2583
|
}
|
|
2575
|
-
.bp_icon_button_module_iconButton--
|
|
2584
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-active]{
|
|
2576
2585
|
background:var(--icon-button-surface-pressed);
|
|
2577
2586
|
}
|
|
2578
|
-
.bp_icon_button_module_iconButton--
|
|
2587
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_default--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
|
|
2579
2588
|
fill:var(--icon-button-icon-pressed);
|
|
2580
2589
|
}
|
|
2581
|
-
.bp_icon_button_module_iconButton--
|
|
2590
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85{
|
|
2582
2591
|
background:var(--icon-button-surface);
|
|
2583
2592
|
}
|
|
2584
|
-
.bp_icon_button_module_iconButton--
|
|
2593
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85[data-focus-visible]{
|
|
2585
2594
|
background:var(--icon-button-surface-hover);
|
|
2586
2595
|
}
|
|
2587
|
-
.bp_icon_button_module_iconButton--
|
|
2596
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_icon-logo--2eb85[data-active]{
|
|
2588
2597
|
background:var(--icon-button-surface-pressed);
|
|
2589
2598
|
}
|
|
2590
|
-
.bp_icon_button_module_iconButton--
|
|
2599
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85{
|
|
2591
2600
|
background:var(--icon-button-surface);
|
|
2592
2601
|
}
|
|
2593
|
-
.bp_icon_button_module_iconButton--
|
|
2602
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85 .bp_icon_button_module_icon--2eb85 *{
|
|
2594
2603
|
fill:var(--icon-button-icon-high-contrast);
|
|
2595
2604
|
}
|
|
2596
|
-
.bp_icon_button_module_iconButton--
|
|
2605
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-focus-visible]{
|
|
2597
2606
|
background:var(--icon-button-surface-hover);
|
|
2598
2607
|
}
|
|
2599
|
-
.bp_icon_button_module_iconButton--
|
|
2608
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
|
|
2600
2609
|
fill:var(--icon-button-icon-high-contrast-hover);
|
|
2601
2610
|
}
|
|
2602
|
-
.bp_icon_button_module_iconButton--
|
|
2611
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-active]{
|
|
2603
2612
|
background:var(--icon-button-surface-pressed);
|
|
2604
2613
|
}
|
|
2605
|
-
.bp_icon_button_module_iconButton--
|
|
2614
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_high-contrast--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
|
|
2606
2615
|
fill:var(--icon-button-icon-high-contrast-pressed);
|
|
2607
2616
|
}
|
|
2608
|
-
.bp_icon_button_module_iconButton--
|
|
2617
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85{
|
|
2609
2618
|
background:var(--icon-button-surface-on-dark);
|
|
2610
2619
|
}
|
|
2611
|
-
.bp_icon_button_module_iconButton--
|
|
2620
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85 .bp_icon_button_module_icon--2eb85 *{
|
|
2612
2621
|
fill:var(--icon-button-icon-on-dark);
|
|
2613
2622
|
}
|
|
2614
|
-
.bp_icon_button_module_iconButton--
|
|
2623
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-focus-visible]{
|
|
2615
2624
|
background:var(--icon-button-surface-on-dark-hover);
|
|
2616
2625
|
}
|
|
2617
|
-
.bp_icon_button_module_iconButton--
|
|
2626
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
|
|
2618
2627
|
fill:var(--icon-button-icon-on-dark-hover);
|
|
2619
2628
|
}
|
|
2620
|
-
.bp_icon_button_module_iconButton--
|
|
2629
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-active]{
|
|
2621
2630
|
background:var(--icon-button-surface-on-dark-pressed);
|
|
2622
2631
|
}
|
|
2623
|
-
.bp_icon_button_module_iconButton--
|
|
2632
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_on-dark--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
|
|
2624
2633
|
fill:var(--icon-button-icon-on-dark-pressed);
|
|
2625
2634
|
}
|
|
2626
|
-
.bp_icon_button_module_iconButton--
|
|
2635
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85{
|
|
2627
2636
|
background:var(--icon-button-surface-utility);
|
|
2628
2637
|
}
|
|
2629
|
-
.bp_icon_button_module_iconButton--
|
|
2638
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85 .bp_icon_button_module_icon--2eb85 *{
|
|
2630
2639
|
fill:var(--icon-button-icon-utility);
|
|
2631
2640
|
}
|
|
2632
|
-
.bp_icon_button_module_iconButton--
|
|
2641
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:hover,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-focus-visible]{
|
|
2633
2642
|
background:var(--icon-button-surface-utility-hover);
|
|
2634
2643
|
}
|
|
2635
|
-
.bp_icon_button_module_iconButton--
|
|
2644
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:hover .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-focus-visible] .bp_icon_button_module_icon--2eb85 *{
|
|
2636
2645
|
fill:var(--icon-button-icon-utility-hover);
|
|
2637
2646
|
}
|
|
2638
|
-
.bp_icon_button_module_iconButton--
|
|
2647
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:active,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-active]{
|
|
2639
2648
|
background:var(--icon-button-surface-utility-pressed);
|
|
2640
2649
|
}
|
|
2641
|
-
.bp_icon_button_module_iconButton--
|
|
2650
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85:active .bp_icon_button_module_icon--2eb85 *,.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small-utility--2eb85[data-active] .bp_icon_button_module_icon--2eb85 *{
|
|
2642
2651
|
fill:var(--icon-button-icon-utility-pressed);
|
|
2643
2652
|
}
|
|
2644
|
-
.bp_icon_button_module_iconButton--
|
|
2653
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_large--2eb85{
|
|
2645
2654
|
height:var(--icon-button-size-large);
|
|
2646
2655
|
width:var(--icon-button-size-large);
|
|
2647
2656
|
}
|
|
2648
|
-
.bp_icon_button_module_iconButton--
|
|
2657
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_small--2eb85{
|
|
2649
2658
|
height:var(--icon-button-size-small);
|
|
2650
2659
|
width:var(--icon-button-size-small);
|
|
2651
2660
|
}
|
|
2652
|
-
.bp_icon_button_module_iconButton--
|
|
2661
|
+
.bp_icon_button_module_iconButton--2eb85.bp_icon_button_module_x-small--2eb85{
|
|
2653
2662
|
height:var(--icon-button-size-x-small);
|
|
2654
2663
|
width:var(--icon-button-size-x-small);
|
|
2655
2664
|
}
|
|
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Button } from '@ariakit/react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, createElement } from 'react';
|
|
5
|
+
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
5
6
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
7
|
import styles from './icon-button.module.js';
|
|
7
8
|
import { iconSizeMap } from './utils.js';
|
|
@@ -16,12 +17,17 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
16
17
|
const {
|
|
17
18
|
enableModernizedComponents
|
|
18
19
|
} = useBlueprintModernization();
|
|
20
|
+
const {
|
|
21
|
+
componentsWithAnimationEnabled
|
|
22
|
+
} = useBlueprintConfiguration();
|
|
23
|
+
const isAnimationEnabled = componentsWithAnimationEnabled.includes('IconButton');
|
|
19
24
|
const sizeStyles = variant === 'small-utility' ? styles.small : styles[size];
|
|
20
25
|
return jsx(Button, {
|
|
21
26
|
...rest,
|
|
22
27
|
ref: forwardedRef,
|
|
23
28
|
className: clsx(styles.iconButton, styles[variant], sizeStyles, props.className),
|
|
24
29
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
30
|
+
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
25
31
|
children: /*#__PURE__*/createElement(icon, {
|
|
26
32
|
className: styles.icon,
|
|
27
33
|
height: iconSizeMap[size],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"iconButton":"bp_icon_button_module_iconButton--
|
|
2
|
+
var styles = {"iconButton":"bp_icon_button_module_iconButton--2eb85","icon":"bp_icon_button_module_icon--2eb85","default":"bp_icon_button_module_default--2eb85","icon-logo":"bp_icon_button_module_icon-logo--2eb85","high-contrast":"bp_icon_button_module_high-contrast--2eb85","on-dark":"bp_icon_button_module_on-dark--2eb85","small-utility":"bp_icon_button_module_small-utility--2eb85","large":"bp_icon_button_module_large--2eb85","small":"bp_icon_button_module_small--2eb85","x-small":"bp_icon_button_module_x-small--2eb85"};
|
|
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": "14.
|
|
3
|
+
"version": "14.5.0",
|
|
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.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.112.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.112.1",
|
|
51
51
|
"@internationalized/date": "^3.12.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.17.
|
|
80
|
+
"@box/storybook-utils": "^0.17.28",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|