@primer/react 37.7.0 → 37.7.1
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 +6 -0
- package/dist/browser.esm.js +1 -1
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +1 -1
- package/dist/browser.umd.js.map +1 -1
- package/dist/components.css +3 -3
- package/lib/ButtonGroup/ButtonGroup-3cb83367.css +2 -0
- package/lib/ButtonGroup/ButtonGroup-3cb83367.css.map +1 -0
- package/lib/ButtonGroup/ButtonGroup.d.ts +13 -7
- package/lib/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/lib/ButtonGroup/ButtonGroup.js +19 -16
- package/lib/ButtonGroup/ButtonGroup.module.css.js +1 -1
- package/lib-esm/ButtonGroup/ButtonGroup-3cb83367.css +2 -0
- package/lib-esm/ButtonGroup/ButtonGroup-3cb83367.css.map +1 -0
- package/lib-esm/ButtonGroup/ButtonGroup.d.ts +13 -7
- package/lib-esm/ButtonGroup/ButtonGroup.js +18 -16
- package/lib-esm/ButtonGroup/ButtonGroup.module.css.js +1 -1
- package/package.json +1 -1
- package/lib/ButtonGroup/ButtonGroup-10e26ea3.css +0 -2
- package/lib/ButtonGroup/ButtonGroup-10e26ea3.css.map +0 -1
- package/lib-esm/ButtonGroup/ButtonGroup-10e26ea3.css +0 -2
- package/lib-esm/ButtonGroup/ButtonGroup-10e26ea3.css.map +0 -1
package/dist/components.css
CHANGED
|
@@ -2609,18 +2609,18 @@ body[data-page-layout-dragging='true'] * {
|
|
|
2609
2609
|
vertical-align: middle;
|
|
2610
2610
|
isolation: isolate;
|
|
2611
2611
|
|
|
2612
|
-
& > *:not([data-loading-wrapper])
|
|
2612
|
+
& > *:not([data-loading-wrapper]) {
|
|
2613
2613
|
/* stylelint-disable-next-line primer/spacing */
|
|
2614
2614
|
margin-inline-end: -1px;
|
|
2615
2615
|
position: relative;
|
|
2616
2616
|
border-radius: 0;
|
|
2617
2617
|
|
|
2618
|
-
&:first-
|
|
2618
|
+
&:first-child {
|
|
2619
2619
|
border-top-left-radius: var(--borderRadius-medium);
|
|
2620
2620
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
2621
2621
|
}
|
|
2622
2622
|
|
|
2623
|
-
&:last-
|
|
2623
|
+
&:last-child {
|
|
2624
2624
|
border-top-right-radius: var(--borderRadius-medium);
|
|
2625
2625
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
2626
2626
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
|
|
2
|
+
/*# sourceMappingURL=ButtonGroup-3cb83367.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,gEAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,iFAEE,4DAAqD,CADrD,yDAEF,CAEA,gFAEE,6DAAsD,CADtD,0DAEF,CAEA,kOAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-3cb83367.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n vertical-align: middle;\n isolation: isolate;\n\n & > *:not([data-loading-wrapper]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n /* if child is loading button */\n [data-loading-wrapper] {\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n }\n\n [data-loading-wrapper] > * {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n}\n"]}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentProps } from '../utils/types';
|
|
1
3
|
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} &
|
|
4
|
+
declare const StyledButtonGroup: React.ForwardRefExoticComponent<Omit<{
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
[x: number]: any;
|
|
7
|
+
[x: symbol]: any;
|
|
8
|
+
} & {
|
|
9
|
+
theme?: any;
|
|
10
|
+
} & {
|
|
11
|
+
as?: string | React.ComponentType<any> | undefined;
|
|
12
|
+
forwardedAs?: string | React.ComponentType<any> | undefined;
|
|
13
|
+
}, "ref"> & React.RefAttributes<unknown>>;
|
|
14
|
+
export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>;
|
|
9
15
|
declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
|
|
10
16
|
export default ButtonGroup;
|
|
11
17
|
//# sourceMappingURL=ButtonGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,QAAA,MAAM,iBAAiB;;;;;;;;;yCA+DtB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAEvE,QAAA,MAAM,WAAW,EA0BX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}
|
|
@@ -1,26 +1,37 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var styled = require('styled-components');
|
|
3
4
|
var React = require('react');
|
|
5
|
+
var constants = require('../constants.js');
|
|
6
|
+
var sx = require('../sx.js');
|
|
4
7
|
var ButtonGroup_module = require('./ButtonGroup.module.css.js');
|
|
8
|
+
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
|
|
5
9
|
var clsx = require('clsx');
|
|
10
|
+
require('../FeatureFlags/FeatureFlags.js');
|
|
11
|
+
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
|
|
12
|
+
require('../FeatureFlags/DefaultFeatureFlags.js');
|
|
6
13
|
var useFocusZone = require('../hooks/useFocusZone.js');
|
|
7
14
|
var useProvidedRefOrCreate = require('../hooks/useProvidedRefOrCreate.js');
|
|
8
15
|
require('@primer/behaviors/utils');
|
|
9
16
|
var behaviors = require('@primer/behaviors');
|
|
10
|
-
var defaultSxProp = require('../utils/defaultSxProp.js');
|
|
11
|
-
var Box = require('../Box/Box.js');
|
|
12
17
|
|
|
13
18
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
19
|
|
|
20
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
15
21
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
16
22
|
|
|
17
23
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
24
|
+
const StyledButtonGroup = toggleStyledComponent.toggleStyledComponent('primer_react_css_modules_ga', 'div', styled__default.default.div.withConfig({
|
|
25
|
+
displayName: "ButtonGroup__StyledButtonGroup",
|
|
26
|
+
componentId: "sc-1gxhls1-0"
|
|
27
|
+
})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{z-index:1;}}[data-loading-wrapper]{:first-child{button,a{border-top-left-radius:", ";border-bottom-left-radius:", ";}}:last-child{button,a{border-top-right-radius:", ";border-bottom-right-radius:", ";}}}[data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;:focus,:active,:hover{z-index:1;}}", ";"], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx.default));
|
|
18
28
|
const ButtonGroup = /*#__PURE__*/React__default.default.forwardRef(function ButtonGroup({
|
|
29
|
+
children,
|
|
19
30
|
className,
|
|
20
31
|
role,
|
|
21
|
-
sx,
|
|
22
32
|
...rest
|
|
23
33
|
}, forwardRef) {
|
|
34
|
+
const enabled = useFeatureFlag.useFeatureFlag('primer_react_css_modules_ga');
|
|
24
35
|
const buttonRef = useProvidedRefOrCreate.useProvidedRefOrCreate(forwardRef);
|
|
25
36
|
useFocusZone.useFocusZone({
|
|
26
37
|
containerRef: buttonRef,
|
|
@@ -28,21 +39,13 @@ const ButtonGroup = /*#__PURE__*/React__default.default.forwardRef(function Butt
|
|
|
28
39
|
bindKeys: behaviors.FocusKeys.ArrowHorizontal,
|
|
29
40
|
focusOutBehavior: 'wrap'
|
|
30
41
|
});
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/React__default.default.createElement(Box, _extends({
|
|
33
|
-
as: "div",
|
|
34
|
-
className: clsx.clsx(className, ButtonGroup_module.ButtonGroup),
|
|
35
|
-
role: role
|
|
36
|
-
}, rest, {
|
|
37
|
-
sx: sx,
|
|
38
|
-
ref: buttonRef
|
|
39
|
-
}));
|
|
40
|
-
}
|
|
41
|
-
return /*#__PURE__*/React__default.default.createElement("div", _extends({
|
|
42
|
+
return /*#__PURE__*/React__default.default.createElement(StyledButtonGroup, _extends({
|
|
42
43
|
ref: buttonRef,
|
|
43
|
-
className: clsx.clsx(className,
|
|
44
|
+
className: clsx.clsx(className, {
|
|
45
|
+
[ButtonGroup_module.ButtonGroup]: enabled
|
|
46
|
+
}),
|
|
44
47
|
role: role
|
|
45
|
-
}, rest));
|
|
48
|
+
}, rest), children);
|
|
46
49
|
});
|
|
47
50
|
ButtonGroup.displayName = 'ButtonGroup';
|
|
48
51
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper])):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
|
|
2
|
+
/*# sourceMappingURL=ButtonGroup-3cb83367.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,gEAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,iFAEE,4DAAqD,CADrD,yDAEF,CAEA,gFAEE,6DAAsD,CADtD,0DAEF,CAEA,kOAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-3cb83367.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n vertical-align: middle;\n isolation: isolate;\n\n & > *:not([data-loading-wrapper]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n /* if child is loading button */\n [data-loading-wrapper] {\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n }\n\n [data-loading-wrapper] > * {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n}\n"]}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentProps } from '../utils/types';
|
|
1
3
|
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} &
|
|
4
|
+
declare const StyledButtonGroup: React.ForwardRefExoticComponent<Omit<{
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
[x: number]: any;
|
|
7
|
+
[x: symbol]: any;
|
|
8
|
+
} & {
|
|
9
|
+
theme?: any;
|
|
10
|
+
} & {
|
|
11
|
+
as?: string | React.ComponentType<any> | undefined;
|
|
12
|
+
forwardedAs?: string | React.ComponentType<any> | undefined;
|
|
13
|
+
}, "ref"> & React.RefAttributes<unknown>>;
|
|
14
|
+
export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>;
|
|
9
15
|
declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
|
|
10
16
|
export default ButtonGroup;
|
|
11
17
|
//# sourceMappingURL=ButtonGroup.d.ts.map
|
|
@@ -1,20 +1,30 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
1
2
|
import React from 'react';
|
|
3
|
+
import { get } from '../constants.js';
|
|
4
|
+
import sx from '../sx.js';
|
|
2
5
|
import classes from './ButtonGroup.module.css.js';
|
|
6
|
+
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
|
|
3
7
|
import { clsx } from 'clsx';
|
|
8
|
+
import '../FeatureFlags/FeatureFlags.js';
|
|
9
|
+
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
10
|
+
import '../FeatureFlags/DefaultFeatureFlags.js';
|
|
4
11
|
import { useFocusZone } from '../hooks/useFocusZone.js';
|
|
5
12
|
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
|
|
6
13
|
import '@primer/behaviors/utils';
|
|
7
14
|
import { FocusKeys } from '@primer/behaviors';
|
|
8
|
-
import { defaultSxProp } from '../utils/defaultSxProp.js';
|
|
9
|
-
import Box from '../Box/Box.js';
|
|
10
15
|
|
|
11
16
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
17
|
+
const StyledButtonGroup = toggleStyledComponent('primer_react_css_modules_ga', 'div', styled.div.withConfig({
|
|
18
|
+
displayName: "ButtonGroup__StyledButtonGroup",
|
|
19
|
+
componentId: "sc-1gxhls1-0"
|
|
20
|
+
})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{z-index:1;}}[data-loading-wrapper]{:first-child{button,a{border-top-left-radius:", ";border-bottom-left-radius:", ";}}:last-child{button,a{border-top-right-radius:", ";border-bottom-right-radius:", ";}}}[data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;:focus,:active,:hover{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx));
|
|
12
21
|
const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup({
|
|
22
|
+
children,
|
|
13
23
|
className,
|
|
14
24
|
role,
|
|
15
|
-
sx,
|
|
16
25
|
...rest
|
|
17
26
|
}, forwardRef) {
|
|
27
|
+
const enabled = useFeatureFlag('primer_react_css_modules_ga');
|
|
18
28
|
const buttonRef = useProvidedRefOrCreate(forwardRef);
|
|
19
29
|
useFocusZone({
|
|
20
30
|
containerRef: buttonRef,
|
|
@@ -22,21 +32,13 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup({
|
|
|
22
32
|
bindKeys: FocusKeys.ArrowHorizontal,
|
|
23
33
|
focusOutBehavior: 'wrap'
|
|
24
34
|
});
|
|
25
|
-
|
|
26
|
-
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
27
|
-
as: "div",
|
|
28
|
-
className: clsx(className, classes.ButtonGroup),
|
|
29
|
-
role: role
|
|
30
|
-
}, rest, {
|
|
31
|
-
sx: sx,
|
|
32
|
-
ref: buttonRef
|
|
33
|
-
}));
|
|
34
|
-
}
|
|
35
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
35
|
+
return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
|
|
36
36
|
ref: buttonRef,
|
|
37
|
-
className: clsx(className,
|
|
37
|
+
className: clsx(className, {
|
|
38
|
+
[classes.ButtonGroup]: enabled
|
|
39
|
+
}),
|
|
38
40
|
role: role
|
|
39
|
-
}, rest));
|
|
41
|
+
}, rest), children);
|
|
40
42
|
});
|
|
41
43
|
ButtonGroup.displayName = 'ButtonGroup';
|
|
42
44
|
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):first-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):last-of-type{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
|
|
2
|
-
/*# sourceMappingURL=ButtonGroup-10e26ea3.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,6EAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,gGAEE,4DAAqD,CADrD,yDAEF,CAEA,+FAEE,6DAAsD,CADtD,0DAEF,CAEA,yQAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-10e26ea3.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n vertical-align: middle;\n isolation: isolate;\n\n & > *:not([data-loading-wrapper]):is(button, a) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:first-of-type {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n &:last-of-type {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n /* if child is loading button */\n [data-loading-wrapper] {\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n }\n\n [data-loading-wrapper] > * {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n}\n"]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-ButtonGroup-ButtonGroup-vcMeG{display:inline-flex;isolation:isolate;vertical-align:middle}.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a){border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):first-of-type{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):last-of-type{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG>:not([data-loading-wrapper]):is(button,a)):hover{z-index:1}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):first-child button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child a,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]):last-child button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*{border-radius:0;margin-inline-end:-1px;position:relative}:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):active,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):focus,:is(.prc-ButtonGroup-ButtonGroup-vcMeG [data-loading-wrapper]>*):hover{z-index:1}
|
|
2
|
-
/*# sourceMappingURL=ButtonGroup-10e26ea3.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ButtonGroup/ButtonGroup.module.css"],"names":[],"mappings":"AAAA,mCACE,mBAAoB,CAEpB,iBAAkB,CADlB,qBAyDF,CAtDE,6EAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAkBF,CAfE,gGAEE,4DAAqD,CADrD,yDAEF,CAEA,+FAEE,6DAAsD,CADtD,0DAEF,CAEA,yQAGE,SACF,CAME,+JAGE,4DAAqD,CADrD,yDAEF,CAIA,6JAGE,6DAAsD,CADtD,0DAEF,CAIJ,4DAIE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,sNAGE,SACF","file":"ButtonGroup-10e26ea3.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n vertical-align: middle;\n isolation: isolate;\n\n & > *:not([data-loading-wrapper]):is(button, a) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:first-of-type {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n &:last-of-type {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n /* if child is loading button */\n [data-loading-wrapper] {\n &:first-child {\n button,\n a {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n button,\n a {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n }\n }\n\n [data-loading-wrapper] > * {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n}\n"]}
|