@primer/components 0.0.0-202111255030 → 0.0.0-202111301520
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/browser.esm.js +2 -2209
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2209
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Header.js +1 -1
- package/lib/ActionList/Item.js +10 -10
- package/lib/ActionList/List.js +1 -1
- package/lib/ActionList2/Divider.d.ts +3 -2
- package/lib/ActionList2/Divider.js +10 -5
- package/lib/ActionList2/Item.js +22 -6
- package/lib/ActionList2/List.js +12 -2
- 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 +313 -0
- package/lib/ActionMenu2.js +91 -0
- package/lib/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib/BaseStyles.js +2 -20
- package/lib/BorderBox.js +1 -1
- package/lib/Box.js +1 -1
- package/lib/Breadcrumbs.js +3 -3
- package/lib/Button/Button.d.ts +2 -2
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.d.ts +2 -2
- package/lib/Button/ButtonDanger.d.ts +2 -2
- package/lib/Button/ButtonGroup.js +1 -1
- package/lib/Button/ButtonInvisible.d.ts +2 -2
- package/lib/Button/ButtonOutline.d.ts +2 -2
- package/lib/Button/ButtonPrimary.d.ts +2 -2
- package/lib/Checkbox.js +1 -1
- package/lib/CircleOcticon.d.ts +35 -35
- package/lib/Details.js +1 -1
- package/lib/Dialog.d.ts +37 -37
- package/lib/Dropdown.d.ts +6 -6
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib/FilterList.d.ts +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +1 -1
- package/lib/Flex.js +1 -1
- package/lib/LabelGroup.js +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/Overlay.js +1 -1
- package/lib/Pagination/Pagination.js +2 -2
- package/lib/Position.d.ts +4 -4
- package/lib/Position.js +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib/SelectMenu/SelectMenu.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib/StateLabel.js +1 -1
- package/lib/StyledOcticon.js +1 -1
- package/lib/SubNav.js +3 -3
- package/lib/TextInputWithTokens.d.ts +2 -1
- package/lib/ThemeProvider.d.ts +1 -0
- package/lib/ThemeProvider.js +17 -4
- package/lib/Timeline.js +4 -4
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/AvatarToken.js +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/Token/TokenBase.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/drafts.d.ts +1 -0
- package/lib/drafts.js +13 -0
- package/lib-esm/ActionList/Header.js +1 -1
- package/lib-esm/ActionList/Item.js +10 -10
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/ActionList2/Divider.d.ts +3 -2
- package/lib-esm/ActionList2/Divider.js +8 -5
- package/lib-esm/ActionList2/Item.js +20 -6
- package/lib-esm/ActionList2/List.js +10 -2
- 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 +313 -0
- package/lib-esm/ActionMenu2.js +67 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib-esm/BaseStyles.js +2 -20
- package/lib-esm/BorderBox.js +1 -1
- package/lib-esm/Box.js +1 -1
- package/lib-esm/Breadcrumbs.js +3 -3
- package/lib-esm/Button/Button.d.ts +2 -2
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +2 -2
- package/lib-esm/Button/ButtonDanger.d.ts +2 -2
- package/lib-esm/Button/ButtonGroup.js +1 -1
- package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
- package/lib-esm/Button/ButtonOutline.d.ts +2 -2
- package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
- package/lib-esm/Checkbox.js +1 -1
- package/lib-esm/CircleOcticon.d.ts +35 -35
- package/lib-esm/Details.js +1 -1
- package/lib-esm/Dialog.d.ts +37 -37
- package/lib-esm/Dropdown.d.ts +6 -6
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib-esm/FilterList.d.ts +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +1 -1
- package/lib-esm/Flex.js +1 -1
- package/lib-esm/LabelGroup.js +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/Overlay.js +1 -1
- package/lib-esm/Pagination/Pagination.js +2 -2
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/Position.js +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib-esm/SelectMenu/SelectMenu.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabs.js +1 -1
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/StyledOcticon.js +1 -1
- package/lib-esm/SubNav.js +3 -3
- package/lib-esm/TextInputWithTokens.d.ts +2 -1
- package/lib-esm/ThemeProvider.d.ts +1 -0
- package/lib-esm/ThemeProvider.js +17 -4
- package/lib-esm/Timeline.js +4 -4
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/AvatarToken.js +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/Token/TokenBase.js +1 -1
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/drafts.d.ts +1 -0
- package/lib-esm/drafts.js +2 -1
- package/package.json +14 -8
- package/CHANGELOG.md +0 -992
- 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,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;
|
@@ -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;
|