@atlaskit/ds-explorations 1.3.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/ds-explorations
 
+## 1.5.0
+
+### Minor Changes
+
+- [`c146611a18c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c146611a18c) - [ux] Migrate progress-indicator package to use spacing primitives to control spacing in both component and examples. Spacing values have been slightly updated depending on indicator size and spacing properties
+
+## 1.4.0
+
+### Minor Changes
+
+- [`7f886c0aa18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f886c0aa18) - The `Inline` component now allows children to be justified 'space-between'.
+
 ## 1.3.2
 
 ### Patch Changes

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

@@ -37,6 +37,9 @@ var flexJustifyContentMap = {
   flexStart: (0, _react2.css)({
     justifyContent: 'flex-start'
   }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
   }),

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

@@ -20,7 +20,7 @@ var _colorMap = _interopRequireDefault(require("../internal/color-map"));
 var _surfaceProvider = require("./surface-provider");
 
 var _excluded = ["children"];
-var asAllowlist = ['span', 'div', 'p'];
+var asAllowlist = ['span', 'div', 'p', 'strong'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 var fontSizeMap = {
   '11px': (0, _react2.css)({

package/dist/cjs/version.json

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

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

@@ -28,6 +28,9 @@ const flexJustifyContentMap = {
   flexStart: css({
     justifyContent: 'flex-start'
   }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
   flexEnd: css({
     justifyContent: 'flex-end'
   }),

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

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
-const asAllowlist = ['span', 'div', 'p'];
+const asAllowlist = ['span', 'div', 'p', 'strong'];
 const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
 const fontSizeMap = {
   '11px': css({

package/dist/es2019/version.json

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

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

@@ -28,6 +28,9 @@ var flexJustifyContentMap = {
   flexStart: css({
     justifyContent: 'flex-start'
   }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
   flexEnd: css({
     justifyContent: 'flex-end'
   }),

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

@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
-var asAllowlist = ['span', 'div', 'p'];
+var asAllowlist = ['span', 'div', 'p', 'strong'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 var fontSizeMap = {
   '11px': css({

package/dist/esm/version.json

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

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import type { BasePrimitiveProps } from './types';
-interface InlineProps extends BasePrimitiveProps {
+export interface InlineProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
      */
@@ -41,6 +41,7 @@ declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 declare const flexJustifyContentMap: {
     center: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
+    'space-between': import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
     start: import("@emotion/react").SerializedStyles;
     end: import("@emotion/react").SerializedStyles;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { BasePrimitiveProps } from './types';
-interface StackProps extends BasePrimitiveProps {
+export interface StackProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
      */

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
 import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly ["span", "div", "p"];
+declare const asAllowlist: readonly ["span", "div", "p", "strong"];
 declare type AsElement = typeof asAllowlist[number];
 export interface TextProps extends BasePrimitiveProps {
     /**

package/dist/types/index.d.ts

@@ -5,3 +5,5 @@ export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
 export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
+export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
+export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -28,7 +29,7 @@ import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
 
 // @public (undocumented)
-const asAllowlist: readonly ['span', 'div', 'p'];
+const asAllowlist: readonly ['span', 'div', 'p', 'strong'];
 
 // @public (undocumented)
 type AsElement = typeof asAllowlist[number];
@@ -279,6 +280,7 @@ const flexJustifyContentMap: {
 const flexJustifyContentMap_2: {
   center: SerializedStyles;
   flexStart: SerializedStyles;
+  'space-between': SerializedStyles;
   flexEnd: SerializedStyles;
   start: SerializedStyles;
   end: SerializedStyles;
@@ -345,16 +347,6 @@ const heightMap: {
   'size.600': SerializedStyles;
 };
 
-// @public (undocumented)
-interface InlineProps extends BasePrimitiveProps {
-  alignItems?: FlexAlignItems_2;
-  children: ReactNode;
-  divider?: ReactNode;
-  flexWrap?: FlexWrap;
-  gap: ColumnGap;
-  justifyContent?: FlexJustifyContent_2;
-}
-
 // @public (undocumented)
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 
@@ -485,15 +477,6 @@ const rowGapMap: {
   'scale.800': SerializedStyles;
 };
 
-// @public (undocumented)
-interface StackProps extends BasePrimitiveProps {
-  alignItems?: FlexAlignItems_3;
-  children: ReactNode;
-  flexWrap?: FlexWrap_2;
-  gap: RowGap;
-  justifyContent?: FlexJustifyContent_3;
-}
-
 // @public (undocumented)
 type TextAlign = keyof typeof textAlignMap;
 
@@ -547,9 +530,19 @@ export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
 
 // @public
 export const UNSAFE_Inline: MemoExoticComponent<
-  ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>
+  ForwardRefExoticComponent<UNSAFE_InlineProps & RefAttributes<HTMLDivElement>>
 >;
 
+// @public (undocumented)
+export interface UNSAFE_InlineProps extends BasePrimitiveProps {
+  alignItems?: FlexAlignItems_2;
+  children: ReactNode;
+  divider?: ReactNode;
+  flexWrap?: FlexWrap;
+  gap: ColumnGap;
+  justifyContent?: FlexJustifyContent_2;
+}
+
 // @public (undocumented)
 export const UNSAFE_InteractionSurface: ({
   appearance,
@@ -559,9 +552,18 @@ export const UNSAFE_InteractionSurface: ({
 
 // @public
 export const UNSAFE_Stack: MemoExoticComponent<
-  ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>
+  ForwardRefExoticComponent<UNSAFE_StackProps & RefAttributes<HTMLDivElement>>
 >;
 
+// @public (undocumented)
+export interface UNSAFE_StackProps extends BasePrimitiveProps {
+  alignItems?: FlexAlignItems_3;
+  children: ReactNode;
+  flexWrap?: FlexWrap_2;
+  gap: RowGap;
+  justifyContent?: FlexJustifyContent_3;
+}
+
 // @internal
 export const UNSAFE_Text: FC<UNSAFE_TextProps>;
 
@@ -609,3 +611,15 @@ const widthMap: {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/src/components/inline.partial.tsx

@@ -7,7 +7,7 @@ import { token } from '@atlaskit/tokens';
 
 import type { BasePrimitiveProps } from './types';
 
-interface InlineProps extends BasePrimitiveProps {
+export interface InlineProps extends BasePrimitiveProps {
   /**
    * Used to align children along the cross axis.
    */
@@ -49,6 +49,7 @@ type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 const flexJustifyContentMap = {
   center: css({ justifyContent: 'center' }),
   flexStart: css({ justifyContent: 'flex-start' }),
+  'space-between': css({ justifyContent: 'space-between' }),
   flexEnd: css({ justifyContent: 'flex-end' }),
   start: css({ justifyContent: 'start' }),
   end: css({ justifyContent: 'end' }),

package/src/components/stack.partial.tsx

@@ -7,7 +7,7 @@ import { token } from '@atlaskit/tokens';
 
 import { BasePrimitiveProps } from './types';
 
-interface StackProps extends BasePrimitiveProps {
+export interface StackProps extends BasePrimitiveProps {
   /**
    * Used to align children along the cross axis.
    */

package/src/components/text.partial.tsx

@@ -11,7 +11,7 @@ import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
 import type { BasePrimitiveProps } from './types';
 
-const asAllowlist = ['span', 'div', 'p'] as const;
+const asAllowlist = ['span', 'div', 'p', 'strong'] as const;
 type AsElement = typeof asAllowlist[number];
 export interface TextProps extends BasePrimitiveProps {
   /**

package/src/index.tsx

@@ -5,3 +5,5 @@ export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
 export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
+export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
+export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

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

@@ -18,7 +18,7 @@ import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
 
 // @public (undocumented)
-const asAllowlist: readonly ["span", "div", "p"];
+const asAllowlist: readonly ["span", "div", "p", "strong"];
 
 // @public (undocumented)
 type AsElement = typeof asAllowlist[number];
@@ -264,6 +264,7 @@ const flexJustifyContentMap: {
 const flexJustifyContentMap_2: {
     center: SerializedStyles;
     flexStart: SerializedStyles;
+    'space-between': SerializedStyles;
     flexEnd: SerializedStyles;
     start: SerializedStyles;
     end: SerializedStyles;
@@ -330,16 +331,6 @@ const heightMap: {
     'size.600': SerializedStyles;
 };
 
-// @public (undocumented)
-interface InlineProps extends BasePrimitiveProps {
-    alignItems?: FlexAlignItems_2;
-    children: ReactNode;
-    divider?: ReactNode;
-    flexWrap?: FlexWrap;
-    gap: ColumnGap;
-    justifyContent?: FlexJustifyContent_2;
-}
-
 // @public (undocumented)
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 
@@ -470,15 +461,6 @@ const rowGapMap: {
     'scale.800': SerializedStyles;
 };
 
-// @public (undocumented)
-interface StackProps extends BasePrimitiveProps {
-    alignItems?: FlexAlignItems_3;
-    children: ReactNode;
-    flexWrap?: FlexWrap_2;
-    gap: RowGap;
-    justifyContent?: FlexJustifyContent_3;
-}
-
 // @public (undocumented)
 type TextAlign = keyof typeof textAlignMap;
 
@@ -526,13 +508,32 @@ export const UNSAFE_Box: BoxComponent;
 export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, PropsToOmit> & BasePrimitiveProps & BoxPropsBase<T>;
 
 // @public
-export const UNSAFE_Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>;
+export const UNSAFE_Inline: MemoExoticComponent<ForwardRefExoticComponent<UNSAFE_InlineProps & RefAttributes<HTMLDivElement>>>;
+
+// @public (undocumented)
+export interface UNSAFE_InlineProps extends BasePrimitiveProps {
+    alignItems?: FlexAlignItems_2;
+    children: ReactNode;
+    divider?: ReactNode;
+    flexWrap?: FlexWrap;
+    gap: ColumnGap;
+    justifyContent?: FlexJustifyContent_2;
+}
 
 // @public (undocumented)
 export const UNSAFE_InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
 
 // @public
-export const UNSAFE_Stack: MemoExoticComponent<ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>>;
+export const UNSAFE_Stack: MemoExoticComponent<ForwardRefExoticComponent<UNSAFE_StackProps & RefAttributes<HTMLDivElement>>>;
+
+// @public (undocumented)
+export interface UNSAFE_StackProps extends BasePrimitiveProps {
+    alignItems?: FlexAlignItems_3;
+    children: ReactNode;
+    flexWrap?: FlexWrap_2;
+    gap: RowGap;
+    justifyContent?: FlexJustifyContent_3;
+}
 
 // @internal
 export const UNSAFE_Text: FC<UNSAFE_TextProps>;