@toptal/picasso-button 2.0.4-alpha-fx-5306-configure-twmerge-850d1e98c.7 → 2.0.4-alpha-feature-tailwind-w21-80062bcbc.43
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-package/src/Button/Button.js +1 -1
- package/dist-package/src/Button/Button.js.map +1 -1
- package/dist-package/src/Button/styles.d.ts.map +1 -1
- package/dist-package/src/Button/styles.js +6 -1
- package/dist-package/src/Button/styles.js.map +1 -1
- package/dist-package/src/ButtonAction/ButtonAction.js +7 -2
- package/dist-package/src/ButtonAction/ButtonAction.js.map +1 -1
- package/dist-package/src/ButtonBase/ButtonBase.d.ts.map +1 -1
- package/dist-package/src/ButtonBase/ButtonBase.js +10 -24
- package/dist-package/src/ButtonBase/ButtonBase.js.map +1 -1
- package/dist-package/src/ButtonControlLabel/ButtonControlLabel.js +1 -1
- package/dist-package/src/ButtonControlLabel/ButtonControlLabel.js.map +1 -1
- package/dist-package/src/ButtonGroup/ButtonGroup.js +1 -1
- package/dist-package/src/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist-package/src/ButtonGroupItem/ButtonGroupItem.js +1 -1
- package/dist-package/src/ButtonGroupItem/ButtonGroupItem.js.map +1 -1
- package/dist-package/src/ButtonSplit/ButtonSplit.js +1 -1
- package/dist-package/src/ButtonSplit/ButtonSplit.js.map +1 -1
- package/dist-package/src/ButtonSplit/styles.js +1 -1
- package/dist-package/src/ButtonSplit/styles.js.map +1 -1
- package/package.json +16 -15
- package/src/Button/Button.tsx +1 -1
- package/src/Button/__snapshots__/test.tsx.snap +2 -2
- package/src/Button/styles.ts +6 -1
- package/src/ButtonAction/ButtonAction.tsx +4 -4
- package/src/ButtonBase/ButtonBase.tsx +16 -37
- package/src/ButtonBase/__snapshots__/test.tsx.snap +11 -9
- package/src/ButtonCheckbox/__snapshots__/test.tsx.snap +1 -1
- package/src/ButtonControlLabel/ButtonControlLabel.tsx +1 -1
- package/src/ButtonGroup/ButtonGroup.tsx +1 -1
- package/src/ButtonGroup/__snapshots__/test.tsx.snap +3 -3
- package/src/ButtonGroupItem/ButtonGroupItem.tsx +1 -1
- package/src/ButtonRadio/__snapshots__/test.tsx.snap +1 -1
- package/src/ButtonSplit/ButtonSplit.tsx +1 -1
- package/src/ButtonSplit/__snapshots__/test.tsx.snap +2 -2
- package/src/ButtonSplit/styles.ts +1 -1
- package/src/ButtonSplit/test.tsx +4 -4
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
13
|
import cx from 'classnames';
|
|
14
|
-
import { twMerge } from 'tailwind-merge';
|
|
14
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
15
15
|
import { noop } from '@toptal/picasso-utils';
|
|
16
16
|
// we need to ensure the correct order of styles import
|
|
17
17
|
// TODO: [FX-4614] To be removed when Link component is migrated to tailwind
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAQxD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,uDAAuD;AACvD,4EAA4E;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,UAAU,CAAA;AAEjB,oFAAoF;AACpF,KAAK,IAAI,CAAA;AA+CT,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,IAAI,GAML,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAA;KACjB;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,IAAI;QACJ,YAAY,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;KAClE,CAAC,CAAA;IAEF,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;KACzD,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAgC,UAAU,CAG3D,SAAS,MAAM,CAAC,KAAK,EAAE,GAAG;IAC1B,MAAM,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAM,KAEJ,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,4HAaL,CAAQ,CAAA;IAET,MAAM,aAAa,GAAG,OAAO,CAAC;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI;QACJ,YAAY;QACZ,IAAI;KACL,CAAC,CAAA;IACF,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,QAAQ;QACR,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC,CAAA;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,EAAE;QACzD,QAAQ;QACR,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC,CAAA;IACF,MAAM,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAA;IAEjD,MAAM,cAAc,GAAG,OAAO,CAC5B,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACzB,SAAS,CACV,CAAA;IAED,MAAM,qBAAqB,GAGvB;QACF,KAAK,EAAE,CAAC,mBAAmB,CAAC;QAC5B,MAAM,EAAE,CAAC,oBAAoB,CAAC;QAC9B,KAAK,EAAE,CAAC,mBAAmB,CAAC;KAC7B,CAAA;IAED,MAAM,gBAAgB,GAAG,EAAE,CACzB,iCAAiC,EACjC,qBAAqB,CAAC,IAAI,CAAC,EAC3B,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAC3B,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,aAAa,EACnB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,MAAM,EAAE,KAAK;IACb,EAAE,EAAE,QAAQ;IACZ,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,MAAM;IACpB,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE7D,eAAO,MAAM,oBAAoB,SACzB,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAAM,EAWR,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;MAYnB,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE7D,eAAO,MAAM,oBAAoB,SACzB,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAAM,EAWR,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;MAYnB,MAAM,EAoIR,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;MAS7B,MAAM,EAqBT,CAAA;AAED,eAAO,MAAM,oBAAoB;;UAKzB,SAAS,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;MAC1C,MAAM,EAeT,CAAA"}
|
|
@@ -76,6 +76,7 @@ export const createVariantClassNames = (variant, { disabled, focused, hovered, a
|
|
|
76
76
|
variantClassNames.push('border border-solid');
|
|
77
77
|
if (disabled) {
|
|
78
78
|
variantClassNames.push('text-gray-500');
|
|
79
|
+
variantClassNames.push('visited:text-gray-500');
|
|
79
80
|
variantClassNames.push('border-gray-500');
|
|
80
81
|
variantClassNames.push('bg-white');
|
|
81
82
|
}
|
|
@@ -135,7 +136,11 @@ export const createVariantClassNames = (variant, { disabled, focused, hovered, a
|
|
|
135
136
|
return variantClassNames;
|
|
136
137
|
};
|
|
137
138
|
export const createCoreClassNames = ({ disabled, focused, active, }) => {
|
|
138
|
-
const classNames = [
|
|
139
|
+
const classNames = [
|
|
140
|
+
'no-underline hover:no-underline',
|
|
141
|
+
'rounded-sm',
|
|
142
|
+
'shadow-none',
|
|
143
|
+
];
|
|
139
144
|
if (!disabled) {
|
|
140
145
|
classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
|
|
141
146
|
classNames.push('focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,12 @@ const getIcon = ({ children, icon, iconPosition, }) => {
|
|
|
27
27
|
};
|
|
28
28
|
const loaderIcon = React.createElement(Loader, { size: 'small', variant: 'inherit' });
|
|
29
29
|
export const ButtonAction = forwardRef(function ButtonAction(props, ref) {
|
|
30
|
-
const {
|
|
30
|
+
const {
|
|
31
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
32
|
+
// We use these props only to determine styles
|
|
33
|
+
active, focused, hovered,
|
|
34
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
35
|
+
className, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["active", "focused", "hovered", "className", "disabled", "loading", "icon", "iconPosition", "onClick"]);
|
|
31
36
|
const usedIcon = loading ? loaderIcon : icon;
|
|
32
37
|
const usedIconPosition = icon ? iconPosition : 'right';
|
|
33
38
|
const finalClassName = cx(createRootClassNames(props), className);
|
|
@@ -36,7 +41,7 @@ export const ButtonAction = forwardRef(function ButtonAction(props, ref) {
|
|
|
36
41
|
icon: usedIcon,
|
|
37
42
|
iconPosition: usedIconPosition,
|
|
38
43
|
});
|
|
39
|
-
return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md',
|
|
44
|
+
return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md', disabled: disabled })));
|
|
40
45
|
});
|
|
41
46
|
ButtonAction.defaultProps = {
|
|
42
47
|
iconPosition: 'left',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,IAAI,EACJ,YAAY,GAKb,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,YAAY,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;KAClE,CAAC,CAAA;IAEF,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;KACpD,CAAC,CAAA;AACJ,CAAC,CAAA;AAyBD,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,IAAI,EACJ,YAAY,GAKb,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,YAAY,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;KAClE,CAAC,CAAA;IAEF,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;KACpD,CAAC,CAAA;AACJ,CAAC,CAAA;AAyBD,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM;IACJ,sDAAsD;IACtD,8CAA8C;IAC9C,MAAM,EACN,OAAO,EACP,OAAO;IACP,qDAAqD;IACrD,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,uGAcL,CAAQ,CAAA;IAET,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IAC5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,MAAM,cAAc,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAA;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC;QACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,gBAAgB;KAC/B,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAC,qCAAqC,EACtD,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAU/B,oBAAY,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,mBAAmB;IACrB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC5E,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CACrC;AAyBD,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CA+EjD,CAAA;AAcF,eAAe,UAAU,CAAA"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
|
-
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { useTitleCase } from '@toptal/picasso-shared';
|
|
15
15
|
import { Button as MUIButtonBase } from '@mui/base/Button';
|
|
16
16
|
import { Loader } from '@toptal/picasso-loader';
|
|
@@ -27,33 +27,17 @@ const getIcon = ({ icon }) => {
|
|
|
27
27
|
key: 'button-icon',
|
|
28
28
|
});
|
|
29
29
|
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
30
|
+
const RootElement = forwardRef((props, ref) => {
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
32
|
+
const { ownerState, as: Root } = props, rest = __rest(props, ["ownerState", "as"]);
|
|
33
|
+
return React.createElement(Root, Object.assign({}, rest, { ref: ref }));
|
|
34
|
+
});
|
|
36
35
|
export const ButtonBase = forwardRef(function ButtonBase(props, ref) {
|
|
37
36
|
var _a, _b;
|
|
38
37
|
const { icon, iconPosition, loading, children, className, contentClassName, style, disabled, onClick, title, value, type, as = 'button', titleCase: propsTitleCase } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "children", "className", "contentClassName", "style", "disabled", "onClick", "title", "value", "type", "as", "titleCase"]);
|
|
39
|
-
let RootElement = as;
|
|
40
|
-
if (isReactComponent(RootElement)) {
|
|
41
|
-
RootElement = forwardRef(
|
|
42
|
-
// We don't need to pass ownerState to the root component
|
|
43
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
44
|
-
(_a, rootRef) => {
|
|
45
|
-
var { ownerState } = _a, restProps = __rest(_a, ["ownerState"]);
|
|
46
|
-
const Root = as;
|
|
47
|
-
return React.createElement(Root, Object.assign({ ref: rootRef }, restProps));
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
38
|
const titleCase = useTitleCase(propsTitleCase);
|
|
51
39
|
const finalChildren = [titleCase ? toTitleCase(children) : children];
|
|
52
|
-
|
|
53
|
-
Workaround for the case: <Button as={Link} href='' /> (with empty href!), we have to determine "rootElementName" like below
|
|
54
|
-
Mui/base throws an error when "href" or "to" are empty
|
|
55
|
-
*/
|
|
56
|
-
const rootElementName = as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined;
|
|
40
|
+
const finalRootElementName = typeof as === 'string' ? as : 'a';
|
|
57
41
|
if (icon) {
|
|
58
42
|
const iconComponent = getIcon({ icon });
|
|
59
43
|
if (iconPosition === 'left') {
|
|
@@ -64,7 +48,9 @@ export const ButtonBase = forwardRef(function ButtonBase(props, ref) {
|
|
|
64
48
|
}
|
|
65
49
|
}
|
|
66
50
|
const finalClassName = twMerge(createCoreClassNames({ disabled }), className);
|
|
67
|
-
return (React.createElement(MUIButtonBase, Object.assign({}, rest, { ref: ref, onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: ((_a = rest.tabIndex) !== null && _a !== void 0 ? _a : disabled) ? -1 : 0, role: (_b = rest.role) !== null && _b !== void 0 ? _b : 'button', rootElementName:
|
|
51
|
+
return (React.createElement(MUIButtonBase, Object.assign({}, rest, { ref: ref, onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: ((_a = rest.tabIndex) !== null && _a !== void 0 ? _a : disabled) ? -1 : 0, role: (_b = rest.role) !== null && _b !== void 0 ? _b : 'button', rootElementName: finalRootElementName, slots: { root: RootElement },
|
|
52
|
+
// @ts-ignore
|
|
53
|
+
slotProps: { root: { as } } }),
|
|
68
54
|
React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: contentClassName }, finalChildren),
|
|
69
55
|
loading && (React.createElement(Loader, { variant: 'inherit', className: 'absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]', inline: true, size: 'small' }))));
|
|
70
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { Container } from '@toptal/picasso-container';
|
|
15
15
|
import { Button } from '../Button';
|
|
16
16
|
import { createSizeClassNames, createContentSizeClassNames } from './styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonControlLabel.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonControlLabel.js","sourceRoot":"","sources":["../../../src/ButtonControlLabel/ButtonControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AA8B5E,MAAM,kBAAkB,GAAG,CAAC,EAWpB,EAAE,EAAE;QAXgB,EAC1B,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,OAEF,EADH,KAAK,cAVkB,8FAW3B,CADS;IAER,MAAM,kBAAkB,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAErD,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACxE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,EAAE,EACX,QAAQ,EAAE,QAAQ;QAEjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;QACxE,oBAAC,SAAS,IACR,SAAS,EAAE,2BAA2B,CAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,kBAAkB,IAEvB,QAAQ,CACC,CACL,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAkB,CAAC,YAAY,GAAG;IAChC,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
|
-
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { ButtonGroupItem } from '../ButtonGroupItem';
|
|
15
15
|
import { createRootClassNames } from './styles';
|
|
16
16
|
export const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,cAAc,GAAG,OAAO,CAAC,oBAAoB,EAAE,EAAE,SAAS,CAAC,CAAA;IAEjE,OAAO,CACL,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAC7D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { Button } from '../Button';
|
|
15
15
|
import { createButtonGroupItemClassNames, createGroupVariantClassNames, } from './styles';
|
|
16
16
|
const ButtonGroupItem = (_a) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroupItem.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonGroupItem.js","sourceRoot":"","sources":["../../../src/ButtonGroupItem/ButtonGroupItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EACL,+BAA+B,EAC/B,4BAA4B,GAC7B,MAAM,UAAU,CAAA;AAIjB,MAAM,eAAe,GAAG,CAAC,EAOjB,EAAE,EAAE;QAPa,EACvB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,OAEH,EADH,IAAI,cANgB,yDAOxB,CADQ;IAEP,MAAM,cAAc,GAAG,OAAO,CAC5B,+BAA+B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EACvE,4BAA4B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,CACV,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAC,WAAW,IACnB,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
|
-
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons';
|
|
15
15
|
import { Dropdown } from '@toptal/picasso-dropdown';
|
|
16
16
|
import { Button } from '../Button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonSplit.js","sourceRoot":"","sources":["../../../src/ButtonSplit/ButtonSplit.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { twMerge } from 'tailwind-merge';
|
|
1
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
2
2
|
export const createActionButtonClassNames = ({ variant, }) => {
|
|
3
3
|
return twMerge('transition-[color,background]', variant === 'primary' &&
|
|
4
4
|
'border-r border-l-0 border-y-0 border-solid border-blue-700');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,OAAO,GAGR,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,+BAA+B,EAC/B,OAAO,KAAK,SAAS;QACnB,6DAA6D,CAChE,CAAA;AACH,CAAC,CAAA;AAED,MAAM,wBAAwB,GAG1B;IACF,KAAK,EAAE,2BAA2B;IAClC,MAAM,EAAE,wBAAwB;IAChC,KAAK,EAAE,yBAAyB;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,OAAO,EACP,IAAI,EACJ,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,KAAK,SAAS,IAAI,6CAA6C,EACtE,OAAO,KAAK,SAAS,IAAI,QAAQ,IAAI,iBAAiB,EACtD,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CACxD,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-button",
|
|
3
|
-
"version": "2.0.4-alpha-
|
|
3
|
+
"version": "2.0.4-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
|
|
4
4
|
"description": "Toptal UI components library - Button",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -23,18 +23,17 @@
|
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@mui/base": "5.0.0-beta.40",
|
|
26
|
-
"@toptal/picasso-checkbox": "2.0.3-alpha-
|
|
27
|
-
"@toptal/picasso-container": "1.0.4-alpha-
|
|
28
|
-
"@toptal/picasso-dropdown": "2.0.4-alpha-
|
|
29
|
-
"@toptal/picasso-icons": "1.1.2-alpha-
|
|
30
|
-
"@toptal/picasso-link": "1.0.4-alpha-
|
|
31
|
-
"@toptal/picasso-loader": "1.0.4-alpha-
|
|
32
|
-
"@toptal/picasso-radio": "2.0.3-alpha-
|
|
33
|
-
"@toptal/picasso-shared": "15.0.1-alpha-
|
|
34
|
-
"@toptal/picasso-utils": "1.0.4-alpha-
|
|
26
|
+
"@toptal/picasso-checkbox": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
|
|
27
|
+
"@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
28
|
+
"@toptal/picasso-dropdown": "2.0.4-alpha-feature-tailwind-w21-80062bcbc.47+80062bcbc",
|
|
29
|
+
"@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
30
|
+
"@toptal/picasso-link": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
31
|
+
"@toptal/picasso-loader": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
32
|
+
"@toptal/picasso-radio": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
|
|
33
|
+
"@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
34
|
+
"@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
|
|
35
35
|
"ap-style-title-case": "^1.1.2",
|
|
36
|
-
"classnames": "^2.5.1"
|
|
37
|
-
"tailwind-merge": "^2.2.2"
|
|
36
|
+
"classnames": "^2.5.1"
|
|
38
37
|
},
|
|
39
38
|
"sideEffects": [
|
|
40
39
|
"**/styles.ts",
|
|
@@ -43,19 +42,21 @@
|
|
|
43
42
|
"peerDependencies": {
|
|
44
43
|
"@toptal/picasso-provider": "*",
|
|
45
44
|
"@toptal/picasso-tailwind": ">=2.5.0",
|
|
45
|
+
"@toptal/picasso-tailwind-merge": "^1.0.1",
|
|
46
46
|
"react": ">=16.12.0 < 19.0.0"
|
|
47
47
|
},
|
|
48
48
|
"exports": {
|
|
49
49
|
".": "./dist-package/src/index.js"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@toptal/picasso-provider": "4.2.2-alpha-
|
|
53
|
-
"@toptal/picasso-
|
|
52
|
+
"@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-80062bcbc.57+80062bcbc",
|
|
53
|
+
"@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-80062bcbc.4268+80062bcbc",
|
|
54
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc"
|
|
54
55
|
},
|
|
55
56
|
"files": [
|
|
56
57
|
"dist-package/**",
|
|
57
58
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
58
59
|
"src"
|
|
59
60
|
],
|
|
60
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "80062bcbc46a12301eaa56445413e62f4a60a3fc"
|
|
61
62
|
}
|
package/src/Button/Button.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
import cx from 'classnames'
|
|
4
|
-
import { twMerge } from 'tailwind-merge'
|
|
4
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
5
5
|
import type {
|
|
6
6
|
StandardProps,
|
|
7
7
|
SizeType,
|
|
@@ -7,7 +7,7 @@ exports[`Button disabled button as link renders disabled version 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<a
|
|
9
9
|
aria-disabled="true"
|
|
10
|
-
class="
|
|
10
|
+
class="font-inherit focus:outline-none base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
|
|
11
11
|
data-component-type="button"
|
|
12
12
|
href="URL"
|
|
13
13
|
role="button"
|
|
@@ -31,7 +31,7 @@ exports[`Button disabled button renders disabled version 1`] = `
|
|
|
31
31
|
>
|
|
32
32
|
<button
|
|
33
33
|
aria-disabled="true"
|
|
34
|
-
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
|
|
34
|
+
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
|
|
35
35
|
data-component-type="button"
|
|
36
36
|
disabled=""
|
|
37
37
|
role="button"
|
package/src/Button/styles.ts
CHANGED
|
@@ -100,6 +100,7 @@ export const createVariantClassNames = (
|
|
|
100
100
|
|
|
101
101
|
if (disabled) {
|
|
102
102
|
variantClassNames.push('text-gray-500')
|
|
103
|
+
variantClassNames.push('visited:text-gray-500')
|
|
103
104
|
variantClassNames.push('border-gray-500')
|
|
104
105
|
variantClassNames.push('bg-white')
|
|
105
106
|
} else {
|
|
@@ -173,7 +174,11 @@ export const createCoreClassNames = ({
|
|
|
173
174
|
hovered?: boolean
|
|
174
175
|
active?: boolean
|
|
175
176
|
}): string[] => {
|
|
176
|
-
const classNames = [
|
|
177
|
+
const classNames = [
|
|
178
|
+
'no-underline hover:no-underline',
|
|
179
|
+
'rounded-sm',
|
|
180
|
+
'shadow-none',
|
|
181
|
+
]
|
|
177
182
|
|
|
178
183
|
if (!disabled) {
|
|
179
184
|
classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
|
|
@@ -64,10 +64,13 @@ export const ButtonAction: OverridableComponent<Props> = forwardRef<
|
|
|
64
64
|
Props
|
|
65
65
|
>(function ButtonAction(props, ref) {
|
|
66
66
|
const {
|
|
67
|
-
|
|
67
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
68
|
+
// We use these props only to determine styles
|
|
68
69
|
active,
|
|
69
70
|
focused,
|
|
70
71
|
hovered,
|
|
72
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
73
|
+
className,
|
|
71
74
|
disabled,
|
|
72
75
|
loading,
|
|
73
76
|
icon,
|
|
@@ -95,9 +98,6 @@ export const ButtonAction: OverridableComponent<Props> = forwardRef<
|
|
|
95
98
|
onClick={loading ? undefined : onClick}
|
|
96
99
|
className={finalClassName}
|
|
97
100
|
contentClassName='font-semibold text-blue-500 text-md'
|
|
98
|
-
active={active}
|
|
99
|
-
hovered={hovered}
|
|
100
|
-
focused={focused}
|
|
101
101
|
disabled={disabled}
|
|
102
102
|
/>
|
|
103
103
|
)
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
ReactElement,
|
|
4
|
-
MouseEvent,
|
|
5
|
-
ElementType,
|
|
6
|
-
FC,
|
|
7
|
-
} from 'react'
|
|
1
|
+
/* eslint-disable complexity */
|
|
2
|
+
import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react'
|
|
8
3
|
import React, { forwardRef } from 'react'
|
|
9
|
-
import { twMerge } from 'tailwind-merge'
|
|
4
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
10
5
|
import type {
|
|
11
6
|
StandardProps,
|
|
12
7
|
ButtonOrAnchorProps,
|
|
@@ -15,6 +10,7 @@ import type {
|
|
|
15
10
|
} from '@toptal/picasso-shared'
|
|
16
11
|
import { useTitleCase } from '@toptal/picasso-shared'
|
|
17
12
|
import { Button as MUIButtonBase } from '@mui/base/Button'
|
|
13
|
+
import type { ButtonRootSlotProps } from '@mui/base/Button'
|
|
18
14
|
import { Loader } from '@toptal/picasso-loader'
|
|
19
15
|
import { Container } from '@toptal/picasso-container'
|
|
20
16
|
import { noop, toTitleCase } from '@toptal/picasso-utils'
|
|
@@ -64,14 +60,14 @@ const getIcon = ({ icon }: { icon?: ReactElement }) => {
|
|
|
64
60
|
})
|
|
65
61
|
}
|
|
66
62
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
const RootElement = forwardRef(
|
|
64
|
+
(props: ButtonRootSlotProps & { as: ElementType }, ref) => {
|
|
65
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
66
|
+
const { ownerState, as: Root, ...rest } = props
|
|
67
|
+
|
|
68
|
+
return <Root {...rest} ref={ref} />
|
|
69
|
+
}
|
|
70
|
+
)
|
|
75
71
|
|
|
76
72
|
export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
77
73
|
HTMLButtonElement,
|
|
@@ -95,28 +91,9 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
95
91
|
...rest
|
|
96
92
|
} = props
|
|
97
93
|
|
|
98
|
-
let RootElement: ElementType | FC = as
|
|
99
|
-
|
|
100
|
-
if (isReactComponent(RootElement)) {
|
|
101
|
-
RootElement = forwardRef(
|
|
102
|
-
// We don't need to pass ownerState to the root component
|
|
103
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
104
|
-
({ ownerState, ...restProps }: { ownerState: object }, rootRef) => {
|
|
105
|
-
const Root = as
|
|
106
|
-
|
|
107
|
-
return <Root ref={rootRef} {...restProps} />
|
|
108
|
-
}
|
|
109
|
-
)
|
|
110
|
-
}
|
|
111
|
-
|
|
112
94
|
const titleCase = useTitleCase(propsTitleCase)
|
|
113
95
|
const finalChildren = [titleCase ? toTitleCase(children) : children]
|
|
114
|
-
|
|
115
|
-
Workaround for the case: <Button as={Link} href='' /> (with empty href!), we have to determine "rootElementName" like below
|
|
116
|
-
Mui/base throws an error when "href" or "to" are empty
|
|
117
|
-
*/
|
|
118
|
-
const rootElementName =
|
|
119
|
-
as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined
|
|
96
|
+
const finalRootElementName = typeof as === 'string' ? as : 'a'
|
|
120
97
|
|
|
121
98
|
if (icon) {
|
|
122
99
|
const iconComponent = getIcon({ icon })
|
|
@@ -145,8 +122,10 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
145
122
|
data-component-type='button'
|
|
146
123
|
tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
|
|
147
124
|
role={rest.role ?? 'button'}
|
|
148
|
-
rootElementName={
|
|
125
|
+
rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
|
|
149
126
|
slots={{ root: RootElement }}
|
|
127
|
+
// @ts-ignore
|
|
128
|
+
slotProps={{ root: { as } }}
|
|
150
129
|
>
|
|
151
130
|
<Container
|
|
152
131
|
as='span'
|
|
@@ -55,7 +55,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
|
|
|
55
55
|
>
|
|
56
56
|
<a
|
|
57
57
|
aria-disabled="false"
|
|
58
|
-
class="
|
|
58
|
+
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
|
|
59
59
|
data-component-type="button"
|
|
60
60
|
href="URL"
|
|
61
61
|
role="button"
|
|
@@ -79,7 +79,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
|
|
|
79
79
|
>
|
|
80
80
|
<a
|
|
81
81
|
aria-disabled="true"
|
|
82
|
-
class="
|
|
82
|
+
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events"
|
|
83
83
|
data-component-type="button"
|
|
84
84
|
href="URL"
|
|
85
85
|
role="button"
|
|
@@ -103,7 +103,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
|
|
|
103
103
|
>
|
|
104
104
|
<a
|
|
105
105
|
aria-disabled="false"
|
|
106
|
-
class="
|
|
106
|
+
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
|
|
107
107
|
data-component-type="button"
|
|
108
108
|
href=""
|
|
109
109
|
role="button"
|
|
@@ -210,26 +210,28 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
|
|
|
210
210
|
Click me!
|
|
211
211
|
</span>
|
|
212
212
|
<div
|
|
213
|
-
class="
|
|
213
|
+
class="text-lg flex-col items-center inline-flex absolute top-1/2 left-1/2 translate-x-[ translate-y-["
|
|
214
214
|
>
|
|
215
215
|
<div
|
|
216
216
|
aria-valuenow="35"
|
|
217
|
-
class="
|
|
217
|
+
class="text-inherit transform -rotate"
|
|
218
218
|
role="progressbar"
|
|
219
|
-
style="width: 16px; height: 16px;
|
|
219
|
+
style="width: 16px; height: 16px;"
|
|
220
220
|
>
|
|
221
221
|
<svg
|
|
222
|
-
class="
|
|
222
|
+
class="block"
|
|
223
223
|
viewBox="22 22 44 44"
|
|
224
224
|
>
|
|
225
225
|
<circle
|
|
226
|
-
class="
|
|
226
|
+
class="transition-all stroke-[currentColor]"
|
|
227
227
|
cx="44"
|
|
228
228
|
cy="44"
|
|
229
229
|
fill="none"
|
|
230
230
|
r="20.2"
|
|
231
|
+
stroke-dasharray="80px, 200px"
|
|
232
|
+
stroke-dashoffset="0px"
|
|
231
233
|
stroke-width="3.6"
|
|
232
|
-
style="stroke-
|
|
234
|
+
style="stroke-dashoffset: 82.498px; stroke-dasharray: 126.920;"
|
|
233
235
|
/>
|
|
234
236
|
</svg>
|
|
235
237
|
</div>
|
|
@@ -7,7 +7,7 @@ exports[`ButtonCheckbox renders 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<label
|
|
9
9
|
aria-disabled="false"
|
|
10
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
|
|
10
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
|
|
11
11
|
data-component-type="button"
|
|
12
12
|
role="button"
|
|
13
13
|
tabindex="0"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode } from 'react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import type { BaseProps, SizeType } from '@toptal/picasso-shared'
|
|
4
|
-
import { twMerge } from 'tailwind-merge'
|
|
4
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
5
5
|
import { Container } from '@toptal/picasso-container'
|
|
6
6
|
|
|
7
7
|
import { Button } from '../Button'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactNode, HTMLAttributes } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
|
-
import { twMerge } from 'tailwind-merge'
|
|
3
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
4
4
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
5
5
|
|
|
6
6
|
import { ButtonGroupItem } from '../ButtonGroupItem'
|
|
@@ -10,7 +10,7 @@ exports[`ButtonGroup render 1`] = `
|
|
|
10
10
|
>
|
|
11
11
|
<button
|
|
12
12
|
aria-disabled="false"
|
|
13
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
|
|
13
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
|
|
14
14
|
data-component-type="button"
|
|
15
15
|
role="button"
|
|
16
16
|
tabindex="0"
|
|
@@ -24,7 +24,7 @@ exports[`ButtonGroup render 1`] = `
|
|
|
24
24
|
</button>
|
|
25
25
|
<button
|
|
26
26
|
aria-disabled="false"
|
|
27
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
|
|
27
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
|
|
28
28
|
data-component-type="button"
|
|
29
29
|
role="button"
|
|
30
30
|
tabindex="0"
|
|
@@ -38,7 +38,7 @@ exports[`ButtonGroup render 1`] = `
|
|
|
38
38
|
</button>
|
|
39
39
|
<button
|
|
40
40
|
aria-disabled="false"
|
|
41
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
|
|
41
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
|
|
42
42
|
data-component-type="button"
|
|
43
43
|
role="button"
|
|
44
44
|
tabindex="0"
|
|
@@ -7,7 +7,7 @@ exports[`ButtonRadio renders 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<label
|
|
9
9
|
aria-disabled="false"
|
|
10
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
|
|
10
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
|
|
11
11
|
data-component-type="button"
|
|
12
12
|
role="button"
|
|
13
13
|
tabindex="0"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactNode, MouseEvent, HTMLAttributes } from 'react'
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
import type { SizeType, BaseProps } from '@toptal/picasso-shared'
|
|
4
|
-
import { twMerge } from 'tailwind-merge'
|
|
4
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
5
5
|
import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons'
|
|
6
6
|
import { Dropdown } from '@toptal/picasso-dropdown'
|
|
7
7
|
|
|
@@ -22,7 +22,7 @@ exports[`ButtonSplit default render 1`] = `
|
|
|
22
22
|
>
|
|
23
23
|
<button
|
|
24
24
|
aria-disabled="false"
|
|
25
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
|
|
25
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
|
|
26
26
|
data-component-type="button"
|
|
27
27
|
role="button"
|
|
28
28
|
tabindex="0"
|
|
@@ -42,7 +42,7 @@ exports[`ButtonSplit default render 1`] = `
|
|
|
42
42
|
>
|
|
43
43
|
<button
|
|
44
44
|
aria-disabled="false"
|
|
45
|
-
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
|
|
45
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
|
|
46
46
|
data-component-type="button"
|
|
47
47
|
role="button"
|
|
48
48
|
tabindex="0"
|
package/src/ButtonSplit/test.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { render, fireEvent, screen } from '@toptal/picasso-test-utils'
|
|
3
|
-
import {
|
|
3
|
+
import { Menu as PicassoMenu, MenuItem } from '@toptal/picasso-menu'
|
|
4
4
|
|
|
5
5
|
import { ButtonSplit } from './ButtonSplit'
|
|
6
6
|
|
|
@@ -9,9 +9,9 @@ const Menu = () => {
|
|
|
9
9
|
|
|
10
10
|
return (
|
|
11
11
|
<PicassoMenu data-testid='menu'>
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
12
|
+
<MenuItem onClick={handleClick}>First item</MenuItem>
|
|
13
|
+
<MenuItem onClick={handleClick}>Second item</MenuItem>
|
|
14
|
+
<MenuItem onClick={handleClick}>Third item</MenuItem>
|
|
15
15
|
</PicassoMenu>
|
|
16
16
|
)
|
|
17
17
|
}
|