@atlaskit/primitives 5.1.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 5.2.0
+
+### Minor Changes
+
+- [#86279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86279) [`0988fda99a0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0988fda99a0d) - Renaming text alignment prop for Text component from `textAlign` to `align`
+
 ## 5.1.2
 
 ### Patch Changes

package/constellation/text/examples.mdx

@@ -7,6 +7,7 @@ order: 0
 import Basic from '../../examples/constellation/text/basic';
 import ColorInverse from '../../examples/constellation/text/color-inverse';
 import Weight from '../../examples/constellation/text/weight';
+import Align from '../../examples/constellation/text/align';
 import AsElement from '../../examples/constellation/text/as-element';
 
 ## Basic
@@ -15,19 +16,25 @@ Implements the [Atlassian typography system](/foundations/typography/) as a comp
 
 The `size` prop expresses the visual appearance of the text element.
 
-<Example Component={Basic} pacckageName="@atlaskit/primitives" />
+<Example Component={Basic} packageName="@atlaskit/primitives" />
 
 ## Color
 
 Set `color` to change the text color, defaults to `text.color` if not nested in other Text components. When used within a [box component](/components/primitives/box) that has a bold background color, the text color will automatically be inverted.
 
-<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
+<Example Component={ColorInverse} packageName="@atlaskit/primitives" />
 
 ## Weight
 
 Set `weight` to change the font weight.
 
-<Example Component={Weight} pacckageName="@atlaskit/primitives" />
+<Example Component={Weight} packageName="@atlaskit/primitives" />
+
+## Alignment
+
+Set `align` to change the text alignment.
+
+<Example Component={Align} packageName="@atlaskit/primitives" />
 
 ## Rendered HTML tag
 

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/bleed.js

@@ -8,10 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box'

package/dist/cjs/components/pressable.js

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

package/dist/cjs/components/text.js

@@ -87,6 +87,8 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     Component = _ref$as === void 0 ? 'span' : _ref$as,
     colorProp = _ref.color,
     textAlign = _ref.textAlign,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? textAlign : _ref$align,
     testId = _ref.testId,
     id = _ref.id,
     _ref$size = _ref.size,
@@ -99,7 +101,7 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
     ref: ref,
-    css: [resetStyles, _styleMaps.fontStylesMap[size], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles, _styleMaps.fontStylesMap[size], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/es2019/components/anchor.js

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

package/dist/es2019/components/bleed.js

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';

package/dist/es2019/components/pressable.js

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

package/dist/es2019/components/text.js

@@ -76,6 +76,7 @@ const Text = /*#__PURE__*/forwardRef(({
   as: Component = 'span',
   color: colorProp,
   textAlign,
+  align = textAlign,
   testId,
   id,
   size = 'medium',
@@ -88,7 +89,7 @@ const Text = /*#__PURE__*/forwardRef(({
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
     ref: ref,
-    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/esm/components/anchor.js

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

package/dist/esm/components/bleed.js

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';

package/dist/esm/components/pressable.js

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

package/dist/esm/components/text.js

@@ -79,6 +79,8 @@ var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
     Component = _ref$as === void 0 ? 'span' : _ref$as,
     colorProp = _ref.color,
     textAlign = _ref.textAlign,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? textAlign : _ref$align,
     testId = _ref.testId,
     id = _ref.id,
     _ref$size = _ref.size,
@@ -91,7 +93,7 @@ var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
     ref: ref,
-    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    css: [resetStyles, fontStylesMap[size], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

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

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React, { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import type { BasePrimitiveProps } from './types';

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

@@ -30,9 +30,13 @@ type TextPropsBase<T extends ElementType = 'span'> = {
      */
     maxLines?: number;
     /**
-     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
+     * @deprecated The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign;
     /**
      * Text size.
      */
@@ -62,5 +66,5 @@ declare const textAlignMap: {
  *
  * @internal
  */
-declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
+declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "align" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

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

@@ -1,7 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/** @jsx jsx */
 import React, { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import type { BasePrimitiveProps } from './types';

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

@@ -35,9 +35,13 @@ type TextPropsBase<T extends ElementType = 'span'> = {
      */
     maxLines?: number;
     /**
-     * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
+     * @deprecated The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text alignment.
+     */
+    align?: TextAlign;
     /**
      * Text size.
      */
@@ -67,5 +71,5 @@ declare const textAlignMap: {
  *
  * @internal
  */
-declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
+declare const Text: import("react").ForwardRefExoticComponent<Pick<TextPropsBase<ElementType> & Omit<BasePrimitiveProps, "xcss">, "color" | "maxLines" | "textAlign" | "size" | "weight" | "children" | "as" | "id" | "role" | "align" | "testId" | "data-testid"> & import("react").RefAttributes<any>>;
 export default Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"