@atlaskit/primitives - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

CHANGELOG.md

 # @atlaskit/primitives
 
+## 4.1.0
+
+### Minor Changes
+
+- [#80528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80528) [`8877e9b57d55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8877e9b57d55) - Added `size` prop which will replace `variant` prop in the next major version.
+
 ## 4.0.2
@@ -4,0 +10,0 @@

dist/cjs/components/anchor.js

@@ -79,3 +79,3 @@ "use strict";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -82,0 +82,0 @@ actionSubject: 'link'

dist/cjs/components/pressable.js

@@ -83,3 +83,3 @@ "use strict";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -86,0 +86,0 @@ actionSubject: 'button'

dist/cjs/components/text.js

@@ -50,2 +50,7 @@ "use strict";
 };
+var tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
@@ -96,16 +101,13 @@ var useHasTextAncestor = function useHasTextAncestor() {
     id = props.id,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant,
-    weight = props.weight;
+    _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, "\""));
-
-  // Remove the ability to bypass typescript errors for maxLines
-  var maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
-    maxLines = props.maxLines;
-  }
+  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, _styleMaps.fontStylesMap[variant], 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[localSize], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
@@ -112,0 +114,0 @@ WebkitLineClamp: maxLines

dist/cjs/xcss/style-maps.partial.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyFontMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
+exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -500,3 +500,3 @@ var _react = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @codegenId typography
@@ -508,6 +508,6 @@ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  */
-var bodyFontMap = exports.bodyFontMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+var fontSizeMap = exports.fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
@@ -553,3 +553,3 @@ var fontWeightMap = exports.fontWeightMap = {
 var fontFamilyStylesMap = exports.fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 var surfaceColorStylesMap = exports.surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
@@ -556,0 +556,0 @@ var isSurfaceColorToken = exports.isSurfaceColorToken = function isSurfaceColorToken(color) {

dist/es2019/components/anchor.js

@@ -65,3 +65,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -68,0 +68,0 @@ actionSubject: 'link'

dist/es2019/components/pressable.js

@@ -69,3 +69,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -72,0 +72,0 @@ actionSubject: 'button'

dist/es2019/components/text.js

@@ -41,2 +41,7 @@ /** @jsx jsx */
 };
+const tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 const HasTextAncestorContext = /*#__PURE__*/createContext(false);
@@ -86,16 +91,13 @@ const useHasTextAncestor = () => useContext(HasTextAncestorContext);
     id,
-    variant = 'body',
-    weight
+    size = 'medium',
+    variant,
+    weight,
+    maxLines
   } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
-
-  // Remove the ability to bypass typescript errors for maxLines
-  let maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
-    maxLines = props.maxLines;
-  }
+  const localSize = variant && tempVariantSizeMap[variant] || size;
   const hasTextAncestor = useHasTextAncestor();
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
-    css: [resetStyles, fontStylesMap[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    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],
     style: {
@@ -102,0 +104,0 @@ WebkitLineClamp: maxLines

dist/es2019/xcss/style-maps.partial.js

@@ -493,3 +493,3 @@ import { css } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @codegenId typography
@@ -501,6 +501,6 @@ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  */
-export const bodyFontMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+export const fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
@@ -548,4 +548,4 @@ export const fontWeightMap = {
 export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export const fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+export const fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;

dist/esm/components/anchor.js

@@ -69,3 +69,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -72,0 +72,0 @@ actionSubject: 'link'

dist/esm/components/pressable.js

@@ -73,3 +73,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/primitives",
-    packageVersion: "4.0.2",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
@@ -76,0 +76,0 @@ actionSubject: 'button'

dist/esm/components/text.js

@@ -43,2 +43,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 };
+var tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
@@ -89,16 +94,13 @@ var useHasTextAncestor = function useHasTextAncestor() {
     id = props.id,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant,
-    weight = props.weight;
+    _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, "\""));
-
-  // Remove the ability to bypass typescript errors for maxLines
-  var maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
-    maxLines = props.maxLines;
-  }
+  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
-    css: [resetStyles, fontStylesMap[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
+    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],
     style: {
@@ -105,0 +107,0 @@ WebkitLineClamp: maxLines

dist/esm/xcss/style-maps.partial.js

@@ -493,3 +493,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @codegenId typography
@@ -501,6 +501,6 @@ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  */
-export var bodyFontMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+export var fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
@@ -546,3 +546,3 @@ export var fontWeightMap = {
 export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export var fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+export var fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
@@ -549,0 +549,0 @@ export var isSurfaceColorToken = function isSurfaceColorToken(color) {

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

 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
@@ -42,6 +42,10 @@ declare const asAllowlist: readonly [
     /**
-     * Text variant.
+     * @deprecated. Use size instead.
      */
-    variant?: BodyFont;
+    variant?: 'body' | 'body.small' | 'body.large';
     /**
+     * Text size.
+     */
+    size?: FontSize;
+    /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
@@ -48,0 +52,0 @@ */

dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -518,3 +518,3 @@ import { SerializedStyles } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @codegenId typography
@@ -526,8 +526,8 @@ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  */
-export declare const bodyFontMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
+export declare const fontSizeMap: {
+    medium: "var(--ds-font-body)";
+    large: "var(--ds-font-body-large)";
+    small: "var(--ds-font-body-small)";
 };
-export type BodyFont = keyof typeof bodyFontMap;
+export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
@@ -658,3 +658,3 @@ bold: "var(--ds-font-weight-bold)";
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type BodyFontToken = keyof typeof bodyFontMap;
+type BodyFontToken = keyof typeof fontSizeMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
@@ -661,0 +661,0 @@ type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;

dist/types/components/text.d.ts

 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
@@ -37,6 +37,10 @@ declare const asAllowlist: readonly ["span", "p", "strong", "em"];
     /**
-     * Text variant.
+     * @deprecated. Use size instead.
      */
-    variant?: BodyFont;
+    variant?: 'body' | 'body.small' | 'body.large';
     /**
+     * Text size.
+     */
+    size?: FontSize;
+    /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
@@ -43,0 +47,0 @@ */

dist/types/xcss/style-maps.partial.d.ts

@@ -518,3 +518,3 @@ import { SerializedStyles } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @codegenId typography
@@ -526,8 +526,8 @@ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  */
-export declare const bodyFontMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
+export declare const fontSizeMap: {
+    medium: "var(--ds-font-body)";
+    large: "var(--ds-font-body-large)";
+    small: "var(--ds-font-body-small)";
 };
-export type BodyFont = keyof typeof bodyFontMap;
+export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
@@ -647,3 +647,3 @@ bold: "var(--ds-font-weight-bold)";
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type BodyFontToken = keyof typeof bodyFontMap;
+type BodyFontToken = keyof typeof fontSizeMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
@@ -650,0 +650,0 @@ type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1820815

increased by0.04%

Lines of code

15025

increased by0.15%

No dependency changes