@toptal/picasso-button 5.0.2 → 5.0.3-alpha-pf-fix-alpha-release-4de9263c3.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/dist-package/src/Button/Button.d.ts +1 -1
- package/dist-package/src/Button/Button.d.ts.map +1 -1
- package/dist-package/src/ButtonBase/ButtonBase.d.ts +1 -1
- package/dist-package/src/ButtonBase/ButtonBase.d.ts.map +1 -1
- package/dist-package/src/ButtonBase/ButtonBase.js +6 -12
- package/dist-package/src/ButtonBase/ButtonBase.js.map +1 -1
- package/package.json +18 -18
- package/src/Button/Button.tsx +1 -1
- package/src/Button/__snapshots__/test.tsx.snap +4 -2
- package/src/ButtonBase/ButtonBase.tsx +20 -24
- package/src/ButtonBase/__snapshots__/test.tsx.snap +4 -2
|
@@ -2,7 +2,7 @@ import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
|
|
|
2
2
|
import type { StandardProps, SizeType, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
|
|
3
3
|
export type VariantType = 'primary' | 'negative' | 'positive' | 'secondary' | 'transparent';
|
|
4
4
|
export type IconPositionType = 'left' | 'right';
|
|
5
|
-
export interface Props extends StandardProps, TextLabelProps, ButtonOrAnchorProps {
|
|
5
|
+
export interface Props extends Omit<StandardProps, 'classes'>, TextLabelProps, ButtonOrAnchorProps {
|
|
6
6
|
/** Show button in the active state (left mouse button down) */
|
|
7
7
|
active?: boolean;
|
|
8
8
|
as?: ElementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAI7E,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAiB/B,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,CAAA;AAEjB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAI7E,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAiB/B,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,CAAA;AAEjB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACpC,cAAc,EACd,mBAAmB;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,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,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,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;AA2BD,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,KAAK,CAoF7C,CAAA;AAIF,eAAe,MAAM,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
|
|
2
2
|
import type { StandardProps, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
|
|
3
3
|
export type IconPositionType = 'left' | 'right';
|
|
4
|
-
export interface Props extends StandardProps, TextLabelProps, ButtonOrAnchorProps {
|
|
4
|
+
export interface Props extends Omit<StandardProps, 'classes'>, TextLabelProps, ButtonOrAnchorProps {
|
|
5
5
|
as?: ElementType;
|
|
6
6
|
/** Disables button */
|
|
7
7
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAS/B,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACpC,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;AAmBD,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAuFjD,CAAA;AAIF,eAAe,UAAU,CAAA"}
|
|
@@ -12,12 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
13
|
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { useTitleCase } from '@toptal/picasso-shared';
|
|
15
|
-
import { Button as
|
|
15
|
+
import { Button as BaseUIButton } from '@base-ui/react/button';
|
|
16
16
|
import { Loader } from '@toptal/picasso-loader';
|
|
17
17
|
import { Container } from '@toptal/picasso-container';
|
|
18
18
|
import { noop, toTitleCase } from '@toptal/picasso-utils';
|
|
19
19
|
import { createCoreClassNames } from './styles';
|
|
20
|
-
const getClickHandler = (loading, handler) => loading ? noop : handler;
|
|
20
|
+
const getClickHandler = (loading, handler) => (loading ? noop : handler);
|
|
21
21
|
const getIcon = ({ icon }) => {
|
|
22
22
|
if (!icon) {
|
|
23
23
|
return undefined;
|
|
@@ -27,18 +27,14 @@ const getIcon = ({ icon }) => {
|
|
|
27
27
|
key: 'button-icon',
|
|
28
28
|
});
|
|
29
29
|
};
|
|
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
|
-
});
|
|
35
30
|
export const ButtonBase = forwardRef(function ButtonBase(_a, ref) {
|
|
36
31
|
var _b, _c;
|
|
37
32
|
var { as = 'button', children = null, disabled = false, iconPosition = 'left', loading = false, onClick = noop, type = 'button' } = _a, props = __rest(_a, ["as", "children", "disabled", "iconPosition", "loading", "onClick", "type"]);
|
|
38
33
|
const { icon, className, contentClassName, style, title, value, titleCase: propsTitleCase } = props, rest = __rest(props, ["icon", "className", "contentClassName", "style", "title", "value", "titleCase"]);
|
|
39
34
|
const titleCase = useTitleCase(propsTitleCase);
|
|
40
35
|
const finalChildren = [titleCase ? toTitleCase(children) : children];
|
|
41
|
-
const
|
|
36
|
+
const finalAs = as !== null && as !== void 0 ? as : 'button';
|
|
37
|
+
const isNativeButton = finalAs === 'button';
|
|
42
38
|
if (icon) {
|
|
43
39
|
const iconComponent = getIcon({ icon });
|
|
44
40
|
if (iconPosition === 'left') {
|
|
@@ -48,10 +44,8 @@ export const ButtonBase = forwardRef(function ButtonBase(_a, ref) {
|
|
|
48
44
|
finalChildren.push(iconComponent);
|
|
49
45
|
}
|
|
50
46
|
}
|
|
51
|
-
const finalClassName = twMerge(createCoreClassNames({ disabled }), className);
|
|
52
|
-
return (React.createElement(
|
|
53
|
-
// @ts-ignore
|
|
54
|
-
slotProps: { root: { as } } }),
|
|
47
|
+
const finalClassName = twMerge('base-Button-root', createCoreClassNames({ disabled }), className);
|
|
48
|
+
return (React.createElement(BaseUIButton, Object.assign({}, rest, { ref: ref, nativeButton: isNativeButton, render: isNativeButton ? undefined : React.createElement(finalAs), onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: (_b = rest.tabIndex) !== null && _b !== void 0 ? _b : (disabled ? -1 : 0), role: (_c = rest.role) !== null && _c !== void 0 ? _c : 'button' }),
|
|
55
49
|
React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: contentClassName }, finalChildren),
|
|
56
50
|
loading && (React.createElement(Loader, { variant: 'inherit', className: 'absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]', inline: true, size: 'small' }))));
|
|
57
51
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAOxD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-button",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
4
4
|
"description": "Toptal UI components library - Button",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,35 +19,35 @@
|
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"ap-style-title-case": "^1.1.2",
|
|
22
|
-
"@
|
|
22
|
+
"@base-ui/react": "^1.4.1",
|
|
23
23
|
"classnames": "^2.5.1",
|
|
24
|
-
"@toptal/picasso-checkbox": "5.0.
|
|
25
|
-
"@toptal/picasso-container": "3.1.
|
|
26
|
-
"@toptal/picasso-dropdown": "5.0.
|
|
27
|
-
"@toptal/picasso-icons": "1.15.
|
|
28
|
-
"@toptal/picasso-loader": "3.0.
|
|
29
|
-
"@toptal/picasso-
|
|
30
|
-
"@toptal/picasso-
|
|
31
|
-
"@toptal/picasso-
|
|
32
|
-
"@toptal/picasso-
|
|
24
|
+
"@toptal/picasso-checkbox": "5.0.26-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
25
|
+
"@toptal/picasso-container": "3.1.6-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
26
|
+
"@toptal/picasso-dropdown": "5.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
27
|
+
"@toptal/picasso-icons": "1.15.4-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
28
|
+
"@toptal/picasso-loader": "3.0.7-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
29
|
+
"@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
30
|
+
"@toptal/picasso-utils": "4.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
31
|
+
"@toptal/picasso-link": "4.1.1-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
32
|
+
"@toptal/picasso-radio": "5.0.25-alpha-pf-fix-alpha-release-4de9263c3.0"
|
|
33
33
|
},
|
|
34
34
|
"sideEffects": [
|
|
35
35
|
"**/styles.ts",
|
|
36
36
|
"**/styles.js"
|
|
37
37
|
],
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@toptal/picasso-tailwind-merge": "
|
|
40
|
-
"@toptal/picasso-tailwind": "
|
|
41
|
-
"@toptal/picasso-provider": "
|
|
42
|
-
"react": ">=16.12.0
|
|
39
|
+
"@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
40
|
+
"@toptal/picasso-tailwind": "4.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
41
|
+
"@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
42
|
+
"react": ">=16.12.0"
|
|
43
43
|
},
|
|
44
44
|
"exports": {
|
|
45
45
|
".": "./dist-package/src/index.js"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@toptal/picasso-
|
|
49
|
-
"@toptal/picasso-
|
|
50
|
-
"@toptal/picasso-
|
|
48
|
+
"@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
49
|
+
"@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
|
|
50
|
+
"@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-4de9263c3.0"
|
|
51
51
|
},
|
|
52
52
|
"files": [
|
|
53
53
|
"dist-package/**",
|
package/src/Button/Button.tsx
CHANGED
|
@@ -35,7 +35,7 @@ export type VariantType =
|
|
|
35
35
|
export type IconPositionType = 'left' | 'right'
|
|
36
36
|
|
|
37
37
|
export interface Props
|
|
38
|
-
extends StandardProps,
|
|
38
|
+
extends Omit<StandardProps, 'classes'>,
|
|
39
39
|
TextLabelProps,
|
|
40
40
|
ButtonOrAnchorProps {
|
|
41
41
|
/** Show button in the active state (left mouse button down) */
|
|
@@ -7,8 +7,9 @@ exports[`Button disabled button as link renders disabled version 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<a
|
|
9
9
|
aria-disabled="true"
|
|
10
|
-
class="font-inherit focus:outline-hidden base-Button
|
|
10
|
+
class="font-inherit focus:outline-hidden 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-hidden [[data-component-type="button"]+&]:ml 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
|
+
data-disabled=""
|
|
12
13
|
href="URL"
|
|
13
14
|
role="button"
|
|
14
15
|
tabindex="-1"
|
|
@@ -31,8 +32,9 @@ exports[`Button disabled button renders disabled version 1`] = `
|
|
|
31
32
|
>
|
|
32
33
|
<button
|
|
33
34
|
aria-disabled="true"
|
|
34
|
-
class="base-Button
|
|
35
|
+
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-hidden [[data-component-type="button"]+&]:ml 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
36
|
data-component-type="button"
|
|
37
|
+
data-disabled=""
|
|
36
38
|
disabled=""
|
|
37
39
|
role="button"
|
|
38
40
|
tabindex="-1"
|
|
@@ -9,8 +9,7 @@ import type {
|
|
|
9
9
|
TextLabelProps,
|
|
10
10
|
} from '@toptal/picasso-shared'
|
|
11
11
|
import { useTitleCase } from '@toptal/picasso-shared'
|
|
12
|
-
import { Button as
|
|
13
|
-
import type { ButtonRootSlotProps } from '@mui/base/Button'
|
|
12
|
+
import { Button as BaseUIButton } from '@base-ui/react/button'
|
|
14
13
|
import { Loader } from '@toptal/picasso-loader'
|
|
15
14
|
import { Container } from '@toptal/picasso-container'
|
|
16
15
|
import { noop, toTitleCase } from '@toptal/picasso-utils'
|
|
@@ -20,7 +19,7 @@ import { createCoreClassNames } from './styles'
|
|
|
20
19
|
export type IconPositionType = 'left' | 'right'
|
|
21
20
|
|
|
22
21
|
export interface Props
|
|
23
|
-
extends StandardProps,
|
|
22
|
+
extends Omit<StandardProps, 'classes'>,
|
|
24
23
|
TextLabelProps,
|
|
25
24
|
ButtonOrAnchorProps {
|
|
26
25
|
as?: ElementType
|
|
@@ -46,8 +45,11 @@ export interface Props
|
|
|
46
45
|
type?: 'button' | 'reset' | 'submit'
|
|
47
46
|
}
|
|
48
47
|
|
|
49
|
-
const getClickHandler = (
|
|
50
|
-
loading
|
|
48
|
+
const getClickHandler = (
|
|
49
|
+
loading?: boolean,
|
|
50
|
+
handler?: Props['onClick']
|
|
51
|
+
): BaseUIButton.Props['onClick'] =>
|
|
52
|
+
(loading ? noop : handler) as BaseUIButton.Props['onClick']
|
|
51
53
|
|
|
52
54
|
const getIcon = ({ icon }: { icon?: ReactElement }) => {
|
|
53
55
|
if (!icon) {
|
|
@@ -60,15 +62,6 @@ const getIcon = ({ icon }: { icon?: ReactElement }) => {
|
|
|
60
62
|
})
|
|
61
63
|
}
|
|
62
64
|
|
|
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
|
-
)
|
|
71
|
-
|
|
72
65
|
export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
73
66
|
HTMLButtonElement,
|
|
74
67
|
Props
|
|
@@ -98,7 +91,8 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
98
91
|
|
|
99
92
|
const titleCase = useTitleCase(propsTitleCase)
|
|
100
93
|
const finalChildren = [titleCase ? toTitleCase(children) : children]
|
|
101
|
-
const
|
|
94
|
+
const finalAs: ElementType = as ?? 'button'
|
|
95
|
+
const isNativeButton = finalAs === 'button'
|
|
102
96
|
|
|
103
97
|
if (icon) {
|
|
104
98
|
const iconComponent = getIcon({ icon })
|
|
@@ -110,12 +104,18 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
110
104
|
}
|
|
111
105
|
}
|
|
112
106
|
|
|
113
|
-
const finalClassName = twMerge(
|
|
107
|
+
const finalClassName = twMerge(
|
|
108
|
+
'base-Button-root',
|
|
109
|
+
createCoreClassNames({ disabled }),
|
|
110
|
+
className
|
|
111
|
+
)
|
|
114
112
|
|
|
115
113
|
return (
|
|
116
|
-
<
|
|
114
|
+
<BaseUIButton
|
|
117
115
|
{...rest}
|
|
118
|
-
ref={ref}
|
|
116
|
+
ref={ref as React.Ref<HTMLElement>}
|
|
117
|
+
nativeButton={isNativeButton}
|
|
118
|
+
render={isNativeButton ? undefined : React.createElement(finalAs)}
|
|
119
119
|
onClick={getClickHandler(loading, onClick)}
|
|
120
120
|
className={finalClassName}
|
|
121
121
|
style={style}
|
|
@@ -125,12 +125,8 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
125
125
|
value={value}
|
|
126
126
|
type={type}
|
|
127
127
|
data-component-type='button'
|
|
128
|
-
tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
|
|
128
|
+
tabIndex={rest.tabIndex ?? (disabled ? -1 : 0)}
|
|
129
129
|
role={rest.role ?? 'button'}
|
|
130
|
-
rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
|
|
131
|
-
slots={{ root: RootElement }}
|
|
132
|
-
// @ts-ignore
|
|
133
|
-
slotProps={{ root: { as } }}
|
|
134
130
|
>
|
|
135
131
|
<Container
|
|
136
132
|
as='span'
|
|
@@ -151,7 +147,7 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
|
|
|
151
147
|
size='small'
|
|
152
148
|
/>
|
|
153
149
|
)}
|
|
154
|
-
</
|
|
150
|
+
</BaseUIButton>
|
|
155
151
|
)
|
|
156
152
|
})
|
|
157
153
|
|
|
@@ -79,8 +79,9 @@ 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="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline base-Button
|
|
82
|
+
class="font-inherit focus:outline-hidden 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-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
|
|
83
83
|
data-component-type="button"
|
|
84
|
+
data-disabled=""
|
|
84
85
|
href="URL"
|
|
85
86
|
role="button"
|
|
86
87
|
tabindex="-1"
|
|
@@ -174,8 +175,9 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
|
|
|
174
175
|
>
|
|
175
176
|
<button
|
|
176
177
|
aria-disabled="true"
|
|
177
|
-
class="base-Button
|
|
178
|
+
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-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
|
|
178
179
|
data-component-type="button"
|
|
180
|
+
data-disabled=""
|
|
179
181
|
disabled=""
|
|
180
182
|
role="button"
|
|
181
183
|
tabindex="-1"
|