@atlaskit/primitives 4.1.1 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 5.0.0
+
+### Major Changes
+
+- [#81744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81744) [`30e3d8c81030`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30e3d8c81030) - Replaced `Text`'s `variant` prop with a `size` prop. The `size` prop takes three values: `"small"`, `"medium"` (default), and `"large"`.
+
+  Migration guide:
+
+  - `variant="body.small"` -> `size="small"`
+  - `variant="body"` -> `size="medium"` (Note: Since medium is the default, the size prop can be omitted here)
+  - `variant="body.large"` -> `size="large"`
+
 ## 4.1.1
 
 ### Patch Changes

package/constellation/grid/examples.mdx

@@ -10,6 +10,7 @@ import GridTemplate from '../../examples/constellation/grid/template';
 import GridTemplateArea from '../../examples/constellation/grid/template-area';
 import GridTemplateRow from '../../examples/constellation/grid/template-row';
 import GridAutoFlow from '../../examples/constellation/grid/auto-flow';
+import ResponsiveGrid from '../../examples/constellation/grid/responsive';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
@@ -61,7 +62,12 @@ Grid-prefixed properties in CSS do not have this prefix in the component API. `g
 
 <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
 
+## Responsive grid
+
+Here, we construct a grid layout that adapts from a single column to a four-column layout depending on the viewport size.
+
+<Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/grid" />
+
 You may also be looking for:
 
-- [responsive layout grid](/components/grid)
 - [legacy page grid](/components/page/grid)

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: "4.1.1",
+    packageVersion: "5.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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

package/dist/cjs/components/text.js

@@ -47,11 +47,6 @@ var wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
-var tempVariantSizeMap = {
-  body: 'medium',
-  'body.small': 'small',
-  'body.large': 'large'
-};
 var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return (0, _react.useContext)(HasTextAncestorContext);
@@ -99,15 +94,13 @@ var Text = function Text(_ref) {
     id = props.id,
     _props$size = props.size,
     size = _props$size === void 0 ? 'medium' : _props$size,
-    variant = props.variant,
     weight = props.weight,
     maxLines = props.maxLines;
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, _styleMaps.fontStylesMap[localSize], 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, textAlign && textAlignMap[textAlign], 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: "4.1.1",
+    packageVersion: "5.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

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

package/dist/es2019/components/text.js

@@ -38,11 +38,6 @@ const wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
-const tempVariantSizeMap = {
-  body: 'medium',
-  'body.small': 'small',
-  'body.large': 'large'
-};
 const HasTextAncestorContext = /*#__PURE__*/createContext(false);
 const useHasTextAncestor = () => useContext(HasTextAncestorContext);
 
@@ -88,16 +83,14 @@ const Text = ({
     testId,
     id,
     size = 'medium',
-    variant,
     weight,
     maxLines
   } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
-  const localSize = variant && tempVariantSizeMap[variant] || size;
   const hasTextAncestor = useHasTextAncestor();
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
-    css: [resetStyles, fontStylesMap[localSize], 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, textAlign && textAlignMap[textAlign], 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: "4.1.1",
+    packageVersion: "5.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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

package/dist/esm/components/text.js

@@ -40,11 +40,6 @@ var wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
-var tempVariantSizeMap = {
-  body: 'medium',
-  'body.small': 'small',
-  'body.large': 'large'
-};
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return useContext(HasTextAncestorContext);
@@ -92,15 +87,13 @@ var Text = function Text(_ref) {
     id = props.id,
     _props$size = props.size,
     size = _props$size === void 0 ? 'medium' : _props$size,
-    variant = props.variant,
     weight = props.weight,
     maxLines = props.maxLines;
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
-    css: [resetStyles, fontStylesMap[localSize], 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, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

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

@@ -33,10 +33,6 @@ type TextPropsBase = {
      * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
-    /**
-     * @deprecated. Use size instead.
-     */
-    variant?: 'body' | 'body.small' | 'body.large';
     /**
      * Text size.
      */

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

@@ -38,10 +38,6 @@ type TextPropsBase = {
      * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
-    /**
-     * @deprecated. Use size instead.
-     */
-    variant?: 'body' | 'body.small' | 'body.large';
     /**
      * Text size.
      */

package/package.json

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