@atlaskit/primitives 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 3.1.0
+
+### Minor Changes
+
+- [#76431](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76431) [`c6819de73d02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6819de73d02) - Default text color + allow color inheritance if explicitly defined
+
 ## 3.0.0
 
 ### Major Changes

package/constellation/text/examples.mdx

@@ -4,9 +4,10 @@ description: Text is a token-backed typography component to display body and UI
 order: 0
 ---
 
-import TextDefault from '../../examples/constellation/text/basic';
-import TextAsElement from '../../examples/constellation/text/as-element';
+import Basic from '../../examples/constellation/text/basic';
 import ColorInverse from '../../examples/constellation/text/color-inverse';
+import Weight from '../../examples/constellation/text/weight';
+import AsElement from '../../examples/constellation/text/as-element';
 
 ## Basic
 
@@ -14,16 +15,22 @@ Implements the [Atlassian typography system](/foundations/typography/) as a comp
 
 The `variant` prop expresses the visual appearance of the text element.
 
-<Example Component={TextDefault} pacckageName="@atlaskit/primitives" />
+<Example Component={Basic} pacckageName="@atlaskit/primitives" />
 
-## Rendered HTML tag
+## Color
 
-By default, `body` variants are rendered as `<p>` tags and `ui` variants are rendered as `<span>` tags. This can be ovrridden by the `as` prop.
+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={TextAsElement} packageName="@atlaskit/primitives" />
+<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
 
-## Color
+## Weight
 
-Set `color` to change the text color. When used within a [box component](/components/primitives/box) that has a background color set, the text color can be automatically inverted without setting the `color` prop depending on the background color of the box.
+Set `weight` to change the front weight.
 
-<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />
+<Example Component={Weight} pacckageName="@atlaskit/primitives" />
+
+## Rendered HTML tag
+
+Set `as` to change the rendered HTML element, defaults to `span`.
+
+<Example Component={AsElement} packageName="@atlaskit/primitives" />

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

package/dist/cjs/components/text.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
@@ -18,50 +19,62 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
 // Long term we should remove those instances from the reset - it should be a reset to 0.
 // For now, at least we know <Text> will be unaffected by this.
-var resetStyles = (0, _react.css)({
+var resetStyles = (0, _react2.css)({
   margin: 0
 });
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
-var strongStyles = (0, _react.css)({
+var strongStyles = (0, _react2.css)({
   fontWeight: 'bold'
 });
-var emStyles = (0, _react.css)({
+var emStyles = (0, _react2.css)({
   fontStyle: 'italic'
 });
 var textAlignMap = {
-  center: (0, _react.css)({
+  center: (0, _react2.css)({
     textAlign: 'center'
   }),
-  end: (0, _react.css)({
+  end: (0, _react2.css)({
     textAlign: 'end'
   }),
-  start: (0, _react.css)({
+  start: (0, _react2.css)({
     textAlign: 'start'
   })
 };
-var truncationStyles = (0, _react.css)({
+var truncationStyles = (0, _react2.css)({
   display: '-webkit-box',
   overflow: 'hidden',
   WebkitBoxOrient: 'vertical'
 });
 var wordBreakMap = {
-  breakAll: (0, _react.css)({
+  breakAll: (0, _react2.css)({
     wordBreak: 'break-all'
   })
 };
+var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return (0, _react.useContext)(HasTextAncestorContext);
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-var useColor = function useColor(colorProp) {
+var useColor = function useColor(colorProp, hasTextAncestor) {
   var surface = (0, _surfaceProvider.useSurface)();
 
   /**
-   * Where the color of the surface is inverted we override the user choice
+   * Where the color of the surface is inverted we always override the color
    * as there is no valid choice that is not covered by the override.
    */
-  var color = _styleMaps.inverseColorMap.hasOwnProperty(surface) ? _styleMaps.inverseColorMap[surface] : colorProp;
-  return color;
+  if (_styleMaps.inverseColorMap.hasOwnProperty(surface)) {
+    return _styleMaps.inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
 };
 
 /**
@@ -76,7 +89,8 @@ var useColor = function useColor(colorProp) {
 var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var asElement = props.as,
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'span' : _props$as,
     colorProp = props.color,
     textAlign = props.textAlign,
     testId = props.testId,
@@ -84,10 +98,6 @@ var Text = function Text(_ref) {
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'body' : _props$variant,
     weight = props.weight;
-
-  // body variants -> p
-  // ui variants -> span
-  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   (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
@@ -95,14 +105,20 @@ var Text = function Text(_ref) {
   if ('maxLines' in props && variant.includes('body')) {
     maxLines = props.maxLines;
   }
-  var color = useColor(colorProp);
-  return (0, _react.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+  var hasTextAncestor = useHasTextAncestor();
+  var color = useColor(colorProp, hasTextAncestor);
+  var component = (0, _react2.jsx)(Component, {
+    css: [resetStyles, variantStyles[variant], 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
     },
     "data-testid": testId,
     id: id
   }, children);
+  return hasTextAncestor ?
+  // no need to re-apply context if the text is already wrapped
+  component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
 };
 var _default = exports.default = Text;

package/dist/es2019/components/anchor.js

@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.0.0",
+    packageVersion: "3.1.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: "3.0.0",
+    packageVersion: "3.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/text.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-
+import { createContext, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
@@ -42,19 +42,29 @@ const wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
+const HasTextAncestorContext = /*#__PURE__*/createContext(false);
+const useHasTextAncestor = () => useContext(HasTextAncestorContext);
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-const useColor = colorProp => {
+const useColor = (colorProp, hasTextAncestor) => {
   const surface = useSurface();
 
   /**
-   * Where the color of the surface is inverted we override the user choice
+   * Where the color of the surface is inverted we always override the color
    * as there is no valid choice that is not covered by the override.
    */
-  const color = inverseColorMap.hasOwnProperty(surface) ? inverseColorMap[surface] : colorProp;
-  return color;
+  if (inverseColorMap.hasOwnProperty(surface)) {
+    return inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
 };
 
 /**
@@ -71,7 +81,7 @@ const Text = ({
   ...props
 }) => {
   const {
-    as: asElement,
+    as: Component = 'span',
     color: colorProp,
     textAlign,
     testId,
@@ -79,10 +89,6 @@ const Text = ({
     variant = 'body',
     weight
   } = props;
-
-  // body variants -> p
-  // ui variants -> span
-  const Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -90,14 +96,20 @@ const Text = ({
   if ('maxLines' in props && variant.includes('body')) {
     maxLines = props.maxLines;
   }
-  const color = useColor(colorProp);
-  return jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+  const hasTextAncestor = useHasTextAncestor();
+  const color = useColor(colorProp, hasTextAncestor);
+  const component = jsx(Component, {
+    css: [resetStyles, variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
     "data-testid": testId,
     id: id
   }, children);
+  return hasTextAncestor ?
+  // no need to re-apply context if the text is already wrapped
+  component : jsx(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
 };
 export default Text;

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

package/dist/esm/components/text.js

@@ -4,7 +4,7 @@ var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
-
+import { createContext, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
@@ -44,19 +44,31 @@ var wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
+var HasTextAncestorContext = /*#__PURE__*/createContext(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return useContext(HasTextAncestorContext);
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-var useColor = function useColor(colorProp) {
+var useColor = function useColor(colorProp, hasTextAncestor) {
   var surface = useSurface();
 
   /**
-   * Where the color of the surface is inverted we override the user choice
+   * Where the color of the surface is inverted we always override the color
    * as there is no valid choice that is not covered by the override.
    */
-  var color = inverseColorMap.hasOwnProperty(surface) ? inverseColorMap[surface] : colorProp;
-  return color;
+  if (inverseColorMap.hasOwnProperty(surface)) {
+    return inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
 };
 
 /**
@@ -71,7 +83,8 @@ var useColor = function useColor(colorProp) {
 var Text = function Text(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var asElement = props.as,
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'span' : _props$as,
     colorProp = props.color,
     textAlign = props.textAlign,
     testId = props.testId,
@@ -79,10 +92,6 @@ var Text = function Text(_ref) {
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'body' : _props$variant,
     weight = props.weight;
-
-  // body variants -> p
-  // ui variants -> span
-  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -90,14 +99,20 @@ var Text = function Text(_ref) {
   if ('maxLines' in props && variant.includes('body')) {
     maxLines = props.maxLines;
   }
-  var color = useColor(colorProp);
-  return jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+  var hasTextAncestor = useHasTextAncestor();
+  var color = useColor(colorProp, hasTextAncestor);
+  var component = jsx(Component, {
+    css: [resetStyles, variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },
     "data-testid": testId,
     id: id
   }, children);
+  return hasTextAncestor ?
+  // no need to re-apply context if the text is already wrapped
+  component : jsx(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
 };
 export default Text;

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

@@ -36,10 +36,10 @@ type TextPropsBase = {
     children: ReactNode;
     /**
      * Token representing text color with a built-in fallback value.
-     * Will apply inverse text color automatically if placed within a Box with backgroundColor.
-     *
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `text.color` if not nested in other Text components.
      */
-    color?: TextColor;
+    color?: TextColor | 'inherit';
     /**
      * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */

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

@@ -41,10 +41,10 @@ type TextPropsBase = {
     children: ReactNode;
     /**
      * Token representing text color with a built-in fallback value.
-     * Will apply inverse text color automatically if placed within a Box with backgroundColor.
-     *
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `text.color` if not nested in other Text components.
      */
-    color?: TextColor;
+    color?: TextColor | 'inherit';
     /**
      * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */

package/package.json

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