@atlaskit/primitives 14.11.1 → 14.11.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/primitives
 
+## 14.11.2
+
+### Patch Changes
+
+- [#193601](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193601)
+  [`d5503d3fc3717`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5503d3fc3717) -
+  Fix issue with positioning in the anchor primitive.
+
 ## 14.11.1
 
 ### Patch Changes

package/constellation/box/examples.mdx

@@ -37,8 +37,7 @@ demonstrates how each prop works with space tokens.
 The nomenclature used by these props follows
 [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). This
 naming is used to support different
-[writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in Atlassian
-products.
+[writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in Atlassian apps.
 
 ## Background color
 
@@ -68,8 +67,8 @@ rather than applying conditional behavior to individual props.
 
 Box is designed to be composed with inline, stack, and other components to create layouts.
 
-Atlassian uses dozens of distinct card-like components across products. Therefore, rather than
-providing a strict component, the Atlassian Design System empowers and supports you to build your
-own card components in ways that are consistent and will scale over time.
+Atlassian uses dozens of distinct card-like components across apps. Therefore, rather than providing
+a strict component, the Atlassian Design System empowers and supports you to build your own card
+components in ways that are consistent and will scale over time.
 
 <Example Component={BoxPracticalUseCase} packageName="@atlaskit/primitives/box" />

package/constellation/inline/examples.mdx

@@ -114,7 +114,7 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 ## Practical use case
 
-An example of how an inline component might be used in product, using Atlassian Design System
+An example of how an inline component might be used in an app, using Atlassian Design System
 components.
 
 <Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />

package/constellation/pressable/usage.mdx

@@ -52,7 +52,7 @@ Atlassian UI more visually consistent as things change.
 >
 	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 products.
+	inconsistency in apps.
 </DoDont>
 
 ## Accessibility
@@ -123,5 +123,5 @@ questions.
 ## Related
 
 - Use existing components such as [buttons](/components/button/examples) or
-  [menus](/components/menu/examples) for most actions in Atlassian products.
+  [menus](/components/menu/examples) for most actions in Atlassian apps.
 - Use the [anchor primitive for custom links](/components/primitives/button/usage).

package/constellation/stack/examples.mdx

@@ -91,7 +91,7 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 ## Practical use case
 
-An example of how a stack component might be used in product, using Atlassian Design System
+An example of how a stack component might be used in an app, using Atlassian Design System
 components.
 
 <Example Component={StackPracticalUseCase} packageName="@atlaskit/primitives/stack" />

package/constellation/text/examples.mdx

@@ -82,9 +82,9 @@ The available values for paragraph spacing are outlined in the
 
 ## Truncation
 
-Truncation in product experiences [should be avoided](/content/language-and-grammar/#truncation).
+[Avoid truncation](/content/language-and-grammar/#truncation) whenever possible.
 
-However if truncation cannot be avoided, for example when displaying user-generated content, use the
+If truncation cannot be avoided, for example when displaying user-generated content, use the
 `maxLines` prop to indicate how text should be truncated.
 
 <Example Component={TextTruncation} packageName="@atlaskit/primitives" />

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

@@ -1,4 +1,5 @@
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu1r31{text-decoration-color:currentColor}
 ._ajmmnqa1{text-decoration-style:solid}
+._kqswh2mm{position:relative}
 ._vchhusvi{box-sizing:border-box}

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

@@ -21,13 +21,15 @@ var _appProvider = require("@atlaskit/app-provider");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _focusable = _interopRequireDefault(require("./focusable"));
 var _excluded = ["href", "children", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss", "newWindowLabel"],
   _excluded2 = ["className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
+  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi",
+  position: "_kqswh2mm"
 };
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
@@ -69,7 +71,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -109,7 +111,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " , ").concat(newWindowLabel) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    xcss: (0, _react2.cx)(styles.root, xcss),
+    xcss: (0, _react2.cx)(styles.root, (0, _platformFeatureFlags.fg)('platform_design-system-team_anchor-positioning') ? styles.position : undefined, xcss),
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(_visuallyHidden.default, {

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

package/dist/cjs/components/anchor.js

@@ -16,6 +16,7 @@ var _appProvider = require("@atlaskit/app-provider");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
@@ -51,6 +52,9 @@ var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   textDecoration: 'underline'
 });
+var positionStyles = (0, _react2.css)({
+  position: 'relative'
+});
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
 // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
@@ -100,7 +104,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -142,7 +146,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
     "".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    css: [baseStyles, focusRingStyles,
+    css: [baseStyles, (0, _platformFeatureFlags.fg)('platform_design-system-team_anchor-positioning') ? positionStyles : undefined, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor],
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

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

@@ -1,4 +1,5 @@
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu1r31{text-decoration-color:currentColor}
 ._ajmmnqa1{text-decoration-style:solid}
+._kqswh2mm{position:relative}
 ._vchhusvi{box-sizing:border-box}

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

@@ -11,10 +11,12 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Focusable from './focusable';
 const styles = {
-  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
+  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi",
+  position: "_kqswh2mm"
 };
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
@@ -55,7 +57,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -97,7 +99,7 @@ const AnchorNoRef = ({
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} , ${newWindowLabel}` : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
-    xcss: cx(styles.root, xcss),
+    xcss: cx(styles.root, fg('platform_design-system-team_anchor-positioning') ? styles.position : undefined, xcss),
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {

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

package/dist/es2019/components/anchor.js

@@ -13,6 +13,7 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
@@ -41,6 +42,9 @@ const baseStyles = css({
   boxSizing: 'border-box',
   textDecoration: 'underline'
 });
+const positionStyles = css({
+  position: 'relative'
+});
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
 // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
@@ -90,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -135,7 +139,7 @@ const AnchorNoRef = ({
     //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
     `${ariaLabel} , ${newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
-    css: [baseStyles, focusRingStyles,
+    css: [baseStyles, fg('platform_design-system-team_anchor-positioning') ? positionStyles : undefined, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     backgroundColor && backgroundColorStylesMap[backgroundColor],
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/components/pressable.js

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

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

@@ -1,4 +1,5 @@
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu1r31{text-decoration-color:currentColor}
 ._ajmmnqa1{text-decoration-style:solid}
+._kqswh2mm{position:relative}
 ._vchhusvi{box-sizing:border-box}

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

@@ -15,10 +15,12 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Focusable from './focusable';
 var styles = {
-  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
+  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi",
+  position: "_kqswh2mm"
 };
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
@@ -60,7 +62,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -100,7 +102,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " , ").concat(newWindowLabel) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    xcss: cx(styles.root, xcss),
+    xcss: cx(styles.root, fg('platform_design-system-team_anchor-positioning') ? styles.position : undefined, xcss),
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {

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

package/dist/esm/components/anchor.js

@@ -17,6 +17,7 @@ import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
@@ -45,6 +46,9 @@ var baseStyles = css({
   boxSizing: 'border-box',
   textDecoration: 'underline'
 });
+var positionStyles = css({
+  position: 'relative'
+});
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
 // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
@@ -94,7 +98,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.11.0",
+    packageVersion: "14.11.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -136,7 +140,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
     "".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    css: [baseStyles, focusRingStyles,
+    css: [baseStyles, fg('platform_design-system-team_anchor-positioning') ? positionStyles : undefined, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     backgroundColor && backgroundColorStylesMap[backgroundColor],
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.11.1",
+	"version": "14.11.2",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -235,5 +235,10 @@
 		"./anchor": "./src/components/anchor.tsx",
 		"./responsive": "./src/responsive/index.tsx",
 		"./compiled": "./src/compiled/index.tsx"
+	},
+	"platform-feature-flags": {
+		"platform_design-system-team_anchor-positioning": {
+			"type": "boolean"
+		}
 	}
 }