@box/blueprint-web 12.9.5 → 12.10.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
|
@@ -1369,102 +1369,154 @@
|
|
|
1369
1369
|
.bp_checkbox_module_option--dda3e.bp_checkbox_module_disabled--dda3e .bp_checkbox_module_label--dda3e{
|
|
1370
1370
|
cursor:default;
|
|
1371
1371
|
}
|
|
1372
|
-
.bp_icon_button_module_iconButton--
|
|
1372
|
+
.bp_icon_button_module_iconButton--161d7[data-modern=false]{
|
|
1373
|
+
--icon-button-radius:var(--radius-2);
|
|
1374
|
+
--icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
|
|
1375
|
+
--icon-button-gray:var(--gray-50);
|
|
1376
|
+
--icon-button-border:var(--border-2);
|
|
1377
|
+
--icon-button-outline:var(--outline-focus-on-light);
|
|
1378
|
+
--icon-button-surface:var(--surface-cta-surface-icon);
|
|
1379
|
+
--icon-button-icon:var(--icon-cta-icon);
|
|
1380
|
+
--icon-button-surface-hover:var(--surface-cta-surface-icon-hover);
|
|
1381
|
+
--icon-button-icon-hover:var(--icon-cta-icon-hover);
|
|
1382
|
+
--icon-button-surface-pressed:var(--surface-cta-surface-icon-pressed);
|
|
1383
|
+
--icon-button-icon-pressed:var(--icon-cta-icon-pressed);
|
|
1384
|
+
--icon-button-icon-on-color:var(--icon-cta-icon-on-color);
|
|
1385
|
+
--icon-button-icon-on-color-hover:var(--icon-cta-icon-on-color-hover);
|
|
1386
|
+
--icon-button-icon-on-color-pressed:var(--icon-cta-icon-on-color-pressed);
|
|
1387
|
+
--icon-button-surface-utility:var(--surface-cta-surface-icon-utility);
|
|
1388
|
+
--icon-button-icon-utility:var(--icon-cta-icon-utility);
|
|
1389
|
+
--icon-button-surface-utility-hover:var(--surface-cta-surface-icon-utility-hover);
|
|
1390
|
+
--icon-button-icon-utility-hover:var(--icon-cta-icon-utility-hover);
|
|
1391
|
+
--icon-button-surface-utility-pressed:var(--surface-cta-surface-icon-utility-pressed);
|
|
1392
|
+
--icon-button-icon-utility-pressed:var(--icon-cta-icon-utility-pressed);
|
|
1393
|
+
--icon-button-size-large:var(--size-10);
|
|
1394
|
+
--icon-button-size-small:var(--size-8);
|
|
1395
|
+
--icon-button-size-x-small:var(--size-6);
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.bp_icon_button_module_iconButton--161d7[data-modern=true]{
|
|
1399
|
+
--icon-button-radius:var(--bp-radius-10);
|
|
1400
|
+
--icon-button-surface-disabled:var(--bp-surface-cta-surface-icon-disabled);
|
|
1401
|
+
--icon-button-gray:var(--bp-gray-50);
|
|
1402
|
+
--icon-button-border:var(--bp-border-02);
|
|
1403
|
+
--icon-button-outline:var(--bp-outline-focus-on-light);
|
|
1404
|
+
--icon-button-surface:var(--bp-surface-cta-surface-icon);
|
|
1405
|
+
--icon-button-icon:var(--bp-icon-cta-icon);
|
|
1406
|
+
--icon-button-surface-hover:var(--bp-surface-cta-surface-icon-hover);
|
|
1407
|
+
--icon-button-icon-hover:var(--bp-icon-cta-icon-hover);
|
|
1408
|
+
--icon-button-surface-pressed:var(--bp-surface-cta-surface-icon-pressed);
|
|
1409
|
+
--icon-button-icon-pressed:var(--bp-icon-cta-icon-pressed);
|
|
1410
|
+
--icon-button-icon-on-color:var(--bp-icon-cta-icon-on-color);
|
|
1411
|
+
--icon-button-icon-on-color-hover:var(--bp-icon-cta-icon-on-color-hover);
|
|
1412
|
+
--icon-button-icon-on-color-pressed:var(--bp-icon-cta-icon-on-color-pressed);
|
|
1413
|
+
--icon-button-surface-utility:var(--bp-surface-cta-surface-icon-utility);
|
|
1414
|
+
--icon-button-icon-utility:var(--bp-icon-cta-icon-utility);
|
|
1415
|
+
--icon-button-surface-utility-hover:var(--bp-surface-cta-surface-icon-utility-hover);
|
|
1416
|
+
--icon-button-icon-utility-hover:var(--bp-icon-cta-icon-utility-hover);
|
|
1417
|
+
--icon-button-surface-utility-pressed:var(--bp-surface-cta-surface-icon-utility-pressed);
|
|
1418
|
+
--icon-button-icon-utility-pressed:var(--bp-icon-cta-icon-utility-pressed);
|
|
1419
|
+
--icon-button-size-large:var(--bp-size-100);
|
|
1420
|
+
--icon-button-size-small:var(--bp-size-080);
|
|
1421
|
+
--icon-button-size-x-small:var(--bp-size-060);
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
.bp_icon_button_module_iconButton--161d7{
|
|
1373
1425
|
align-items:center;
|
|
1374
|
-
border-radius:var(--radius
|
|
1426
|
+
border-radius:var(--icon-button-radius);
|
|
1375
1427
|
border-style:none;
|
|
1376
1428
|
cursor:pointer;
|
|
1377
1429
|
display:flex;
|
|
1378
1430
|
justify-content:center;
|
|
1379
1431
|
padding:0;
|
|
1380
1432
|
}
|
|
1381
|
-
.bp_icon_button_module_iconButton--
|
|
1382
|
-
background:var(--
|
|
1433
|
+
.bp_icon_button_module_iconButton--161d7[aria-disabled=true]{
|
|
1434
|
+
background:var(--icon-button-surface-disabled);
|
|
1383
1435
|
opacity:.3;
|
|
1384
1436
|
}
|
|
1385
|
-
.bp_icon_button_module_iconButton--
|
|
1386
|
-
fill:var(--gray
|
|
1437
|
+
.bp_icon_button_module_iconButton--161d7[aria-disabled=true] .bp_icon_button_module_icon--161d7 *{
|
|
1438
|
+
fill:var(--icon-button-gray);
|
|
1387
1439
|
}
|
|
1388
|
-
.bp_icon_button_module_iconButton--
|
|
1440
|
+
.bp_icon_button_module_iconButton--161d7:focus-visible{
|
|
1389
1441
|
outline:none;
|
|
1390
1442
|
}
|
|
1391
|
-
.bp_icon_button_module_iconButton--
|
|
1392
|
-
outline:var(--border
|
|
1443
|
+
.bp_icon_button_module_iconButton--161d7[data-focus-visible]{
|
|
1444
|
+
outline:var(--icon-button-border) solid var(--icon-button-outline);
|
|
1393
1445
|
}
|
|
1394
|
-
.bp_icon_button_module_iconButton--
|
|
1395
|
-
background:var(--
|
|
1446
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7{
|
|
1447
|
+
background:var(--icon-button-surface);
|
|
1396
1448
|
}
|
|
1397
|
-
.bp_icon_button_module_iconButton--
|
|
1398
|
-
fill:var(--icon-
|
|
1449
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7 .bp_icon_button_module_icon--161d7 *{
|
|
1450
|
+
fill:var(--icon-button-icon);
|
|
1399
1451
|
}
|
|
1400
|
-
.bp_icon_button_module_iconButton--
|
|
1401
|
-
background:var(--
|
|
1452
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7:hover,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7[data-focus-visible]{
|
|
1453
|
+
background:var(--icon-button-surface-hover);
|
|
1402
1454
|
}
|
|
1403
|
-
.bp_icon_button_module_iconButton--
|
|
1404
|
-
fill:var(--icon-
|
|
1455
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7:hover .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7[data-focus-visible] .bp_icon_button_module_icon--161d7 *{
|
|
1456
|
+
fill:var(--icon-button-icon-hover);
|
|
1405
1457
|
}
|
|
1406
|
-
.bp_icon_button_module_iconButton--
|
|
1407
|
-
background:var(--
|
|
1458
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7:active,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7[data-active]{
|
|
1459
|
+
background:var(--icon-button-surface-pressed);
|
|
1408
1460
|
}
|
|
1409
|
-
.bp_icon_button_module_iconButton--
|
|
1410
|
-
fill:var(--icon-
|
|
1461
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7:active .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_default--161d7[data-active] .bp_icon_button_module_icon--161d7 *{
|
|
1462
|
+
fill:var(--icon-button-icon-pressed);
|
|
1411
1463
|
}
|
|
1412
|
-
.bp_icon_button_module_iconButton--
|
|
1413
|
-
background:var(--
|
|
1464
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_icon-logo--161d7{
|
|
1465
|
+
background:var(--icon-button-surface);
|
|
1414
1466
|
}
|
|
1415
|
-
.bp_icon_button_module_iconButton--
|
|
1416
|
-
background:var(--
|
|
1467
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_icon-logo--161d7:hover,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_icon-logo--161d7[data-focus-visible]{
|
|
1468
|
+
background:var(--icon-button-surface-hover);
|
|
1417
1469
|
}
|
|
1418
|
-
.bp_icon_button_module_iconButton--
|
|
1419
|
-
background:var(--
|
|
1470
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_icon-logo--161d7:active,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_icon-logo--161d7[data-active]{
|
|
1471
|
+
background:var(--icon-button-surface-pressed);
|
|
1420
1472
|
}
|
|
1421
|
-
.bp_icon_button_module_iconButton--
|
|
1422
|
-
background:var(--
|
|
1473
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7{
|
|
1474
|
+
background:var(--icon-button-surface);
|
|
1423
1475
|
}
|
|
1424
|
-
.bp_icon_button_module_iconButton--
|
|
1425
|
-
fill:var(--icon-
|
|
1476
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7 .bp_icon_button_module_icon--161d7 *{
|
|
1477
|
+
fill:var(--icon-button-icon-on-color);
|
|
1426
1478
|
}
|
|
1427
|
-
.bp_icon_button_module_iconButton--
|
|
1428
|
-
background:var(--
|
|
1479
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7:hover,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7[data-focus-visible]{
|
|
1480
|
+
background:var(--icon-button-surface-hover);
|
|
1429
1481
|
}
|
|
1430
|
-
.bp_icon_button_module_iconButton--
|
|
1431
|
-
fill:var(--icon-
|
|
1482
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7:hover .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7[data-focus-visible] .bp_icon_button_module_icon--161d7 *{
|
|
1483
|
+
fill:var(--icon-button-icon-on-color-hover);
|
|
1432
1484
|
}
|
|
1433
|
-
.bp_icon_button_module_iconButton--
|
|
1434
|
-
background:var(--
|
|
1485
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7:active,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7[data-active]{
|
|
1486
|
+
background:var(--icon-button-surface-pressed);
|
|
1435
1487
|
}
|
|
1436
|
-
.bp_icon_button_module_iconButton--
|
|
1437
|
-
fill:var(--icon-
|
|
1488
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7:active .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_high-contrast--161d7[data-active] .bp_icon_button_module_icon--161d7 *{
|
|
1489
|
+
fill:var(--icon-button-icon-on-color-pressed);
|
|
1438
1490
|
}
|
|
1439
|
-
.bp_icon_button_module_iconButton--
|
|
1440
|
-
background:var(--
|
|
1491
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7{
|
|
1492
|
+
background:var(--icon-button-surface-utility);
|
|
1441
1493
|
}
|
|
1442
|
-
.bp_icon_button_module_iconButton--
|
|
1443
|
-
fill:var(--icon-
|
|
1494
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7 .bp_icon_button_module_icon--161d7 *{
|
|
1495
|
+
fill:var(--icon-button-icon-utility);
|
|
1444
1496
|
}
|
|
1445
|
-
.bp_icon_button_module_iconButton--
|
|
1446
|
-
background:var(--
|
|
1497
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7:hover,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7[data-focus-visible]{
|
|
1498
|
+
background:var(--icon-button-surface-utility-hover);
|
|
1447
1499
|
}
|
|
1448
|
-
.bp_icon_button_module_iconButton--
|
|
1449
|
-
fill:var(--icon-
|
|
1500
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7:hover .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7[data-focus-visible] .bp_icon_button_module_icon--161d7 *{
|
|
1501
|
+
fill:var(--icon-button-icon-utility-hover);
|
|
1450
1502
|
}
|
|
1451
|
-
.bp_icon_button_module_iconButton--
|
|
1452
|
-
background:var(--
|
|
1503
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7:active,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7[data-active]{
|
|
1504
|
+
background:var(--icon-button-surface-utility-pressed);
|
|
1453
1505
|
}
|
|
1454
|
-
.bp_icon_button_module_iconButton--
|
|
1455
|
-
fill:var(--icon-
|
|
1506
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7:active .bp_icon_button_module_icon--161d7 *,.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small-utility--161d7[data-active] .bp_icon_button_module_icon--161d7 *{
|
|
1507
|
+
fill:var(--icon-button-icon-utility-pressed);
|
|
1456
1508
|
}
|
|
1457
|
-
.bp_icon_button_module_iconButton--
|
|
1458
|
-
height:var(--size-
|
|
1459
|
-
width:var(--size-
|
|
1509
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_large--161d7{
|
|
1510
|
+
height:var(--icon-button-size-large);
|
|
1511
|
+
width:var(--icon-button-size-large);
|
|
1460
1512
|
}
|
|
1461
|
-
.bp_icon_button_module_iconButton--
|
|
1462
|
-
height:var(--size-
|
|
1463
|
-
width:var(--size-
|
|
1513
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_small--161d7{
|
|
1514
|
+
height:var(--icon-button-size-small);
|
|
1515
|
+
width:var(--icon-button-size-small);
|
|
1464
1516
|
}
|
|
1465
|
-
.bp_icon_button_module_iconButton--
|
|
1466
|
-
height:var(--size-
|
|
1467
|
-
width:var(--size-
|
|
1517
|
+
.bp_icon_button_module_iconButton--161d7.bp_icon_button_module_x-small--161d7{
|
|
1518
|
+
height:var(--icon-button-size-x-small);
|
|
1519
|
+
width:var(--icon-button-size-x-small);
|
|
1468
1520
|
}
|
|
1469
1521
|
.bp_collapsible_section_module_collapsibleSection--cc646{
|
|
1470
1522
|
width:100%;
|
|
@@ -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 { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import styles from './icon-button.module.js';
|
|
6
7
|
import { iconSizeMap } from './utils.js';
|
|
7
8
|
|
|
@@ -12,11 +13,15 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
12
13
|
icon,
|
|
13
14
|
...rest
|
|
14
15
|
} = props;
|
|
16
|
+
const {
|
|
17
|
+
enableModernizedComponents
|
|
18
|
+
} = useBlueprintModernization();
|
|
15
19
|
const sizeStyles = variant === 'small-utility' ? styles.small : styles[size];
|
|
16
20
|
return jsx(Button, {
|
|
17
21
|
...rest,
|
|
18
22
|
ref: forwardedRef,
|
|
19
23
|
className: clsx(styles.iconButton, styles[variant], sizeStyles, props.className),
|
|
24
|
+
"data-modern": enableModernizedComponents,
|
|
20
25
|
children: /*#__PURE__*/createElement(icon, {
|
|
21
26
|
className: styles.icon,
|
|
22
27
|
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--161d7","icon":"bp_icon_button_module_icon--161d7","default":"bp_icon_button_module_default--161d7","icon-logo":"bp_icon_button_module_icon-logo--161d7","high-contrast":"bp_icon_button_module_high-contrast--161d7","small-utility":"bp_icon_button_module_small-utility--161d7","large":"bp_icon_button_module_large--161d7","small":"bp_icon_button_module_small--161d7","x-small":"bp_icon_button_module_x-small--161d7"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|