@atlaskit/primitives 0.8.1 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.8.3
+
+### Patch Changes
+
+- [`64e7c72773e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64e7c72773e) - Update type to allow typehints for CSS color property.
+
+## 0.8.2
+
+### Patch Changes
+
+- [`983b1e61003`](https://bitbucket.org/atlassian/atlassian-frontend/commits/983b1e61003) - Fix Primitives pages being shown in prod despite being marked as alpha.
+
 ## 0.8.1
 
 ### Patch Changes

package/constellation/inline/examples.mdx

@@ -18,7 +18,7 @@ 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.
+Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -36,8 +36,8 @@ For a different space value between rows use the `rowSpace` prop, as shown in th
 
 ## 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.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
+alignment in the block and inline directions respectively.
 
 ### Block alignment
 
@@ -61,7 +61,7 @@ When the number of items goes beyond the available space `shouldWrap` can be use
 
 ## Separator
 
-For logically related elements it's possible to specify an arbitrary `separator` value.
+For logically related elements it's possible to specify a `separator` value.
 
 <Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
 

package/constellation/stack/code.mdx

@@ -1,5 +1,5 @@
 ---
-title: Box
+title: Stack
 description: A stack is...
 order: 1
 ---

package/constellation/stack/examples.mdx

@@ -1,7 +1,62 @@
 ---
 title: Stack
-description: Stack primitive...
+description: Stack is an abstraction to lay-out a group of elements vertically.
 order: 0
 ---
 
-*Coming soon*
+import StackBasic from '../../examples/constellation/stack/basic';
+import StackSpaceBasic from '../../examples/constellation/stack/space-basic';
+import StackAlignBlock from '../../examples/constellation/stack/align-block';
+import StackAlignInline from '../../examples/constellation/stack/align-inline';
+import StackSpread from '../../examples/constellation/stack/spread';
+import StackGrow from '../../examples/constellation/stack/grow';
+import StackAs from '../../examples/constellation/stack/as';
+
+## Basic
+
+Stack is an abstraction to lay-out a group of elements vertically.
+Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+
+<Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />
+
+## Space
+
+Spacing between items can be controlled with the `space` prop:
+
+<Example Component={StackSpaceBasic} packageName="@atlaskit/primitives/stack" />
+
+## Alignment
+
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
+alignment in the block and inline directions respectively.
+
+### Block alignment
+
+<Example Component={StackAlignBlock} packageName="@atlaskit/primitives/stack" />
+
+### Inline alignment
+
+<Example Component={StackAlignInline} packageName="@atlaskit/primitives/stack" />
+
+## Spread
+
+Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+
+<Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />
+
+## Width control
+
+By default a `Stack` 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={StackGrow} packageName="@atlaskit/primitives/stack" />
+
+## Output element
+
+It's possible to control the rendered HTML element with the `as` prop.
+
+<Example Component={StackAs} packageName="@atlaskit/primitives/stack" />

package/constellation/stack/usage.mdx

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

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

package/dist/types/internal/style-maps.partial.d.ts

@@ -381,9 +381,10 @@ export declare type TokenisedProps = {
     alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
     borderColor?: BorderColor;
-    borderStyle?: BorderStyle;
     borderRadius?: BorderRadius;
+    borderStyle?: BorderStyle;
     borderWidth?: BorderWidth;
+    color?: TextColor;
     display?: Display;
     flex?: Flex;
     flexDirection?: FlexDirection;
@@ -391,23 +392,22 @@ export declare type TokenisedProps = {
     flexShrink?: FlexShrink;
     height?: Height;
     layer?: Layer;
-    maxWidth?: MaxWidth;
     maxHeight?: MaxHeight;
-    minWidth?: MinWidth;
+    maxWidth?: MaxWidth;
     minHeight?: MinHeight;
+    minWidth?: MinWidth;
     overflow?: Overflow;
-    overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
+    overflowInline?: OverflowInline;
     padding?: Padding;
     paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
     paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockStart?: PaddingBlockStart;
     paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
     paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineStart?: PaddingInlineStart;
     position?: Position;
     shadow?: Shadow;
-    textColor?: TextColor;
     width?: Width;
 };
 declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -16,6 +16,9 @@
     "website": {
       "category": "Primitives",
       "name": "Primitives",
+      "status": {
+        "type": "alpha"
+      },
       "pages": [
         {
           "title": "Overview",
@@ -94,6 +97,7 @@
     "@atlaskit/icon": "*",
     "@atlaskit/icon-object": "*",
     "@atlaskit/lozenge": "*",
+    "@atlaskit/radio": "^5.4.9",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "*",
     "@atlaskit/theme": "*",

package/report.api.md

@@ -637,9 +637,10 @@ type TokenisedProps = {
   alignSelf?: AlignSelf;
   backgroundColor?: BackgroundColor;
   borderColor?: BorderColor;
-  borderStyle?: BorderStyle;
   borderRadius?: BorderRadius;
+  borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
+  color?: TextColor;
   display?: Display;
   flex?: Flex;
   flexDirection?: FlexDirection;
@@ -647,23 +648,22 @@ type TokenisedProps = {
   flexShrink?: FlexShrink;
   height?: Height;
   layer?: Layer;
-  maxWidth?: MaxWidth;
   maxHeight?: MaxHeight;
-  minWidth?: MinWidth;
+  maxWidth?: MaxWidth;
   minHeight?: MinHeight;
+  minWidth?: MinWidth;
   overflow?: Overflow;
-  overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
+  overflowInline?: OverflowInline;
   padding?: Padding;
   paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
   paddingBlockEnd?: PaddingBlockEnd;
+  paddingBlockStart?: PaddingBlockStart;
   paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
   paddingInlineEnd?: PaddingInlineEnd;
+  paddingInlineStart?: PaddingInlineStart;
   position?: Position;
   shadow?: Shadow;
-  textColor?: TextColor;
   width?: Width;
 };
 

package/tmp/api-report-tmp.d.ts

@@ -574,9 +574,10 @@ type TokenisedProps = {
     alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
     borderColor?: BorderColor;
-    borderStyle?: BorderStyle;
     borderRadius?: BorderRadius;
+    borderStyle?: BorderStyle;
     borderWidth?: BorderWidth;
+    color?: TextColor;
     display?: Display;
     flex?: Flex;
     flexDirection?: FlexDirection;
@@ -584,23 +585,22 @@ type TokenisedProps = {
     flexShrink?: FlexShrink;
     height?: Height;
     layer?: Layer;
-    maxWidth?: MaxWidth;
     maxHeight?: MaxHeight;
-    minWidth?: MinWidth;
+    maxWidth?: MaxWidth;
     minHeight?: MinHeight;
+    minWidth?: MinWidth;
     overflow?: Overflow;
-    overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
+    overflowInline?: OverflowInline;
     padding?: Padding;
     paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
     paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockStart?: PaddingBlockStart;
     paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
     paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineStart?: PaddingInlineStart;
     position?: Position;
     shadow?: Shadow;
-    textColor?: TextColor;
     width?: Width;
 };