@atlaskit/primitives 11.1.2 → 12.0.1

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # @atlaskit/primitives
 
+## 12.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.0
+
+### Major Changes
+
+- [#128232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128232)
+  [`c97dfe9e5b27d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c97dfe9e5b27d) -
+  Box no longer supports usage as an anchor tag (`<a>`). Use
+  [the Anchor primitive](https://atlassian.design/components/primitives/anchor/examples) instead,
+  which is more specialized. This has benefits including:
+
+  - Built-in event tracking support
+  - Default text underlines
+  - Automatic router link configuration from `@atlaskit/app-provider`
+  - Built-in accessible focus styles
+  - Warning screen-readers when links open in new windows
+
+  **Migrating to Anchor**
+
+  - First consider if another ADS link component such as `@atlaskit/link` is better suited rather
+    than building a custom anchor.
+  - Anchor has focus ring styles built-in, so remove existing styles including
+    `@atlaskit/focus-ring`.
+  - Anchor has a default cursor (`cursor: pointer`), so existing styles can be removed.
+  - Anchor has a default link underline, so an existing style can be removed.
+
+  **Before migration**
+
+  ```tsx
+  import { Box, xcss } from '@atlaskit/primitives';
+  import FocusRing from '@atlaskit/focus-ring';
+
+  const anchorStyles = xcss({
+  	cursor: 'pointer',
+  	color: 'color.link',
+  	textDecoration: 'underline',
+  });
+
+  const MyApp = () => (
+  	<FocusRing>
+  		<Box as="a" href="/foo" xcss={anchorStyles}>
+  			Hello
+  		</Box>
+  	</FocusRing>
+  );
+  ```
+
+  **After migration**
+
+  ```tsx
+  import { Anchor, xcss } from '@atlaskit/primitives';
+
+  const anchorStyles = xcss({
+  	color: 'color.link',
+  });
+
+  const MyApp = () => (
+  	<Anchor href="/foo" xcss={anchorStyles}>
+  		Hello
+  	</Anchor>
+  );
+  ```
+
 ## 11.1.2
 
 ### Patch Changes

package/constellation/box/usage.mdx

@@ -21,8 +21,8 @@ section wrappers.
 Box, being generic in nature, can be "over-used", so it’s important to consider situations where
 more specific and expressive primitives could be used. For example, use
 [inline](/components/primitives/inline/usage) and [stack](/components/primitives/stack/usage) to
-manage horizontal and vertical layouts, or [pressable](/components/primitives/pressable/usage) to
-build custom buttons.
+manage horizontal and vertical layouts, [pressable](/components/primitives/pressable/usage) to build
+custom buttons, or [anchor](/components/primitives/anchor/usage) to build custom links.
 
 ## Styling
 
@@ -43,4 +43,5 @@ Display behavior is set by using the available props or using
 - [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
 - [Manage vertical layout using a stack component](/components/primitives/stack/usage)
 - [Build custom buttons using a pressable component](/components/primitives/pressable/usage)
+- [Build custom links using an anchor component](/components/primitives/anchor/usage)
 - [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/overview/index.mdx

@@ -45,6 +45,7 @@ Additional layouts not well-expressed by these core primitives can also be compo
 Interactive primitives can be used to build:
 
 - buttons (see [pressable](/components/primitives/pressable))
+- links (see [anchor](/components/primitives/anchor))
 
 ## Installation
 
@@ -97,4 +98,5 @@ and vertical `Stack` components.
 - [Bleed](/components/primitives/bleed/examples)
 - [Flex](/components/primitives/flex/examples)
 - [Pressable](/components/primitives/pressable/examples)
+- [Anchor](/components/primitives/anchor/examples)
 - [xcss](/components/primitives/xcss/usage)

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/box.js

@@ -19,7 +19,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
+// Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

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: "11.1.2",
+    packageVersion: "12.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

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

package/dist/es2019/components/box.js

@@ -11,7 +11,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
 import { parseXcss } from '../xcss/xcss';
 import { SurfaceContext } from './internal/surface-provider';
 
-// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
+// Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/es2019/components/pressable.js

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

package/dist/esm/components/anchor.js

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

package/dist/esm/components/box.js

@@ -14,7 +14,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
 import { parseXcss } from '../xcss/xcss';
 import { SurfaceContext } from './internal/surface-provider';
 
-// Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
+// Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

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: "11.1.2",
+    packageVersion: "12.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
 import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { type SVGElements } from './internal/types';
 import type { BasePrimitiveProps, StyleProp } from './types';
-type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button' | 'a'>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];

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

@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
 import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { type SVGElements } from './internal/types';
 import type { BasePrimitiveProps, StyleProp } from './types';
-type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button' | 'a'>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "11.1.2",
+	"version": "12.0.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -117,13 +117,13 @@
 		"codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.0.0",
-		"@atlaskit/app-provider": "^1.3.0",
-		"@atlaskit/css": "^0.3.0",
-		"@atlaskit/ds-lib": "^2.3.0",
+		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/app-provider": "^1.4.0",
+		"@atlaskit/css": "^0.4.0",
+		"@atlaskit/ds-lib": "^2.4.0",
 		"@atlaskit/interaction-context": "^2.1.0",
-		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/visually-hidden": "^1.4.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.1.0",
@@ -138,8 +138,8 @@
 		"@af/accessibility-testing": "*",
 		"@af/formatting": "*",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/toggle": "^13.2.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/codegen": "^0.1.0",
 		"@testing-library/react": "^12.1.5",