@atlaskit/primitives 0.16.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 1.0.1
+
+### Patch Changes
+
+- [`cac98ccfb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac98ccfb7d) - Introduces Flex component as common component for Stack, Inline.
+
+## 1.0.0
+
+### Major Changes
+
+- [`fec62731e2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fec62731e2e) - This package is now in open beta and is no longer considered experimental. We will be making iterative improvements until GA. While the API is likely to be stable, we reserve the right to make changes if required. This version contains no changes whatsoever.
+
+  P.S. The reason for the change is to aid package deduplication in the product.
+
 ## 0.16.0
 
 ### Minor Changes

package/constellation/flex/code.mdx

@@ -0,0 +1,7 @@
+---
+title: Flex
+description: Flex is a primitive component that leverages the foundations of the Atlassian Design System.
+order: 1
+---
+
+TBD

package/constellation/flex/examples.mdx

@@ -0,0 +1,34 @@
+---
+title: Flex
+description: Flex is a primitive layout component that implements the CSS Flexbox API.
+order: 0
+---
+
+import FlexDirection from '../../examples/constellation/flex/direction';
+import FlexAlignItems from '../../examples/constellation/flex/align-items';
+import FlexJustifyContent from '../../examples/constellation/flex/justify-content';
+import FlexWrap from '../../examples/constellation/flex/wrap';
+
+## Basic
+
+The `Flex` component is designed as a very basic mapping to the CSS Flexbox API.
+It can be used as a less richly-configured `Inline` or `Stack`.
+
+<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
+
+## Align items
+
+<Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
+
+## Wrap
+
+Flex-prefixed properties in CSS do not have this prefix in the component API.
+For example `flex-wrap` is instead applied as the `wrap` property.
+
+<Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
+
+## Direction
+
+Flex direction is applied via the `direction` property.
+
+<Example Component={FlexDirection} packageName="@atlaskit/primitives/flex" />

package/constellation/overview/index.mdx

@@ -1,7 +1,6 @@
 ---
 title: Primitives
 description: Primitives are composable components that solve common layout problems.
-
 order: 1
 ---
 
@@ -12,25 +11,30 @@ import boxUsageExample from './images/box-usage-example.png';
 import inlineUsageExample from './images/inline-usage-example.png';
 import stackUsageExample from './images/stack-usage-example.png';
 
-<SectionMessage title="This is a preview of our new primitive components." appearance="warning">
-Expect frequent changes as we iterate over the coming months. For early access and release updates for Atlassian employees, see details.
-</SectionMessage>
-
-Primitive components are a new type of component for layouts and placement of elements. They act as building blocks to compose different parts of the user experience, from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured). 
+Primitive components are a new type of component for layouts and placement of elements.
+They act as building blocks to compose different parts of the user experience,
+from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
 
-Primitives are designed to work hand in hand with design tokens, to provide opinionated solutions for common low-level design decisions that engineers often have to make. They are designed to reduce cognitive overhead for engineers by providing guardrails around what is recommended within our design system. 
+Primitives are designed to work hand in hand with design tokens,
+to provide opinionated solutions for common low-level design decisions that engineers often have to make.
+They are designed to reduce cognitive overhead for engineers by providing guardrails around what is recommended within our design system.
 
-A primitive component is a pre-built solution in that they will only accept values that are valid in the Atlassian Design System, and help to implement common layout patterns. This reduces the need to look up documentation and write custom CSS. 
+A primitive component is a pre-built solution in that they will only accept values that are valid in the Atlassian Design System, and help to implement common layout patterns. This reduces the need to look up documentation and write custom CSS.
 
 ## Available Primitives
 
-Each primitive is designed to have a single responsibility, and it should be immediately clear where each primitive should be used. However, they are also flexible enough that they should be able to be used to compose complex designs not otherwise covered in the Design Systems. 
+Each primitive is designed to have a single responsibility, and it should be immediately clear where each primitive should be used. However, they are also flexible enough that they should be able to be used to compose complex designs not otherwise covered in the Design Systems.
 
-Currently, three primitive components are available for use in Closed Beta they are Box, Inline and Stack. These were chosen because a large amount of layout problems can be reduced to laying out content:
+Currently, three core primitive components are available - Box, Inline and Stack. A large amount of layout problems can be reduced to laying out content:
 - in a container (see [box](/components/primitives/box))
 - horizontally (see [inline](/components/primitives/inline))
 - vertically (see [stack](/components/primitives/stack))
 
+Additional layouts not well-expressed by these core primitives can also be composed using:
+- CSS Flexbox (see [flex](/components/primitives/flex))
+- CSS Grid (see [grid](/components/primitives/grid))
+- Divider (see [divider](/components/primitives/divider))
+
 ## Installation
 
 To install primitive components, add @atlaskit/primitives as a dependency on your project:
@@ -40,17 +44,19 @@ $ yarn add @atlaskit/primitives
 
 ## Using Primitives
 
-Use primitives for general layout styles for components. Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design. This involves breaking down a design into its core layout components to as granular level as is useful.
+Use primitives for general layout styles for components.
+Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design.
+This involves breaking down a design into its core layout components to as granular level as is useful.
 
 <SectionMessage appearance="warning">
-Primitives could be skipped where absolute DOM control is required or very specific styling values are needed, however, this approach is more likely to produce visual elements that fail to adhere to the guidelines of the Atlassian Design System.
+Primitives should be avoided where absolute DOM control is required or very specific styling values are needed, however, this approach is more likely to produce visual elements that fail to adhere to the guidelines of the Atlassian Design System.
 </SectionMessage>
 
-You might like to think first about breaking down a page into Box containers, identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose in a layout and grouping them together under a Box. 
+You might like to think first about breaking down a page into `Box` containers, identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose in a layout and grouping them together under a Box.
 
 <Image src={boxUsageExample} />
 
-The behavior within and around these boxes can then be broken down into their horizontal Inline and vertical Stack components. 
+The behavior within and around these boxes can then be broken down into their horizontal `Inline` and vertical `Stack` components.
 
 <SectionMessage>
 The ESLint rule use-primitives offers suggestions for possible primitives in a layout.

package/dist/cjs/components/flex.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styleMaps = require("../xcss/style-maps.partial");
+var _xcss = require("../xcss/xcss");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  }),
+  'space-around': (0, _react2.css)({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': (0, _react2.css)({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: (0, _react2.css)({
+    justifyContent: 'stretch'
+  })
+};
+var flexDirectionMap = {
+  column: (0, _react2.css)({
+    flexDirection: 'column'
+  }),
+  row: (0, _react2.css)({
+    flexDirection: 'row'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  }),
+  nowrap: (0, _react2.css)({
+    flexWrap: 'nowrap'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    direction = _ref.direction,
+    wrap = _ref.wrap,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  return (0, _react2.jsx)(Component, {
+    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+var _default = Flex;
+exports.default = _default;

package/dist/cjs/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Box", {
     return _box.default;
   }
 });
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _flex.default;
+  }
+});
 Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
@@ -51,4 +57,5 @@ var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));
+var _flex = _interopRequireDefault(require("./components/flex"));
 var _responsive = require("./responsive");

package/dist/cjs/responsive/media-helper.js

@@ -20,10 +20,25 @@ var UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: "@media all",
+    /**
+     * Used for mobile viewports.
+     */
     xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    /**
+     * Used for tablet viewports.
+     */
     sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    /**
+     * Used for laptop viewports.
+     */
     md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    /**
+     * Used for desktop viewports.
+     */
     lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
   /**

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.16.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/es2019/components/flex.js

@@ -0,0 +1,108 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+const flexDirectionMap = {
+  column: css({
+    flexDirection: 'column'
+  }),
+  row: css({
+    flexDirection: 'row'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  }),
+  nowrap: css({
+    flexWrap: 'nowrap'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
+  alignItems,
+  justifyContent,
+  gap,
+  rowGap,
+  children,
+  testId,
+  direction,
+  wrap,
+  xcss
+}, ref) => {
+  const Component = as || 'div';
+  const xcssClassName = xcss && parseXcss(xcss);
+  return jsx(Component, {
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+export default Flex;

package/dist/es2019/index.js

@@ -3,4 +3,5 @@ export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
+export { default as Flex } from './components/flex';
 export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/es2019/responsive/media-helper.js

@@ -15,10 +15,25 @@ export const UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: `@media all`,
+    /**
+     * Used for mobile viewports.
+     */
     xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
+    /**
+     * Used for tablet viewports.
+     */
     sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
+    /**
+     * Used for laptop viewports.
+     */
     md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
+    /**
+     * Used for desktop viewports.
+     */
     lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`
   },
   /**

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.16.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/esm/components/flex.js

@@ -0,0 +1,107 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+var flexDirectionMap = {
+  column: css({
+    flexDirection: 'column'
+  }),
+  row: css({
+    flexDirection: 'row'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  }),
+  nowrap: css({
+    flexWrap: 'nowrap'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    direction = _ref.direction,
+    wrap = _ref.wrap,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && parseXcss(xcss);
+  return jsx(Component, {
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+export default Flex;

package/dist/esm/index.js

@@ -3,4 +3,5 @@ export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
+export { default as Flex } from './components/flex';
 export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/responsive/media-helper.js

@@ -15,10 +15,25 @@ export var UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: "@media all",
+    /**
+     * Used for mobile viewports.
+     */
     xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    /**
+     * Used for tablet viewports.
+     */
     sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    /**
+     * Used for laptop viewports.
+     */
     md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    /**
+     * Used for desktop viewports.
+     */
     lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
   /**

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.16.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

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

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box';
-import type { PublicBoxPropsBase } from './types';
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'>;
 type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__