@shoplflow/base 0.37.5 → 0.37.6
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/index.cjs +16 -8
- package/dist/index.js +16 -8
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2935,12 +2935,15 @@ var getDropdownIconSizeBySizeVar = (size2) => {
|
|
|
2935
2935
|
`;
|
|
2936
2936
|
}
|
|
2937
2937
|
};
|
|
2938
|
-
var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
|
|
2938
|
+
var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
|
|
2939
2939
|
if (!disabled) {
|
|
2940
2940
|
if (isError) {
|
|
2941
2941
|
return exports.colorTokens.red300;
|
|
2942
2942
|
}
|
|
2943
2943
|
if (isFocused) {
|
|
2944
|
+
if (sizeVar === "L") {
|
|
2945
|
+
return exports.colorTokens.neutral700;
|
|
2946
|
+
}
|
|
2944
2947
|
return exports.colorTokens.primary300;
|
|
2945
2948
|
}
|
|
2946
2949
|
if (isHovered) {
|
|
@@ -2949,13 +2952,18 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
|
|
|
2949
2952
|
}
|
|
2950
2953
|
return exports.colorTokens.neutral300;
|
|
2951
2954
|
};
|
|
2952
|
-
var
|
|
2955
|
+
var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
|
|
2953
2956
|
switch (sizeVar) {
|
|
2954
2957
|
case "L":
|
|
2955
2958
|
return react$1.css`
|
|
2956
2959
|
background-color: transparent;
|
|
2957
|
-
border-width: 2px;
|
|
2960
|
+
border-width: ${isFocused ? "2px" : "1px"};
|
|
2961
|
+
transition: border-width 0.2s ease-in-out;
|
|
2958
2962
|
border-radius: 12px;
|
|
2963
|
+
|
|
2964
|
+
&:hover {
|
|
2965
|
+
border-width: 2px;
|
|
2966
|
+
}
|
|
2959
2967
|
`;
|
|
2960
2968
|
default:
|
|
2961
2969
|
return react$1.css`
|
|
@@ -2983,16 +2991,16 @@ var StyledDropdownButtonWrapper = styled6__default.default.label`
|
|
|
2983
2991
|
max-height: initial;
|
|
2984
2992
|
min-width: initial;
|
|
2985
2993
|
max-width: initial;
|
|
2994
|
+
justify-content: space-between;
|
|
2995
|
+
border-style: solid;
|
|
2996
|
+
overflow: hidden;
|
|
2997
|
+
border-color: ${(props) => getBorderColorByStatus(props)};
|
|
2986
2998
|
${({ height, width }) => getStyleByType({
|
|
2987
2999
|
height,
|
|
2988
3000
|
width
|
|
2989
3001
|
})};
|
|
2990
|
-
|
|
2991
|
-
border-color: ${(props) => getBorderColorByStatus(props)};
|
|
2992
|
-
border-style: solid;
|
|
2993
|
-
${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
|
|
3002
|
+
${(props) => getButtonWrapperStyleBySizeVar(props)};
|
|
2994
3003
|
|
|
2995
|
-
overflow: hidden;
|
|
2996
3004
|
${({ disabled }) => getDisabledStyle2(disabled)};
|
|
2997
3005
|
`;
|
|
2998
3006
|
var StyledDropdownButton = styled6__default.default.button`
|
package/dist/index.js
CHANGED
|
@@ -2908,12 +2908,15 @@ var getDropdownIconSizeBySizeVar = (size2) => {
|
|
|
2908
2908
|
`;
|
|
2909
2909
|
}
|
|
2910
2910
|
};
|
|
2911
|
-
var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
|
|
2911
|
+
var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
|
|
2912
2912
|
if (!disabled) {
|
|
2913
2913
|
if (isError) {
|
|
2914
2914
|
return colorTokens.red300;
|
|
2915
2915
|
}
|
|
2916
2916
|
if (isFocused) {
|
|
2917
|
+
if (sizeVar === "L") {
|
|
2918
|
+
return colorTokens.neutral700;
|
|
2919
|
+
}
|
|
2917
2920
|
return colorTokens.primary300;
|
|
2918
2921
|
}
|
|
2919
2922
|
if (isHovered) {
|
|
@@ -2922,13 +2925,18 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
|
|
|
2922
2925
|
}
|
|
2923
2926
|
return colorTokens.neutral300;
|
|
2924
2927
|
};
|
|
2925
|
-
var
|
|
2928
|
+
var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
|
|
2926
2929
|
switch (sizeVar) {
|
|
2927
2930
|
case "L":
|
|
2928
2931
|
return css`
|
|
2929
2932
|
background-color: transparent;
|
|
2930
|
-
border-width: 2px;
|
|
2933
|
+
border-width: ${isFocused ? "2px" : "1px"};
|
|
2934
|
+
transition: border-width 0.2s ease-in-out;
|
|
2931
2935
|
border-radius: 12px;
|
|
2936
|
+
|
|
2937
|
+
&:hover {
|
|
2938
|
+
border-width: 2px;
|
|
2939
|
+
}
|
|
2932
2940
|
`;
|
|
2933
2941
|
default:
|
|
2934
2942
|
return css`
|
|
@@ -2956,16 +2964,16 @@ var StyledDropdownButtonWrapper = styled6.label`
|
|
|
2956
2964
|
max-height: initial;
|
|
2957
2965
|
min-width: initial;
|
|
2958
2966
|
max-width: initial;
|
|
2967
|
+
justify-content: space-between;
|
|
2968
|
+
border-style: solid;
|
|
2969
|
+
overflow: hidden;
|
|
2970
|
+
border-color: ${(props) => getBorderColorByStatus(props)};
|
|
2959
2971
|
${({ height, width }) => getStyleByType({
|
|
2960
2972
|
height,
|
|
2961
2973
|
width
|
|
2962
2974
|
})};
|
|
2963
|
-
|
|
2964
|
-
border-color: ${(props) => getBorderColorByStatus(props)};
|
|
2965
|
-
border-style: solid;
|
|
2966
|
-
${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
|
|
2975
|
+
${(props) => getButtonWrapperStyleBySizeVar(props)};
|
|
2967
2976
|
|
|
2968
|
-
overflow: hidden;
|
|
2969
2977
|
${({ disabled }) => getDisabledStyle2(disabled)};
|
|
2970
2978
|
`;
|
|
2971
2979
|
var StyledDropdownButton = styled6.button`
|