@atlaskit/primitives 17.1.1 → 18.0.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/primitives
 
+## 18.0.1
+
+### Patch Changes
+
+- [`5db9e3f21a52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5db9e3f21a52f) -
+  Internal refactoring
+- Updated dependencies
+
+## 18.0.0
+
+### Major Changes
+
+- [`2abd451d54eb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2abd451d54eb2) -
+  Removes atlassian-legacy-light/dark color themes from the tokens package. These themes are unused
+  and non-functional in terms of color contrast. As a result some primitive components may recieve
+  modern fallback color values in some scenarios, however these are inline with the latest token
+  themes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.1.1
 
 ### Patch Changes

package/codemods/hypermod.config.tsx

@@ -1,6 +1,10 @@
 import compiledForkStage1 from './compiled-fork-stage1/transform';
 
-const config = {
+const config: {
+	presets: {
+		'compiled-fork-stage1': typeof compiledForkStage1;
+	};
+} = {
 	presets: {
 		'compiled-fork-stage1': compiledForkStage1,
 	},

package/constellation/anchor/usage.mdx

@@ -39,48 +39,50 @@ Anchors are underlined by default. This helps differentiate links from regular t
 accessibility requirement. Using color alone to differentiate links isn't accessible, especially if
 links are surrounded by other text.
 
-<DoDont
-	type="do"
-	image={{
-		url: anchor1Do,
-		alt: 'A link surrounded by regular text. The link provides color and an underline to differentiate the link from regular text.',
-	}}
->
-	Use both underlines and color for links surrounded by regular text.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: anchor1Dont,
-		alt: "A link surrounded by regular text. The link provides only color but no underline to differentiate the link from regular text, however it's insufficient.",
-	}}
->
-	Only use color to differentiate links from regular text.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: anchor1Do,
+			alt: 'A link surrounded by regular text. The link provides color and an underline to differentiate the link from regular text.',
+		}}
+	>
+		Use both underlines and color for links surrounded by regular text.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: anchor1Dont,
+			alt: "A link surrounded by regular text. The link provides only color but no underline to differentiate the link from regular text, however it's insufficient.",
+		}}
+	>
+		Only use color to differentiate links from regular text.
+	</DoDont>
+</DoDontGrid>
 
 Only remove underlines and omit other style affordances such as color if the context surrounding the
 link makes it clear that it's interactive, such as in navigation or a card layout.
 
-<DoDont
-	type="do"
-	image={{
-		url: anchor2Do,
-		alt: 'Links in a navigation section. The links use a subtle text color and no underline, which is appropriate because the surrounding context makes it clear that they are links.',
-	}}
->
-	Omit underlines and color when surrounding context makes it clear it's a link.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: anchor2Dont,
-		alt: 'Links in a navigation section. The links use a bright text color and underline, which is not required because the surrounding context makes it clear that they are links.',
-	}}
->
-	Use underlines and color when surrounding context already makes it clear it's a link.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: anchor2Do,
+			alt: 'Links in a navigation section. The links use a subtle text color and no underline, which is appropriate because the surrounding context makes it clear that they are links.',
+		}}
+	>
+		Omit underlines and color when surrounding context makes it clear it's a link.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: anchor2Dont,
+			alt: 'Links in a navigation section. The links use a bright text color and underline, which is not required because the surrounding context makes it clear that they are links.',
+		}}
+	>
+		Use underlines and color when surrounding context already makes it clear it's a link.
+	</DoDont>
+</DoDontGrid>
 
 Also, don't underline text that isn't a link. This makes the text look clickable because it looks a
 link.

package/constellation/pressable/usage.mdx

@@ -32,28 +32,29 @@ Only use pressable when existing components such as [buttons](/components/button
 Using [existing components](/components) with safe customizations is usually faster and keeps
 Atlassian UI more visually consistent as things change.
 
-<DoDont
-	type="do"
-	image={{
-		url: pressablePrimaryDo,
-		alt: 'A set of custom buttons built with pressable that are not possible using existing design system components',
-	}}
->
-	Use pressable to create buttons when there isn't an existing design system component to achieve
-	your use case.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: pressablePrimaryDont,
-		alt: 'A custom button build with Pressable that looks similar to Button, an existing design system component',
-	}}
->
-	Don't use pressable to redesign elements that already exists in the Atlassian design system, such
-	as <a href="/components/button/examples">buttons</a>. This can cause visual and behavioral
-	inconsistency in apps.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: pressablePrimaryDo,
+			alt: 'A set of custom buttons built with pressable that are not possible using existing design system components',
+		}}
+	>
+		Use pressable to create buttons when there isn't an existing design system component to achieve
+		your use case.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: pressablePrimaryDont,
+			alt: 'A custom button build with Pressable that looks similar to Button, an existing design system component',
+		}}
+	>
+		Don't use pressable to redesign elements that already exists in the Atlassian design system,
+		such as <a href="/components/button/examples">buttons</a>. This can cause visual and behavioral
+		inconsistency in apps.
+	</DoDont>
+</DoDontGrid>
 
 ## Accessibility
 

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

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "17.1.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -98,9 +98,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   // @ts-expect-error we don't allow `a` on Focusable for makers as they should use Anchor instead
   , (0, _extends2.default)({
     as: Component,
-    className: xcss
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
-    ,
+    className: xcss,
     style: style,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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

@@ -336,9 +336,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
-  var node = /*#__PURE__*/React.createElement(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  , (0, _extends2.default)({
+  var node = /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
     style: style
     // @ts-ignore -- Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,

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

@@ -40,9 +40,7 @@ var Focusable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, safeHtmlAttributes, {
     // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ref: ref,
-    className: (0, _runtime.ax)(["_ymio1r31 _ypr0glyw _zcxs1o36 _mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gjf _2mwq1gjf", xcss])
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
+    className: (0, _runtime.ax)(["_ymio1r31 _ypr0glyw _zcxs1o36 _mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gjf _2mwq1gjf", xcss]),
     style: style,
     "data-testid": testId
   }), children);

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: "17.1.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -78,9 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // Adding a tabIndex of 0 to the button will allow it to be focused on click.
     // This is a known issue in Safari that is meant to be "intended", see https://bugs.webkit.org/show_bug.cgi?id=22261
     ,
-    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (0, _deviceCheck.isSafari)() && !isDisabled ? 0 : undefined
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
-    ,
+    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (0, _deviceCheck.isSafari)() && !isDisabled ? 0 : undefined,
     style: style
   }, safeHtmlAttributes, {
     type: type,

package/dist/cjs/components/anchor.js

@@ -26,7 +26,7 @@ var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "paddi
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 // TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
 var focusRingStyles = (0, _react2.css)({
   '&:focus, &:focus-visible': {
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "17.1.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -130,9 +130,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
   (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   var Component = isRouterLink ? RouterLink : 'a';
-  return (0, _react2.jsx)(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  , (0, _extends2.default)({
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style,
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/components/bleed.js

@@ -14,7 +14,7 @@ var _xcss = require("../xcss/xcss");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled
 
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box'

package/dist/cjs/components/box.js

@@ -57,9 +57,7 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   var node =
   // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-  (0, _react2.jsx)(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  , (0, _extends2.default)({
+  (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style
     // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
     ,

package/dist/cjs/components/pressable.js

@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "17.1.0",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -108,7 +108,6 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)("button", (0, _extends2.default)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/responsive/hide.js

@@ -14,7 +14,7 @@ var _buildMediaQueryCss = require("./build-media-query-css");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
 var hideAboveQueries = (0, _buildMediaQueryCss.UNSAFE_buildAboveMediaQueryCSS)({
   display: 'none'