@atlaskit/ds-explorations 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 0.1.3
+
+### Patch Changes
+
+- [`d6328e5e1ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6328e5e1ec) - Removes the default values for `<Text />`.
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/cjs/components/text.partial.js

@@ -124,8 +124,6 @@ var truncateStyles = (0, _react.css)({
  */
 
 var Text = function Text(_ref) {
-  var _colorMap$surface;
-
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'span' : _ref$as,
       children = _ref.children,
@@ -145,7 +143,7 @@ var Text = function Text(_ref) {
   var _ref2 = colorTuple || [],
       _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
       _ref3$ = _ref3[0],
-      color = _ref3$ === void 0 ? (_colorMap$surface = _colorMap.colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text' : _ref3$,
+      color = _ref3$ === void 0 ? _colorMap.colorMap[surface] : _ref3$,
       fallback = _ref3[1];
 
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/dist/es2019/components/text.partial.js

@@ -117,11 +117,9 @@ const Text = ({
   testId,
   UNSAFE_style
 }) => {
-  var _colorMap$surface;
-
   const surface = useSurface(); // @ts-ignore
 
-  const [color = (_colorMap$surface = colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text', fallback] = colorTuple || [];
+  const [color = colorMap[surface], fallback] = colorTuple || [];
   invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
   return jsx(Component, {
     style: { ...UNSAFE_style,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/dist/esm/components/text.partial.js

@@ -111,8 +111,6 @@ var truncateStyles = css({
  */
 
 var Text = function Text(_ref) {
-  var _colorMap$surface;
-
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'span' : _ref$as,
       children = _ref.children,
@@ -132,7 +130,7 @@ var Text = function Text(_ref) {
   var _ref2 = colorTuple || [],
       _ref3 = _slicedToArray(_ref2, 2),
       _ref3$ = _ref3[0],
-      color = _ref3$ === void 0 ? (_colorMap$surface = colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text' : _ref3$,
+      color = _ref3$ === void 0 ? colorMap[surface] : _ref3$,
       fallback = _ref3[1];
 
   invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
     "team": "Design System Team",
     "inPublicMirror": false,
-    "releaseModel": "scheduled"
+    "releaseModel": "continuous"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "fs-extra": "^4.0.2",
     "prettier": "^2.1.1",
     "react-dom": "^16.8.0",

package/report.api.md

@@ -4,15 +4,20 @@
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
-```ts
-import { CSSProperties } from 'react';
+````ts
+import type { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import { SerializedStyles } from '@emotion/utils';
+import { SerializedStyles } from '@emotion/react';
+
+declare const asAllowlist: readonly ['span', 'div', 'p'];
+
+declare type AsElement = typeof asAllowlist[number];
 
 declare type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -45,6 +50,27 @@ declare const backgroundColorMap: {
   'elevation.surface.overlay': SerializedStyles;
 };
 
+declare const backgroundHoverColorMap: {
+  'inverse.subtle': SerializedStyles;
+  input: SerializedStyles;
+  neutral: SerializedStyles;
+  'neutral.subtle': SerializedStyles;
+  'neutral.bold': SerializedStyles;
+  'brand.bold': SerializedStyles;
+  selected: SerializedStyles;
+  'selected.bold': SerializedStyles;
+  danger: SerializedStyles;
+  'danger.bold': SerializedStyles;
+  warning: SerializedStyles;
+  'warning.bold': SerializedStyles;
+  success: SerializedStyles;
+  'success.bold': SerializedStyles;
+  discovery: SerializedStyles;
+  'discovery.bold': SerializedStyles;
+  information: SerializedStyles;
+  'information.bold': SerializedStyles;
+};
+
 declare interface BasePrimitiveProps {
   /**
    * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
@@ -62,7 +88,7 @@ declare type BorderColor = keyof typeof borderColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
@@ -109,78 +135,6 @@ declare const borderWidthMap: {
   '3px': SerializedStyles;
 };
 
-declare interface BoxProps
-  extends Omit<HTMLAttributes<HTMLElement>, 'style'>,
-    BasePrimitiveProps {
-  /**
-   * The DOM element to render as the Box. Defaults to `div`.
-   */
-  as?: ElementType;
-  /**
-   * Elements to be rendered inside the Box.
-   */
-  children: ReactNode;
-  /**
-   * Token representing background color with a fallback.
-   */
-  backgroundColor?: [BackgroundColor, string];
-  /**
-   * Defines border style.
-   */
-  borderStyle?: BorderStyle;
-  /**
-   * Defines border width.
-   */
-  borderWidth?: BorderWidth;
-  /**
-   * Token representing border color with a fallback.
-   */
-  borderColor?: [BorderColor, string];
-  /**
-   * Defines border radius.
-   */
-  borderRadius?: BorderRadius;
-  /**
-   * Defines the main axis direction.
-   */
-  flexDirection?: FlexDirection;
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignItems?: FlexAlignItems;
-  /**
-   * Used to align children along the main axis.
-   */
-  justifyContent?: FlexJustifyContent;
-  /**
-   * Shorthand for `paddingBlock` and `paddingInline` together.
-   *
-   * @see paddingBlock
-   * @see paddingInline
-   */
-  padding?: GlobalSpacingToken;
-  /**
-   * Token representing CSS `padding-block`.
-   */
-  paddingBlock?: GlobalSpacingToken;
-  /**
-   * Token representing CSS `padding-inline`.
-   */
-  paddingInline?: GlobalSpacingToken;
-  /**
-   * Token representing width.
-   */
-  width?: GlobalSpacingToken;
-  /**
-   * Token representing height.
-   */
-  height?: GlobalSpacingToken;
-  /**
-   * Defines display type and layout. Defaults to `flex`.
-   */
-  display?: Display;
-}
-
 declare type Display = keyof typeof displayMap;
 
 declare const displayMap: {
@@ -251,9 +205,9 @@ declare const flexJustifyContentMap_3: {
 declare type FontSize = keyof typeof fontSizeMap;
 
 declare const fontSizeMap: {
-  '11': SerializedStyles;
-  '12': SerializedStyles;
-  '14': SerializedStyles;
+  '11px': SerializedStyles;
+  '12px': SerializedStyles;
+  '14px': SerializedStyles;
 };
 
 declare type FontWeight = keyof typeof fontWeightMap;
@@ -261,9 +215,10 @@ declare type FontWeight = keyof typeof fontWeightMap;
 declare const fontWeightMap: {
   '400': SerializedStyles;
   '500': SerializedStyles;
+  '700': SerializedStyles;
 };
 
-declare type GlobalSpacingToken = keyof typeof SPACING_SCALE;
+declare type GlobalSpacingToken = keyof typeof UNSAFE_SPACING_SCALE;
 
 declare interface InlineProps extends BasePrimitiveProps {
   /**
@@ -289,6 +244,13 @@ declare interface InlineProps extends BasePrimitiveProps {
   children: ReactNode;
 }
 
+declare type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
+
+declare interface InteractionSurfaceProps extends BasePrimitiveProps {
+  children?: ReactNode;
+  appearance?: InteractionBackgroundColor;
+}
+
 declare type LineHeight = keyof typeof lineHeightMap;
 
 declare const lineHeightMap: {
@@ -301,18 +263,10 @@ declare const lineHeightMap: {
   '40px': SerializedStyles;
 };
 
-declare const SPACING_SCALE: {
-  'sp-0': number;
-  'sp-25': number;
-  'sp-50': number;
-  'sp-75': number;
-  'sp-100': number;
-  'sp-200': number;
-  'sp-300': number;
-  'sp-400': number;
-  'sp-500': number;
-  'sp-600': number;
-  'sp-800': number;
+declare const positionMap: {
+  absolute: SerializedStyles;
+  relative: SerializedStyles;
+  static: SerializedStyles;
 };
 
 declare interface StackProps extends BasePrimitiveProps {
@@ -346,7 +300,7 @@ declare type TextColor = keyof typeof textColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
@@ -367,65 +321,114 @@ declare const textColorMap: {
   information: SerializedStyles;
 };
 
-declare interface TextProps extends BasePrimitiveProps {
+declare type TextTransform = keyof typeof textTransformMap;
+
+declare const textTransformMap: {
+  none: SerializedStyles;
+  lowercase: SerializedStyles;
+  uppercase: SerializedStyles;
+};
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const UNSAFE_Box: ForwardRefExoticComponent<
+  UNSAFE_BoxProps<HTMLElement> & RefAttributes<HTMLElement>
+>;
+
+export declare interface UNSAFE_BoxProps<T extends HTMLElement = HTMLElement>
+  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
+    BasePrimitiveProps {
   /**
-   * HTML tag to be rendered. Defaults to `span`.
+   * The DOM element to render as the Box. Defaults to `div`.
    */
-  as?:
-    | 'span'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'label'
-    | 'a'
-    | 'ul'
-    | 'ol'
-    | 'p';
+  as?: ElementType;
   /**
-   * Elements rendered within the Text element
+   * Elements to be rendered inside the Box.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
-   * Text color
+   * The html className attribute.
+   *
+   * Before using this prop please ensure:
+   * - The styles cannot otherwise be achieved through `Box` directly.
+   * - The use case needs custom styles that cannot be designed or implemented differently
+   *
+   * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
+   *
+   * @see `@atlaskit/eslint-plugin-design-system`
    */
-  color?: [TextColor, string];
+  className?: string;
   /**
-   * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   * Token representing background color with a fallback.
    */
-  fontSize?: FontSize;
+  backgroundColor?: [BackgroundColor, string];
   /**
-   * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   * Defines border style.
    */
-  fontWeight?: FontWeight;
+  borderStyle?: BorderStyle;
   /**
-   * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   * Defines border width.
    */
-  lineHeight?: LineHeight;
+  borderWidth?: BorderWidth;
   /**
-   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   * Token representing border color with a fallback.
    */
-  textAlign?: TextAlign;
+  borderColor?: [BorderColor, string];
+  /**
+   * Defines border radius.
+   */
+  borderRadius?: BorderRadius;
+  /**
+   * Defines the main axis direction.
+   */
+  flexDirection?: FlexDirection;
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
   /**
-   * For use with `a` link tags.
+   * Used to align children along the main axis.
    */
-  href?: string;
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Shorthand for `paddingBlock` and `paddingInline` together.
+   *
+   * @see paddingBlock
+   * @see paddingInline
+   */
+  padding?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-block`.
+   */
+  paddingBlock?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-inline`.
+   */
+  paddingInline?: GlobalSpacingToken;
+  /**
+   * Token representing width.
+   */
+  width?: GlobalSpacingToken;
+  /**
+   * Token representing height.
+   */
+  height?: GlobalSpacingToken;
+  /**
+   * Defines display type and layout. Defaults to `flex`.
+   */
+  display?: Display;
+  /**
+   * CSS position property.
+   */
+  position?: keyof typeof positionMap;
 }
 
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export declare const UNSAFE_Box: ForwardRefExoticComponent<
-  BoxProps & RefAttributes<HTMLElement>
->;
-
 /**
  * __Inline__
  *
@@ -437,6 +440,38 @@ export declare const UNSAFE_Inline: ForwardRefExoticComponent<
   InlineProps & RefAttributes<HTMLDivElement>
 >;
 
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+export declare const UNSAFE_InteractionSurface: ({
+  appearance,
+  children,
+  testId,
+}: InteractionSurfaceProps) => jsx.JSX.Element;
+
+export declare const UNSAFE_SPACING_SCALE: {
+  'sp-0': number;
+  'sp-25': number;
+  'sp-50': number;
+  'sp-75': number;
+  'sp-100': number;
+  'sp-150': number;
+  'sp-200': number;
+  'sp-300': number;
+  'sp-400': number;
+  'sp-500': number;
+  'sp-600': number;
+  'sp-800': number;
+};
+
 /**
  * __Stack__
  *
@@ -457,7 +492,59 @@ export declare const UNSAFE_Stack: ForwardRefExoticComponent<
  *
  * @internal
  */
-export declare const UNSAFE_Text: FC<TextProps>;
+export declare const UNSAFE_Text: FC<UNSAFE_TextProps>;
+
+export declare interface UNSAFE_TextProps extends BasePrimitiveProps {
+  /**
+   * HTML tag to be rendered. Defaults to `span`.
+   */
+  as?: AsElement;
+  /**
+   * Elements rendered within the Text element
+   */
+  children: ReactNode;
+  /**
+   * Text color
+   */
+  color?: [TextColor, string];
+  /**
+   * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   */
+  fontSize?: FontSize;
+  /**
+   * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   */
+  fontWeight?: FontWeight;
+  /**
+   * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   */
+  lineHeight?: LineHeight;
+  /**
+   * Truncates text with an ellipsis when text overflows its parent container
+   * (i.e. `width` has been set on parent that is shorter than text length).
+   */
+  shouldTruncate?: boolean;
+  /**
+   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   */
+  textAlign?: TextAlign;
+  /**
+   * Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
+   */
+  textTransform?: TextTransform;
+  /**
+   * Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
+   */
+  verticalAlign?: VerticalAlign;
+}
+
+declare type VerticalAlign = keyof typeof verticalAlignMap;
+
+declare const verticalAlignMap: {
+  top: SerializedStyles;
+  middle: SerializedStyles;
+  bottom: SerializedStyles;
+};
 
 export {};
-```
+````

package/src/components/text.partial.tsx

@@ -142,8 +142,7 @@ const Text: FC<TextProps> = ({
 }: TextProps) => {
   const surface = useSurface();
   // @ts-ignore
-  const [color = colorMap[surface] ?? 'color.text', fallback] =
-    colorTuple || [];
+  const [color = colorMap[surface], fallback] = colorTuple || [];
   invariant(
     asAllowlist.includes(Component),
     `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`,