@box/blueprint-web 8.2.1 → 8.3.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/lib-esm/index.css
CHANGED
|
@@ -4787,22 +4787,23 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4787
4787
|
display:flex;
|
|
4788
4788
|
flex-direction:row;
|
|
4789
4789
|
}
|
|
4790
|
-
|
|
4790
|
+
|
|
4791
|
+
.bp_select_menu_grid_option_module_square--6ad66{
|
|
4791
4792
|
height:var(--size-8);
|
|
4792
4793
|
width:var(--size-8);
|
|
4793
4794
|
}
|
|
4794
|
-
.bp_select_menu_grid_option_module_square--
|
|
4795
|
+
.bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
|
|
4795
4796
|
align-items:center;
|
|
4796
4797
|
border-radius:var(--radius-3);
|
|
4797
4798
|
display:flex;
|
|
4798
4799
|
justify-content:center;
|
|
4799
4800
|
}
|
|
4800
|
-
.bp_select_menu_grid_option_module_square--
|
|
4801
|
+
.bp_select_menu_grid_option_module_square--6ad66 .bp_select_menu_grid_option_module_outlineHost--6ad66{
|
|
4801
4802
|
height:var(--size-7);
|
|
4802
4803
|
width:var(--size-7);
|
|
4803
4804
|
}
|
|
4804
4805
|
|
|
4805
|
-
.bp_select_menu_grid_option_module_circle--
|
|
4806
|
+
.bp_select_menu_grid_option_module_circle--6ad66{
|
|
4806
4807
|
align-items:center;
|
|
4807
4808
|
background-clip:content-box;
|
|
4808
4809
|
background-color:var(--gray-white);
|
|
@@ -4814,10 +4815,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4814
4815
|
justify-content:center;
|
|
4815
4816
|
width:var(--size-8);
|
|
4816
4817
|
}
|
|
4817
|
-
.bp_select_menu_grid_option_module_circle--
|
|
4818
|
+
.bp_select_menu_grid_option_module_circle--6ad66.bp_select_menu_grid_option_module_loading--6ad66{
|
|
4818
4819
|
border-color:var(--gray-white);
|
|
4819
4820
|
}
|
|
4820
|
-
.bp_select_menu_grid_option_module_circle--
|
|
4821
|
+
.bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_color--6ad66{
|
|
4821
4822
|
background-color:var(--circleColor);
|
|
4822
4823
|
border:var(--border-1) solid var(--circleBorderColor);
|
|
4823
4824
|
border-radius:50%;
|
|
@@ -4825,8 +4826,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4825
4826
|
height:var(--size-6);
|
|
4826
4827
|
width:var(--size-6);
|
|
4827
4828
|
}
|
|
4829
|
+
.bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66{
|
|
4830
|
+
position:relative;
|
|
4831
|
+
}
|
|
4832
|
+
.bp_select_menu_grid_option_module_circle--6ad66 .bp_select_menu_grid_option_module_strikeThrough--6ad66::after{
|
|
4833
|
+
background-color:var(--watermelon-red-100);
|
|
4834
|
+
border-radius:var(--radius-1);
|
|
4835
|
+
content:"";
|
|
4836
|
+
height:.15625rem;
|
|
4837
|
+
left:.0625rem;
|
|
4838
|
+
position:absolute;
|
|
4839
|
+
top:45%;
|
|
4840
|
+
transform:rotate(-45deg);
|
|
4841
|
+
width:90%;
|
|
4842
|
+
}
|
|
4828
4843
|
|
|
4829
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4844
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66{
|
|
4830
4845
|
align-items:center;
|
|
4831
4846
|
background-color:initial;
|
|
4832
4847
|
border:none;
|
|
@@ -4840,32 +4855,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4840
4855
|
user-select:none;
|
|
4841
4856
|
width:var(--size-8);
|
|
4842
4857
|
}
|
|
4843
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4858
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_square--6ad66{
|
|
4844
4859
|
background-color:var(--surface-cta-surface-outline-hover);
|
|
4845
4860
|
}
|
|
4846
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4861
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66:hover .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
|
|
4847
4862
|
background-color:var(--surface-option-grid-surface-hover);
|
|
4848
4863
|
}
|
|
4849
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4864
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_square--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_square--6ad66{
|
|
4850
4865
|
background-color:var(--surface-cta-surface-outline-pressed);
|
|
4851
4866
|
}
|
|
4852
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4867
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:active .bp_select_menu_grid_option_module_circle--6ad66{
|
|
4853
4868
|
border:var(--border-2) solid var(--circleColor);
|
|
4854
4869
|
}
|
|
4855
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4870
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66.bp_select_menu_grid_option_module_loading--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66:disabled{
|
|
4856
4871
|
cursor:default;
|
|
4857
4872
|
}
|
|
4858
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4873
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--6ad66{
|
|
4859
4874
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
4860
4875
|
}
|
|
4861
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4876
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible] .bp_select_menu_grid_option_module_circle--6ad66{
|
|
4862
4877
|
border-color:var(--surface-option-grid-surface-hover);
|
|
4863
4878
|
}
|
|
4864
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4879
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible].bp_select_menu_grid_option_module_active--6ad66 .bp_select_menu_grid_option_module_circle--6ad66,.bp_select_menu_grid_option_module_optionButton--6ad66[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--6ad66{
|
|
4865
4880
|
border:var(--border-2) solid var(--circleColor);
|
|
4866
4881
|
box-shadow:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
4867
4882
|
}
|
|
4868
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
4883
|
+
.bp_select_menu_grid_option_module_optionButton--6ad66:disabled:not(.bp_select_menu_grid_option_module_loading--6ad66){
|
|
4869
4884
|
opacity:.3;
|
|
4870
4885
|
}
|
|
4871
4886
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { CompositeItem, Button } from '@ariakit/react';
|
|
3
|
+
import { Gray05 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
4
|
import clsx from 'clsx';
|
|
4
5
|
import Color from 'color';
|
|
5
6
|
import { forwardRef } from 'react';
|
|
@@ -67,9 +68,11 @@ const ColorSwatch = ({
|
|
|
67
68
|
color,
|
|
68
69
|
loading
|
|
69
70
|
}) => {
|
|
70
|
-
const
|
|
71
|
+
const isNoColorOption = color === 'no-color';
|
|
72
|
+
const finalColor = isNoColorOption ? Gray05 : color;
|
|
73
|
+
const borderColor = new Color(finalColor).darken(0.5).hex();
|
|
71
74
|
const style = {
|
|
72
|
-
'--circleColor':
|
|
75
|
+
'--circleColor': finalColor,
|
|
73
76
|
'--circleBorderColor': borderColor
|
|
74
77
|
};
|
|
75
78
|
return jsx("div", {
|
|
@@ -80,7 +83,9 @@ const ColorSwatch = ({
|
|
|
80
83
|
children: loading ? jsx(Ghost, {
|
|
81
84
|
variant: "circle"
|
|
82
85
|
}) : jsx("div", {
|
|
83
|
-
className: styles.color
|
|
86
|
+
className: clsx(styles.color, {
|
|
87
|
+
[styles.strikeThrough]: isNoColorOption
|
|
88
|
+
})
|
|
84
89
|
})
|
|
85
90
|
});
|
|
86
91
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"square":"bp_select_menu_grid_option_module_square--
|
|
2
|
+
var styles = {"square":"bp_select_menu_grid_option_module_square--6ad66","outlineHost":"bp_select_menu_grid_option_module_outlineHost--6ad66","circle":"bp_select_menu_grid_option_module_circle--6ad66","loading":"bp_select_menu_grid_option_module_loading--6ad66","color":"bp_select_menu_grid_option_module_color--6ad66","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--6ad66","optionButton":"bp_select_menu_grid_option_module_optionButton--6ad66","active":"bp_select_menu_grid_option_module_active--6ad66"};
|
|
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": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"react-stately": "^3.31.1",
|
|
64
64
|
"tsx": "^4.16.5"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "30a4168eff5a8500b505e86beb4dff3b527aac44",
|
|
67
67
|
"module": "lib-esm/index.js",
|
|
68
68
|
"main": "lib-esm/index.js",
|
|
69
69
|
"exports": {
|