@box/blueprint-web 12.42.0 → 12.43.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.
|
@@ -4,6 +4,7 @@ import { IconIconOnDark, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
|
4
4
|
import * as RadixCheckbox from '@radix-ui/react-checkbox';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
8
|
import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
|
|
8
9
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
9
10
|
import styles from './checkbox.module.js';
|
|
@@ -27,10 +28,14 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
27
28
|
...rest
|
|
28
29
|
} = props;
|
|
29
30
|
const descriptionId = useUniqueId('description-', !!description);
|
|
31
|
+
const {
|
|
32
|
+
enableModernizedComponents
|
|
33
|
+
} = useBlueprintModernization();
|
|
30
34
|
return jsxs("div", {
|
|
31
35
|
className: clsx([styles.option], {
|
|
32
36
|
[styles.disabled]: disabled
|
|
33
37
|
}, className),
|
|
38
|
+
"data-modern": enableModernizedComponents,
|
|
34
39
|
children: [jsxs("label", {
|
|
35
40
|
className: styles.label,
|
|
36
41
|
"data-target-id": dataTargetId,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"option":"bp_checkbox_module_option--
|
|
2
|
+
var styles = {"option":"bp_checkbox_module_option--19b51","checkbox":"bp_checkbox_module_checkbox--19b51","indicator":"bp_checkbox_module_indicator--19b51","label":"bp_checkbox_module_label--19b51","description":"bp_checkbox_module_description--19b51","disabled":"bp_checkbox_module_disabled--19b51"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1510,7 +1510,41 @@
|
|
|
1510
1510
|
padding-bottom:var(--size-4);
|
|
1511
1511
|
}
|
|
1512
1512
|
|
|
1513
|
-
.bp_checkbox_module_option--
|
|
1513
|
+
.bp_checkbox_module_option--19b51[data-modern=false]{
|
|
1514
|
+
--checkbox-size:var(--size-4);
|
|
1515
|
+
--checkbox-label-gap:var(--size-3);
|
|
1516
|
+
--checkbox-description-padding-left:calc(var(--size-4) + var(--size-3));
|
|
1517
|
+
--checkbox-line-height:var(--body-default-line-height);
|
|
1518
|
+
--checkbox-surface:var(--surface-checkbox-surface);
|
|
1519
|
+
--checkbox-border:var(--border-2) solid var(--border-checkbox-border);
|
|
1520
|
+
--checkbox-radius:var(--radius-1);
|
|
1521
|
+
--checkbox-outline-focus:var(--outline-focus-on-light);
|
|
1522
|
+
--checkbox-outline-offset:var(--border-1);
|
|
1523
|
+
--checkbox-surface-selected:var(--surface-checkbox-surface-selected);
|
|
1524
|
+
--checkbox-border-selected:var(--border-2) solid var(--border-checkbox-border-selected);
|
|
1525
|
+
--checkbox-surface-selected-hover:var(--surface-checkbox-surface-selected-hover);
|
|
1526
|
+
--checkbox-border-hover:var(--border-2) solid var(--border-checkbox-border-hover);
|
|
1527
|
+
--checkbox-border-selected-hover:var(--border-2) solid var(--border-checkbox-border-selected-hover);
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
.bp_checkbox_module_option--19b51[data-modern=true]{
|
|
1531
|
+
--checkbox-size:var(--bp-size-040);
|
|
1532
|
+
--checkbox-label-gap:var(--bp-space-030);
|
|
1533
|
+
--checkbox-description-padding-left:calc(var(--bp-size-040) + var(--bp-space-030));
|
|
1534
|
+
--checkbox-line-height:var(--bp-font-line-height-04);
|
|
1535
|
+
--checkbox-surface:var(--bp-surface-checkbox-surface);
|
|
1536
|
+
--checkbox-border:var(--bp-border-02) solid var(--bp-border-checkbox-border);
|
|
1537
|
+
--checkbox-radius:var(--bp-radius-02);
|
|
1538
|
+
--checkbox-outline-focus:var(--bp-outline-focus-on-light);
|
|
1539
|
+
--checkbox-outline-offset:var(--bp-border-01);
|
|
1540
|
+
--checkbox-surface-selected:var(--bp-surface-checkbox-surface-selected);
|
|
1541
|
+
--checkbox-border-selected:var(--bp-border-02) solid var(--bp-border-checkbox-border-selected);
|
|
1542
|
+
--checkbox-surface-selected-hover:var(--bp-surface-checkbox-surface-selected-hover);
|
|
1543
|
+
--checkbox-border-hover:var(--bp-border-02) solid var(--bp-border-checkbox-border-hover);
|
|
1544
|
+
--checkbox-border-selected-hover:var(--bp-border-02) solid var(--bp-border-checkbox-border-selected-hover);
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.bp_checkbox_module_option--19b51{
|
|
1514
1548
|
display:flex;
|
|
1515
1549
|
flex-direction:column;
|
|
1516
1550
|
font-family:var(--body-default-font-family);
|
|
@@ -1522,64 +1556,64 @@
|
|
|
1522
1556
|
text-decoration:var(--body-default-text-decoration);
|
|
1523
1557
|
text-transform:var(--body-default-text-case);
|
|
1524
1558
|
}
|
|
1525
|
-
.bp_checkbox_module_option--
|
|
1559
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51{
|
|
1526
1560
|
all:unset;
|
|
1527
1561
|
align-items:center;
|
|
1528
|
-
background-color:var(--
|
|
1529
|
-
border:var(--
|
|
1530
|
-
border-radius:var(--radius
|
|
1562
|
+
background-color:var(--checkbox-surface);
|
|
1563
|
+
border:var(--checkbox-border);
|
|
1564
|
+
border-radius:var(--checkbox-radius);
|
|
1531
1565
|
box-sizing:border-box;
|
|
1532
1566
|
display:flex;
|
|
1533
1567
|
flex-shrink:0;
|
|
1534
|
-
height:var(--size
|
|
1568
|
+
height:var(--checkbox-size);
|
|
1535
1569
|
justify-content:center;
|
|
1536
|
-
margin:calc((var(--
|
|
1537
|
-
width:var(--size
|
|
1570
|
+
margin:calc((var(--checkbox-line-height) - var(--checkbox-size))/2) 0 0 0;
|
|
1571
|
+
width:var(--checkbox-size);
|
|
1538
1572
|
}
|
|
1539
|
-
.bp_checkbox_module_option--
|
|
1573
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51 .bp_checkbox_module_indicator--19b51{
|
|
1540
1574
|
display:flex;
|
|
1541
1575
|
transform:scale(0);
|
|
1542
1576
|
transition-duration:.15s;
|
|
1543
1577
|
transition-property:transform;
|
|
1544
1578
|
transition-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
1545
1579
|
}
|
|
1546
|
-
.bp_checkbox_module_option--
|
|
1547
|
-
outline:var(--border
|
|
1548
|
-
outline-offset:var(--
|
|
1580
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:focus-visible{
|
|
1581
|
+
outline:var(--checkbox-border);
|
|
1582
|
+
outline-offset:var(--checkbox-outline-offset);
|
|
1549
1583
|
}
|
|
1550
|
-
.bp_checkbox_module_option--
|
|
1584
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-disabled]{
|
|
1551
1585
|
opacity:60%;
|
|
1552
1586
|
}
|
|
1553
|
-
.bp_checkbox_module_option--
|
|
1554
|
-
background-color:var(--
|
|
1555
|
-
border
|
|
1587
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=indeterminate]{
|
|
1588
|
+
background-color:var(--checkbox-surface-selected);
|
|
1589
|
+
border:var(--checkbox-border-selected);
|
|
1556
1590
|
}
|
|
1557
|
-
.bp_checkbox_module_option--
|
|
1558
|
-
background-color:var(--
|
|
1591
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51[data-state=indeterminate] .bp_checkbox_module_indicator--19b51{
|
|
1592
|
+
background-color:var(--checkbox-surface-selected);
|
|
1559
1593
|
transform:scale(1);
|
|
1560
1594
|
}
|
|
1561
|
-
.bp_checkbox_module_option--
|
|
1562
|
-
border
|
|
1595
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover{
|
|
1596
|
+
border:var(--checkbox-border-hover);
|
|
1563
1597
|
}
|
|
1564
|
-
.bp_checkbox_module_option--
|
|
1565
|
-
background-color:var(--
|
|
1566
|
-
border
|
|
1598
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=indeterminate]{
|
|
1599
|
+
background-color:var(--checkbox-surface-selected-hover);
|
|
1600
|
+
border:var(--checkbox-border-selected-hover);
|
|
1567
1601
|
}
|
|
1568
|
-
.bp_checkbox_module_option--
|
|
1569
|
-
background-color:var(--
|
|
1602
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--19b51,.bp_checkbox_module_option--19b51 .bp_checkbox_module_checkbox--19b51:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--19b51{
|
|
1603
|
+
background-color:var(--checkbox-surface-selected-hover);
|
|
1570
1604
|
}
|
|
1571
|
-
.bp_checkbox_module_option--
|
|
1605
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_label--19b51{
|
|
1572
1606
|
cursor:pointer;
|
|
1573
1607
|
display:inline-flex;
|
|
1574
1608
|
flex-direction:row;
|
|
1575
|
-
gap:var(--
|
|
1609
|
+
gap:var(--checkbox-label-gap);
|
|
1576
1610
|
width:-moz-fit-content;
|
|
1577
1611
|
width:fit-content;
|
|
1578
1612
|
}
|
|
1579
|
-
.bp_checkbox_module_option--
|
|
1580
|
-
padding-left:
|
|
1613
|
+
.bp_checkbox_module_option--19b51 .bp_checkbox_module_description--19b51{
|
|
1614
|
+
padding-left:var(--checkbox-description-padding-left);
|
|
1581
1615
|
}
|
|
1582
|
-
.bp_checkbox_module_option--
|
|
1616
|
+
.bp_checkbox_module_option--19b51.bp_checkbox_module_disabled--19b51 .bp_checkbox_module_label--19b51{
|
|
1583
1617
|
cursor:default;
|
|
1584
1618
|
}
|
|
1585
1619
|
.bp_icon_button_module_iconButton--161d7[data-modern=false]{
|