@akinon/ui-button 0.7.0 → 1.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.
Files changed (7) hide show
  1. package/dist/cjs/index.d.ts.map +1 -1
  2. package/dist/cjs/index.js +42 -4
  3. package/dist/cjs/types.d.ts +26 -1
  4. package/dist/esm/index.d.ts.map +1 -1
  5. package/dist/esm/index.js +42 -4
  6. package/dist/esm/types.d.ts +26 -1
  7. package/package.json +7 -6
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBAmJ/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Button = void 0;
4
4
  const icons_1 = require("@akinon/icons");
5
5
  const ui_theme_1 = require("@akinon/ui-theme");
6
+ const ui_tooltip_1 = require("@akinon/ui-tooltip");
6
7
  const cssinjs_1 = require("@ant-design/cssinjs");
7
8
  const antd_1 = require("antd");
8
9
  const react_1 = require("react");
@@ -27,8 +28,9 @@ const Button = (buttonProps) => {
27
28
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
28
29
  theme: theme
29
30
  }, () => {
30
- var _a, _b, _c, _d, _e, _f, _g, _h;
31
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
31
32
  const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
33
+ const iconPrefixCls = `.${getPrefixCls()}-btn`;
32
34
  // MARK: - Disabled
33
35
  const disabledStyles = {
34
36
  '&:disabled, &-disabled': {
@@ -78,11 +80,47 @@ const Button = (buttonProps) => {
78
80
  [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
79
81
  backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
80
82
  borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
81
- } }, disabledStyles)
83
+ } }, disabledStyles),
82
84
  // END: Warning
85
+ // MARK: Icon
86
+ [`${prefixCls}-icon`]: {
87
+ ['> *']: {
88
+ backgroundColor: 'transparent',
89
+ // Since this button is transparent, we are using success bg color for the icon.
90
+ color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
91
+ verticalAlign: 'middle',
92
+ '&:hover:not(:disabled)': {
93
+ color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
94
+ },
95
+ '&:active': {
96
+ boxShadow: 'none'
97
+ }
98
+ },
99
+ '&:disabled': {
100
+ opacity: 0.4
101
+ },
102
+ [`&${iconPrefixCls}-dangerous > *`]: {
103
+ color: 'red',
104
+ '&:hover:not(:disabled)': {
105
+ color: (_l = buttonToken.colorErrorHover) !== null && _l !== void 0 ? _l : token.colorErrorHover
106
+ }
107
+ }
108
+ }
109
+ // END: Icon
83
110
  };
84
111
  });
85
- // MARK: - Render
86
- return useStyle(react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
112
+ const renderButton = () => {
113
+ var _a;
114
+ return (react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
115
+ };
116
+ // If tooltip prop is provided, wrap the button with Tooltip
117
+ if (buttonProps.tooltip) {
118
+ const tooltipProps = typeof buttonProps.tooltip === 'string'
119
+ ? { title: buttonProps.tooltip }
120
+ : buttonProps.tooltip;
121
+ return useStyle(react_1.default.createElement(ui_tooltip_1.Tooltip, Object.assign({}, tooltipProps), renderButton()));
122
+ }
123
+ // If no tooltip, return the button as is
124
+ return useStyle(renderButton());
87
125
  };
88
126
  exports.Button = Button;
package/dist/cjs/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { IconName } from '@akinon/icons';
2
2
  import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
3
+ import { TooltipProps } from '@akinon/ui-tooltip';
3
4
 
4
5
  // TODO: contribute antd to extend the types properly
5
6
  export type TButtonType =
@@ -8,7 +9,8 @@ export type TButtonType =
8
9
  | 'text'
9
10
  | 'link'
10
11
  | 'success'
11
- | 'warning';
12
+ | 'warning'
13
+ | 'icon';
12
14
 
13
15
  type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
14
16
  React.ButtonHTMLAttributes<HTMLButtonElement> &
@@ -25,42 +27,55 @@ export interface IButtonProps extends TMergedHTMLAttributes {
25
27
  * @default default
26
28
  */
27
29
  type?: TButtonType;
30
+
28
31
  /**
29
32
  * The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
30
33
  */
31
34
  href?: string;
35
+
32
36
  /**
33
37
  * The HTML type of the button. Note that this is different from the `type`.
34
38
  * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
35
39
  */
36
40
  htmlType?: HTMLButtonElement['type'];
41
+
37
42
  /**
38
43
  * The size of the button. `middle` is strongly recommended due to the Akinon design system.
39
44
  * Do not use this prop except for special cases.
40
45
  * @default middle
41
46
  */
42
47
  size?: 'middle' | 'small';
48
+
43
49
  /**
44
50
  * onClick handler.
45
51
  * @param event
46
52
  * @returns
47
53
  */
48
54
  onClick?: (event: React.MouseEvent) => void;
55
+
49
56
  /**
50
57
  * The icon name of the button. Only icons from `akinon/icons` are supported.
51
58
  * If there is no icon which you want to use, please open an issue.
52
59
  */
53
60
  icon?: IconName;
61
+
54
62
  /**
55
63
  * The position of the icon. Only applicable when icon is defined.
56
64
  * @default start
57
65
  */
58
66
  iconPosition?: icon extends IconName ? 'start' | 'end' : never;
67
+
68
+ /**
69
+ * The size of the icon. Only applicable when icon is defined.
70
+ * @default 12
71
+ */
72
+ iconSize?: number;
59
73
  /**
60
74
  * Whether the button is in disabled state.
61
75
  * @default false
62
76
  */
63
77
  disabled?: boolean;
78
+
64
79
  /**
65
80
  * Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
66
81
  * @default false
@@ -70,33 +85,43 @@ export interface IButtonProps extends TMergedHTMLAttributes {
70
85
  | {
71
86
  delay?: number;
72
87
  };
88
+
73
89
  /**
74
90
  * Whether the button is ghost.
75
91
  * Recommended for use with `icon` prop without text due to the Akinon design system.
76
92
  * @default false
77
93
  */
78
94
  ghost?: boolean;
95
+
79
96
  /**
80
97
  * Whether the button is danger.
81
98
  * @default false
82
99
  */
83
100
  danger?: boolean;
101
+
84
102
  /**
85
103
  * Whether the button is block which means it will take the full width of its container.
86
104
  * @default false
87
105
  */
88
106
  block?: boolean;
107
+
89
108
  /**
90
109
  * The children of the button. `string` is strongly recommended due to the Akinon design system.
91
110
  */
92
111
  children?: React.ReactNode;
112
+
93
113
  /**
94
114
  * The data attributes of the button.
95
115
  */
96
116
  [key: `data-${string}`]: string;
117
+
97
118
  /**
98
119
  * Never use this prop. Akinon design system does not allow custom styles.
99
120
  * @ignore
100
121
  */
101
122
  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
123
+ /**
124
+ * The tooltip of the button.
125
+ */
126
+ tooltip?: string | TooltipProps;
102
127
  }
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0G/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBAmJ/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Icon } from '@akinon/icons';
2
2
  import { useToken } from '@akinon/ui-theme';
3
+ import { Tooltip } from '@akinon/ui-tooltip';
3
4
  import { useStyleRegister } from '@ant-design/cssinjs';
4
5
  import { Button as AntButton, ConfigProvider } from 'antd';
5
6
  import React from 'react';
@@ -24,8 +25,9 @@ export const Button = (buttonProps) => {
24
25
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
26
  theme: theme
26
27
  }, () => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h;
28
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
28
29
  const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
30
+ const iconPrefixCls = `.${getPrefixCls()}-btn`;
29
31
  // MARK: - Disabled
30
32
  const disabledStyles = {
31
33
  '&:disabled, &-disabled': {
@@ -75,10 +77,46 @@ export const Button = (buttonProps) => {
75
77
  [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
76
78
  backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
77
79
  borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
78
- } }, disabledStyles)
80
+ } }, disabledStyles),
79
81
  // END: Warning
82
+ // MARK: Icon
83
+ [`${prefixCls}-icon`]: {
84
+ ['> *']: {
85
+ backgroundColor: 'transparent',
86
+ // Since this button is transparent, we are using success bg color for the icon.
87
+ color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
88
+ verticalAlign: 'middle',
89
+ '&:hover:not(:disabled)': {
90
+ color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
91
+ },
92
+ '&:active': {
93
+ boxShadow: 'none'
94
+ }
95
+ },
96
+ '&:disabled': {
97
+ opacity: 0.4
98
+ },
99
+ [`&${iconPrefixCls}-dangerous > *`]: {
100
+ color: 'red',
101
+ '&:hover:not(:disabled)': {
102
+ color: (_l = buttonToken.colorErrorHover) !== null && _l !== void 0 ? _l : token.colorErrorHover
103
+ }
104
+ }
105
+ }
106
+ // END: Icon
80
107
  };
81
108
  });
82
- // MARK: - Render
83
- return useStyle(React.createElement(AntButton, Object.assign({}, buttonProps, { icon: React.createElement(Icon, { icon: buttonProps.icon, size: 12, style: { lineHeight: 0 } }) }), buttonProps.children));
109
+ const renderButton = () => {
110
+ var _a;
111
+ return (React.createElement(AntButton, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (React.createElement(Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
112
+ };
113
+ // If tooltip prop is provided, wrap the button with Tooltip
114
+ if (buttonProps.tooltip) {
115
+ const tooltipProps = typeof buttonProps.tooltip === 'string'
116
+ ? { title: buttonProps.tooltip }
117
+ : buttonProps.tooltip;
118
+ return useStyle(React.createElement(Tooltip, Object.assign({}, tooltipProps), renderButton()));
119
+ }
120
+ // If no tooltip, return the button as is
121
+ return useStyle(renderButton());
84
122
  };
package/dist/esm/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { IconName } from '@akinon/icons';
2
2
  import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
3
+ import { TooltipProps } from '@akinon/ui-tooltip';
3
4
 
4
5
  // TODO: contribute antd to extend the types properly
5
6
  export type TButtonType =
@@ -8,7 +9,8 @@ export type TButtonType =
8
9
  | 'text'
9
10
  | 'link'
10
11
  | 'success'
11
- | 'warning';
12
+ | 'warning'
13
+ | 'icon';
12
14
 
13
15
  type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
14
16
  React.ButtonHTMLAttributes<HTMLButtonElement> &
@@ -25,42 +27,55 @@ export interface IButtonProps extends TMergedHTMLAttributes {
25
27
  * @default default
26
28
  */
27
29
  type?: TButtonType;
30
+
28
31
  /**
29
32
  * The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
30
33
  */
31
34
  href?: string;
35
+
32
36
  /**
33
37
  * The HTML type of the button. Note that this is different from the `type`.
34
38
  * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
35
39
  */
36
40
  htmlType?: HTMLButtonElement['type'];
41
+
37
42
  /**
38
43
  * The size of the button. `middle` is strongly recommended due to the Akinon design system.
39
44
  * Do not use this prop except for special cases.
40
45
  * @default middle
41
46
  */
42
47
  size?: 'middle' | 'small';
48
+
43
49
  /**
44
50
  * onClick handler.
45
51
  * @param event
46
52
  * @returns
47
53
  */
48
54
  onClick?: (event: React.MouseEvent) => void;
55
+
49
56
  /**
50
57
  * The icon name of the button. Only icons from `akinon/icons` are supported.
51
58
  * If there is no icon which you want to use, please open an issue.
52
59
  */
53
60
  icon?: IconName;
61
+
54
62
  /**
55
63
  * The position of the icon. Only applicable when icon is defined.
56
64
  * @default start
57
65
  */
58
66
  iconPosition?: icon extends IconName ? 'start' | 'end' : never;
67
+
68
+ /**
69
+ * The size of the icon. Only applicable when icon is defined.
70
+ * @default 12
71
+ */
72
+ iconSize?: number;
59
73
  /**
60
74
  * Whether the button is in disabled state.
61
75
  * @default false
62
76
  */
63
77
  disabled?: boolean;
78
+
64
79
  /**
65
80
  * Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
66
81
  * @default false
@@ -70,33 +85,43 @@ export interface IButtonProps extends TMergedHTMLAttributes {
70
85
  | {
71
86
  delay?: number;
72
87
  };
88
+
73
89
  /**
74
90
  * Whether the button is ghost.
75
91
  * Recommended for use with `icon` prop without text due to the Akinon design system.
76
92
  * @default false
77
93
  */
78
94
  ghost?: boolean;
95
+
79
96
  /**
80
97
  * Whether the button is danger.
81
98
  * @default false
82
99
  */
83
100
  danger?: boolean;
101
+
84
102
  /**
85
103
  * Whether the button is block which means it will take the full width of its container.
86
104
  * @default false
87
105
  */
88
106
  block?: boolean;
107
+
89
108
  /**
90
109
  * The children of the button. `string` is strongly recommended due to the Akinon design system.
91
110
  */
92
111
  children?: React.ReactNode;
112
+
93
113
  /**
94
114
  * The data attributes of the button.
95
115
  */
96
116
  [key: `data-${string}`]: string;
117
+
97
118
  /**
98
119
  * Never use this prop. Akinon design system does not allow custom styles.
99
120
  * @ignore
100
121
  */
101
122
  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
123
+ /**
124
+ * The tooltip of the button.
125
+ */
126
+ tooltip?: string | TooltipProps;
102
127
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-button",
3
- "version": "0.7.0",
3
+ "version": "1.0.0",
4
4
  "private": false,
5
5
  "description": "A basic button react component.",
6
6
  "type": "module",
@@ -10,16 +10,17 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.17.0",
14
- "@akinon/icons": "0.6.0",
15
- "@akinon/ui-theme": "0.7.0"
13
+ "antd": "5.22.6",
14
+ "@akinon/icons": "1.0.0",
15
+ "@akinon/ui-tooltip": "1.0.0",
16
+ "@akinon/ui-theme": "1.0.0"
16
17
  },
17
18
  "devDependencies": {
18
19
  "clean-package": "2.2.0",
19
20
  "copyfiles": "^2.4.1",
20
21
  "rimraf": "^5.0.5",
21
- "typescript": "^5.2.2",
22
- "@akinon/typescript-config": "0.4.0"
22
+ "typescript": "*",
23
+ "@akinon/typescript-config": "1.0.0"
23
24
  },
24
25
  "peerDependencies": {
25
26
  "react": ">=18",