@primer/components 0.0.0-2021103205322 → 0.0.0-2021103213523
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 +2 -2
- package/dist/browser.esm.js +2 -8
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -8
- package/dist/browser.umd.js.map +1 -1
- package/lib/LabelGroup.d.ts +2 -1
- package/lib/LabelGroup.js +1 -1
- package/lib/Popover.d.ts +4 -5
- package/lib/Popover.js +4 -5
- package/lib-esm/LabelGroup.d.ts +2 -1
- package/lib-esm/LabelGroup.js +2 -2
- package/lib-esm/Popover.d.ts +4 -5
- package/lib-esm/Popover.js +4 -5
- package/package.json +1 -1
package/lib/LabelGroup.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { SystemCommonProps } from './constants';
|
|
1
2
|
import { SxProp } from './sx';
|
|
2
3
|
import { ComponentProps } from './utils/types';
|
|
3
|
-
declare const LabelGroup: import("styled-components").StyledComponent<"span", any, SxProp, never>;
|
|
4
|
+
declare const LabelGroup: import("styled-components").StyledComponent<"span", any, SystemCommonProps & SxProp, never>;
|
|
4
5
|
export declare type LabelGroupProps = ComponentProps<typeof LabelGroup>;
|
|
5
6
|
export default LabelGroup;
|
package/lib/LabelGroup.js
CHANGED
|
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
const LabelGroup = _styledComponents.default.span.withConfig({
|
|
17
17
|
displayName: "LabelGroup",
|
|
18
18
|
componentId: "k6k3qa-0"
|
|
19
|
-
})(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], (0, _constants.get)('space.1'), _sx.default);
|
|
19
|
+
})(["", " & *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], _constants.COMMON, (0, _constants.get)('space.1'), _sx.default);
|
|
20
20
|
|
|
21
21
|
var _default = LabelGroup;
|
|
22
22
|
exports.default = _default;
|
package/lib/Popover.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="hoist-non-react-statics" />
|
|
2
|
-
import { SystemCommonProps, SystemLayoutProps, SystemPositionProps } from './constants';
|
|
3
2
|
import { SxProp } from './sx';
|
|
4
3
|
import { ComponentProps } from './utils/types';
|
|
5
4
|
declare type CaretPosition = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
|
|
@@ -7,15 +6,15 @@ declare const Popover: import("styled-components").StyledComponent<"div", any, {
|
|
|
7
6
|
caret?: CaretPosition | undefined;
|
|
8
7
|
relative?: boolean | undefined;
|
|
9
8
|
open?: boolean | undefined;
|
|
10
|
-
} &
|
|
11
|
-
declare const PopoverContent: import("styled-components").StyledComponent<"div", any,
|
|
9
|
+
} & SxProp, never>;
|
|
10
|
+
declare const PopoverContent: import("styled-components").StyledComponent<"div", any, SxProp, never>;
|
|
12
11
|
export declare type PopoverProps = ComponentProps<typeof Popover>;
|
|
13
12
|
export declare type PopoverContentProps = ComponentProps<typeof PopoverContent>;
|
|
14
13
|
declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
|
|
15
14
|
caret?: CaretPosition | undefined;
|
|
16
15
|
relative?: boolean | undefined;
|
|
17
16
|
open?: boolean | undefined;
|
|
18
|
-
} &
|
|
19
|
-
Content: import("styled-components").StyledComponent<"div", any,
|
|
17
|
+
} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
|
|
18
|
+
Content: import("styled-components").StyledComponent<"div", any, SxProp, never>;
|
|
20
19
|
};
|
|
21
20
|
export default _default;
|
package/lib/Popover.js
CHANGED
|
@@ -9,8 +9,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
9
9
|
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
11
|
|
|
12
|
-
var _Box = _interopRequireDefault(require("./Box"));
|
|
13
|
-
|
|
14
12
|
var _constants = require("./constants");
|
|
15
13
|
|
|
16
14
|
var _sx = _interopRequireDefault(require("./sx"));
|
|
@@ -27,12 +25,13 @@ const Popover = _styledComponents.default.div.attrs(({
|
|
|
27
25
|
}).withConfig({
|
|
28
26
|
displayName: "Popover",
|
|
29
27
|
componentId: "sc-1nxygy2-0"
|
|
30
|
-
})(["position:", ";z-index:100;display:", ";", ";"
|
|
28
|
+
})(["position:", ";z-index:100;display:", ";", ";"], props => props.relative ? 'relative' : 'absolute', props => props.open ? 'block' : 'none', _sx.default);
|
|
31
29
|
|
|
32
|
-
const PopoverContent =
|
|
30
|
+
const PopoverContent = _styledComponents.default.div.withConfig({
|
|
33
31
|
displayName: "Popover__PopoverContent",
|
|
34
32
|
componentId: "sc-1nxygy2-1"
|
|
35
|
-
})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", "
|
|
33
|
+
})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('space.4'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, Popover, (0, _constants.get)('space.4'), (0, _constants.get)('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.canvas.overlay'), Popover, Popover, (0, _constants.get)('space.4'), Popover, Popover, (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), _sx.default);
|
|
34
|
+
|
|
36
35
|
Popover.defaultProps = {
|
|
37
36
|
caret: 'top'
|
|
38
37
|
};
|
package/lib-esm/LabelGroup.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { SystemCommonProps } from './constants';
|
|
1
2
|
import { SxProp } from './sx';
|
|
2
3
|
import { ComponentProps } from './utils/types';
|
|
3
|
-
declare const LabelGroup: import("styled-components").StyledComponent<"span", any, SxProp, never>;
|
|
4
|
+
declare const LabelGroup: import("styled-components").StyledComponent<"span", any, SystemCommonProps & SxProp, never>;
|
|
4
5
|
export declare type LabelGroupProps = ComponentProps<typeof LabelGroup>;
|
|
5
6
|
export default LabelGroup;
|
package/lib-esm/LabelGroup.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { get } from './constants';
|
|
2
|
+
import { COMMON, get } from './constants';
|
|
3
3
|
import sx from './sx';
|
|
4
4
|
const LabelGroup = styled.span.withConfig({
|
|
5
5
|
displayName: "LabelGroup",
|
|
6
6
|
componentId: "k6k3qa-0"
|
|
7
|
-
})(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], get('space.1'), sx);
|
|
7
|
+
})(["", " & *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], COMMON, get('space.1'), sx);
|
|
8
8
|
export default LabelGroup;
|
package/lib-esm/Popover.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="hoist-non-react-statics" />
|
|
2
|
-
import { SystemCommonProps, SystemLayoutProps, SystemPositionProps } from './constants';
|
|
3
2
|
import { SxProp } from './sx';
|
|
4
3
|
import { ComponentProps } from './utils/types';
|
|
5
4
|
declare type CaretPosition = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
|
|
@@ -7,15 +6,15 @@ declare const Popover: import("styled-components").StyledComponent<"div", any, {
|
|
|
7
6
|
caret?: CaretPosition | undefined;
|
|
8
7
|
relative?: boolean | undefined;
|
|
9
8
|
open?: boolean | undefined;
|
|
10
|
-
} &
|
|
11
|
-
declare const PopoverContent: import("styled-components").StyledComponent<"div", any,
|
|
9
|
+
} & SxProp, never>;
|
|
10
|
+
declare const PopoverContent: import("styled-components").StyledComponent<"div", any, SxProp, never>;
|
|
12
11
|
export declare type PopoverProps = ComponentProps<typeof Popover>;
|
|
13
12
|
export declare type PopoverContentProps = ComponentProps<typeof PopoverContent>;
|
|
14
13
|
declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
|
|
15
14
|
caret?: CaretPosition | undefined;
|
|
16
15
|
relative?: boolean | undefined;
|
|
17
16
|
open?: boolean | undefined;
|
|
18
|
-
} &
|
|
19
|
-
Content: import("styled-components").StyledComponent<"div", any,
|
|
17
|
+
} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
|
|
18
|
+
Content: import("styled-components").StyledComponent<"div", any, SxProp, never>;
|
|
20
19
|
};
|
|
21
20
|
export default _default;
|
package/lib-esm/Popover.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import classnames from 'classnames';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import
|
|
4
|
-
import { COMMON, get, LAYOUT, POSITION } from './constants';
|
|
3
|
+
import { get } from './constants';
|
|
5
4
|
import sx from './sx';
|
|
6
5
|
const Popover = styled.div.attrs(({
|
|
7
6
|
className,
|
|
@@ -13,11 +12,11 @@ const Popover = styled.div.attrs(({
|
|
|
13
12
|
}).withConfig({
|
|
14
13
|
displayName: "Popover",
|
|
15
14
|
componentId: "sc-1nxygy2-0"
|
|
16
|
-
})(["position:", ";z-index:100;display:", ";", ";"
|
|
17
|
-
const PopoverContent = styled
|
|
15
|
+
})(["position:", ";z-index:100;display:", ";", ";"], props => props.relative ? 'relative' : 'absolute', props => props.open ? 'block' : 'none', sx);
|
|
16
|
+
const PopoverContent = styled.div.withConfig({
|
|
18
17
|
displayName: "Popover__PopoverContent",
|
|
19
18
|
componentId: "sc-1nxygy2-1"
|
|
20
|
-
})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", "
|
|
19
|
+
})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], get('colors.border.default'), get('radii.2'), get('space.4'), get('colors.canvas.overlay'), get('space.3'), get('space.2'), get('colors.border.default'), get('space.2'), get('colors.canvas.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, Popover, Popover, get('space.4'), get('space.4'), Popover, Popover, Popover, Popover, Popover, Popover, get('space.2'), get('space.2'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, Popover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), Popover, Popover, get('space.4'), Popover, Popover, get('space.3'), get('space.3'), sx);
|
|
21
20
|
Popover.defaultProps = {
|
|
22
21
|
caret: 'top'
|
|
23
22
|
};
|