@atlaskit/media-avatar-picker 24.3.25 → 24.3.27

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/image-navigator/index.js +1 -1
  3. package/dist/cjs/image-navigator/styles.js +107 -17
  4. package/dist/cjs/image-placer/styles.js +1 -0
  5. package/dist/cjs/predefined-avatar-view/index.js +1 -1
  6. package/dist/cjs/predefined-avatar-view/styles.js +45 -5
  7. package/dist/cjs/styles.js +21 -4
  8. package/dist/es2019/image-navigator/index.js +1 -1
  9. package/dist/es2019/image-navigator/styles.js +104 -111
  10. package/dist/es2019/image-placer/styles.js +1 -0
  11. package/dist/es2019/predefined-avatar-view/index.js +1 -1
  12. package/dist/es2019/predefined-avatar-view/styles.js +44 -60
  13. package/dist/es2019/styles.js +21 -16
  14. package/dist/esm/image-navigator/index.js +1 -1
  15. package/dist/esm/image-navigator/styles.js +107 -16
  16. package/dist/esm/image-placer/styles.js +1 -0
  17. package/dist/esm/predefined-avatar-view/index.js +1 -1
  18. package/dist/esm/predefined-avatar-view/styles.js +46 -6
  19. package/dist/esm/styles.js +21 -4
  20. package/dist/types/styles.d.ts +4 -4
  21. package/dist/types-ts4.5/styles.d.ts +4 -4
  22. package/example-helpers/styles.ts +30 -34
  23. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/media-avatar-picker
2
2
 
3
+ ## 24.3.27
4
+
5
+ ### Patch Changes
6
+
7
+ - [#84563](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84563) [`8f8efba47b22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f8efba47b22) - a11y fix - updated heading markup
8
+
9
+ ## 24.3.26
10
+
11
+ ### Patch Changes
12
+
13
+ - [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
14
+
3
15
  ## 24.3.25
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/image-navigator/index.js CHANGED
@@ -205,7 +205,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
205
205
  onDrop: _this.onDrop
206
206
  }, isLoading ? (0, _react2.jsx)(_spinner.default, {
207
207
  size: "medium"
208
- }) : (0, _react2.jsx)("div", null, (0, _react2.jsx)("img", {
208
+ }) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("img", {
209
209
  id: "drag-zone-image",
210
210
  css: _styles.dragZoneImageStyles,
211
211
  src: dropZoneImageSrc,
package/dist/cjs/image-navigator/styles.js CHANGED
@@ -1,40 +1,130 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.sliderWrapperStyles = exports.sliderContainerStyles = exports.selectionBlockerStyles = exports.paddedBreakStyles = exports.imageUploaderStyles = exports.imageBgStyles = exports.fileInputStyles = exports.dragZoneTextStyles = exports.dragZoneStyles = exports.dragZoneImageStyles = exports.containerStyles = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
7
  var _react = require("@emotion/react");
10
8
  var _colors = require("@atlaskit/theme/colors");
11
9
  var _images = require("./images");
12
10
  var _layoutConst = require("../avatar-picker-dialog/layout-const");
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
14
- var imageBgStyles = exports.imageBgStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n left: 0;\n width: 256px;\n height: 256px;\n background: url('", "');\n border-radius: ", ";\n"])), _images.checkeredBg, "var(--ds-border-radius, 3px)");
15
- var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n position: relative;\n"])));
16
- var sliderContainerStyles = exports.sliderContainerStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n justify-content: center;\n display: flex;\n flex-direction: row;\n margin-top: ", ";\n\n input {\n box-sizing: content-box;\n padding: 0;\n }\n background-color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, #fff)");
17
- var fileInputStyles = exports.fileInputStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n"])));
18
- var imageUploaderStyles = exports.imageUploaderStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 0 ", " ", "\n ", ";\n"])), "var(--ds-space-150, 10px)", "var(--ds-space-250, 20px)", "var(--ds-space-150, 10px)");
19
- var spin = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n"])));
20
- var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n border-color: ", ";\n animation: ", " 8s linear infinite;\n"])), "var(--ds-border-information, #0e56c4)", spin);
11
+ var imageBgStyles = exports.imageBgStyles = (0, _react.css)({
12
+ position: 'absolute',
13
+ top: 0,
14
+ left: 0,
15
+ width: '256px',
16
+ height: '256px',
17
+ background: "url('".concat(_images.checkeredBg, "')"),
18
+ borderRadius: "var(--ds-border-radius, 3px)"
19
+ });
20
+ var containerStyles = exports.containerStyles = (0, _react.css)({
21
+ boxSizing: 'border-box',
22
+ '*, *::before, *::after': {
23
+ boxSizing: 'border-box'
24
+ },
25
+ position: 'relative'
26
+ });
27
+ var sliderContainerStyles = exports.sliderContainerStyles = (0, _react.css)({
28
+ alignItems: 'center',
29
+ justifyContent: 'center',
30
+ display: 'flex',
31
+ flexDirection: 'row',
32
+ marginTop: "var(--ds-space-100, 8px)",
33
+ input: {
34
+ boxSizing: 'content-box',
35
+ padding: 0
36
+ },
37
+ backgroundColor: "var(--ds-surface-overlay, #fff)"
38
+ });
39
+ var fileInputStyles = exports.fileInputStyles = (0, _react.css)({
40
+ display: 'none'
41
+ });
42
+ var imageUploaderStyles = exports.imageUploaderStyles = (0, _react.css)({
43
+ display: 'flex',
44
+ flexDirection: 'column',
45
+ justifyContent: 'center',
46
+ alignItems: 'center',
47
+ margin: "0 ".concat("var(--ds-space-150, 10px)", " ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-150, 10px)")
48
+ });
49
+ var spin = (0, _react.keyframes)({
50
+ from: {
51
+ transform: 'rotate(0deg)'
52
+ },
53
+ to: {
54
+ transform: 'rotate(360deg)'
55
+ }
56
+ });
57
+ var droppingAnimation = (0, _react.css)({
58
+ borderColor: "var(--ds-border-information, #0e56c4)",
59
+ animation: "".concat(spin, " 8s linear infinite")
60
+ });
21
61
  var getBorder = function getBorder(showBorder) {
22
62
  return "".concat(showBorder ? "2px dashed ".concat("var(--ds-border, #d0d6d0)") : 'none');
23
63
  };
24
64
  var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
25
- return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n\n &:after {\n ", "\n }\n "])), "var(--ds-background-information-hovered, #ddecfe)", droppingAnimation) : '';
65
+ return isDroppingFile ? (0, _react.css)({
66
+ backgroundColor: "var(--ds-background-information-hovered, #ddecfe)",
67
+ '&:after': droppingAnimation
68
+ }) : '';
26
69
  };
27
70
  var dragZoneStyles = exports.dragZoneStyles = function dragZoneStyles(props) {
28
- return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 200px;\n height: 200px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: ", ";\n position: relative;\n border-radius: 100%;\n transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n &::after {\n content: '';\n border: ", ";\n border-radius: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n ", ";\n"])), "var(--ds-space-200, 15px)", getBorder(props.showBorder), getDroppingAnimation(props.isDroppingFile));
71
+ return (0, _react.css)({
72
+ width: '200px',
73
+ height: '200px',
74
+ display: 'flex',
75
+ flexDirection: 'column',
76
+ alignItems: 'center',
77
+ justifyContent: 'center',
78
+ padding: "var(--ds-space-200, 15px)",
79
+ position: 'relative',
80
+ borderRadius: '100%',
81
+ transition: 'background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
82
+ '&::after': {
83
+ content: "''",
84
+ border: getBorder(props.showBorder),
85
+ borderRadius: '100%',
86
+ position: 'absolute',
87
+ top: 0,
88
+ left: 0,
89
+ width: '100%',
90
+ height: '100%',
91
+ transition: 'border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1)'
92
+ }
93
+ }, getDroppingAnimation(props.isDroppingFile));
29
94
  };
30
95
  dragZoneStyles.displayName = 'DragZone';
31
- var dragZoneImageStyles = exports.dragZoneImageStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: 100px;\n"])));
96
+ var dragZoneImageStyles = exports.dragZoneImageStyles = (0, _react.css)({
97
+ width: '100px'
98
+ });
32
99
  var getWidth = function getWidth(isFullSize) {
33
100
  return "".concat(isFullSize ? "width: calc(".concat(_layoutConst.AVATAR_DIALOG_WIDTH, " - ", "var(--ds-space-100, 8px)", " * 8)px") : 'width:auto');
34
101
  };
35
102
  var dragZoneTextStyles = exports.dragZoneTextStyles = function dragZoneTextStyles(props) {
36
- return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n color: ", ";\n ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), getWidth(props.isFullSize));
103
+ return (0, _react.css)({
104
+ textAlign: 'center',
105
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
106
+ }, getWidth(props.isFullSize));
37
107
  };
38
- var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n user-select: none;\n"])));
39
- var paddedBreakStyles = exports.paddedBreakStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", " !important;\n margin-bottom: ", ";\n"])), "var(--ds-space-100, 10px)", "var(--ds-space-100, 10px)");
40
- var sliderWrapperStyles = exports.sliderWrapperStyles = (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n width: 100%;\n\n .zoom_button svg {\n position: relative;\n left: ", ";\n }\n"])), "var(--ds-space-negative-025, -2px)");
108
+ var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)({
109
+ position: 'fixed',
110
+ left: 0,
111
+ top: 0,
112
+ right: 0,
113
+ bottom: 0,
114
+ backgroundColor: 'transparent',
115
+ userSelect: 'none'
116
+ });
117
+ var paddedBreakStyles = exports.paddedBreakStyles = (0, _react.css)({
118
+ marginTop: "var(--ds-space-100, 10px)".concat(" !important"),
119
+ marginBottom: "var(--ds-space-100, 10px)",
120
+ textAlign: 'center'
121
+ });
122
+ var sliderWrapperStyles = exports.sliderWrapperStyles = (0, _react.css)({
123
+ display: 'flex',
124
+ alignItems: 'center',
125
+ width: '100%',
126
+ '.zoom_button svg': {
127
+ position: 'relative',
128
+ left: "var(--ds-space-negative-025, -2px)"
129
+ }
130
+ });
package/dist/cjs/image-placer/styles.js CHANGED
@@ -19,6 +19,7 @@ var imagePlacerErrorWrapperStyles = exports.imagePlacerErrorWrapperStyles = (0,
19
19
  width: '100%',
20
20
  height: '100%',
21
21
  textAlign: 'center',
22
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
22
23
  paddingTop: '45%'
23
24
  });
24
25
  var EASING = exports.EASING = 0.15;
package/dist/cjs/predefined-avatar-view/index.js CHANGED
@@ -57,7 +57,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAva
57
57
  label: ""
58
58
  }),
59
59
  onClick: onGoBack
60
- }), (0, _react.jsx)("div", {
60
+ }), (0, _react.jsx)("h2", {
61
61
  className: "description"
62
62
  }, predefinedAvatarsText || (0, _react.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.default_avatars))), (0, _react.jsx)("div", {
63
63
  role: "radiogroup",
package/dist/cjs/predefined-avatar-view/styles.js CHANGED
@@ -1,13 +1,53 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.predefinedAvatarViewWrapperStyles = exports.largeAvatarImageStyles = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
7
  var _react = require("@emotion/react");
10
8
  var _styles = require("../styles");
11
- var _templateObject, _templateObject2;
12
- var largeAvatarImageStyles = exports.largeAvatarImageStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n width: 72px;\n height: 72px;\n"])), _styles.avatarImageStyles);
13
- var predefinedAvatarViewWrapperStyles = exports.predefinedAvatarViewWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .body {\n display: flex;\n flex-flow: row wrap;\n width: 353px;\n max-height: 294px;\n overflow-y: auto;\n\n padding: ", " 0 0;\n margin: 0;\n }\n\n input {\n ", "\n }\n\n input:checked + img {\n ", "\n }\n\n input:focus + img {\n ", "\n }\n\n label {\n padding-right: ", ";\n padding-left: ", ";\n padding-bottom: ", ";\n display: inline-flex;\n }\n\n .header {\n display: flex;\n align-items: center;\n\n padding-top: ", ";\n padding-bottom: ", ";\n\n .description {\n padding-left: ", ";\n }\n\n .back-button {\n width: 32px;\n height: 32px;\n border-radius: ", ";\n\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n }\n }\n"])), "var(--ds-space-100, 8px)", _styles.visuallyHiddenRadioStyles, _styles.selectedShadow, _styles.focusedShadow, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-border-radius-400, 16px)");
9
+ var largeAvatarImageStyles = exports.largeAvatarImageStyles = (0, _react.css)(_styles.avatarImageStyles, {
10
+ width: '72px',
11
+ height: '72px'
12
+ });
13
+ var predefinedAvatarViewWrapperStyles = exports.predefinedAvatarViewWrapperStyles = (0, _react.css)({
14
+ '.body': {
15
+ display: 'flex',
16
+ flexFlow: 'row wrap',
17
+ width: '353px',
18
+ maxHeight: '294px',
19
+ overflowY: 'auto',
20
+ padding: "var(--ds-space-100, 8px)".concat(" 0 0"),
21
+ margin: 0
22
+ },
23
+ input: _styles.visuallyHiddenRadioStyles,
24
+ 'input:checked + img': _styles.selectedShadow,
25
+ 'input:focus + img': _styles.focusedShadow,
26
+ label: {
27
+ paddingRight: "var(--ds-space-050, 4px)",
28
+ paddingLeft: "var(--ds-space-050, 4px)",
29
+ paddingBottom: "var(--ds-space-100, 8px)",
30
+ display: 'inline-flex'
31
+ },
32
+ '.header': {
33
+ display: 'flex',
34
+ alignItems: 'center',
35
+ paddingTop: "var(--ds-space-050, 4px)",
36
+ paddingBottom: "var(--ds-space-100, 8px)",
37
+ '.description': {
38
+ paddingLeft: "var(--ds-space-100, 8px)",
39
+ margin: 0,
40
+ fontSize: '14px',
41
+ fontWeight: 400
42
+ },
43
+ '.back-button': {
44
+ width: '32px',
45
+ height: '32px',
46
+ borderRadius: "var(--ds-border-radius-400, 16px)",
47
+ alignItems: 'center',
48
+ justifyContent: 'center',
49
+ margin: 0,
50
+ padding: 0
51
+ }
52
+ }
53
+ });
package/dist/cjs/styles.js CHANGED
@@ -4,8 +4,25 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.visuallyHiddenRadioStyles = exports.selectedShadow = exports.focusedShadow = exports.avatarImageStyles = void 0;
7
+ var _react = require("@emotion/react");
7
8
  var _colors = require("@atlaskit/theme/colors");
8
- var avatarImageStyles = exports.avatarImageStyles = "\n border-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n cursor: pointer;\n");
9
- var visuallyHiddenRadioStyles = exports.visuallyHiddenRadioStyles = "\n width: 1px;\n height: 1px;\n padding: 0;\n position: fixed;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n white-space: nowrap;\n";
10
- var selectedShadow = exports.selectedShadow = "box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"), ";");
11
- var focusedShadow = exports.focusedShadow = "box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")"), ";");
9
+ var avatarImageStyles = exports.avatarImageStyles = (0, _react.css)({
10
+ borderRadius: "var(--ds-border-radius-100, 3px)",
11
+ cursor: 'pointer'
12
+ });
13
+ var visuallyHiddenRadioStyles = exports.visuallyHiddenRadioStyles = (0, _react.css)({
14
+ width: '1px',
15
+ height: '1px',
16
+ padding: 0,
17
+ position: 'fixed',
18
+ border: 0,
19
+ clip: 'rect(1px, 1px, 1px, 1px)',
20
+ overflow: 'hidden',
21
+ whiteSpace: 'nowrap'
22
+ });
23
+ var selectedShadow = exports.selectedShadow = (0, _react.css)({
24
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"))
25
+ });
26
+ var focusedShadow = exports.focusedShadow = (0, _react.css)({
27
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
28
+ });
package/dist/es2019/image-navigator/index.js CHANGED
@@ -193,7 +193,7 @@ export class ImageNavigator extends Component {
193
193
  onDrop: this.onDrop
194
194
  }, isLoading ? jsx(Spinner, {
195
195
  size: "medium"
196
- }) : jsx("div", null, jsx("img", {
196
+ }) : jsx(React.Fragment, null, jsx("img", {
197
197
  id: "drag-zone-image",
198
198
  css: dragZoneImageStyles,
199
199
  src: dropZoneImageSrc,
package/dist/es2019/image-navigator/styles.js CHANGED
@@ -2,120 +2,113 @@ import { css, keyframes } from '@emotion/react';
2
2
  import { N200 } from '@atlaskit/theme/colors';
3
3
  import { checkeredBg } from './images';
4
4
  import { AVATAR_DIALOG_WIDTH } from '../avatar-picker-dialog/layout-const';
5
- export const imageBgStyles = css`
6
- position: absolute;
7
- top: 0;
8
- left: 0;
9
- width: 256px;
10
- height: 256px;
11
- background: url('${checkeredBg}');
12
- border-radius: ${"var(--ds-border-radius, 3px)"};
13
- `;
14
- export const containerStyles = css`
15
- box-sizing: border-box;
16
- *,
17
- *::before,
18
- *::after {
19
- box-sizing: border-box;
5
+ export const imageBgStyles = css({
6
+ position: 'absolute',
7
+ top: 0,
8
+ left: 0,
9
+ width: '256px',
10
+ height: '256px',
11
+ background: `url('${checkeredBg}')`,
12
+ borderRadius: "var(--ds-border-radius, 3px)"
13
+ });
14
+ export const containerStyles = css({
15
+ boxSizing: 'border-box',
16
+ '*, *::before, *::after': {
17
+ boxSizing: 'border-box'
18
+ },
19
+ position: 'relative'
20
+ });
21
+ export const sliderContainerStyles = css({
22
+ alignItems: 'center',
23
+ justifyContent: 'center',
24
+ display: 'flex',
25
+ flexDirection: 'row',
26
+ marginTop: "var(--ds-space-100, 8px)",
27
+ input: {
28
+ boxSizing: 'content-box',
29
+ padding: 0
30
+ },
31
+ backgroundColor: "var(--ds-surface-overlay, #fff)"
32
+ });
33
+ export const fileInputStyles = css({
34
+ display: 'none'
35
+ });
36
+ export const imageUploaderStyles = css({
37
+ display: 'flex',
38
+ flexDirection: 'column',
39
+ justifyContent: 'center',
40
+ alignItems: 'center',
41
+ margin: `0 ${"var(--ds-space-150, 10px)"} ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-150, 10px)"}`
42
+ });
43
+ const spin = keyframes({
44
+ from: {
45
+ transform: 'rotate(0deg)'
46
+ },
47
+ to: {
48
+ transform: 'rotate(360deg)'
20
49
  }
21
- position: relative;
22
- `;
23
- export const sliderContainerStyles = css`
24
- align-items: center;
25
- justify-content: center;
26
- display: flex;
27
- flex-direction: row;
28
- margin-top: ${"var(--ds-space-100, 8px)"};
29
-
30
- input {
31
- box-sizing: content-box;
32
- padding: 0;
33
- }
34
- background-color: ${"var(--ds-surface-overlay, #fff)"};
35
- `;
36
- export const fileInputStyles = css`
37
- display: none;
38
- `;
39
- export const imageUploaderStyles = css`
40
- display: flex;
41
- flex-direction: column;
42
- justify-content: center;
43
- align-items: center;
44
- margin: 0 ${"var(--ds-space-150, 10px)"} ${"var(--ds-space-250, 20px)"}
45
- ${"var(--ds-space-150, 10px)"};
46
- `;
47
- const spin = keyframes`
48
- from { transform: rotate(0deg); }
49
- to { transform: rotate(360deg); }
50
- `;
51
- const droppingAnimation = css`
52
- border-color: ${"var(--ds-border-information, #0e56c4)"};
53
- animation: ${spin} 8s linear infinite;
54
- `;
50
+ });
51
+ const droppingAnimation = css({
52
+ borderColor: "var(--ds-border-information, #0e56c4)",
53
+ animation: `${spin} 8s linear infinite`
54
+ });
55
55
  const getBorder = showBorder => `${showBorder ? `2px dashed ${"var(--ds-border, #d0d6d0)"}` : 'none'}`;
56
- const getDroppingAnimation = isDroppingFile => isDroppingFile ? css`
57
- background-color: ${"var(--ds-background-information-hovered, #ddecfe)"};
58
-
59
- &:after {
60
- ${droppingAnimation}
61
- }
62
- ` : '';
63
- export const dragZoneStyles = props => css`
64
- width: 200px;
65
- height: 200px;
66
- display: flex;
67
- flex-direction: column;
68
- align-items: center;
69
- justify-content: center;
70
- padding: ${"var(--ds-space-200, 15px)"};
71
- position: relative;
72
- border-radius: 100%;
73
- transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
74
-
75
- &::after {
76
- content: '';
77
- border: ${getBorder(props.showBorder)};
78
- border-radius: 100%;
79
- position: absolute;
80
- top: 0;
81
- left: 0;
82
- width: 100%;
83
- height: 100%;
84
- transition: border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
56
+ const getDroppingAnimation = isDroppingFile => isDroppingFile ? css({
57
+ backgroundColor: "var(--ds-background-information-hovered, #ddecfe)",
58
+ '&:after': droppingAnimation
59
+ }) : '';
60
+ export const dragZoneStyles = props => css({
61
+ width: '200px',
62
+ height: '200px',
63
+ display: 'flex',
64
+ flexDirection: 'column',
65
+ alignItems: 'center',
66
+ justifyContent: 'center',
67
+ padding: "var(--ds-space-200, 15px)",
68
+ position: 'relative',
69
+ borderRadius: '100%',
70
+ transition: 'background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
71
+ '&::after': {
72
+ content: "''",
73
+ border: getBorder(props.showBorder),
74
+ borderRadius: '100%',
75
+ position: 'absolute',
76
+ top: 0,
77
+ left: 0,
78
+ width: '100%',
79
+ height: '100%',
80
+ transition: 'border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1)'
85
81
  }
86
-
87
- ${getDroppingAnimation(props.isDroppingFile)};
88
- `;
82
+ }, getDroppingAnimation(props.isDroppingFile));
89
83
  dragZoneStyles.displayName = 'DragZone';
90
- export const dragZoneImageStyles = css`
91
- width: 100px;
92
- `;
84
+ export const dragZoneImageStyles = css({
85
+ width: '100px'
86
+ });
93
87
  const getWidth = isFullSize => `${isFullSize ? `width: calc(${AVATAR_DIALOG_WIDTH} - ${"var(--ds-space-100, 8px)"} * 8)px` : 'width:auto'}`;
94
- export const dragZoneTextStyles = props => css`
95
- text-align: center;
96
- color: ${`var(--ds-text-subtlest, ${N200})`};
97
- ${getWidth(props.isFullSize)};
98
- `;
99
- export const selectionBlockerStyles = css`
100
- position: fixed;
101
- left: 0;
102
- top: 0;
103
- right: 0;
104
- bottom: 0;
105
- background-color: transparent;
106
- user-select: none;
107
- `;
108
- export const paddedBreakStyles = css`
109
- margin-top: ${"var(--ds-space-100, 10px)"} !important;
110
- margin-bottom: ${"var(--ds-space-100, 10px)"};
111
- `;
112
- export const sliderWrapperStyles = css`
113
- display: flex;
114
- align-items: center;
115
- width: 100%;
116
-
117
- .zoom_button svg {
118
- position: relative;
119
- left: ${"var(--ds-space-negative-025, -2px)"};
88
+ export const dragZoneTextStyles = props => css({
89
+ textAlign: 'center',
90
+ color: `var(--ds-text-subtlest, ${N200})`
91
+ }, getWidth(props.isFullSize));
92
+ export const selectionBlockerStyles = css({
93
+ position: 'fixed',
94
+ left: 0,
95
+ top: 0,
96
+ right: 0,
97
+ bottom: 0,
98
+ backgroundColor: 'transparent',
99
+ userSelect: 'none'
100
+ });
101
+ export const paddedBreakStyles = css({
102
+ marginTop: `${"var(--ds-space-100, 10px)"} !important`,
103
+ marginBottom: "var(--ds-space-100, 10px)",
104
+ textAlign: 'center'
105
+ });
106
+ export const sliderWrapperStyles = css({
107
+ display: 'flex',
108
+ alignItems: 'center',
109
+ width: '100%',
110
+ '.zoom_button svg': {
111
+ position: 'relative',
112
+ left: "var(--ds-space-negative-025, -2px)"
120
113
  }
121
- `;
114
+ });
package/dist/es2019/image-placer/styles.js CHANGED
@@ -11,6 +11,7 @@ export const imagePlacerErrorWrapperStyles = css({
11
11
  width: '100%',
12
12
  height: '100%',
13
13
  textAlign: 'center',
14
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
14
15
  paddingTop: '45%'
15
16
  });
16
17
  export const EASING = 0.15;
package/dist/es2019/predefined-avatar-view/index.js CHANGED
@@ -49,7 +49,7 @@ export const PredefinedAvatarView = ({
49
49
  label: ""
50
50
  }),
51
51
  onClick: onGoBack
52
- }), jsx("div", {
52
+ }), jsx("h2", {
53
53
  className: "description"
54
54
  }, predefinedAvatarsText || jsx(FormattedMessage, messages.default_avatars))), jsx("div", {
55
55
  role: "radiogroup",
package/dist/es2019/predefined-avatar-view/styles.js CHANGED
@@ -1,63 +1,47 @@
1
1
  import { css } from '@emotion/react';
2
- import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow } from '../styles';
3
- import { avatarImageStyles } from '../styles';
4
- export const largeAvatarImageStyles = css`
5
- ${avatarImageStyles}
6
- width: 72px;
7
- height: 72px;
8
- `;
9
- export const predefinedAvatarViewWrapperStyles = css`
10
- .body {
11
- display: flex;
12
- flex-flow: row wrap;
13
- width: 353px;
14
- max-height: 294px;
15
- overflow-y: auto;
16
-
17
- padding: ${"var(--ds-space-100, 8px)"} 0 0;
18
- margin: 0;
19
- }
20
-
21
- input {
22
- ${visuallyHiddenRadioStyles}
23
- }
24
-
25
- input:checked + img {
26
- ${selectedShadow}
27
- }
28
-
29
- input:focus + img {
30
- ${focusedShadow}
31
- }
32
-
33
- label {
34
- padding-right: ${"var(--ds-space-050, 4px)"};
35
- padding-left: ${"var(--ds-space-050, 4px)"};
36
- padding-bottom: ${"var(--ds-space-100, 8px)"};
37
- display: inline-flex;
38
- }
39
-
40
- .header {
41
- display: flex;
42
- align-items: center;
43
-
44
- padding-top: ${"var(--ds-space-050, 4px)"};
45
- padding-bottom: ${"var(--ds-space-100, 8px)"};
46
-
47
- .description {
48
- padding-left: ${"var(--ds-space-100, 8px)"};
49
- }
50
-
51
- .back-button {
52
- width: 32px;
53
- height: 32px;
54
- border-radius: ${"var(--ds-border-radius-400, 16px)"};
55
-
56
- align-items: center;
57
- justify-content: center;
58
-
59
- margin: 0;
60
- padding: 0;
2
+ import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow, avatarImageStyles } from '../styles';
3
+ export const largeAvatarImageStyles = css(avatarImageStyles, {
4
+ width: '72px',
5
+ height: '72px'
6
+ });
7
+ export const predefinedAvatarViewWrapperStyles = css({
8
+ '.body': {
9
+ display: 'flex',
10
+ flexFlow: 'row wrap',
11
+ width: '353px',
12
+ maxHeight: '294px',
13
+ overflowY: 'auto',
14
+ padding: `${"var(--ds-space-100, 8px)"} 0 0`,
15
+ margin: 0
16
+ },
17
+ input: visuallyHiddenRadioStyles,
18
+ 'input:checked + img': selectedShadow,
19
+ 'input:focus + img': focusedShadow,
20
+ label: {
21
+ paddingRight: "var(--ds-space-050, 4px)",
22
+ paddingLeft: "var(--ds-space-050, 4px)",
23
+ paddingBottom: "var(--ds-space-100, 8px)",
24
+ display: 'inline-flex'
25
+ },
26
+ '.header': {
27
+ display: 'flex',
28
+ alignItems: 'center',
29
+ paddingTop: "var(--ds-space-050, 4px)",
30
+ paddingBottom: "var(--ds-space-100, 8px)",
31
+ '.description': {
32
+ paddingLeft: "var(--ds-space-100, 8px)",
33
+ margin: 0,
34
+ fontSize: '14px',
35
+ fontWeight: 400
36
+ },
37
+ '.back-button': {
38
+ width: '32px',
39
+ height: '32px',
40
+ borderRadius: "var(--ds-border-radius-400, 16px)",
41
+ alignItems: 'center',
42
+ justifyContent: 'center',
43
+ margin: 0,
44
+ padding: 0
61
45
  }
62
46
  }
63
- `;
47
+ });
package/dist/es2019/styles.js CHANGED
@@ -1,17 +1,22 @@
1
+ import { css } from '@emotion/react';
1
2
  import { B200, B100 } from '@atlaskit/theme/colors';
2
- export const avatarImageStyles = `
3
- border-radius: ${"var(--ds-border-radius-100, 3px)"};
4
- cursor: pointer;
5
- `;
6
- export const visuallyHiddenRadioStyles = `
7
- width: 1px;
8
- height: 1px;
9
- padding: 0;
10
- position: fixed;
11
- border: 0;
12
- clip: rect(1px, 1px, 1px, 1px);
13
- overflow: hidden;
14
- white-space: nowrap;
15
- `;
16
- export const selectedShadow = `box-shadow: 0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-selected, ${B200})`};`;
17
- export const focusedShadow = `box-shadow: 0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-focused, ${B100})`};`;
3
+ export const avatarImageStyles = css({
4
+ borderRadius: "var(--ds-border-radius-100, 3px)",
5
+ cursor: 'pointer'
6
+ });
7
+ export const visuallyHiddenRadioStyles = css({
8
+ width: '1px',
9
+ height: '1px',
10
+ padding: 0,
11
+ position: 'fixed',
12
+ border: 0,
13
+ clip: 'rect(1px, 1px, 1px, 1px)',
14
+ overflow: 'hidden',
15
+ whiteSpace: 'nowrap'
16
+ });
17
+ export const selectedShadow = css({
18
+ boxShadow: `0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-selected, ${B200})`}`
19
+ });
20
+ export const focusedShadow = css({
21
+ boxShadow: `0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-focused, ${B100})`}`
22
+ });
package/dist/esm/image-navigator/index.js CHANGED
@@ -197,7 +197,7 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
197
197
  onDrop: _this.onDrop
198
198
  }, isLoading ? jsx(Spinner, {
199
199
  size: "medium"
200
- }) : jsx("div", null, jsx("img", {
200
+ }) : jsx(React.Fragment, null, jsx("img", {
201
201
  id: "drag-zone-image",
202
202
  css: dragZoneImageStyles,
203
203
  src: dropZoneImageSrc,
package/dist/esm/image-navigator/styles.js CHANGED
@@ -1,33 +1,124 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
3
1
  import { css, keyframes } from '@emotion/react';
4
2
  import { N200 } from '@atlaskit/theme/colors';
5
3
  import { checkeredBg } from './images';
6
4
  import { AVATAR_DIALOG_WIDTH } from '../avatar-picker-dialog/layout-const';
7
- export var imageBgStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n width: 256px;\n height: 256px;\n background: url('", "');\n border-radius: ", ";\n"])), checkeredBg, "var(--ds-border-radius, 3px)");
8
- export var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n position: relative;\n"])));
9
- export var sliderContainerStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n align-items: center;\n justify-content: center;\n display: flex;\n flex-direction: row;\n margin-top: ", ";\n\n input {\n box-sizing: content-box;\n padding: 0;\n }\n background-color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-surface-overlay, #fff)");
10
- export var fileInputStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n"])));
11
- export var imageUploaderStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 0 ", " ", "\n ", ";\n"])), "var(--ds-space-150, 10px)", "var(--ds-space-250, 20px)", "var(--ds-space-150, 10px)");
12
- var spin = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n"])));
13
- var droppingAnimation = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-color: ", ";\n animation: ", " 8s linear infinite;\n"])), "var(--ds-border-information, #0e56c4)", spin);
5
+ export var imageBgStyles = css({
6
+ position: 'absolute',
7
+ top: 0,
8
+ left: 0,
9
+ width: '256px',
10
+ height: '256px',
11
+ background: "url('".concat(checkeredBg, "')"),
12
+ borderRadius: "var(--ds-border-radius, 3px)"
13
+ });
14
+ export var containerStyles = css({
15
+ boxSizing: 'border-box',
16
+ '*, *::before, *::after': {
17
+ boxSizing: 'border-box'
18
+ },
19
+ position: 'relative'
20
+ });
21
+ export var sliderContainerStyles = css({
22
+ alignItems: 'center',
23
+ justifyContent: 'center',
24
+ display: 'flex',
25
+ flexDirection: 'row',
26
+ marginTop: "var(--ds-space-100, 8px)",
27
+ input: {
28
+ boxSizing: 'content-box',
29
+ padding: 0
30
+ },
31
+ backgroundColor: "var(--ds-surface-overlay, #fff)"
32
+ });
33
+ export var fileInputStyles = css({
34
+ display: 'none'
35
+ });
36
+ export var imageUploaderStyles = css({
37
+ display: 'flex',
38
+ flexDirection: 'column',
39
+ justifyContent: 'center',
40
+ alignItems: 'center',
41
+ margin: "0 ".concat("var(--ds-space-150, 10px)", " ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-150, 10px)")
42
+ });
43
+ var spin = keyframes({
44
+ from: {
45
+ transform: 'rotate(0deg)'
46
+ },
47
+ to: {
48
+ transform: 'rotate(360deg)'
49
+ }
50
+ });
51
+ var droppingAnimation = css({
52
+ borderColor: "var(--ds-border-information, #0e56c4)",
53
+ animation: "".concat(spin, " 8s linear infinite")
54
+ });
14
55
  var getBorder = function getBorder(showBorder) {
15
56
  return "".concat(showBorder ? "2px dashed ".concat("var(--ds-border, #d0d6d0)") : 'none');
16
57
  };
17
58
  var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
18
- return isDroppingFile ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n background-color: ", ";\n\n &:after {\n ", "\n }\n "])), "var(--ds-background-information-hovered, #ddecfe)", droppingAnimation) : '';
59
+ return isDroppingFile ? css({
60
+ backgroundColor: "var(--ds-background-information-hovered, #ddecfe)",
61
+ '&:after': droppingAnimation
62
+ }) : '';
19
63
  };
20
64
  export var dragZoneStyles = function dragZoneStyles(props) {
21
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 200px;\n height: 200px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: ", ";\n position: relative;\n border-radius: 100%;\n transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n &::after {\n content: '';\n border: ", ";\n border-radius: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n ", ";\n"])), "var(--ds-space-200, 15px)", getBorder(props.showBorder), getDroppingAnimation(props.isDroppingFile));
65
+ return css({
66
+ width: '200px',
67
+ height: '200px',
68
+ display: 'flex',
69
+ flexDirection: 'column',
70
+ alignItems: 'center',
71
+ justifyContent: 'center',
72
+ padding: "var(--ds-space-200, 15px)",
73
+ position: 'relative',
74
+ borderRadius: '100%',
75
+ transition: 'background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
76
+ '&::after': {
77
+ content: "''",
78
+ border: getBorder(props.showBorder),
79
+ borderRadius: '100%',
80
+ position: 'absolute',
81
+ top: 0,
82
+ left: 0,
83
+ width: '100%',
84
+ height: '100%',
85
+ transition: 'border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1)'
86
+ }
87
+ }, getDroppingAnimation(props.isDroppingFile));
22
88
  };
23
89
  dragZoneStyles.displayName = 'DragZone';
24
- export var dragZoneImageStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 100px;\n"])));
90
+ export var dragZoneImageStyles = css({
91
+ width: '100px'
92
+ });
25
93
  var getWidth = function getWidth(isFullSize) {
26
94
  return "".concat(isFullSize ? "width: calc(".concat(AVATAR_DIALOG_WIDTH, " - ", "var(--ds-space-100, 8px)", " * 8)px") : 'width:auto');
27
95
  };
28
96
  export var dragZoneTextStyles = function dragZoneTextStyles(props) {
29
- return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n text-align: center;\n color: ", ";\n ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), getWidth(props.isFullSize));
97
+ return css({
98
+ textAlign: 'center',
99
+ color: "var(--ds-text-subtlest, ".concat(N200, ")")
100
+ }, getWidth(props.isFullSize));
30
101
  };
31
- export var selectionBlockerStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n user-select: none;\n"])));
32
- export var paddedBreakStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n margin-top: ", " !important;\n margin-bottom: ", ";\n"])), "var(--ds-space-100, 10px)", "var(--ds-space-100, 10px)");
33
- export var sliderWrapperStyles = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n width: 100%;\n\n .zoom_button svg {\n position: relative;\n left: ", ";\n }\n"])), "var(--ds-space-negative-025, -2px)");
102
+ export var selectionBlockerStyles = css({
103
+ position: 'fixed',
104
+ left: 0,
105
+ top: 0,
106
+ right: 0,
107
+ bottom: 0,
108
+ backgroundColor: 'transparent',
109
+ userSelect: 'none'
110
+ });
111
+ export var paddedBreakStyles = css({
112
+ marginTop: "var(--ds-space-100, 10px)".concat(" !important"),
113
+ marginBottom: "var(--ds-space-100, 10px)",
114
+ textAlign: 'center'
115
+ });
116
+ export var sliderWrapperStyles = css({
117
+ display: 'flex',
118
+ alignItems: 'center',
119
+ width: '100%',
120
+ '.zoom_button svg': {
121
+ position: 'relative',
122
+ left: "var(--ds-space-negative-025, -2px)"
123
+ }
124
+ });
package/dist/esm/image-placer/styles.js CHANGED
@@ -13,6 +13,7 @@ export var imagePlacerErrorWrapperStyles = css({
13
13
  width: '100%',
14
14
  height: '100%',
15
15
  textAlign: 'center',
16
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
16
17
  paddingTop: '45%'
17
18
  });
18
19
  export var EASING = 0.15;
package/dist/esm/predefined-avatar-view/index.js CHANGED
@@ -49,7 +49,7 @@ export var PredefinedAvatarView = function PredefinedAvatarView(_ref) {
49
49
  label: ""
50
50
  }),
51
51
  onClick: onGoBack
52
- }), jsx("div", {
52
+ }), jsx("h2", {
53
53
  className: "description"
54
54
  }, predefinedAvatarsText || jsx(FormattedMessage, messages.default_avatars))), jsx("div", {
55
55
  role: "radiogroup",
package/dist/esm/predefined-avatar-view/styles.js CHANGED
@@ -1,7 +1,47 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2;
3
1
  import { css } from '@emotion/react';
4
- import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow } from '../styles';
5
- import { avatarImageStyles } from '../styles';
6
- export var largeAvatarImageStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n width: 72px;\n height: 72px;\n"])), avatarImageStyles);
7
- export var predefinedAvatarViewWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .body {\n display: flex;\n flex-flow: row wrap;\n width: 353px;\n max-height: 294px;\n overflow-y: auto;\n\n padding: ", " 0 0;\n margin: 0;\n }\n\n input {\n ", "\n }\n\n input:checked + img {\n ", "\n }\n\n input:focus + img {\n ", "\n }\n\n label {\n padding-right: ", ";\n padding-left: ", ";\n padding-bottom: ", ";\n display: inline-flex;\n }\n\n .header {\n display: flex;\n align-items: center;\n\n padding-top: ", ";\n padding-bottom: ", ";\n\n .description {\n padding-left: ", ";\n }\n\n .back-button {\n width: 32px;\n height: 32px;\n border-radius: ", ";\n\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n }\n }\n"])), "var(--ds-space-100, 8px)", visuallyHiddenRadioStyles, selectedShadow, focusedShadow, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-border-radius-400, 16px)");
2
+ import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow, avatarImageStyles } from '../styles';
3
+ export var largeAvatarImageStyles = css(avatarImageStyles, {
4
+ width: '72px',
5
+ height: '72px'
6
+ });
7
+ export var predefinedAvatarViewWrapperStyles = css({
8
+ '.body': {
9
+ display: 'flex',
10
+ flexFlow: 'row wrap',
11
+ width: '353px',
12
+ maxHeight: '294px',
13
+ overflowY: 'auto',
14
+ padding: "var(--ds-space-100, 8px)".concat(" 0 0"),
15
+ margin: 0
16
+ },
17
+ input: visuallyHiddenRadioStyles,
18
+ 'input:checked + img': selectedShadow,
19
+ 'input:focus + img': focusedShadow,
20
+ label: {
21
+ paddingRight: "var(--ds-space-050, 4px)",
22
+ paddingLeft: "var(--ds-space-050, 4px)",
23
+ paddingBottom: "var(--ds-space-100, 8px)",
24
+ display: 'inline-flex'
25
+ },
26
+ '.header': {
27
+ display: 'flex',
28
+ alignItems: 'center',
29
+ paddingTop: "var(--ds-space-050, 4px)",
30
+ paddingBottom: "var(--ds-space-100, 8px)",
31
+ '.description': {
32
+ paddingLeft: "var(--ds-space-100, 8px)",
33
+ margin: 0,
34
+ fontSize: '14px',
35
+ fontWeight: 400
36
+ },
37
+ '.back-button': {
38
+ width: '32px',
39
+ height: '32px',
40
+ borderRadius: "var(--ds-border-radius-400, 16px)",
41
+ alignItems: 'center',
42
+ justifyContent: 'center',
43
+ margin: 0,
44
+ padding: 0
45
+ }
46
+ }
47
+ });
package/dist/esm/styles.js CHANGED
@@ -1,5 +1,22 @@
1
+ import { css } from '@emotion/react';
1
2
  import { B200, B100 } from '@atlaskit/theme/colors';
2
- export var avatarImageStyles = "\n border-radius: ".concat("var(--ds-border-radius-100, 3px)", ";\n cursor: pointer;\n");
3
- export var visuallyHiddenRadioStyles = "\n width: 1px;\n height: 1px;\n padding: 0;\n position: fixed;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n white-space: nowrap;\n";
4
- export var selectedShadow = "box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(B200, ")"), ";");
5
- export var focusedShadow = "box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(B100, ")"), ";");
3
+ export var avatarImageStyles = css({
4
+ borderRadius: "var(--ds-border-radius-100, 3px)",
5
+ cursor: 'pointer'
6
+ });
7
+ export var visuallyHiddenRadioStyles = css({
8
+ width: '1px',
9
+ height: '1px',
10
+ padding: 0,
11
+ position: 'fixed',
12
+ border: 0,
13
+ clip: 'rect(1px, 1px, 1px, 1px)',
14
+ overflow: 'hidden',
15
+ whiteSpace: 'nowrap'
16
+ });
17
+ export var selectedShadow = css({
18
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(B200, ")"))
19
+ });
20
+ export var focusedShadow = css({
21
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(B100, ")"))
22
+ });
package/dist/types/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const avatarImageStyles: string;
2
- export declare const visuallyHiddenRadioStyles = "\n width: 1px;\n height: 1px;\n padding: 0;\n position: fixed;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n white-space: nowrap;\n";
3
- export declare const selectedShadow: string;
4
- export declare const focusedShadow: string;
1
+ export declare const avatarImageStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const visuallyHiddenRadioStyles: import("@emotion/react").SerializedStyles;
3
+ export declare const selectedShadow: import("@emotion/react").SerializedStyles;
4
+ export declare const focusedShadow: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const avatarImageStyles: string;
2
- export declare const visuallyHiddenRadioStyles = "\n width: 1px;\n height: 1px;\n padding: 0;\n position: fixed;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n white-space: nowrap;\n";
3
- export declare const selectedShadow: string;
4
- export declare const focusedShadow: string;
1
+ export declare const avatarImageStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const visuallyHiddenRadioStyles: import("@emotion/react").SerializedStyles;
3
+ export declare const selectedShadow: import("@emotion/react").SerializedStyles;
4
+ export declare const focusedShadow: import("@emotion/react").SerializedStyles;
package/example-helpers/styles.ts CHANGED
@@ -2,40 +2,36 @@ import { css } from '@emotion/react';
2
2
  import { token } from '@atlaskit/tokens';
3
3
  import { checkeredBg } from '../src/image-placer/styles';
4
4
 
5
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
6
- export const labelStyles = css`
7
- display: block;
5
+ export const labelStyles = css({
6
+ display: 'block',
7
+ '> input': {
8
+ marginLeft: token('space.100', '8px'),
9
+ },
10
+ '> span': {
11
+ display: 'inline-block',
12
+ minWidth: '120px',
13
+ textAlign: 'right',
14
+ },
15
+ });
16
+ export const exportedImageStyles = css({
17
+ border: `1px solid ${token('color.border', '#ccc')}`,
18
+ });
8
19
 
9
- > input {
10
- margin-left: 10px;
11
- }
20
+ export const exportedImageWrapperStyles = css({
21
+ display: 'inline-block',
22
+ background: `url('${checkeredBg}')`,
23
+ marginTop: token('space.250', '20px'),
24
+ position: 'relative',
25
+ });
12
26
 
13
- > span {
14
- display: inline-block;
15
- min-width: 120px;
16
- text-align: right;
17
- }
18
- `;
19
- export const exportedImageStyles = css`
20
- border: 1px solid ${token('color.border', '#ccc')};
21
- `;
27
+ export const layoutStyles = css({
28
+ display: 'flex',
29
+ flexDirection: 'column',
30
+ alignItems: 'center',
31
+ justifyContent: 'space-around',
32
+ height: '80vh',
33
+ });
22
34
 
23
- export const exportedImageWrapperStyles = css`
24
- display: inline-block;
25
- background: url('${checkeredBg}');
26
- margin-top: ${token('space.250', '20px')};
27
- position: relative;
28
- `;
29
-
30
- export const layoutStyles = css`
31
- display: flex;
32
- flex-direction: column;
33
- align-items: center;
34
- justify-content: space-around;
35
- height: 80vh;
36
- `;
37
-
38
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
39
- export const wrapperStyles = css`
40
- margin: 10px;
41
- `;
35
+ export const wrapperStyles = css({
36
+ margin: token('space.100', '8px'),
37
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "24.3.25",
3
+ "version": "24.3.27",
4
4
  "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
34
34
  }
35
35
  },
36
36
  "dependencies": {
37
- "@atlaskit/button": "^17.7.0",
37
+ "@atlaskit/button": "^17.8.0",
38
38
  "@atlaskit/flag": "^15.2.0",
39
39
  "@atlaskit/icon": "^22.1.0",
40
40
  "@atlaskit/media-ui": "^25.4.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/primitives": "^5.1.0",
43
43
  "@atlaskit/range": "^7.1.0",
44
44
  "@atlaskit/spinner": "^16.0.0",
45
- "@atlaskit/theme": "^12.6.0",
45
+ "@atlaskit/theme": "^12.7.0",
46
46
  "@atlaskit/tokens": "^1.42.0",
47
47
  "@atlaskit/visually-hidden": "^1.2.0",
48
48
  "@babel/runtime": "^7.0.0",