@primer/components 0.0.0-202111245715 → 0.0.0-20211124581
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/CHANGELOG.md +7 -1
- package/dist/browser.esm.js +166 -148
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +174 -156
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/Divider.d.ts +3 -2
- package/lib/ActionList2/Divider.js +10 -5
- package/lib/ActionList2/Item.js +21 -5
- package/lib/ActionList2/List.js +11 -1
- package/lib/ActionList2/MenuContext.d.ts +10 -0
- package/lib/ActionList2/MenuContext.js +15 -0
- package/lib/ActionList2/Selection.js +11 -0
- package/lib/ActionList2/index.d.ts +1 -2
- package/lib/ActionMenu2.d.ts +310 -0
- package/lib/ActionMenu2.js +91 -0
- package/lib/Autocomplete/Autocomplete.d.ts +10 -2
- package/lib/Autocomplete/AutocompleteInput.d.ts +10 -2
- package/lib/Checkbox.d.ts +1 -1
- package/lib/NewButton/button.d.ts +11 -2
- package/lib/NewButton/button.js +283 -6
- package/lib/NewButton/index.d.ts +11 -6
- package/lib/NewButton/index.js +0 -18
- package/lib/NewButton/types.d.ts +8 -28
- package/lib/NewButton/types.js +1 -19
- package/lib/SelectMenu/SelectMenu.d.ts +10 -2
- package/lib/TextInput.d.ts +8 -1
- package/lib/TextInput.js +16 -5
- package/lib/TextInputWithTokens.d.ts +10 -2
- package/lib/_TextInputWrapper.d.ts +3 -0
- package/lib/_TextInputWrapper.js +18 -7
- package/lib/drafts.d.ts +1 -0
- package/lib/drafts.js +13 -0
- package/lib-esm/ActionList2/Divider.d.ts +3 -2
- package/lib-esm/ActionList2/Divider.js +8 -5
- package/lib-esm/ActionList2/Item.js +19 -5
- package/lib-esm/ActionList2/List.js +9 -1
- package/lib-esm/ActionList2/MenuContext.d.ts +10 -0
- package/lib-esm/ActionList2/MenuContext.js +3 -0
- package/lib-esm/ActionList2/Selection.js +9 -0
- package/lib-esm/ActionList2/index.d.ts +1 -2
- package/lib-esm/ActionMenu2.d.ts +310 -0
- package/lib-esm/ActionMenu2.js +67 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +10 -2
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +10 -2
- package/lib-esm/Checkbox.d.ts +1 -1
- package/lib-esm/NewButton/button.d.ts +11 -2
- package/lib-esm/NewButton/button.js +275 -4
- package/lib-esm/NewButton/index.d.ts +11 -6
- package/lib-esm/NewButton/index.js +1 -4
- package/lib-esm/NewButton/types.d.ts +8 -28
- package/lib-esm/NewButton/types.js +1 -6
- package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -2
- package/lib-esm/TextInput.d.ts +8 -1
- package/lib-esm/TextInput.js +16 -5
- package/lib-esm/TextInputWithTokens.d.ts +10 -2
- package/lib-esm/_TextInputWrapper.d.ts +3 -0
- package/lib-esm/_TextInputWrapper.js +18 -7
- package/lib-esm/drafts.d.ts +1 -0
- package/lib-esm/drafts.js +2 -1
- package/package.json +1 -1
- package/lib/NewButton/button-base.d.ts +0 -6
- package/lib/NewButton/button-base.js +0 -69
- package/lib/NewButton/button-link.d.ts +0 -26
- package/lib/NewButton/button-link.js +0 -31
- package/lib/NewButton/icon-button.d.ts +0 -4
- package/lib/NewButton/icon-button.js +0 -57
- package/lib/NewButton/styles.d.ts +0 -202
- package/lib/NewButton/styles.js +0 -248
- package/lib-esm/NewButton/button-base.d.ts +0 -6
- package/lib-esm/NewButton/button-base.js +0 -47
- package/lib-esm/NewButton/button-link.d.ts +0 -26
- package/lib-esm/NewButton/button-link.js +0 -15
- package/lib-esm/NewButton/icon-button.d.ts +0 -4
- package/lib-esm/NewButton/icon-button.js +0 -35
- package/lib-esm/NewButton/styles.d.ts +0 -202
- package/lib-esm/NewButton/styles.js +0 -229
@@ -1,69 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
9
|
-
|
10
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
11
|
-
|
12
|
-
var _sx = require("../sx");
|
13
|
-
|
14
|
-
var _ThemeProvider = require("../ThemeProvider");
|
15
|
-
|
16
|
-
var _types = require("./types");
|
17
|
-
|
18
|
-
var _styles = require("./styles");
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
23
|
-
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
|
-
|
26
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
27
|
-
|
28
|
-
const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
|
29
|
-
children,
|
30
|
-
as: Component = 'button',
|
31
|
-
sx: sxProp = {},
|
32
|
-
...props
|
33
|
-
}, forwardedRef) => {
|
34
|
-
const {
|
35
|
-
leadingIcon: LeadingIcon,
|
36
|
-
trailingIcon: TrailingIcon,
|
37
|
-
variant = 'default',
|
38
|
-
size = 'medium'
|
39
|
-
} = props;
|
40
|
-
const {
|
41
|
-
theme
|
42
|
-
} = (0, _ThemeProvider.useTheme)();
|
43
|
-
const iconWrapStyles = {
|
44
|
-
display: 'inline-block'
|
45
|
-
};
|
46
|
-
|
47
|
-
const sxStyles = _sx.merge.all([(0, _styles.getButtonStyles)(theme), (0, _styles.getSizeStyles)(size, variant, false), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
|
48
|
-
|
49
|
-
return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
|
50
|
-
as: Component,
|
51
|
-
sx: sxStyles
|
52
|
-
}, props, {
|
53
|
-
ref: forwardedRef
|
54
|
-
}), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
55
|
-
as: "span",
|
56
|
-
"data-component": "leadingIcon",
|
57
|
-
sx: iconWrapStyles
|
58
|
-
}, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
|
59
|
-
"data-component": "text"
|
60
|
-
}, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
61
|
-
as: "span",
|
62
|
-
"data-component": "trailingIcon",
|
63
|
-
sx: { ...iconWrapStyles,
|
64
|
-
ml: 2
|
65
|
-
}
|
66
|
-
}, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)));
|
67
|
-
});
|
68
|
-
var _default = ButtonBase;
|
69
|
-
exports.default = _default;
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
3
|
-
declare const LinkButton: PolymorphicForwardRefComponent<"a", Omit<(Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
|
4
|
-
ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
|
5
|
-
}) | (Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
|
6
|
-
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
7
|
-
}), string | number | symbol> & {
|
8
|
-
leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
9
|
-
trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
10
|
-
children: React.ReactNode;
|
11
|
-
} & {
|
12
|
-
variant?: import("./types").VariantType | undefined;
|
13
|
-
size?: import("./types").Size | undefined;
|
14
|
-
disabled?: boolean | undefined;
|
15
|
-
} & import("../sx").SxProp & React.HTMLAttributes<HTMLButtonElement> & {
|
16
|
-
[x: string]: any;
|
17
|
-
[x: number]: any;
|
18
|
-
} & {
|
19
|
-
theme?: any;
|
20
|
-
} & {
|
21
|
-
as?: string | React.ComponentType<any> | undefined;
|
22
|
-
forwardedAs?: string | React.ComponentType<any> | undefined;
|
23
|
-
} & {
|
24
|
-
as?: "a" | "button" | undefined;
|
25
|
-
}>;
|
26
|
-
export default LinkButton;
|
@@ -1,31 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
9
|
-
|
10
|
-
var _buttonBase = _interopRequireDefault(require("./button-base"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
15
|
-
|
16
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
17
|
-
|
18
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
19
|
-
|
20
|
-
const LinkButton = /*#__PURE__*/(0, _react.forwardRef)(({
|
21
|
-
children,
|
22
|
-
as: Component = 'a',
|
23
|
-
...props
|
24
|
-
}, forwardedRef) => {
|
25
|
-
return /*#__PURE__*/_react.default.createElement(_buttonBase.default, _extends({
|
26
|
-
as: Component,
|
27
|
-
ref: forwardedRef
|
28
|
-
}, props), children);
|
29
|
-
});
|
30
|
-
var _default = LinkButton;
|
31
|
-
exports.default = _default;
|
@@ -1,57 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
9
|
-
|
10
|
-
var _sx = require("../sx");
|
11
|
-
|
12
|
-
var _ThemeProvider = require("../ThemeProvider");
|
13
|
-
|
14
|
-
var _Box = _interopRequireDefault(require("../Box"));
|
15
|
-
|
16
|
-
var _types = require("./types");
|
17
|
-
|
18
|
-
var _styles = require("./styles");
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
23
|
-
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
|
-
|
26
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
27
|
-
|
28
|
-
const IconButton = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
|
29
|
-
const {
|
30
|
-
variant = 'default',
|
31
|
-
size = 'medium',
|
32
|
-
sx: sxProp = {},
|
33
|
-
icon: Icon,
|
34
|
-
iconLabel
|
35
|
-
} = props;
|
36
|
-
const {
|
37
|
-
theme
|
38
|
-
} = (0, _ThemeProvider.useTheme)();
|
39
|
-
const styles = { ...(0, _styles.getBaseStyles)(theme)
|
40
|
-
};
|
41
|
-
|
42
|
-
const sxStyles = _sx.merge.all([styles, (0, _styles.getSizeStyles)(size, variant, true), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
|
43
|
-
|
44
|
-
return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
|
45
|
-
sx: sxStyles,
|
46
|
-
ref: forwardedRef
|
47
|
-
}, props), /*#__PURE__*/_react.default.createElement("span", {
|
48
|
-
hidden: true
|
49
|
-
}, iconLabel), /*#__PURE__*/_react.default.createElement(_Box.default, {
|
50
|
-
as: "span",
|
51
|
-
sx: {
|
52
|
-
display: 'inline-block'
|
53
|
-
}
|
54
|
-
}, /*#__PURE__*/_react.default.createElement(Icon, null)));
|
55
|
-
});
|
56
|
-
var _default = IconButton;
|
57
|
-
exports.default = _default;
|
@@ -1,202 +0,0 @@
|
|
1
|
-
import { VariantType } from './types';
|
2
|
-
import { Theme } from '../ThemeProvider';
|
3
|
-
export declare const TEXT_ROW_HEIGHT = "20px";
|
4
|
-
export declare const getVariantStyles: (variant?: VariantType, theme?: Theme | undefined) => {
|
5
|
-
color: string;
|
6
|
-
backgroundColor: string;
|
7
|
-
boxShadow: string;
|
8
|
-
'&:hover:not([disabled])': {
|
9
|
-
backgroundColor: string;
|
10
|
-
};
|
11
|
-
'&:focus:not([disabled])': {
|
12
|
-
boxShadow: string;
|
13
|
-
};
|
14
|
-
'&:active:not([disabled])': {
|
15
|
-
backgroundColor: string;
|
16
|
-
boxShadow: string;
|
17
|
-
};
|
18
|
-
'&:disabled': {
|
19
|
-
color: string;
|
20
|
-
backgroundColor: string;
|
21
|
-
};
|
22
|
-
} | {
|
23
|
-
color: string;
|
24
|
-
backgroundColor: string;
|
25
|
-
borderColor: string;
|
26
|
-
boxShadow: string;
|
27
|
-
'&:hover:not([disabled])': {
|
28
|
-
color: string;
|
29
|
-
backgroundColor: string;
|
30
|
-
};
|
31
|
-
'&:focus:not([disabled])': {
|
32
|
-
boxShadow: string;
|
33
|
-
};
|
34
|
-
'&:active:not([disabled])': {
|
35
|
-
backgroundColor: string;
|
36
|
-
boxShadow: string;
|
37
|
-
};
|
38
|
-
'&:disabled': {
|
39
|
-
color: string;
|
40
|
-
backgroundColor: string;
|
41
|
-
};
|
42
|
-
'[data-component="ButtonCounter"]': {
|
43
|
-
backgroundColor: string;
|
44
|
-
color: string;
|
45
|
-
};
|
46
|
-
} | {
|
47
|
-
color: string;
|
48
|
-
backgroundColor: string;
|
49
|
-
boxShadow: string;
|
50
|
-
'&:hover:not([disabled])': {
|
51
|
-
color: string;
|
52
|
-
backgroundColor: string;
|
53
|
-
borderColor: string;
|
54
|
-
boxShadow: string;
|
55
|
-
'[data-component="ButtonCounter"]': {
|
56
|
-
backgroundColor: string;
|
57
|
-
color: string;
|
58
|
-
};
|
59
|
-
};
|
60
|
-
'&:focus:not([disabled])': {
|
61
|
-
borderColor: string;
|
62
|
-
boxShadow: string;
|
63
|
-
};
|
64
|
-
'&:active:not([disabled])': {
|
65
|
-
color: string;
|
66
|
-
backgroundColor: string;
|
67
|
-
boxShadow: string;
|
68
|
-
borderColor: string;
|
69
|
-
};
|
70
|
-
'&:disabled': {
|
71
|
-
color: string;
|
72
|
-
backgroundColor: string;
|
73
|
-
borderColor: string;
|
74
|
-
'[data-component="ButtonCounter"]': {
|
75
|
-
backgroundColor: string;
|
76
|
-
};
|
77
|
-
};
|
78
|
-
'[data-component="ButtonCounter"]': {
|
79
|
-
color: string;
|
80
|
-
backgroundColor: string;
|
81
|
-
};
|
82
|
-
} | {
|
83
|
-
color: string;
|
84
|
-
backgroundColor: string;
|
85
|
-
border: string;
|
86
|
-
boxShadow: string;
|
87
|
-
'&:hover:not([disabled])': {
|
88
|
-
backgroundColor: string;
|
89
|
-
};
|
90
|
-
'&:focus:not([disabled])': {
|
91
|
-
boxShadow: string;
|
92
|
-
};
|
93
|
-
'&:active:not([disabled])': {
|
94
|
-
backgroundColor: string;
|
95
|
-
};
|
96
|
-
'&:disabled': {
|
97
|
-
color: string;
|
98
|
-
};
|
99
|
-
} | {
|
100
|
-
color: string;
|
101
|
-
boxShadow: string;
|
102
|
-
'&:hover': {
|
103
|
-
color: string;
|
104
|
-
backgroundColor: string;
|
105
|
-
borderColor: string;
|
106
|
-
boxShadow: string;
|
107
|
-
'[data-component="ButtonCounter"]': {
|
108
|
-
backgroundColor: string;
|
109
|
-
color: string;
|
110
|
-
};
|
111
|
-
};
|
112
|
-
'&:focus': {
|
113
|
-
borderColor: string;
|
114
|
-
boxShadow: string;
|
115
|
-
};
|
116
|
-
'&:active:not([disabled])': {
|
117
|
-
color: string;
|
118
|
-
backgroundColor: string;
|
119
|
-
boxShadow: string;
|
120
|
-
borderColor: string;
|
121
|
-
};
|
122
|
-
'&:disabled': {
|
123
|
-
color: string;
|
124
|
-
backgroundColor: string;
|
125
|
-
borderColor: string;
|
126
|
-
'[data-component="ButtonCounter"]': {
|
127
|
-
backgroundColor: string;
|
128
|
-
};
|
129
|
-
};
|
130
|
-
'[data-component="ButtonCounter"]': {
|
131
|
-
backgroundColor: string;
|
132
|
-
color: string;
|
133
|
-
};
|
134
|
-
};
|
135
|
-
export declare const getSizeStyles: (size: string | undefined, variant: VariantType | undefined, iconOnly: boolean) => {
|
136
|
-
paddingY: string;
|
137
|
-
paddingX: string;
|
138
|
-
fontSize: number;
|
139
|
-
'[data-component="ButtonCounter"]': {
|
140
|
-
fontSize: number;
|
141
|
-
};
|
142
|
-
};
|
143
|
-
export declare const getBaseStyles: (theme?: Theme | undefined) => {
|
144
|
-
borderRadius: string;
|
145
|
-
border: string;
|
146
|
-
borderColor: any;
|
147
|
-
fontWeight: string;
|
148
|
-
lineHeight: string;
|
149
|
-
whiteSpace: string;
|
150
|
-
verticalAlign: string;
|
151
|
-
cursor: string;
|
152
|
-
appearance: string;
|
153
|
-
userSelect: string;
|
154
|
-
textDecoration: string;
|
155
|
-
textAlign: string;
|
156
|
-
'&:focus': {
|
157
|
-
outline: string;
|
158
|
-
};
|
159
|
-
'&:disabled': {
|
160
|
-
cursor: string;
|
161
|
-
};
|
162
|
-
'&:disabled svg': {
|
163
|
-
opacity: string;
|
164
|
-
};
|
165
|
-
};
|
166
|
-
export declare const getButtonStyles: (theme?: Theme | undefined) => {
|
167
|
-
display: string;
|
168
|
-
gridTemplateAreas: string;
|
169
|
-
'& > :not(:last-child)': {
|
170
|
-
mr: string;
|
171
|
-
};
|
172
|
-
'[data-component="leadingIcon"]': {
|
173
|
-
gridArea: string;
|
174
|
-
};
|
175
|
-
'[data-component="text"]': {
|
176
|
-
gridArea: string;
|
177
|
-
};
|
178
|
-
'[data-component="trailingIcon"]': {
|
179
|
-
gridArea: string;
|
180
|
-
};
|
181
|
-
borderRadius: string;
|
182
|
-
border: string;
|
183
|
-
borderColor: any;
|
184
|
-
fontWeight: string;
|
185
|
-
lineHeight: string;
|
186
|
-
whiteSpace: string;
|
187
|
-
verticalAlign: string;
|
188
|
-
cursor: string;
|
189
|
-
appearance: string;
|
190
|
-
userSelect: string;
|
191
|
-
textDecoration: string;
|
192
|
-
textAlign: string;
|
193
|
-
'&:focus': {
|
194
|
-
outline: string;
|
195
|
-
};
|
196
|
-
'&:disabled': {
|
197
|
-
cursor: string;
|
198
|
-
};
|
199
|
-
'&:disabled svg': {
|
200
|
-
opacity: string;
|
201
|
-
};
|
202
|
-
};
|
package/lib/NewButton/styles.js
DELETED
@@ -1,248 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.getButtonStyles = exports.getBaseStyles = exports.getSizeStyles = exports.getVariantStyles = exports.TEXT_ROW_HEIGHT = void 0;
|
7
|
-
const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
|
8
|
-
|
9
|
-
exports.TEXT_ROW_HEIGHT = TEXT_ROW_HEIGHT;
|
10
|
-
|
11
|
-
const getVariantStyles = (variant = 'default', theme) => {
|
12
|
-
const style = {
|
13
|
-
default: {
|
14
|
-
color: 'btn.text',
|
15
|
-
backgroundColor: 'btn.bg',
|
16
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}, ${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.insetShadow}`,
|
17
|
-
'&:hover:not([disabled])': {
|
18
|
-
backgroundColor: 'btn.hoverBg'
|
19
|
-
},
|
20
|
-
// focus must come before :active so that the active box shadow overrides
|
21
|
-
'&:focus:not([disabled])': {
|
22
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
|
23
|
-
},
|
24
|
-
'&:active:not([disabled])': {
|
25
|
-
backgroundColor: 'btn.selectedBg',
|
26
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadowActive}`
|
27
|
-
},
|
28
|
-
'&:disabled': {
|
29
|
-
color: 'primer.fg.disabled',
|
30
|
-
backgroundColor: 'btn.disabledBg'
|
31
|
-
}
|
32
|
-
},
|
33
|
-
primary: {
|
34
|
-
color: 'btn.primary.text',
|
35
|
-
backgroundColor: 'btn.primary.bg',
|
36
|
-
borderColor: 'border.subtle',
|
37
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.shadow}`,
|
38
|
-
'&:hover:not([disabled])': {
|
39
|
-
color: 'btn.primary.hoverText',
|
40
|
-
backgroundColor: 'btn.primary.hoverBg'
|
41
|
-
},
|
42
|
-
// focus must come before :active so that the active box shadow overrides
|
43
|
-
'&:focus:not([disabled])': {
|
44
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.focusShadow}`
|
45
|
-
},
|
46
|
-
'&:active:not([disabled])': {
|
47
|
-
backgroundColor: 'btn.primary.selectedBg',
|
48
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.selectedShadow}`
|
49
|
-
},
|
50
|
-
'&:disabled': {
|
51
|
-
color: 'btn.primary.disabledText',
|
52
|
-
backgroundColor: 'btn.primary.disabledBg'
|
53
|
-
},
|
54
|
-
'[data-component="ButtonCounter"]': {
|
55
|
-
backgroundColor: 'btn.primary.counterBg',
|
56
|
-
color: 'btn.primary.text'
|
57
|
-
}
|
58
|
-
},
|
59
|
-
danger: {
|
60
|
-
color: 'btn.danger.text',
|
61
|
-
backgroundColor: 'btn.bg',
|
62
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
|
63
|
-
'&:hover:not([disabled])': {
|
64
|
-
color: 'btn.danger.hoverText',
|
65
|
-
backgroundColor: 'btn.danger.hoverBg',
|
66
|
-
borderColor: 'btn.danger.hoverBorder',
|
67
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.hoverShadow}`,
|
68
|
-
'[data-component="ButtonCounter"]': {
|
69
|
-
backgroundColor: 'btn.danger.hoverCounterBg',
|
70
|
-
color: 'btn.danger.hoverText'
|
71
|
-
}
|
72
|
-
},
|
73
|
-
// focus must come before :active so that the active box shadow overrides
|
74
|
-
'&:focus:not([disabled])': {
|
75
|
-
borderColor: 'btn.danger.focusBorder',
|
76
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.focusShadow}`
|
77
|
-
},
|
78
|
-
'&:active:not([disabled])': {
|
79
|
-
color: 'btn.danger.selectedText',
|
80
|
-
backgroundColor: 'btn.danger.selectedBg',
|
81
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.selectedShadow}`,
|
82
|
-
borderColor: 'btn.danger.selectedBorder'
|
83
|
-
},
|
84
|
-
'&:disabled': {
|
85
|
-
color: 'btn.danger.disabledText',
|
86
|
-
backgroundColor: 'btn.danger.disabledBg',
|
87
|
-
borderColor: 'btn.danger.disabledBorder',
|
88
|
-
'[data-component="ButtonCounter"]': {
|
89
|
-
backgroundColor: 'btn.danger.disabledCounterBg'
|
90
|
-
}
|
91
|
-
},
|
92
|
-
'[data-component="ButtonCounter"]': {
|
93
|
-
color: 'btn.danger.text',
|
94
|
-
backgroundColor: 'btn.danger.counterBg'
|
95
|
-
}
|
96
|
-
},
|
97
|
-
invisible: {
|
98
|
-
color: 'accent.fg',
|
99
|
-
backgroundColor: 'transparent',
|
100
|
-
border: '0',
|
101
|
-
boxShadow: 'none',
|
102
|
-
'&:hover:not([disabled])': {
|
103
|
-
backgroundColor: 'btn.hoverBg'
|
104
|
-
},
|
105
|
-
// focus must come before :active so that the active box shadow overrides
|
106
|
-
'&:focus:not([disabled])': {
|
107
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
|
108
|
-
},
|
109
|
-
'&:active:not([disabled])': {
|
110
|
-
backgroundColor: 'btn.selectedBg'
|
111
|
-
},
|
112
|
-
'&:disabled': {
|
113
|
-
color: 'primer.fg.disabled'
|
114
|
-
}
|
115
|
-
},
|
116
|
-
outline: {
|
117
|
-
color: 'btn.outline.text',
|
118
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
|
119
|
-
'&:hover': {
|
120
|
-
color: 'btn.outline.hoverText',
|
121
|
-
backgroundColor: 'btn.outline.hoverBg',
|
122
|
-
borderColor: 'outline.hoverBorder',
|
123
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.hoverShadow}`,
|
124
|
-
'[data-component="ButtonCounter"]': {
|
125
|
-
backgroundColor: 'btn.outline.hoverCounterBg',
|
126
|
-
color: 'btn.outline.hoverText'
|
127
|
-
}
|
128
|
-
},
|
129
|
-
// focus must come before :active so that the active box shadow overrides
|
130
|
-
'&:focus': {
|
131
|
-
borderColor: 'btn.outline.focusBorder',
|
132
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
|
133
|
-
},
|
134
|
-
'&:active:not([disabled])': {
|
135
|
-
color: 'btn.outline.selectedText',
|
136
|
-
backgroundColor: 'btn.outline.selectedBg',
|
137
|
-
boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
|
138
|
-
borderColor: 'btn.outline.selectedBorder'
|
139
|
-
},
|
140
|
-
'&:disabled': {
|
141
|
-
color: 'btn.outline.disabledText',
|
142
|
-
backgroundColor: 'btn.outline.disabledBg',
|
143
|
-
borderColor: 'btn.border',
|
144
|
-
'[data-component="ButtonCounter"]': {
|
145
|
-
backgroundColor: 'btn.outline.disabledCounterBg'
|
146
|
-
}
|
147
|
-
},
|
148
|
-
'[data-component="ButtonCounter"]': {
|
149
|
-
backgroundColor: 'btn.outline.counterBg',
|
150
|
-
color: 'btn.outline.text'
|
151
|
-
}
|
152
|
-
}
|
153
|
-
};
|
154
|
-
return style[variant];
|
155
|
-
};
|
156
|
-
|
157
|
-
exports.getVariantStyles = getVariantStyles;
|
158
|
-
|
159
|
-
const getSizeStyles = (size = 'medium', variant = 'default', iconOnly) => {
|
160
|
-
let paddingY, paddingX, fontSize;
|
161
|
-
|
162
|
-
switch (size) {
|
163
|
-
case 'small':
|
164
|
-
paddingY = 3;
|
165
|
-
paddingX = 12;
|
166
|
-
fontSize = 0;
|
167
|
-
break;
|
168
|
-
|
169
|
-
case 'large':
|
170
|
-
paddingY = 9;
|
171
|
-
paddingX = 20;
|
172
|
-
fontSize = 2;
|
173
|
-
break;
|
174
|
-
|
175
|
-
case 'medium':
|
176
|
-
default:
|
177
|
-
paddingY = 5;
|
178
|
-
paddingX = 16;
|
179
|
-
fontSize = 1;
|
180
|
-
}
|
181
|
-
|
182
|
-
if (iconOnly) {
|
183
|
-
paddingX = paddingY + 2;
|
184
|
-
}
|
185
|
-
|
186
|
-
if (variant === 'invisible') {
|
187
|
-
paddingY = paddingY + 1;
|
188
|
-
}
|
189
|
-
|
190
|
-
return {
|
191
|
-
paddingY: `${paddingY}px`,
|
192
|
-
paddingX: `${paddingX}px`,
|
193
|
-
fontSize,
|
194
|
-
'[data-component="ButtonCounter"]': {
|
195
|
-
fontSize
|
196
|
-
}
|
197
|
-
};
|
198
|
-
};
|
199
|
-
|
200
|
-
exports.getSizeStyles = getSizeStyles;
|
201
|
-
|
202
|
-
const getBaseStyles = theme => ({
|
203
|
-
borderRadius: '2',
|
204
|
-
border: '1px solid',
|
205
|
-
borderColor: theme === null || theme === void 0 ? void 0 : theme.colors.btn.border,
|
206
|
-
fontWeight: 'bold',
|
207
|
-
lineHeight: TEXT_ROW_HEIGHT,
|
208
|
-
whiteSpace: 'nowrap',
|
209
|
-
verticalAlign: 'middle',
|
210
|
-
cursor: 'pointer',
|
211
|
-
appearance: 'none',
|
212
|
-
userSelect: 'none',
|
213
|
-
textDecoration: 'none',
|
214
|
-
textAlign: 'center',
|
215
|
-
'&:focus': {
|
216
|
-
outline: 'none'
|
217
|
-
},
|
218
|
-
'&:disabled': {
|
219
|
-
cursor: 'default'
|
220
|
-
},
|
221
|
-
'&:disabled svg': {
|
222
|
-
opacity: '0.6'
|
223
|
-
}
|
224
|
-
});
|
225
|
-
|
226
|
-
exports.getBaseStyles = getBaseStyles;
|
227
|
-
|
228
|
-
const getButtonStyles = theme => {
|
229
|
-
const styles = { ...getBaseStyles(theme),
|
230
|
-
display: 'grid',
|
231
|
-
gridTemplateAreas: '"leadingIcon text trailingIcon"',
|
232
|
-
'& > :not(:last-child)': {
|
233
|
-
mr: '2'
|
234
|
-
},
|
235
|
-
'[data-component="leadingIcon"]': {
|
236
|
-
gridArea: 'leadingIcon'
|
237
|
-
},
|
238
|
-
'[data-component="text"]': {
|
239
|
-
gridArea: 'text'
|
240
|
-
},
|
241
|
-
'[data-component="trailingIcon"]': {
|
242
|
-
gridArea: 'trailingIcon'
|
243
|
-
}
|
244
|
-
};
|
245
|
-
return styles;
|
246
|
-
};
|
247
|
-
|
248
|
-
exports.getButtonStyles = getButtonStyles;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import { ComponentPropsWithRef } from 'react';
|
2
|
-
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
3
|
-
import { ButtonProps } from './types';
|
4
|
-
declare const ButtonBase: PolymorphicForwardRefComponent<"a" | "button", ButtonProps>;
|
5
|
-
export declare type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>;
|
6
|
-
export default ButtonBase;
|