@atlaskit/primitives 1.0.11 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 1.2.0
+
+### Minor Changes
+
+- [`37e0d67942b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37e0d67942b) - - Add missing `xcss` type export for `TextColor`
+  - Fixes a bug where the `xcss` function did not accept `color.link` or `color.link.pressed` token values for text color
+
+## 1.1.0
+
+### Minor Changes
+
+- [`0116391a81e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0116391a81e) - - Support `xcss` in `Pressable`
+  - Remove dependency on `@atlaskit/focus-ring`
+
 ## 1.0.11
 
 ### Patch Changes

package/dist/cjs/components/pressable.js

@@ -1,22 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
-var _baseBox = _interopRequireDefault(require("./internal/base-box"));
-var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
-/** @jsx jsx */
-var defaultStyles = (0, _react2.css)({
+var _react = _interopRequireWildcard(require("react"));
+var _xcss = require("../xcss/xcss");
+var _box = _interopRequireDefault(require("./box"));
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var defaultStyles = (0, _xcss.xcss)({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+var baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+var focusRingStyles = (0, _xcss.xcss)({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -42,8 +64,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    xcssStyles = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_baseBox.default, (0, _extends2.default)({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  var styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
+  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -55,10 +81,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 var _default = UNSAFE_PRESSABLE;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/cjs/xcss/style-maps.partial.js

@@ -60,7 +60,7 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -250,7 +250,9 @@ var textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 exports.textColorMap = textColorMap;
 var fillMap = {

package/dist/es2019/components/pressable.js

@@ -1,13 +1,31 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
-import BaseBox from './internal/base-box';
-const defaultStyles = css({
+import React, { forwardRef } from 'react';
+import { xcss } from '../xcss/xcss';
+import Box from './box';
+const defaultStyles = xcss({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+const baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+const focusRingStyles = xcss({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -32,9 +50,13 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
   isDisabled,
   type = 'button',
   testId,
+  xcss: xcssStyles,
   ...htmlAttributes
 }, ref) => {
-  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  let styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
+  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -46,9 +68,11 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 export default UNSAFE_PRESSABLE;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/es2019/xcss/style-maps.partial.js

@@ -48,7 +48,7 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -235,7 +235,9 @@ export const textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 export const fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/esm/components/pressable.js

@@ -1,15 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import FocusRing from '@atlaskit/focus-ring';
-import BaseBox from './internal/base-box';
-var defaultStyles = css({
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"];
+import React, { forwardRef } from 'react';
+import { xcss } from '../xcss/xcss';
+import Box from './box';
+var defaultStyles = xcss({
   cursor: 'pointer'
 });
 
+// TODO: Duplicated FocusRing styles due to lack of `xcss` support
+// and to prevent additional dependency
+var baseFocusRingStyles = {
+  outlineColor: 'color.border.focused',
+  outlineWidth: 'border.width.outline',
+  outlineStyle: 'solid',
+  outlineOffset: 'space.025'
+};
+var focusRingStyles = xcss({
+  ':focus-visible': baseFocusRingStyles,
+  '@supports not selector(*:focus-visible)': {
+    ':focus': baseFocusRingStyles
+  },
+  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+    ':focus-visible': {
+      outline: '1px solid'
+    }
+  }
+});
+
 /**
  * __UNSAFE_PRESSABLE__
  *
@@ -35,8 +54,12 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
+    xcssStyles = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
+  var styles = [defaultStyles, focusRingStyles];
+  styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
+  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
     ref: ref,
     testId: testId,
     type: type,
@@ -48,9 +71,11 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    as: "button",
-    css: defaultStyles,
+    as: "button"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: styles,
     disabled: isDisabled
-  }), children));
+  }), children);
 });
 export default UNSAFE_PRESSABLE;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.11",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/esm/xcss/style-maps.partial.js

@@ -49,7 +49,7 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -236,7 +236,9 @@ export var textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 export var fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/types/components/pressable.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import { type ReactElement, type ReactNode } from 'react';
-import { type BaseBoxProps } from './internal/base-box';
-export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+import { type BoxProps } from './box';
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
     /**
      * `children` should be defined to ensure buttons are not empty,
      * because they should have labels.

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';

package/dist/types/xcss/style-maps.partial.d.ts

@@ -50,7 +50,7 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -241,6 +241,8 @@ export declare const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/dist/types-ts4.5/components/pressable.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import { type ReactElement, type ReactNode } from 'react';
-import { type BaseBoxProps } from './internal/base-box';
-export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+import { type BoxProps } from './box';
+export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
     /**
      * `children` should be defined to ensure buttons are not empty,
      * because they should have labels.

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
-export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -50,7 +50,7 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -241,6 +241,8 @@ export declare const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.11",
+  "version": "1.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -113,7 +113,6 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -887,7 +887,7 @@ export type StackProps<T extends ElementType = 'div'> = {
 } & BasePrimitiveProps;
 
 // @public (undocumented)
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 
 // @public (undocumented)
 const textColorMap: {
@@ -924,6 +924,8 @@ const textColorMap: {
   readonly 'color.text.information': 'var(--ds-text-information)';
   readonly 'color.text.subtlest': 'var(--ds-text-subtlest)';
   readonly 'color.text.subtle': 'var(--ds-text-subtle)';
+  readonly 'color.link': 'var(--ds-link)';
+  readonly 'color.link.pressed': 'var(--ds-link-pressed)';
 };
 
 // @public (undocumented)

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -512,6 +512,8 @@ exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
   'color.text.information': token('color.text.information', '#0052CC'),
   'color.text.subtlest': token('color.text.subtlest', '#7A869A'),
   'color.text.subtle': token('color.text.subtle', '#42526E'),
+  'color.link': token('color.link', '#0052CC'),
+  'color.link.pressed': token('color.link.pressed', '#0747A6'),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/scripts/color-codegen-template.tsx

@@ -25,7 +25,8 @@ const tokenStyles = {
     prefix: 'color.text.',
     cssProperty: 'color',
     filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.text.prefix),
+      t.token.startsWith(tokenStyles.text.prefix) ||
+      t.token.startsWith('color.link'),
   },
   background: {
     objectName: 'backgroundColor',

package/tmp/api-report-tmp.d.ts

@@ -599,7 +599,7 @@ export type StackProps<T extends ElementType = 'div'> = {
 } & BasePrimitiveProps;
 
 // @public (undocumented)
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 
 // @public (undocumented)
 const textColorMap: {
@@ -636,6 +636,8 @@ const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 
 // @public (undocumented)