@commercetools-uikit/primary-action-dropdown 17.0.1 → 18.0.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.
|
@@ -24,11 +24,11 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
|
|
|
24
24
|
var Text__default = /*#__PURE__*/_interopDefault(Text);
|
|
25
25
|
|
|
26
26
|
const getButtonStyles = isDisabled => {
|
|
27
|
-
const baseButtonStyles = /*#__PURE__*/react$1.css("display:flex;align-items:center;height:", designSystem.designTokens.
|
|
27
|
+
const baseButtonStyles = /*#__PURE__*/react$1.css("display:flex;align-items:center;height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
|
|
28
28
|
if (isDisabled) {
|
|
29
|
-
return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.designTokens.
|
|
29
|
+
return [baseButtonStyles, /*#__PURE__*/react$1.css("box-shadow:none;background-color:", designSystem.designTokens.colorNeutral95, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";" + ("" ), "" )];
|
|
30
30
|
}
|
|
31
|
-
return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.
|
|
31
|
+
return [baseButtonStyles, /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";border:", "1px solid ".concat(designSystem.designTokens.colorNeutral), ";&:hover{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorNeutral95, ";}&:active{box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ), "" )];
|
|
32
32
|
};
|
|
33
33
|
var _ref2 = {
|
|
34
34
|
name: "s5xdrg",
|
|
@@ -40,9 +40,9 @@ const DropdownHead = props => jsxRuntime.jsxs("div", {
|
|
|
40
40
|
label: props.children,
|
|
41
41
|
onClick: props.onClick,
|
|
42
42
|
isDisabled: props.isDisabled,
|
|
43
|
-
css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.
|
|
43
|
+
css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:0 ", designSystem.designTokens.spacing30, ";border-radius:", designSystem.designTokens.borderRadius4, " 0 0 ", designSystem.designTokens.borderRadius4, ";" + ("" ), "" ), "" ],
|
|
44
44
|
children: [jsxRuntime.jsx("span", {
|
|
45
|
-
css: /*#__PURE__*/react$1.css("margin-right:", designSystem.designTokens.
|
|
45
|
+
css: /*#__PURE__*/react$1.css("margin-right:", designSystem.designTokens.spacing20, ";display:flex;align-items:center;justify-content:center;" + ("" ), "" ),
|
|
46
46
|
children: /*#__PURE__*/react.cloneElement(props.iconLeft, {
|
|
47
47
|
size: 'big',
|
|
48
48
|
color: props.isDisabled ? 'neutral60' : 'solid'
|
|
@@ -67,7 +67,7 @@ const DropdownChevron = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime
|
|
|
67
67
|
label: "Open Dropdown",
|
|
68
68
|
onClick: props.onClick,
|
|
69
69
|
isDisabled: props.isDisabled,
|
|
70
|
-
css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.
|
|
70
|
+
css: [...getButtonStyles(props.isDisabled), /*#__PURE__*/react$1.css("padding:0 ", designSystem.designTokens.spacing20, ";border-radius:0 ", designSystem.designTokens.borderRadius4, " ", designSystem.designTokens.borderRadius4, " 0;border-color:", designSystem.designTokens.colorNeutral, ";border-width:1px 1px 1px 0px;border-style:solid;" + ("" ), "" ), "" ],
|
|
71
71
|
children: jsxRuntime.jsx("div", {
|
|
72
72
|
// The margin-top is to center the icon as the caret visually looks too high otherwise
|
|
73
73
|
css: _ref,
|
|
@@ -80,7 +80,7 @@ const DropdownChevron = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime
|
|
|
80
80
|
DropdownChevron.displayName = 'DropdownChevron';
|
|
81
81
|
const Options = /*#__PURE__*/_styled__default["default"]("div", {
|
|
82
82
|
target: "eb24b7r0"
|
|
83
|
-
} )("position:absolute;z-index:5;width:100%;top:calc(", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.
|
|
83
|
+
} )("position:absolute;z-index:5;width:100%;top:calc(\n ", designSystem.designTokens.spacing20, " + ", designSystem.designTokens.heightForButtonAsMedium, "\n );border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);margin-top:", designSystem.designTokens.spacing20, ";>button{padding-left:", designSystem.designTokens.spacing30, ";white-space:normal;&:active{background-color:", designSystem.designTokens.colorInfo95, ";}}" + ("" ));
|
|
84
84
|
|
|
85
85
|
/*
|
|
86
86
|
This component registers a global click event listener to close the dropdown.
|
|
@@ -125,7 +125,7 @@ const PrimaryActionDropdown = props => {
|
|
|
125
125
|
toggle();
|
|
126
126
|
}, [toggle]);
|
|
127
127
|
return jsxRuntime.jsxs("div", {
|
|
128
|
-
css: /*#__PURE__*/react$1.css("position:relative;display:inline-flex;align-items:column;>:first-of-type>button{height:", designSystem.designTokens.
|
|
128
|
+
css: /*#__PURE__*/react$1.css("position:relative;display:inline-flex;align-items:column;>:first-of-type>button{height:", designSystem.designTokens.heightForButtonAsBig, ";}" + ("" ), "" ),
|
|
129
129
|
children: [jsxRuntime.jsx(DropdownHead, {
|
|
130
130
|
iconLeft: primaryOption.props.iconLeft,
|
|
131
131
|
isDisabled: primaryOption.props.isDisabled,
|
|
@@ -161,7 +161,7 @@ Option.defaultProps = {
|
|
|
161
161
|
var Option$1 = Option;
|
|
162
162
|
|
|
163
163
|
// NOTE: This string will be replaced on build time with the package version.
|
|
164
|
-
var version = "
|
|
164
|
+
var version = "18.0.0";
|
|
165
165
|
|
|
166
166
|
exports.Option = Option$1;
|
|
167
167
|
exports["default"] = PrimaryActionDropdown$1;
|