@atlaskit/primitives 14.9.0 → 14.10.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/primitives
 
+## 14.10.1
+
+### Patch Changes
+
+- [#188952](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188952)
+  [`1a88e6e2601ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a88e6e2601ae) -
+  Migrated usage of renamed/deprecated icons
+
+## 14.10.0
+
+### Minor Changes
+
+- [#177956](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177956)
+  [`124aac4a851f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/124aac4a851f1) -
+  Added MetricText component which provides a convenient way to consume new metric typography tokens
+  for charts and other numerical components. Made metric tokens available in xcss via the font
+  shorthand property.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.9.0
 
 ### Minor Changes

package/constellation/focusable/code.mdx

@@ -0,0 +1,24 @@
+---
+title: Focusable
+description: A focus ring clearly indicates which item has keyboard focus.
+order: 1
+props:
+  packageName: '@atlaskit/primitives/compiled'
+  exports:
+    - Focusable
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
+/>
+
+Focusable also supports all valid props as specified by the HTML element type in the `as` prop. The
+default is a `button`, so it would support all valid `HTMLButtonElement` props.
+
+## Props
+
+<TSMorphProps exportName="Focusable" packageName="@atlaskit/primitives/compiled" />

package/constellation/focusable/examples.mdx

@@ -0,0 +1,30 @@
+---
+title: Focusable
+description: A focus ring clearly indicates which item has keyboard focus.
+order: 0
+---
+
+import FocusableDefault from '../../examples/constellation/focusable/default';
+import FocusableInset from '../../examples/constellation/focusable/inset';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
+/>
+
+## Default
+
+A focus ring indicates the currently focused item. The default focus ring shows a line around the
+outside of the focused item.
+
+<Example Component={FocusableDefault} packageName="@atlaskit/primitives/compiled/focusable" />
+
+## Inset line
+
+You can toggle the focus ring to show inside the focused item. This is for cases when an inset line
+is more visible than the default line or to avoid overlapping other UI.
+
+<Example Component={FocusableInset} packageName="@atlaskit/primitives/compiled/focusable" />

package/constellation/focusable/usage.mdx

@@ -0,0 +1,19 @@
+---
+title: Focusable
+description: A focus ring clearly indicates which item has keyboard focus.
+order: 2
+---
+
+## Usage
+
+It's important that every keyboard-operable part of an interface shows a clear focus indicator when
+focused. This makes it clear which item has focus when navigating with a keyboard.
+
+![A few different generic components shown with a focus ring around them. A slider circle and button show an outside lined focus ring, while the radio and text input have an inset focus ring line. The line is blue.](./images/focus-ring-asset.png)
+
+## Accessibility
+
+### Include focus indicators on any keyboard operable UI
+
+Most design system components have the focus ring or other focus indication built-in. If you are
+composing a new component, make sure it includes a focus ring or other focus indicator.

package/constellation/metric-text/code.mdx

@@ -0,0 +1,21 @@
+---
+title: MetricText
+description: MetricText is a token-backed typography component to display metrics.
+order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - MetricText
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
+/>
+
+## Props
+
+<TSMorphProps exportName="MetricText" packageName="@atlaskit/primitives" />

package/constellation/metric-text/examples.mdx

@@ -0,0 +1,37 @@
+---
+title: MetricText
+description: MetricText is a token-backed typography component to display metrics.
+order: 0
+---
+
+import MetricTextLarge from '../../examples/constellation/metric-text/metric-text-large';
+import MetricTextMedium from '../../examples/constellation/metric-text/metric-text-medium';
+import MetricTextSmall from '../../examples/constellation/metric-text/metric-text-small';
+import MetricTextAlign from '../../examples/constellation/metric-text/metric-text-align';
+
+## Basic
+
+Use a MetricText component to display numerical information. There are three sizes available via the
+`size` prop:
+
+- `'large'` for numbers in the middle of large donut charts.
+- `'medium'` for numbers in the middle of medium donut charts.
+- `'small'` for numbers in the middle of small donut charts and single-value tiles.
+
+### Large
+
+<Example Component={MetricTextLarge} packageName="@atlaskit/primitives" />
+
+### Medium
+
+<Example Component={MetricTextMedium} packageName="@atlaskit/primitives" />
+
+### Small
+
+<Example Component={MetricTextSmall} packageName="@atlaskit/primitives" />
+
+## Alignment
+
+MetricText can be aligned using the `align` prop.
+
+<Example Component={MetricTextAlign} packageName="@atlaskit/primitives" />

package/constellation/metric-text/usage.mdx

@@ -0,0 +1,13 @@
+---
+title: MetricText
+description: MetricText is a token-backed typography component to display metrics.
+order: 2
+---
+
+## Usage
+
+Use the MetricText component to display metrics such as key numbers, statistics, and data points
+within Atlassian apps.
+
+Read more usage guidance for metric text in our
+[Typography foundations](/foundations/typography#metric).

package/constellation/text/usage.mdx

@@ -6,14 +6,14 @@ order: 2
 
 ## Usage
 
-Use the text component for all non-heading text, including main content, detailed descriptions, and
+Use the Text component for all non-heading text, including main content, detailed descriptions, and
 text in components.
 
 For each size, a specific line height is automatically set ensuring text is compliant with
 accessibility standards.
 
 Read more usage guidance for body text in our
-[Typography foundations](/foundations/typography-beta#body).
+[Typography foundations](/foundations/typography#body).
 
 ## Accessibility
 

package/dist/cjs/compiled/components/anchor.js

@@ -69,7 +69,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/flex.js

@@ -81,6 +81,7 @@ var styles = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/anchor.js

@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/flex.js

@@ -86,6 +86,7 @@ var baseStyles = (0, _react2.css)({
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/cjs/components/grid.js

@@ -129,6 +129,7 @@ var gridAutoFlowMap = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Grid, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.js

@@ -55,7 +55,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/flex.js

@@ -73,6 +73,7 @@ const styles = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -90,7 +90,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/flex.js

@@ -79,6 +79,7 @@ const baseStyles = css({
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/es2019/components/grid.js

@@ -120,6 +120,7 @@ const gridAutoFlowMap = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Grid, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/anchor.js

@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/flex.js

@@ -73,6 +73,7 @@ var styles = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/flex.js

@@ -79,6 +79,7 @@ var baseStyles = css({
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/esm/components/grid.js

@@ -121,6 +121,7 @@ var gridAutoFlowMap = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Grid, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.8.4",
+    packageVersion: "14.10.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/types/compiled/components/flex.d.ts

@@ -56,6 +56,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

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

@@ -85,6 +85,7 @@ declare const alignItemsMap: {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

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

@@ -121,6 +121,7 @@ declare const gridAutoFlowMap: {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Grid, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/dist/types-ts4.5/compiled/components/flex.d.ts

@@ -56,6 +56,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

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

@@ -85,6 +85,7 @@ declare const alignItemsMap: {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Flex, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

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

@@ -121,6 +121,7 @@ declare const gridAutoFlowMap: {
  *
  * @example
  * ```tsx
+ * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
  * import { Grid, Box } from '@atlaskit/primitives'
  *
  * const Component = () => (

package/metric-text/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/primitives/metric-text",
+  "main": "../dist/cjs/components/metric-text.js",
+  "module": "../dist/esm/components/metric-text.js",
+  "module:es2019": "../dist/es2019/components/metric-text.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/components/metric-text.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/components/metric-text.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.9.0",
+	"version": "14.10.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -104,6 +104,15 @@
 						"type": "beta"
 					}
 				},
+				{
+					"title": "MetricText",
+					"folder": "metric-text",
+					"slug": "primitives/metric-text",
+					"id": "@atlaskit/primitives/metric-text",
+					"status": {
+						"type": "beta"
+					}
+				},
 				{
 					"title": "Pressable",
 					"folder": "pressable",
@@ -117,8 +126,7 @@
 					"id": "@atlaskit/primitives/anchor"
 				}
 			]
-		},
-		"runReact18": true
+		}
 	},
 	"scripts": {
 		"codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
@@ -126,11 +134,11 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/app-provider": "^2.2.0",
-		"@atlaskit/css": "^0.11.0",
-		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/ds-lib": "^4.1.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^5.3.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -152,15 +160,15 @@
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/dropdown-menu": "^16.1.0",
-		"@atlaskit/flag": "^17.1.0",
+		"@atlaskit/dropdown-menu": "^16.2.0",
+		"@atlaskit/flag": "^17.2.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.5.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/logo": "^19.1.0",
+		"@atlaskit/logo": "^19.5.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/range": "^9.1.0",
@@ -222,6 +230,7 @@
 		"./stack": "./src/components/stack.tsx",
 		"./inline": "./src/components/inline.tsx",
 		"./text": "./src/components/text.tsx",
+		"./metric-text": "./src/components/metric-text.tsx",
 		"./pressable": "./src/components/pressable.tsx",
 		"./anchor": "./src/components/anchor.tsx",
 		"./responsive": "./src/responsive/index.tsx",