@atlaskit/primitives 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 0.8.1
+
+### Patch Changes
+
+- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
+
 ## 0.8.0
 
 ### Minor Changes

package/constellation/box/code.mdx

@@ -4,6 +4,4 @@ description: A box is...
 order: 1
 ---
 
-// import BoxProps from '!!extract-react-types-loader!../../src'; <- this doesn't work for some reason
-
-## Props
+*Coming soon*

package/constellation/box/examples.mdx

@@ -1,9 +1,7 @@
 ---
 title: Box
-description: Box primitive..
+description: Box primitive...
 order: 0
 ---
 
-## Default
-
-This is placeholder text.
+*Coming soon*

package/constellation/inline/examples.mdx

@@ -0,0 +1,83 @@
+---
+title: Inline
+description: Inline is an abstraction to lay-out a group of elements horizontally.
+order: 0
+---
+
+import InlineBasic from '../../examples/constellation/inline/basic';
+import InlineSpaceBasic from '../../examples/constellation/inline/space-basic';
+import InlineSpaceWrap from '../../examples/constellation/inline/space-wrap';
+import InlineAlignBlock from '../../examples/constellation/inline/align-block';
+import InlineAlignInline from '../../examples/constellation/inline/align-inline';
+import InlineSpread from '../../examples/constellation/inline/spread';
+import InlineWrap from '../../examples/constellation/inline/wrap';
+import InlineSeparator from '../../examples/constellation/inline/separator';
+import InlineGrow from '../../examples/constellation/inline/grow';
+import InlineAs from '../../examples/constellation/inline/as';
+
+## Basic
+
+Inline is an abstraction to efficiently lay-out a group of elements horizontally.  
+Use the given props to configure display behaviour using scalable recommendations of the Atlassian Design System.
+
+<Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
+
+## Space
+
+Spacing between items can be controlled with the `space` prop:
+
+<Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
+
+When content is set to wrap the `space` prop applies equal spacing between rows as well:
+
+<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
+
+For a different space value between rows use the `rowSpace` prop, as shown in the dynamic example above.
+
+## Alignment
+
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which, respectively, control
+aligment in the block and inline directions.
+
+### Block alignment
+
+<Example Component={InlineAlignBlock} packageName="@atlaskit/primitives/inline" />
+
+### Inline alignment
+
+<Example Component={InlineAlignInline} packageName="@atlaskit/primitives/inline" />
+
+## Spread
+
+Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+
+<Example Component={InlineSpread} packageName="@atlaskit/primitives/inline" />
+
+## Wrap
+
+When the number of items goes beyond the available space `shouldWrap` can be used to create new rows of content.
+
+<Example Component={InlineWrap} packageName="@atlaskit/primitives/inline" />
+
+## Separator
+
+For logically related elements it's possible to specify an arbitrary `separator` value.
+
+<Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
+
+## Width control
+
+By default an `Inline` will have its width influenced by the context where it appears.  
+
+To control that the `grow` prop can be used with the values:
+
+* `hug` (default) to use space only as required by its children, or
+* `fill` to take all space provided by the parent element.
+
+<Example Component={InlineGrow} packageName="@atlaskit/primitives/inline" />
+
+## Output element
+
+It's possible to control the rendered HTML element with the `as` prop.
+
+<Example Component={InlineAs} packageName="@atlaskit/primitives/inline" />

package/constellation/inline/props.mdx

@@ -0,0 +1,3 @@
+## Props
+
+*Coming soon*

package/constellation/inline/usage.mdx

@@ -0,0 +1,7 @@
+---
+order: 2
+---
+
+## Usage
+
+*Coming soon*

package/constellation/stack/code.mdx

@@ -0,0 +1,9 @@
+---
+title: Box
+description: A stack is...
+order: 1
+---
+
+## Props
+
+*Coming soon*

package/constellation/stack/examples.mdx

@@ -0,0 +1,7 @@
+---
+title: Stack
+description: Stack primitive...
+order: 0
+---
+
+*Coming soon*

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

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

@@ -23,7 +23,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
      */
     spread?: Spread;
     /**
-     * Used to set whether the content should grow to fill the available space.
+     * Used to set whether the container should grow to fill the available space.
      */
     grow?: Grow;
     /**

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

@@ -19,7 +19,7 @@ export interface StackProps<T extends ElementType = 'div'> {
      */
     spread?: Spread;
     /**
-     * Used to set whether the content should grow to fill the available space.
+     * Used to set whether the container should grow to fill the available space.
      */
     grow?: Grow;
     /**

package/extract-react-types/inline.tsx

@@ -0,0 +1,3 @@
+import type { InlineProps } from '../src/components/inline';
+
+export default function Inline(_: InlineProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -27,19 +27,28 @@
           }
         },
         {
-          "title": "Accessibility",
-          "id": "@atlaskit/primitives",
-          "folder": "accessibility",
-          "slug": "primitives/accessibility",
+          "title": "Box",
+          "folder": "box",
+          "slug": "primitives/box",
+          "id": "@atlaskit/primitives/box",
           "status": {
             "type": "alpha"
           }
         },
         {
-          "title": "Box",
-          "folder": "box",
-          "slug": "primitives/box",
-          "id": "@atlaskit/primitives/box",
+          "title": "Inline",
+          "folder": "inline",
+          "slug": "primitives/inline",
+          "id": "@atlaskit/primitives/inline",
+          "status": {
+            "type": "alpha"
+          }
+        },
+        {
+          "title": "Stack",
+          "folder": "stack",
+          "slug": "primitives/stack",
+          "id": "@atlaskit/primitives/stack",
           "status": {
             "type": "alpha"
           }
@@ -74,10 +83,20 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@atlaskit/avatar": "*",
+    "@atlaskit/badge": "*",
+    "@atlaskit/button": "*",
+    "@atlaskit/code": "*",
     "@atlaskit/docs": "*",
+    "@atlaskit/dropdown-menu": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/heading": "*",
+    "@atlaskit/icon": "*",
+    "@atlaskit/icon-object": "*",
+    "@atlaskit/lozenge": "*",
     "@atlaskit/ssr": "*",
+    "@atlaskit/tag": "*",
+    "@atlaskit/theme": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",