@primer/components 0.0.0-20211016233521 → 0.0.0-2021101703333
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 +5 -1
- package/dist/browser.esm.js +5 -7
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +5 -7
- package/dist/browser.umd.js.map +1 -1
- package/lib/Dialog/Dialog.d.ts +5 -6
- package/lib/Dialog/Dialog.js +13 -7
- package/lib-esm/Dialog/Dialog.d.ts +5 -6
- package/lib-esm/Dialog/Dialog.js +8 -8
- package/package.json +1 -1
package/lib/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonProps } from '../Button';
|
|
3
|
-
import { SxProp } from '../sx';
|
|
4
3
|
/**
|
|
5
4
|
* Props that characterize a button to be rendered into the footer of
|
|
6
5
|
* a Dialog.
|
|
@@ -148,13 +147,13 @@ export declare type DialogHeight = keyof typeof heightMap;
|
|
|
148
147
|
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
|
|
149
148
|
children?: React.ReactNode;
|
|
150
149
|
} & React.RefAttributes<HTMLDivElement>> & {
|
|
151
|
-
Header: import("styled-components").StyledComponent<"div", any,
|
|
150
|
+
Header: import("styled-components").StyledComponent<"div", any, {
|
|
152
151
|
as: string;
|
|
153
152
|
}, "as">;
|
|
154
|
-
Title: import("styled-components").StyledComponent<"div", any,
|
|
155
|
-
Subtitle: import("styled-components").StyledComponent<"div", any,
|
|
156
|
-
Body: import("styled-components").StyledComponent<"div", any,
|
|
157
|
-
Footer: import("styled-components").StyledComponent<"div", any,
|
|
153
|
+
Title: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
154
|
+
Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
155
|
+
Body: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
156
|
+
Footer: import("styled-components").StyledComponent<"div", any, {
|
|
158
157
|
as: string;
|
|
159
158
|
}, "as">;
|
|
160
159
|
Buttons: React.FC<{
|
package/lib/Dialog/Dialog.js
CHANGED
|
@@ -68,7 +68,7 @@ const widthMap = {
|
|
|
68
68
|
const StyledDialog = _styledComponents.default.div.withConfig({
|
|
69
69
|
displayName: "Dialog__StyledDialog",
|
|
70
70
|
componentId: "sc-11pkgky-1"
|
|
71
|
-
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"
|
|
71
|
+
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('shadows.overlay.shadow'), props => {
|
|
72
72
|
var _props$width;
|
|
73
73
|
|
|
74
74
|
return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
|
|
@@ -76,7 +76,7 @@ const StyledDialog = _styledComponents.default.div.withConfig({
|
|
|
76
76
|
var _props$height;
|
|
77
77
|
|
|
78
78
|
return heightMap[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 'auto'];
|
|
79
|
-
}, ANIMATION_DURATION, (0, _constants.get)('animation.easeOutCubic'),
|
|
79
|
+
}, ANIMATION_DURATION, (0, _constants.get)('animation.easeOutCubic'), _sx.default);
|
|
80
80
|
|
|
81
81
|
const DefaultHeader = ({
|
|
82
82
|
dialogLabelId,
|
|
@@ -189,30 +189,36 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
|
|
|
189
189
|
});
|
|
190
190
|
|
|
191
191
|
_Dialog.displayName = 'Dialog';
|
|
192
|
-
|
|
192
|
+
|
|
193
|
+
const Header = _styledComponents.default.div.attrs({
|
|
193
194
|
as: 'header'
|
|
194
195
|
}).withConfig({
|
|
195
196
|
displayName: "Dialog__Header",
|
|
196
197
|
componentId: "sc-11pkgky-2"
|
|
197
198
|
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'));
|
|
198
|
-
|
|
199
|
+
|
|
200
|
+
const Title = _styledComponents.default.div.withConfig({
|
|
199
201
|
displayName: "Dialog__Title",
|
|
200
202
|
componentId: "sc-11pkgky-3"
|
|
201
203
|
})(["font-size:", ";font-weight:", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'));
|
|
202
|
-
|
|
204
|
+
|
|
205
|
+
const Subtitle = _styledComponents.default.div.withConfig({
|
|
203
206
|
displayName: "Dialog__Subtitle",
|
|
204
207
|
componentId: "sc-11pkgky-4"
|
|
205
208
|
})(["font-size:", ";margin-top:", ";color:", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'));
|
|
206
|
-
|
|
209
|
+
|
|
210
|
+
const Body = _styledComponents.default.div.withConfig({
|
|
207
211
|
displayName: "Dialog__Body",
|
|
208
212
|
componentId: "sc-11pkgky-5"
|
|
209
213
|
})(["flex-grow:1;overflow:auto;padding:", ";"], (0, _constants.get)('space.3'));
|
|
210
|
-
|
|
214
|
+
|
|
215
|
+
const Footer = _styledComponents.default.div.attrs({
|
|
211
216
|
as: 'footer'
|
|
212
217
|
}).withConfig({
|
|
213
218
|
displayName: "Dialog__Footer",
|
|
214
219
|
componentId: "sc-11pkgky-6"
|
|
215
220
|
})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'));
|
|
221
|
+
|
|
216
222
|
const buttonTypes = {
|
|
217
223
|
normal: _Button.default,
|
|
218
224
|
primary: _Button.ButtonPrimary,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonProps } from '../Button';
|
|
3
|
-
import { SxProp } from '../sx';
|
|
4
3
|
/**
|
|
5
4
|
* Props that characterize a button to be rendered into the footer of
|
|
6
5
|
* a Dialog.
|
|
@@ -148,13 +147,13 @@ export declare type DialogHeight = keyof typeof heightMap;
|
|
|
148
147
|
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
|
|
149
148
|
children?: React.ReactNode;
|
|
150
149
|
} & React.RefAttributes<HTMLDivElement>> & {
|
|
151
|
-
Header: import("styled-components").StyledComponent<"div", any,
|
|
150
|
+
Header: import("styled-components").StyledComponent<"div", any, {
|
|
152
151
|
as: string;
|
|
153
152
|
}, "as">;
|
|
154
|
-
Title: import("styled-components").StyledComponent<"div", any,
|
|
155
|
-
Subtitle: import("styled-components").StyledComponent<"div", any,
|
|
156
|
-
Body: import("styled-components").StyledComponent<"div", any,
|
|
157
|
-
Footer: import("styled-components").StyledComponent<"div", any,
|
|
153
|
+
Title: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
154
|
+
Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
155
|
+
Body: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
156
|
+
Footer: import("styled-components").StyledComponent<"div", any, {
|
|
158
157
|
as: string;
|
|
159
158
|
}, "as">;
|
|
160
159
|
Buttons: React.FC<{
|
package/lib-esm/Dialog/Dialog.js
CHANGED
|
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import Button, { ButtonPrimary, ButtonDanger } from '../Button';
|
|
6
6
|
import Box from '../Box';
|
|
7
|
-
import { get
|
|
7
|
+
import { get } from '../constants';
|
|
8
8
|
import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
|
|
9
9
|
import { useFocusTrap } from '../hooks/useFocusTrap';
|
|
10
10
|
import sx from '../sx';
|
|
@@ -39,7 +39,7 @@ const widthMap = {
|
|
|
39
39
|
const StyledDialog = styled.div.withConfig({
|
|
40
40
|
displayName: "Dialog__StyledDialog",
|
|
41
41
|
componentId: "sc-11pkgky-1"
|
|
42
|
-
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"
|
|
42
|
+
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
|
|
43
43
|
var _props$width;
|
|
44
44
|
|
|
45
45
|
return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
|
|
@@ -47,7 +47,7 @@ const StyledDialog = styled.div.withConfig({
|
|
|
47
47
|
var _props$height;
|
|
48
48
|
|
|
49
49
|
return heightMap[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 'auto'];
|
|
50
|
-
}, ANIMATION_DURATION, get('animation.easeOutCubic'),
|
|
50
|
+
}, ANIMATION_DURATION, get('animation.easeOutCubic'), sx);
|
|
51
51
|
|
|
52
52
|
const DefaultHeader = ({
|
|
53
53
|
dialogLabelId,
|
|
@@ -160,25 +160,25 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
160
160
|
});
|
|
161
161
|
|
|
162
162
|
_Dialog.displayName = 'Dialog';
|
|
163
|
-
const Header = styled
|
|
163
|
+
const Header = styled.div.attrs({
|
|
164
164
|
as: 'header'
|
|
165
165
|
}).withConfig({
|
|
166
166
|
displayName: "Dialog__Header",
|
|
167
167
|
componentId: "sc-11pkgky-2"
|
|
168
168
|
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.default'), get('space.2'));
|
|
169
|
-
const Title = styled
|
|
169
|
+
const Title = styled.div.withConfig({
|
|
170
170
|
displayName: "Dialog__Title",
|
|
171
171
|
componentId: "sc-11pkgky-3"
|
|
172
172
|
})(["font-size:", ";font-weight:", ";"], get('fontSizes.1'), get('fontWeights.bold'));
|
|
173
|
-
const Subtitle = styled
|
|
173
|
+
const Subtitle = styled.div.withConfig({
|
|
174
174
|
displayName: "Dialog__Subtitle",
|
|
175
175
|
componentId: "sc-11pkgky-4"
|
|
176
176
|
})(["font-size:", ";margin-top:", ";color:", ";"], get('fontSizes.0'), get('space.1'), get('colors.fg.muted'));
|
|
177
|
-
const Body = styled
|
|
177
|
+
const Body = styled.div.withConfig({
|
|
178
178
|
displayName: "Dialog__Body",
|
|
179
179
|
componentId: "sc-11pkgky-5"
|
|
180
180
|
})(["flex-grow:1;overflow:auto;padding:", ";"], get('space.3'));
|
|
181
|
-
const Footer = styled
|
|
181
|
+
const Footer = styled.div.attrs({
|
|
182
182
|
as: 'footer'
|
|
183
183
|
}).withConfig({
|
|
184
184
|
displayName: "Dialog__Footer",
|