@atlaskit/primitives 5.5.3 → 5.6.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.
Files changed (17) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/components/anchor.js +1 -1
  3. package/dist/cjs/components/pressable.js +4 -4
  4. package/dist/cjs/index.js +6 -0
  5. package/dist/es2019/components/anchor.js +1 -1
  6. package/dist/es2019/components/pressable.js +4 -4
  7. package/dist/es2019/index.js +2 -0
  8. package/dist/esm/components/anchor.js +1 -1
  9. package/dist/esm/components/pressable.js +4 -4
  10. package/dist/esm/index.js +2 -0
  11. package/dist/types/components/pressable.d.ts +3 -3
  12. package/dist/types/index.d.ts +1 -0
  13. package/dist/types-ts4.5/components/pressable.d.ts +3 -3
  14. package/dist/types-ts4.5/index.d.ts +1 -0
  15. package/package.json +5 -5
  16. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +0 -953
  17. package/scripts/__tests__/codegen.test.tsx +0 -41
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 5.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
8
+ - [#93980](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93980) [`0437b8b3c791`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0437b8b3c791) - Updated imports of `UNSAFE_PRESSABLE` primitive to new `Pressable` export
9
+
10
+ ## 5.6.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [#93535](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93535) [`e9177e2fdee3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9177e2fdee3) - Adds new export for Pressable as `Pressable` in preparation for open beta. The previous `UNSAFE_PRESSABLE` export remains available while existing usages are migrated, and will be removed in an upcoming major release.
15
+
16
+ ### Patch Changes
17
+
18
+ - [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
19
+
3
20
  ## 5.5.3
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/components/anchor.js CHANGED
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
76
76
  action: 'clicked',
77
77
  componentName: componentName || 'Anchor',
78
78
  packageName: "@atlaskit/primitives",
79
- packageVersion: "5.5.3",
79
+ packageVersion: "5.6.1",
80
80
  analyticsData: analyticsContext,
81
81
  actionSubject: 'link'
82
82
  });
package/dist/cjs/components/pressable.js CHANGED
@@ -39,7 +39,7 @@ var focusRingStyles = (0, _xcss.xcss)({
39
39
  });
40
40
 
41
41
  /**
42
- * __UNSAFE_PRESSABLE__
42
+ * __Pressable__
43
43
  *
44
44
  * @internal Still under development. Do not use.
45
45
  *
@@ -49,7 +49,7 @@ var focusRingStyles = (0, _xcss.xcss)({
49
49
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
50
50
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
51
51
  */
52
- var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
52
+ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
53
53
  var children = _ref.children,
54
54
  backgroundColor = _ref.backgroundColor,
55
55
  padding = _ref.padding,
@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
80
80
  action: 'clicked',
81
81
  componentName: componentName || 'Pressable',
82
82
  packageName: "@atlaskit/primitives",
83
- packageVersion: "5.5.3",
83
+ packageVersion: "5.6.1",
84
84
  analyticsData: analyticsContext,
85
85
  actionSubject: 'button'
86
86
  });
@@ -114,4 +114,4 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
114
114
  disabled: isDisabled
115
115
  }), children);
116
116
  });
117
- var _default = exports.default = UNSAFE_PRESSABLE;
117
+ var _default = exports.default = Pressable;
package/dist/cjs/index.js CHANGED
@@ -34,6 +34,12 @@ Object.defineProperty(exports, "Inline", {
34
34
  return _inline.default;
35
35
  }
36
36
  });
37
+ Object.defineProperty(exports, "Pressable", {
38
+ enumerable: true,
39
+ get: function get() {
40
+ return _pressable.default;
41
+ }
42
+ });
37
43
  Object.defineProperty(exports, "Stack", {
38
44
  enumerable: true,
39
45
  get: function get() {
package/dist/es2019/components/anchor.js CHANGED
@@ -62,7 +62,7 @@ const Anchor = ({
62
62
  action: 'clicked',
63
63
  componentName: componentName || 'Anchor',
64
64
  packageName: "@atlaskit/primitives",
65
- packageVersion: "5.5.3",
65
+ packageVersion: "5.6.1",
66
66
  analyticsData: analyticsContext,
67
67
  actionSubject: 'link'
68
68
  });
package/dist/es2019/components/pressable.js CHANGED
@@ -26,7 +26,7 @@ const focusRingStyles = xcss({
26
26
  });
27
27
 
28
28
  /**
29
- * __UNSAFE_PRESSABLE__
29
+ * __Pressable__
30
30
  *
31
31
  * @internal Still under development. Do not use.
32
32
  *
@@ -36,7 +36,7 @@ const focusRingStyles = xcss({
36
36
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
37
37
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
38
38
  */
39
- const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
39
+ const Pressable = /*#__PURE__*/forwardRef(({
40
40
  children,
41
41
  backgroundColor,
42
42
  padding,
@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
66
66
  action: 'clicked',
67
67
  componentName: componentName || 'Pressable',
68
68
  packageName: "@atlaskit/primitives",
69
- packageVersion: "5.5.3",
69
+ packageVersion: "5.6.1",
70
70
  analyticsData: analyticsContext,
71
71
  actionSubject: 'button'
72
72
  });
@@ -100,4 +100,4 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
100
100
  disabled: isDisabled
101
101
  }), children);
102
102
  });
103
- export default UNSAFE_PRESSABLE;
103
+ export default Pressable;
package/dist/es2019/index.js CHANGED
@@ -6,6 +6,8 @@ export { default as Flex } from './components/flex';
6
6
  export { default as Grid } from './components/grid';
7
7
  export { default as Bleed } from './components/bleed';
8
8
  export { default as Text } from './components/text';
9
+ // TODO: Remove UNSAFE_PRESSABLE once all usages are migrated to Pressable
9
10
  export { default as UNSAFE_PRESSABLE } from './components/pressable';
11
+ export { default as Pressable } from './components/pressable';
10
12
  export { default as UNSAFE_ANCHOR } from './components/anchor';
11
13
  export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
package/dist/esm/components/anchor.js CHANGED
@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
66
66
  action: 'clicked',
67
67
  componentName: componentName || 'Anchor',
68
68
  packageName: "@atlaskit/primitives",
69
- packageVersion: "5.5.3",
69
+ packageVersion: "5.6.1",
70
70
  analyticsData: analyticsContext,
71
71
  actionSubject: 'link'
72
72
  });
package/dist/esm/components/pressable.js CHANGED
@@ -29,7 +29,7 @@ var focusRingStyles = xcss({
29
29
  });
30
30
 
31
31
  /**
32
- * __UNSAFE_PRESSABLE__
32
+ * __Pressable__
33
33
  *
34
34
  * @internal Still under development. Do not use.
35
35
  *
@@ -39,7 +39,7 @@ var focusRingStyles = xcss({
39
39
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
40
40
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
41
41
  */
42
- var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
42
+ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
43
43
  var children = _ref.children,
44
44
  backgroundColor = _ref.backgroundColor,
45
45
  padding = _ref.padding,
@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
70
70
  action: 'clicked',
71
71
  componentName: componentName || 'Pressable',
72
72
  packageName: "@atlaskit/primitives",
73
- packageVersion: "5.5.3",
73
+ packageVersion: "5.6.1",
74
74
  analyticsData: analyticsContext,
75
75
  actionSubject: 'button'
76
76
  });
@@ -104,4 +104,4 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
104
104
  disabled: isDisabled
105
105
  }), children);
106
106
  });
107
- export default UNSAFE_PRESSABLE;
107
+ export default Pressable;
package/dist/esm/index.js CHANGED
@@ -6,6 +6,8 @@ export { default as Flex } from './components/flex';
6
6
  export { default as Grid } from './components/grid';
7
7
  export { default as Bleed } from './components/bleed';
8
8
  export { default as Text } from './components/text';
9
+ // TODO: Remove UNSAFE_PRESSABLE once all usages are migrated to Pressable
9
10
  export { default as UNSAFE_PRESSABLE } from './components/pressable';
11
+ export { default as Pressable } from './components/pressable';
10
12
  export { default as UNSAFE_ANCHOR } from './components/anchor';
11
13
  export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
package/dist/types/components/pressable.d.ts CHANGED
@@ -28,7 +28,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
28
28
  analyticsContext?: Record<string, any>;
29
29
  };
30
30
  /**
31
- * __UNSAFE_PRESSABLE__
31
+ * __Pressable__
32
32
  *
33
33
  * @internal Still under development. Do not use.
34
34
  *
@@ -38,7 +38,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
38
38
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
39
39
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
40
40
  */
41
- declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & {
41
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & {
42
42
  /**
43
43
  * `children` should be defined to ensure buttons are not empty,
44
44
  * because they should have labels.
@@ -64,4 +64,4 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
64
64
  */
65
65
  analyticsContext?: Record<string, any> | undefined;
66
66
  }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
67
- export default UNSAFE_PRESSABLE;
67
+ export default Pressable;
package/dist/types/index.d.ts CHANGED
@@ -16,6 +16,7 @@ export type { BleedProps } from './components/bleed';
16
16
  export { default as Text } from './components/text';
17
17
  export type { TextProps } from './components/text';
18
18
  export { default as UNSAFE_PRESSABLE } from './components/pressable';
19
+ export { default as Pressable } from './components/pressable';
19
20
  export type { PressableProps as UNSAFE_PressableProps } from './components/pressable';
20
21
  export { default as UNSAFE_ANCHOR } from './components/anchor';
21
22
  export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
package/dist/types-ts4.5/components/pressable.d.ts CHANGED
@@ -28,7 +28,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
28
28
  analyticsContext?: Record<string, any>;
29
29
  };
30
30
  /**
31
- * __UNSAFE_PRESSABLE__
31
+ * __Pressable__
32
32
  *
33
33
  * @internal Still under development. Do not use.
34
34
  *
@@ -38,7 +38,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
38
38
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
39
39
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
40
40
  */
41
- declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & {
41
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & {
42
42
  /**
43
43
  * `children` should be defined to ensure buttons are not empty,
44
44
  * because they should have labels.
@@ -64,4 +64,4 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
64
64
  */
65
65
  analyticsContext?: Record<string, any> | undefined;
66
66
  }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
67
- export default UNSAFE_PRESSABLE;
67
+ export default Pressable;
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -16,6 +16,7 @@ export type { BleedProps } from './components/bleed';
16
16
  export { default as Text } from './components/text';
17
17
  export type { TextProps } from './components/text';
18
18
  export { default as UNSAFE_PRESSABLE } from './components/pressable';
19
+ export { default as Pressable } from './components/pressable';
19
20
  export type { PressableProps as UNSAFE_PressableProps } from './components/pressable';
20
21
  export { default as UNSAFE_ANCHOR } from './components/anchor';
21
22
  export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "5.5.3",
3
+ "version": "5.6.1",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -122,17 +122,17 @@
122
122
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
123
123
  },
124
124
  "dependencies": {
125
- "@atlaskit/analytics-next": "^9.2.0",
125
+ "@atlaskit/analytics-next": "^9.3.0",
126
126
  "@atlaskit/app-provider": "^1.3.0",
127
127
  "@atlaskit/css": "^0.1.0",
128
- "@atlaskit/ds-lib": "^2.2.0",
128
+ "@atlaskit/ds-lib": "^2.3.0",
129
129
  "@atlaskit/interaction-context": "^2.1.0",
130
130
  "@atlaskit/tokens": "^1.43.0",
131
131
  "@atlaskit/visually-hidden": "^1.2.4",
132
132
  "@babel/runtime": "^7.0.0",
133
133
  "@emotion/react": "^11.7.1",
134
134
  "@emotion/serialize": "^1.1.0",
135
- "bind-event-listener": "^2.1.1",
135
+ "bind-event-listener": "^3.0.0",
136
136
  "tiny-invariant": "^1.2.0"
137
137
  },
138
138
  "peerDependencies": {
@@ -141,7 +141,7 @@
141
141
  "devDependencies": {
142
142
  "@af/accessibility-testing": "*",
143
143
  "@atlaskit/ssr": "*",
144
- "@atlaskit/tooltip": "*",
144
+ "@atlaskit/tooltip": "^18.2.1",
145
145
  "@atlaskit/visual-regression": "*",
146
146
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
147
147
  "@atlassian/codegen": "^0.1.0",
package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap DELETED
@@ -1,953 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`@atlaskit/primitives background styles are generated correctly 1`] = `
4
- "export const backgroundColorMap = {
5
- 'color.background.accent.lime.subtlest': token(
6
- 'color.background.accent.lime.subtlest',
7
- '#EEFBDA',
8
- ),
9
- 'color.background.accent.lime.subtlest.hovered': token(
10
- 'color.background.accent.lime.subtlest.hovered',
11
- '#D3F1A7',
12
- ),
13
- 'color.background.accent.lime.subtlest.pressed': token(
14
- 'color.background.accent.lime.subtlest.pressed',
15
- '#B3DF72',
16
- ),
17
- 'color.background.accent.lime.subtler': token(
18
- 'color.background.accent.lime.subtler',
19
- '#D3F1A7',
20
- ),
21
- 'color.background.accent.lime.subtler.hovered': token(
22
- 'color.background.accent.lime.subtler.hovered',
23
- '#B3DF72',
24
- ),
25
- 'color.background.accent.lime.subtler.pressed': token(
26
- 'color.background.accent.lime.subtler.pressed',
27
- '#94C748',
28
- ),
29
- 'color.background.accent.lime.subtle': token(
30
- 'color.background.accent.lime.subtle',
31
- '#94C748',
32
- ),
33
- 'color.background.accent.lime.subtle.hovered': token(
34
- 'color.background.accent.lime.subtle.hovered',
35
- '#B3DF72',
36
- ),
37
- 'color.background.accent.lime.subtle.pressed': token(
38
- 'color.background.accent.lime.subtle.pressed',
39
- '#D3F1A7',
40
- ),
41
- 'color.background.accent.lime.bolder': token(
42
- 'color.background.accent.lime.bolder',
43
- '#5B7F24',
44
- ),
45
- 'color.background.accent.lime.bolder.hovered': token(
46
- 'color.background.accent.lime.bolder.hovered',
47
- '#37471F',
48
- ),
49
- 'color.background.accent.lime.bolder.pressed': token(
50
- 'color.background.accent.lime.bolder.pressed',
51
- '#37471F',
52
- ),
53
- 'color.background.accent.red.subtlest': token(
54
- 'color.background.accent.red.subtlest',
55
- '#FF8F73',
56
- ),
57
- 'color.background.accent.red.subtlest.hovered': token(
58
- 'color.background.accent.red.subtlest.hovered',
59
- '#FF7452',
60
- ),
61
- 'color.background.accent.red.subtlest.pressed': token(
62
- 'color.background.accent.red.subtlest.pressed',
63
- '#FF5630',
64
- ),
65
- 'color.background.accent.red.subtler': token(
66
- 'color.background.accent.red.subtler',
67
- '#FF7452',
68
- ),
69
- 'color.background.accent.red.subtler.hovered': token(
70
- 'color.background.accent.red.subtler.hovered',
71
- '#FF5630',
72
- ),
73
- 'color.background.accent.red.subtler.pressed': token(
74
- 'color.background.accent.red.subtler.pressed',
75
- '#DE350B',
76
- ),
77
- 'color.background.accent.red.subtle': token(
78
- 'color.background.accent.red.subtle',
79
- '#DE350B',
80
- ),
81
- 'color.background.accent.red.subtle.hovered': token(
82
- 'color.background.accent.red.subtle.hovered',
83
- '#FF5630',
84
- ),
85
- 'color.background.accent.red.subtle.pressed': token(
86
- 'color.background.accent.red.subtle.pressed',
87
- '#FF7452',
88
- ),
89
- 'color.background.accent.red.bolder': token(
90
- 'color.background.accent.red.bolder',
91
- '#DE350B',
92
- ),
93
- 'color.background.accent.red.bolder.hovered': token(
94
- 'color.background.accent.red.bolder.hovered',
95
- '#FF5630',
96
- ),
97
- 'color.background.accent.red.bolder.pressed': token(
98
- 'color.background.accent.red.bolder.pressed',
99
- '#FF7452',
100
- ),
101
- 'color.background.accent.orange.subtlest': token(
102
- 'color.background.accent.orange.subtlest',
103
- '#F18D13',
104
- ),
105
- 'color.background.accent.orange.subtlest.hovered': token(
106
- 'color.background.accent.orange.subtlest.hovered',
107
- '#FEC57B',
108
- ),
109
- 'color.background.accent.orange.subtlest.pressed': token(
110
- 'color.background.accent.orange.subtlest.pressed',
111
- '#FFE2BD',
112
- ),
113
- 'color.background.accent.orange.subtler': token(
114
- 'color.background.accent.orange.subtler',
115
- '#B65C02',
116
- ),
117
- 'color.background.accent.orange.subtler.hovered': token(
118
- 'color.background.accent.orange.subtler.hovered',
119
- '#F18D13',
120
- ),
121
- 'color.background.accent.orange.subtler.pressed': token(
122
- 'color.background.accent.orange.subtler.pressed',
123
- '#FEC57B',
124
- ),
125
- 'color.background.accent.orange.subtle': token(
126
- 'color.background.accent.orange.subtle',
127
- '#5F3811',
128
- ),
129
- 'color.background.accent.orange.subtle.hovered': token(
130
- 'color.background.accent.orange.subtle.hovered',
131
- '#974F0C',
132
- ),
133
- 'color.background.accent.orange.subtle.pressed': token(
134
- 'color.background.accent.orange.subtle.pressed',
135
- '#B65C02',
136
- ),
137
- 'color.background.accent.orange.bolder': token(
138
- 'color.background.accent.orange.bolder',
139
- '#43290F',
140
- ),
141
- 'color.background.accent.orange.bolder.hovered': token(
142
- 'color.background.accent.orange.bolder.hovered',
143
- '#5F3811',
144
- ),
145
- 'color.background.accent.orange.bolder.pressed': token(
146
- 'color.background.accent.orange.bolder.pressed',
147
- '#974F0C',
148
- ),
149
- 'color.background.accent.yellow.subtlest': token(
150
- 'color.background.accent.yellow.subtlest',
151
- '#FFE380',
152
- ),
153
- 'color.background.accent.yellow.subtlest.hovered': token(
154
- 'color.background.accent.yellow.subtlest.hovered',
155
- '#FFC400',
156
- ),
157
- 'color.background.accent.yellow.subtlest.pressed': token(
158
- 'color.background.accent.yellow.subtlest.pressed',
159
- '#FFAB00',
160
- ),
161
- 'color.background.accent.yellow.subtler': token(
162
- 'color.background.accent.yellow.subtler',
163
- '#FFC400',
164
- ),
165
- 'color.background.accent.yellow.subtler.hovered': token(
166
- 'color.background.accent.yellow.subtler.hovered',
167
- '#FFAB00',
168
- ),
169
- 'color.background.accent.yellow.subtler.pressed': token(
170
- 'color.background.accent.yellow.subtler.pressed',
171
- '#FF991F',
172
- ),
173
- 'color.background.accent.yellow.subtle': token(
174
- 'color.background.accent.yellow.subtle',
175
- '#FF991F',
176
- ),
177
- 'color.background.accent.yellow.subtle.hovered': token(
178
- 'color.background.accent.yellow.subtle.hovered',
179
- '#FFAB00',
180
- ),
181
- 'color.background.accent.yellow.subtle.pressed': token(
182
- 'color.background.accent.yellow.subtle.pressed',
183
- '#FFC400',
184
- ),
185
- 'color.background.accent.yellow.bolder': token(
186
- 'color.background.accent.yellow.bolder',
187
- '#FF991F',
188
- ),
189
- 'color.background.accent.yellow.bolder.hovered': token(
190
- 'color.background.accent.yellow.bolder.hovered',
191
- '#FFAB00',
192
- ),
193
- 'color.background.accent.yellow.bolder.pressed': token(
194
- 'color.background.accent.yellow.bolder.pressed',
195
- '#FFC400',
196
- ),
197
- 'color.background.accent.green.subtlest': token(
198
- 'color.background.accent.green.subtlest',
199
- '#79F2C0',
200
- ),
201
- 'color.background.accent.green.subtlest.hovered': token(
202
- 'color.background.accent.green.subtlest.hovered',
203
- '#57D9A3',
204
- ),
205
- 'color.background.accent.green.subtlest.pressed': token(
206
- 'color.background.accent.green.subtlest.pressed',
207
- '#36B37E',
208
- ),
209
- 'color.background.accent.green.subtler': token(
210
- 'color.background.accent.green.subtler',
211
- '#57D9A3',
212
- ),
213
- 'color.background.accent.green.subtler.hovered': token(
214
- 'color.background.accent.green.subtler.hovered',
215
- '#36B37E',
216
- ),
217
- 'color.background.accent.green.subtler.pressed': token(
218
- 'color.background.accent.green.subtler.pressed',
219
- '#00875A',
220
- ),
221
- 'color.background.accent.green.subtle': token(
222
- 'color.background.accent.green.subtle',
223
- '#00875A',
224
- ),
225
- 'color.background.accent.green.subtle.hovered': token(
226
- 'color.background.accent.green.subtle.hovered',
227
- '#36B37E',
228
- ),
229
- 'color.background.accent.green.subtle.pressed': token(
230
- 'color.background.accent.green.subtle.pressed',
231
- '#57D9A3',
232
- ),
233
- 'color.background.accent.green.bolder': token(
234
- 'color.background.accent.green.bolder',
235
- '#00875A',
236
- ),
237
- 'color.background.accent.green.bolder.hovered': token(
238
- 'color.background.accent.green.bolder.hovered',
239
- '#36B37E',
240
- ),
241
- 'color.background.accent.green.bolder.pressed': token(
242
- 'color.background.accent.green.bolder.pressed',
243
- '#57D9A3',
244
- ),
245
- 'color.background.accent.teal.subtlest': token(
246
- 'color.background.accent.teal.subtlest',
247
- '#79E2F2',
248
- ),
249
- 'color.background.accent.teal.subtlest.hovered': token(
250
- 'color.background.accent.teal.subtlest.hovered',
251
- '#00C7E6',
252
- ),
253
- 'color.background.accent.teal.subtlest.pressed': token(
254
- 'color.background.accent.teal.subtlest.pressed',
255
- '#00B8D9',
256
- ),
257
- 'color.background.accent.teal.subtler': token(
258
- 'color.background.accent.teal.subtler',
259
- '#00C7E6',
260
- ),
261
- 'color.background.accent.teal.subtler.hovered': token(
262
- 'color.background.accent.teal.subtler.hovered',
263
- '#00B8D9',
264
- ),
265
- 'color.background.accent.teal.subtler.pressed': token(
266
- 'color.background.accent.teal.subtler.pressed',
267
- '#00A3BF',
268
- ),
269
- 'color.background.accent.teal.subtle': token(
270
- 'color.background.accent.teal.subtle',
271
- '#00A3BF',
272
- ),
273
- 'color.background.accent.teal.subtle.hovered': token(
274
- 'color.background.accent.teal.subtle.hovered',
275
- '#00B8D9',
276
- ),
277
- 'color.background.accent.teal.subtle.pressed': token(
278
- 'color.background.accent.teal.subtle.pressed',
279
- '#00C7E6',
280
- ),
281
- 'color.background.accent.teal.bolder': token(
282
- 'color.background.accent.teal.bolder',
283
- '#00A3BF',
284
- ),
285
- 'color.background.accent.teal.bolder.hovered': token(
286
- 'color.background.accent.teal.bolder.hovered',
287
- '#00B8D9',
288
- ),
289
- 'color.background.accent.teal.bolder.pressed': token(
290
- 'color.background.accent.teal.bolder.pressed',
291
- '#00C7E6',
292
- ),
293
- 'color.background.accent.blue.subtlest': token(
294
- 'color.background.accent.blue.subtlest',
295
- '#4C9AFF',
296
- ),
297
- 'color.background.accent.blue.subtlest.hovered': token(
298
- 'color.background.accent.blue.subtlest.hovered',
299
- '#2684FF',
300
- ),
301
- 'color.background.accent.blue.subtlest.pressed': token(
302
- 'color.background.accent.blue.subtlest.pressed',
303
- '#0065FF',
304
- ),
305
- 'color.background.accent.blue.subtler': token(
306
- 'color.background.accent.blue.subtler',
307
- '#2684FF',
308
- ),
309
- 'color.background.accent.blue.subtler.hovered': token(
310
- 'color.background.accent.blue.subtler.hovered',
311
- '#0065FF',
312
- ),
313
- 'color.background.accent.blue.subtler.pressed': token(
314
- 'color.background.accent.blue.subtler.pressed',
315
- '#0052CC',
316
- ),
317
- 'color.background.accent.blue.subtle': token(
318
- 'color.background.accent.blue.subtle',
319
- '#0052CC',
320
- ),
321
- 'color.background.accent.blue.subtle.hovered': token(
322
- 'color.background.accent.blue.subtle.hovered',
323
- '#0065FF',
324
- ),
325
- 'color.background.accent.blue.subtle.pressed': token(
326
- 'color.background.accent.blue.subtle.pressed',
327
- '#2684FF',
328
- ),
329
- 'color.background.accent.blue.bolder': token(
330
- 'color.background.accent.blue.bolder',
331
- '#0052CC',
332
- ),
333
- 'color.background.accent.blue.bolder.hovered': token(
334
- 'color.background.accent.blue.bolder.hovered',
335
- '#0065FF',
336
- ),
337
- 'color.background.accent.blue.bolder.pressed': token(
338
- 'color.background.accent.blue.bolder.pressed',
339
- '#2684FF',
340
- ),
341
- 'color.background.accent.purple.subtlest': token(
342
- 'color.background.accent.purple.subtlest',
343
- '#998DD9',
344
- ),
345
- 'color.background.accent.purple.subtlest.hovered': token(
346
- 'color.background.accent.purple.subtlest.hovered',
347
- '#8777D9',
348
- ),
349
- 'color.background.accent.purple.subtlest.pressed': token(
350
- 'color.background.accent.purple.subtlest.pressed',
351
- '#6554C0',
352
- ),
353
- 'color.background.accent.purple.subtler': token(
354
- 'color.background.accent.purple.subtler',
355
- '#8777D9',
356
- ),
357
- 'color.background.accent.purple.subtler.hovered': token(
358
- 'color.background.accent.purple.subtler.hovered',
359
- '#6554C0',
360
- ),
361
- 'color.background.accent.purple.subtler.pressed': token(
362
- 'color.background.accent.purple.subtler.pressed',
363
- '#5243AA',
364
- ),
365
- 'color.background.accent.purple.subtle': token(
366
- 'color.background.accent.purple.subtle',
367
- '#5243AA',
368
- ),
369
- 'color.background.accent.purple.subtle.hovered': token(
370
- 'color.background.accent.purple.subtle.hovered',
371
- '#6554C0',
372
- ),
373
- 'color.background.accent.purple.subtle.pressed': token(
374
- 'color.background.accent.purple.subtle.pressed',
375
- '#8777D9',
376
- ),
377
- 'color.background.accent.purple.bolder': token(
378
- 'color.background.accent.purple.bolder',
379
- '#5243AA',
380
- ),
381
- 'color.background.accent.purple.bolder.hovered': token(
382
- 'color.background.accent.purple.bolder.hovered',
383
- '#6554C0',
384
- ),
385
- 'color.background.accent.purple.bolder.pressed': token(
386
- 'color.background.accent.purple.bolder.pressed',
387
- '#8777D9',
388
- ),
389
- 'color.background.accent.magenta.subtlest': token(
390
- 'color.background.accent.magenta.subtlest',
391
- '#FFECF8',
392
- ),
393
- 'color.background.accent.magenta.subtlest.hovered': token(
394
- 'color.background.accent.magenta.subtlest.hovered',
395
- '#FDD0EC',
396
- ),
397
- 'color.background.accent.magenta.subtlest.pressed': token(
398
- 'color.background.accent.magenta.subtlest.pressed',
399
- '#F797D2',
400
- ),
401
- 'color.background.accent.magenta.subtler': token(
402
- 'color.background.accent.magenta.subtler',
403
- '#FDD0EC',
404
- ),
405
- 'color.background.accent.magenta.subtler.hovered': token(
406
- 'color.background.accent.magenta.subtler.hovered',
407
- '#F797D2',
408
- ),
409
- 'color.background.accent.magenta.subtler.pressed': token(
410
- 'color.background.accent.magenta.subtler.pressed',
411
- '#E774BB',
412
- ),
413
- 'color.background.accent.magenta.subtle': token(
414
- 'color.background.accent.magenta.subtle',
415
- '#E774BB',
416
- ),
417
- 'color.background.accent.magenta.subtle.hovered': token(
418
- 'color.background.accent.magenta.subtle.hovered',
419
- '#F797D2',
420
- ),
421
- 'color.background.accent.magenta.subtle.pressed': token(
422
- 'color.background.accent.magenta.subtle.pressed',
423
- '#FDD0EC',
424
- ),
425
- 'color.background.accent.magenta.bolder': token(
426
- 'color.background.accent.magenta.bolder',
427
- '#AE4787',
428
- ),
429
- 'color.background.accent.magenta.bolder.hovered': token(
430
- 'color.background.accent.magenta.bolder.hovered',
431
- '#943D73',
432
- ),
433
- 'color.background.accent.magenta.bolder.pressed': token(
434
- 'color.background.accent.magenta.bolder.pressed',
435
- '#50253F',
436
- ),
437
- 'color.background.accent.gray.subtlest': token(
438
- 'color.background.accent.gray.subtlest',
439
- '#6B778C',
440
- ),
441
- 'color.background.accent.gray.subtlest.hovered': token(
442
- 'color.background.accent.gray.subtlest.hovered',
443
- '#5E6C84',
444
- ),
445
- 'color.background.accent.gray.subtlest.pressed': token(
446
- 'color.background.accent.gray.subtlest.pressed',
447
- '#505F79',
448
- ),
449
- 'color.background.accent.gray.subtler': token(
450
- 'color.background.accent.gray.subtler',
451
- '#5E6C84',
452
- ),
453
- 'color.background.accent.gray.subtler.hovered': token(
454
- 'color.background.accent.gray.subtler.hovered',
455
- '#505F79',
456
- ),
457
- 'color.background.accent.gray.subtler.pressed': token(
458
- 'color.background.accent.gray.subtler.pressed',
459
- '#42526E',
460
- ),
461
- 'color.background.accent.gray.subtle': token(
462
- 'color.background.accent.gray.subtle',
463
- '#505F79',
464
- ),
465
- 'color.background.accent.gray.subtle.hovered': token(
466
- 'color.background.accent.gray.subtle.hovered',
467
- '#5E6C84',
468
- ),
469
- 'color.background.accent.gray.subtle.pressed': token(
470
- 'color.background.accent.gray.subtle.pressed',
471
- '#6B778C',
472
- ),
473
- 'color.background.accent.gray.bolder': token(
474
- 'color.background.accent.gray.bolder',
475
- '#42526E',
476
- ),
477
- 'color.background.accent.gray.bolder.hovered': token(
478
- 'color.background.accent.gray.bolder.hovered',
479
- '#344563',
480
- ),
481
- 'color.background.accent.gray.bolder.pressed': token(
482
- 'color.background.accent.gray.bolder.pressed',
483
- '#253858',
484
- ),
485
- 'color.background.disabled': token('color.background.disabled', '#091e4289'),
486
- 'color.background.input': token('color.background.input', '#FAFBFC'),
487
- 'color.background.input.hovered': token(
488
- 'color.background.input.hovered',
489
- '#EBECF0',
490
- ),
491
- 'color.background.input.pressed': token(
492
- 'color.background.input.pressed',
493
- '#FFFFFF',
494
- ),
495
- 'color.background.inverse.subtle': token(
496
- 'color.background.inverse.subtle',
497
- '#00000029',
498
- ),
499
- 'color.background.inverse.subtle.hovered': token(
500
- 'color.background.inverse.subtle.hovered',
501
- '#0000003D',
502
- ),
503
- 'color.background.inverse.subtle.pressed': token(
504
- 'color.background.inverse.subtle.pressed',
505
- '#00000052',
506
- ),
507
- 'color.background.neutral': token('color.background.neutral', '#DFE1E6'),
508
- 'color.background.neutral.hovered': token(
509
- 'color.background.neutral.hovered',
510
- '#091e4214',
511
- ),
512
- 'color.background.neutral.pressed': token(
513
- 'color.background.neutral.pressed',
514
- '#B3D4FF',
515
- ),
516
- 'color.background.neutral.subtle': token(
517
- 'color.background.neutral.subtle',
518
- 'transparent',
519
- ),
520
- 'color.background.neutral.subtle.hovered': token(
521
- 'color.background.neutral.subtle.hovered',
522
- '#091e4214',
523
- ),
524
- 'color.background.neutral.subtle.pressed': token(
525
- 'color.background.neutral.subtle.pressed',
526
- '#B3D4FF',
527
- ),
528
- 'color.background.neutral.bold': token(
529
- 'color.background.neutral.bold',
530
- '#42526E',
531
- ),
532
- 'color.background.neutral.bold.hovered': token(
533
- 'color.background.neutral.bold.hovered',
534
- '#505F79',
535
- ),
536
- 'color.background.neutral.bold.pressed': token(
537
- 'color.background.neutral.bold.pressed',
538
- '#344563',
539
- ),
540
- 'color.background.selected': token('color.background.selected', '#DEEBFF'),
541
- 'color.background.selected.hovered': token(
542
- 'color.background.selected.hovered',
543
- '#B3D4FF',
544
- ),
545
- 'color.background.selected.pressed': token(
546
- 'color.background.selected.pressed',
547
- '#4C9AFF',
548
- ),
549
- 'color.background.selected.bold': token(
550
- 'color.background.selected.bold',
551
- '#0052CC',
552
- ),
553
- 'color.background.selected.bold.hovered': token(
554
- 'color.background.selected.bold.hovered',
555
- '#2684FF',
556
- ),
557
- 'color.background.selected.bold.pressed': token(
558
- 'color.background.selected.bold.pressed',
559
- '#0052CC',
560
- ),
561
- 'color.background.brand.subtlest': token(
562
- 'color.background.brand.subtlest',
563
- '#B3D4FF',
564
- ),
565
- 'color.background.brand.subtlest.hovered': token(
566
- 'color.background.brand.subtlest.hovered',
567
- '#DEEBFF',
568
- ),
569
- 'color.background.brand.subtlest.pressed': token(
570
- 'color.background.brand.subtlest.pressed',
571
- '#4C9AFF',
572
- ),
573
- 'color.background.brand.bold': token(
574
- 'color.background.brand.bold',
575
- '#0052CC',
576
- ),
577
- 'color.background.brand.bold.hovered': token(
578
- 'color.background.brand.bold.hovered',
579
- '#0065FF',
580
- ),
581
- 'color.background.brand.bold.pressed': token(
582
- 'color.background.brand.bold.pressed',
583
- '#0747A6',
584
- ),
585
- 'color.background.brand.boldest': token(
586
- 'color.background.brand.boldest',
587
- '#0747A6',
588
- ),
589
- 'color.background.brand.boldest.hovered': token(
590
- 'color.background.brand.boldest.hovered',
591
- '#0052CC',
592
- ),
593
- 'color.background.brand.boldest.pressed': token(
594
- 'color.background.brand.boldest.pressed',
595
- '#0747A6',
596
- ),
597
- 'color.background.danger': token('color.background.danger', '#FFEBE6'),
598
- 'color.background.danger.hovered': token(
599
- 'color.background.danger.hovered',
600
- '#FFBDAD',
601
- ),
602
- 'color.background.danger.pressed': token(
603
- 'color.background.danger.pressed',
604
- '#FF8F73',
605
- ),
606
- 'color.background.danger.bold': token(
607
- 'color.background.danger.bold',
608
- '#DE350B',
609
- ),
610
- 'color.background.danger.bold.hovered': token(
611
- 'color.background.danger.bold.hovered',
612
- '#FF5630',
613
- ),
614
- 'color.background.danger.bold.pressed': token(
615
- 'color.background.danger.bold.pressed',
616
- '#BF2600',
617
- ),
618
- 'color.background.warning': token('color.background.warning', '#FFFAE6'),
619
- 'color.background.warning.hovered': token(
620
- 'color.background.warning.hovered',
621
- '#FFF0B3',
622
- ),
623
- 'color.background.warning.pressed': token(
624
- 'color.background.warning.pressed',
625
- '#FFE380',
626
- ),
627
- 'color.background.warning.bold': token(
628
- 'color.background.warning.bold',
629
- '#FFAB00',
630
- ),
631
- 'color.background.warning.bold.hovered': token(
632
- 'color.background.warning.bold.hovered',
633
- '#FFC400',
634
- ),
635
- 'color.background.warning.bold.pressed': token(
636
- 'color.background.warning.bold.pressed',
637
- '#FF991F',
638
- ),
639
- 'color.background.success': token('color.background.success', '#E3FCEF'),
640
- 'color.background.success.hovered': token(
641
- 'color.background.success.hovered',
642
- '#ABF5D1',
643
- ),
644
- 'color.background.success.pressed': token(
645
- 'color.background.success.pressed',
646
- '#79F2C0',
647
- ),
648
- 'color.background.success.bold': token(
649
- 'color.background.success.bold',
650
- '#00875A',
651
- ),
652
- 'color.background.success.bold.hovered': token(
653
- 'color.background.success.bold.hovered',
654
- '#57D9A3',
655
- ),
656
- 'color.background.success.bold.pressed': token(
657
- 'color.background.success.bold.pressed',
658
- '#00875A',
659
- ),
660
- 'color.background.discovery': token('color.background.discovery', '#EAE6FF'),
661
- 'color.background.discovery.hovered': token(
662
- 'color.background.discovery.hovered',
663
- '#C0B6F2',
664
- ),
665
- 'color.background.discovery.pressed': token(
666
- 'color.background.discovery.pressed',
667
- '#998DD9',
668
- ),
669
- 'color.background.discovery.bold': token(
670
- 'color.background.discovery.bold',
671
- '#5243AA',
672
- ),
673
- 'color.background.discovery.bold.hovered': token(
674
- 'color.background.discovery.bold.hovered',
675
- '#8777D9',
676
- ),
677
- 'color.background.discovery.bold.pressed': token(
678
- 'color.background.discovery.bold.pressed',
679
- '#5243AA',
680
- ),
681
- 'color.background.information': token(
682
- 'color.background.information',
683
- '#DEEBFF',
684
- ),
685
- 'color.background.information.hovered': token(
686
- 'color.background.information.hovered',
687
- '#B3D4FF',
688
- ),
689
- 'color.background.information.pressed': token(
690
- 'color.background.information.pressed',
691
- '#4C9AFF',
692
- ),
693
- 'color.background.information.bold': token(
694
- 'color.background.information.bold',
695
- '#0052CC',
696
- ),
697
- 'color.background.information.bold.hovered': token(
698
- 'color.background.information.bold.hovered',
699
- '#2684FF',
700
- ),
701
- 'color.background.information.bold.pressed': token(
702
- 'color.background.information.bold.pressed',
703
- '#0052CC',
704
- ),
705
- 'color.blanket': token('color.blanket', '#091e4289'),
706
- 'color.blanket.selected': token('color.blanket.selected', '#388BFF14'),
707
- 'color.blanket.danger': token('color.blanket.danger', '#EF5C4814'),
708
- 'elevation.surface': token('elevation.surface', '#FFFFFF'),
709
- 'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
710
- 'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
711
- 'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
712
- 'elevation.surface.overlay.hovered': token(
713
- 'elevation.surface.overlay.hovered',
714
- '#FAFBFC',
715
- ),
716
- 'elevation.surface.overlay.pressed': token(
717
- 'elevation.surface.overlay.pressed',
718
- '#F4F5F7',
719
- ),
720
- 'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
721
- 'elevation.surface.raised.hovered': token(
722
- 'elevation.surface.raised.hovered',
723
- '#FAFBFC',
724
- ),
725
- 'elevation.surface.raised.pressed': token(
726
- 'elevation.surface.raised.pressed',
727
- '#F4F5F7',
728
- ),
729
- 'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
730
- 'utility.elevation.surface.current': token(
731
- 'utility.elevation.surface.current',
732
- '#FFFFFF',
733
- ),
734
- } as const;
735
-
736
- export type BackgroundColor = keyof typeof backgroundColorMap;
737
- "
738
- `;
739
-
740
- exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
741
- "export const borderColorMap = {
742
- 'color.border': token('color.border', '#091e4221'),
743
- 'color.border.accent.lime': token('color.border.accent.lime', '#6A9A23'),
744
- 'color.border.accent.red': token('color.border.accent.red', '#FF5630'),
745
- 'color.border.accent.orange': token('color.border.accent.orange', '#D94008'),
746
- 'color.border.accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
747
- 'color.border.accent.green': token('color.border.accent.green', '#36B37E'),
748
- 'color.border.accent.teal': token('color.border.accent.teal', '#00B8D9'),
749
- 'color.border.accent.blue': token('color.border.accent.blue', '#0065FF'),
750
- 'color.border.accent.purple': token('color.border.accent.purple', '#6554C0'),
751
- 'color.border.accent.magenta': token(
752
- 'color.border.accent.magenta',
753
- '#CD519D',
754
- ),
755
- 'color.border.accent.gray': token('color.border.accent.gray', '#5E6C84'),
756
- 'color.border.disabled': token('color.border.disabled', '#FAFBFC'),
757
- 'color.border.focused': token('color.border.focused', '#2684FF'),
758
- 'color.border.input': token('color.border.input', '#FAFBFC'),
759
- 'color.border.inverse': token('color.border.inverse', '#FFFFFF'),
760
- 'color.border.selected': token('color.border.selected', '#0052CC'),
761
- 'color.border.brand': token('color.border.brand', '#0052CC'),
762
- 'color.border.danger': token('color.border.danger', '#FF5630'),
763
- 'color.border.warning': token('color.border.warning', '#FFC400'),
764
- 'color.border.success': token('color.border.success', '#00875A'),
765
- 'color.border.discovery': token('color.border.discovery', '#998DD9'),
766
- 'color.border.information': token('color.border.information', '#0065FF'),
767
- 'color.border.bold': token('color.border.bold', '#344563'),
768
- } as const;
769
-
770
- export type BorderColor = keyof typeof borderColorMap;
771
- "
772
- `;
773
-
774
- exports[`@atlaskit/primitives opacity styles are generated correctly 1`] = `
775
- "export const opacityMap = {
776
- 'opacity.disabled': token('opacity.disabled', '0.4'),
777
- 'opacity.loading': token('opacity.loading', '0.2'),
778
- } as const;
779
-
780
- export type Opacity = keyof typeof opacityMap;
781
- "
782
- `;
783
-
784
- exports[`@atlaskit/primitives shadow styles are generated correctly 1`] = `
785
- "export const shadowMap = {
786
- 'elevation.shadow.overflow': token(
787
- 'elevation.shadow.overflow',
788
- '0px 0px 8px #091e423f, 0px 0px 1px #091e424f',
789
- ),
790
- 'elevation.shadow.overflow.perimeter': token(
791
- 'elevation.shadow.overflow.perimeter',
792
- '#091e421f',
793
- ),
794
- 'elevation.shadow.overflow.spread': token(
795
- 'elevation.shadow.overflow.spread',
796
- '#091e4229',
797
- ),
798
- 'elevation.shadow.overlay': token(
799
- 'elevation.shadow.overlay',
800
- '0px 8px 12px #091e423f, 0px 0px 1px #091e424f',
801
- ),
802
- 'elevation.shadow.raised': token(
803
- 'elevation.shadow.raised',
804
- '0px 1px 1px #091e423f, 0px 0px 1px #091e4221',
805
- ),
806
- } as const;
807
-
808
- export type Shadow = keyof typeof shadowMap;
809
- "
810
- `;
811
-
812
- exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
813
- "export const positiveSpaceMap = {
814
- 'space.0': token('space.0', '0px'),
815
- 'space.025': token('space.025', '2px'),
816
- 'space.050': token('space.050', '4px'),
817
- 'space.075': token('space.075', '6px'),
818
- 'space.100': token('space.100', '8px'),
819
- 'space.150': token('space.150', '12px'),
820
- 'space.200': token('space.200', '16px'),
821
- 'space.250': token('space.250', '20px'),
822
- 'space.300': token('space.300', '24px'),
823
- 'space.400': token('space.400', '32px'),
824
- 'space.500': token('space.500', '40px'),
825
- 'space.600': token('space.600', '48px'),
826
- 'space.800': token('space.800', '64px'),
827
- 'space.1000': token('space.1000', '80px'),
828
- };
829
- export type Space = keyof typeof positiveSpaceMap;
830
-
831
- export const negativeSpaceMap = {
832
- 'space.negative.025': token('space.negative.025', '-2px'),
833
- 'space.negative.050': token('space.negative.050', '-4px'),
834
- 'space.negative.075': token('space.negative.075', '-6px'),
835
- 'space.negative.100': token('space.negative.100', '-8px'),
836
- 'space.negative.150': token('space.negative.150', '-12px'),
837
- 'space.negative.200': token('space.negative.200', '-16px'),
838
- 'space.negative.250': token('space.negative.250', '-20px'),
839
- 'space.negative.300': token('space.negative.300', '-24px'),
840
- 'space.negative.400': token('space.negative.400', '-32px'),
841
- };
842
- export type NegativeSpace = keyof typeof negativeSpaceMap;
843
-
844
- export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };
845
-
846
- export type AllSpace = keyof typeof allSpaceMap;
847
- "
848
- `;
849
-
850
- exports[`@atlaskit/primitives surface styles are generated correctly 1`] = `
851
- "export const surfaceColorMap = {
852
- 'elevation.surface': token('elevation.surface', '#FFFFFF'),
853
- 'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
854
- 'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
855
- 'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
856
- 'elevation.surface.overlay.hovered': token(
857
- 'elevation.surface.overlay.hovered',
858
- '#FAFBFC',
859
- ),
860
- 'elevation.surface.overlay.pressed': token(
861
- 'elevation.surface.overlay.pressed',
862
- '#F4F5F7',
863
- ),
864
- 'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
865
- 'elevation.surface.raised.hovered': token(
866
- 'elevation.surface.raised.hovered',
867
- '#FAFBFC',
868
- ),
869
- 'elevation.surface.raised.pressed': token(
870
- 'elevation.surface.raised.pressed',
871
- '#F4F5F7',
872
- ),
873
- 'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
874
- } as const;
875
-
876
- export type SurfaceColor = keyof typeof surfaceColorMap;
877
- "
878
- `;
879
-
880
- exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
881
- "export const textColorMap = {
882
- 'color.text': token('color.text', '#172B4D'),
883
- 'color.text.accent.lime': token('color.text.accent.lime', '#4C6B1F'),
884
- 'color.text.accent.lime.bolder': token(
885
- 'color.text.accent.lime.bolder',
886
- '#37471F',
887
- ),
888
- 'color.text.accent.red': token('color.text.accent.red', '#DE350B'),
889
- 'color.text.accent.red.bolder': token(
890
- 'color.text.accent.red.bolder',
891
- '#BF2600',
892
- ),
893
- 'color.text.accent.orange': token('color.text.accent.orange', '#F18D13'),
894
- 'color.text.accent.orange.bolder': token(
895
- 'color.text.accent.orange.bolder',
896
- '#B65C02',
897
- ),
898
- 'color.text.accent.yellow': token('color.text.accent.yellow', '#FF991F'),
899
- 'color.text.accent.yellow.bolder': token(
900
- 'color.text.accent.yellow.bolder',
901
- '#FF8B00',
902
- ),
903
- 'color.text.accent.green': token('color.text.accent.green', '#00875A'),
904
- 'color.text.accent.green.bolder': token(
905
- 'color.text.accent.green.bolder',
906
- '#006644',
907
- ),
908
- 'color.text.accent.teal': token('color.text.accent.teal', '#00A3BF'),
909
- 'color.text.accent.teal.bolder': token(
910
- 'color.text.accent.teal.bolder',
911
- '#008DA6',
912
- ),
913
- 'color.text.accent.blue': token('color.text.accent.blue', '#0052CC'),
914
- 'color.text.accent.blue.bolder': token(
915
- 'color.text.accent.blue.bolder',
916
- '#0747A6',
917
- ),
918
- 'color.text.accent.purple': token('color.text.accent.purple', '#5243AA'),
919
- 'color.text.accent.purple.bolder': token(
920
- 'color.text.accent.purple.bolder',
921
- '#403294',
922
- ),
923
- 'color.text.accent.magenta': token('color.text.accent.magenta', '#E774BB'),
924
- 'color.text.accent.magenta.bolder': token(
925
- 'color.text.accent.magenta.bolder',
926
- '#DA62AC',
927
- ),
928
- 'color.text.accent.gray': token('color.text.accent.gray', '#505F79'),
929
- 'color.text.accent.gray.bolder': token(
930
- 'color.text.accent.gray.bolder',
931
- '#172B4D',
932
- ),
933
- 'color.text.disabled': token('color.text.disabled', '#A5ADBA'),
934
- 'color.text.inverse': token('color.text.inverse', '#FFFFFF'),
935
- 'color.text.selected': token('color.text.selected', '#0052CC'),
936
- 'color.text.brand': token('color.text.brand', '#0065FF'),
937
- 'color.text.danger': token('color.text.danger', '#DE350B'),
938
- 'color.text.warning': token('color.text.warning', '#974F0C'),
939
- 'color.text.warning.inverse': token('color.text.warning.inverse', '#172B4D'),
940
- 'color.text.success': token('color.text.success', '#006644'),
941
- 'color.text.discovery': token('color.text.discovery', '#403294'),
942
- 'color.text.information': token('color.text.information', '#0052CC'),
943
- 'color.text.subtlest': token('color.text.subtlest', '#7A869A'),
944
- 'color.text.subtle': token('color.text.subtle', '#42526E'),
945
- 'color.link': token('color.link', '#0052CC'),
946
- 'color.link.pressed': token('color.link.pressed', '#0747A6'),
947
- 'color.link.visited': token('color.link.visited', '#403294'),
948
- 'color.link.visited.pressed': token('color.link.visited.pressed', '#403294'),
949
- } as const;
950
-
951
- export type TextColor = keyof typeof textColorMap;
952
- "
953
- `;
package/scripts/__tests__/codegen.test.tsx DELETED
@@ -1,41 +0,0 @@
1
- import { createColorStylesFromTemplate } from '../color-codegen-template';
2
- import { createElevationStylesFromTemplate } from '../elevation-codegen-template';
3
- import { createSpacingStylesFromTemplate } from '../spacing-codegen-template';
4
-
5
- describe('@atlaskit/primitives', () => {
6
- // colour stuff
7
- test('text styles are generated correctly', () => {
8
- expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
9
- });
10
- test('background styles are generated correctly', () => {
11
- expect(createColorStylesFromTemplate('background')).toMatchSnapshot();
12
- });
13
- test('border styles are generated correctly', () => {
14
- expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
15
- });
16
-
17
- // elevation stuff
18
- test('opacity styles are generated correctly', () => {
19
- expect(createElevationStylesFromTemplate('opacity')).toMatchSnapshot();
20
- });
21
- test('shadow styles are generated correctly', () => {
22
- expect(createElevationStylesFromTemplate('shadow')).toMatchSnapshot();
23
- });
24
- test('surface styles are generated correctly', () => {
25
- expect(createElevationStylesFromTemplate('surface')).toMatchSnapshot();
26
- });
27
-
28
- // spacing
29
- test('spacing styles are generated correctly', () => {
30
- expect(createSpacingStylesFromTemplate()).toMatchSnapshot();
31
- });
32
-
33
- test('incorrect config throws', () => {
34
- expect(() =>
35
- createColorStylesFromTemplate('fizzbuzz' as any),
36
- ).toThrowError();
37
- expect(() =>
38
- createElevationStylesFromTemplate('fizzbuzz' as any),
39
- ).toThrowError();
40
- });
41
- });