@atlaskit/primitives 7.0.0 → 7.0.2

package/constellation/grid/examples.mdx

@@ -15,28 +15,31 @@ import ResponsiveGrid from '../../examples/constellation/grid/responsive';
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
 ## Basic
 
-The `Grid` component is designed as a very basic mapping to the CSS Grid API.
-It can be used as an alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or [Stack](/components/primitives/stack).
+The `Grid` component is designed as a very basic mapping to the CSS Grid API. It can be used as an
+alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or
+[Stack](/components/primitives/stack).
 
 <Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />
 
 ## Gap properties
 
-Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics and keep the whitespace of the grid harmonious with the spacing system.
+Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid
+ergonomics and keep the whitespace of the grid harmonious with the spacing system.
 
 <Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
 
 ## Template syntax
 
-Grid-prefixed template properties in CSS do not have this prefix in the component API.
-For example `grid-template-*` are instead applied as `templateColumns`, `templateRows` and `templateArea` properties.
+Grid-prefixed template properties in CSS do not have this prefix in the component API. For example
+`grid-template-*` are instead applied as `templateColumns`, `templateRows` and `templateArea`
+properties.
 
 ### Template columns
 
@@ -58,13 +61,15 @@ Template areas enables grid to declare the grid areas are applied in the templat
 
 ## Autoflow syntax
 
-Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is instead applied via `autoFlow`.
+Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is
+instead applied via `autoFlow`.
 
 <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
 
 ## Responsive grid
 
-Here, we construct a grid layout that adapts from a single column to a four-column layout depending on the viewport size.
+Here, we construct a grid layout that adapts from a single column to a four-column layout depending
+on the viewport size.
 
 <Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/grid" />
 

package/constellation/inline/code.mdx

@@ -11,9 +11,9 @@ props:
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
 ## Props

package/constellation/inline/examples.mdx

@@ -19,16 +19,17 @@ import InlinePracticalUseCase from '../../examples/constellation/inline/practica
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
 ## Basic
 
 Use an inline component to configure the layout of a group of elements horizontally.
 
-Use the given props to configure display behavior using design tokens, as shown in the more complex examples below.
+Use the given props to configure display behavior using design tokens, as shown in the more complex
+examples below.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -36,57 +37,55 @@ Use the given props to configure display behavior using design tokens, as shown
 
 Control the spacing between items with the `space` prop.
 
-<Example
-  Component={InlineSpaceBasic}
-  packageName="@atlaskit/primitives/inline"
-/>
+<Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
 
 When content is set to wrap, the `space` prop applies equal spacing between rows.
 
 For a different space value between rows use the `rowSpace` prop.
 
-<Example
-  Component={InlineSpaceWrap}
-  packageName="@atlaskit/primitives/inline"
-/>
+<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
 
 ## Reverse content
 
-`flex-direction: `row-reverse` is a pattern that has [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns) so inline doesn't support it.
+`flex-direction: `row-reverse` is a pattern that has
+[accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns)
+so inline doesn't support it.
 
-If reversing content is required, we generally recommend to use JavaScript to reverse the JSX content thereby preserving the tabbing order.
+If reversing content is required, we generally recommend to use JavaScript to reverse the JSX
+content thereby preserving the tabbing order.
 
-In situations where tabbing order changes based on different breakpoints, then we have [show](/components/primitives/responsive/hide/examples) and [hide](/components/primitives/responsive/hide/examples) components that enable switching between different orderings of content.
+In situations where tabbing order changes based on different breakpoints, then we have
+[show](/components/primitives/responsive/hide/examples) and
+[hide](/components/primitives/responsive/hide/examples) components that enable switching between
+different orderings of content.
 
-For non-tabbable content that needs to be reversed, `flex-direction: row-reverse` is supported in XCSS. However, please be aware that we may lint against this in the future.
+For non-tabbable content that needs to be reversed, `flex-direction: row-reverse` is supported in
+XCSS. However, please be aware that we may lint against this in the future.
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which control alignment in the vertical and horizontal axis respectively.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
+alignment in the vertical and horizontal axis respectively.
 
 ### Block alignment
 
-<Example
-  Component={InlineAlignBlock}
-  packageName="@atlaskit/primitives/inline"
-/>
+<Example Component={InlineAlignBlock} packageName="@atlaskit/primitives/inline" />
 
 ### Inline alignment
 
-<Example
-  Component={InlineAlignInline}
-  packageName="@atlaskit/primitives/inline"
-/>
+<Example Component={InlineAlignInline} packageName="@atlaskit/primitives/inline" />
 
 ## Spread
 
-Elements can be set to stay together, spaced at the given value (default behavior) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behavior) 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, use `shouldWrap` to create new rows of content.
+When the number of items goes beyond the available space, use `shouldWrap` to create new rows of
+content.
 
 <Example Component={InlineWrap} packageName="@atlaskit/primitives/inline" />
 
@@ -94,15 +93,12 @@ When the number of items goes beyond the available space, use `shouldWrap` to cr
 
 For logically related elements it's possible to specify a `separator` character value.
 
-<Example
-  Component={InlineSeparator}
-  packageName="@atlaskit/primitives/inline"
-/>
+<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 the width, use the `grow` prop with the values:
+By default an `Inline` will have its width influenced by the context where it appears. To control
+the width, use the `grow` prop 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.
@@ -117,9 +113,7 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 ## Practical use case
 
-An example of how an inline component might be used in product, using Atlassian Design System components.
+An example of how an inline component might be used in product, using Atlassian Design System
+components.
 
-<Example
-  Component={InlinePracticalUseCase}
-  packageName="@atlaskit/primitives/inline"
-/>
+<Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />

package/constellation/inline/usage.mdx

@@ -4,23 +4,32 @@ description: An inline manages the horizontal layout of direct children using fl
 order: 2
 ---
 
-Use the inline component in conjunction with other layout components such as [box](/components/primitives/box/usage) and [stack](/components/primitives/stack/usage) to easily create customized layouts, with built-in guidance from the Atlassian Design System.
+Use the inline component in conjunction with other layout components such as
+[box](/components/primitives/box/usage) and [stack](/components/primitives/stack/usage) to easily
+create customized layouts, with built-in guidance from the Atlassian Design System.
 
-Inline components act as container to decide the horizontal layout of its children. They decide the specifics of how the children are displayed, for example, where they are aligned or how much space is between child elements. An inline component should be used purely for visual alignment, and should have no opinions about the functionality of its children.
+Inline components act as container to decide the horizontal layout of its children. They decide the
+specifics of how the children are displayed, for example, where they are aligned or how much space
+is between child elements. An inline component should be used purely for visual alignment, and
+should have no opinions about the functionality of its children.
 
-In its simplest form, an inline component operates like a flexbox row, however adds the built in design token support and guidance.
+In its simplest form, an inline component operates like a flexbox row, however adds the built in
+design token support and guidance.
 
 ```jsx
 <Inline space="space.100" alignInline="center" alignBlock="start">
-  ...
+	...
 </Inline>
 ```
 
-Inline also has a `flex-direction: row;`. This is the default for flexbox, so it is not explicitly applied.
+Inline also has a `flex-direction: row;`. This is the default for flexbox, so it is not explicitly
+applied.
 
 ## Using inline
 
-The purpose of an inline is primarily as a container element controlling how child components are displayed and positioned horizontally. An inline should be used any time you wish to layout elements or components horizontally.
+The purpose of an inline is primarily as a container element controlling how child components are
+displayed and positioned horizontally. An inline should be used any time you wish to layout elements
+or components horizontally.
 
 Use the inline props to customize the spacing and styling on any child elements. These include:
 

package/constellation/overview/index.mdx

@@ -14,21 +14,23 @@ import stackUsageExample from './images/stack-usage-example.png';
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
-Primitives are a new type of component for layouts, styling, and the 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 a new type of component for layouts, styling, and the 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 powered by design tokens and make it easier to apply design decisions. This reduces cognitive overhead, improves productivity and prevents accidents or mistakes.
+Primitives are powered by design tokens and make it easier to apply design decisions. This reduces
+cognitive overhead, improves productivity and prevents accidents or mistakes.
 
 ## Available primitives
 
-Primitives are used together to compose complex designs not otherwise implemented directly in the Design System.
-Currently, three layout primitive components are available:
+Primitives are used together to compose complex designs not otherwise implemented directly in the
+Design System. Currently, three layout primitive components are available:
 
 - in a container (see [box](/components/primitives/box))
 - horizontally (see [inline](/components/primitives/inline))
@@ -50,36 +52,36 @@ $ yarn add @atlaskit/primitives
 
 ## Using primitives
 
-Use primitives for composing layouts.
-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 composing layouts. 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.
 
-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}
-  alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Box containers are used for layout"
+	src={boxUsageExample}
+	alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Box containers are used for layout"
 />
 
-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{' '}
-  <a href="/components/eslint-plugin-design-system/use-primitives">
-    use-primitives
-  </a>{' '}
-  offers suggestions for possible primitives to apply in a layout.
+	The ESLint rule{' '}
+	<a href="/components/eslint-plugin-design-system/use-primitives">use-primitives</a> offers
+	suggestions for possible primitives to apply in a layout.
 </SectionMessage>
 
 <Image
-  src={inlineUsageExample}
-  alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Inline containers are used for layout"
+	src={inlineUsageExample}
+	alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Inline containers are used for layout"
 />
 <Image
-  src={stackUsageExample}
-  alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Stack containers are used for layout"
+	src={stackUsageExample}
+	alt="Screenshot of a typical Jira board with swimlanes. Various areas are highlighted as examples of how Stack containers are used for layout"
 />
 
 ## Related

package/constellation/pressable/code.mdx

@@ -7,15 +7,16 @@ order: 1
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
 import ERTPressable from '!!extract-react-types-loader!../../extract-react-types/pressable-props';
 
 ## Props
 
-Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced by the `isDisabled` prop.
+Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced
+by the `isDisabled` prop.
 
 <PropsTable heading="" props={ERTPressable} />

package/constellation/pressable/examples.mdx

@@ -18,98 +18,84 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 import SectionMessage from '@atlaskit/section-message';
 
 <CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
+	name="@atlaskit/primitives"
+	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+	directoryName="primitives"
 />
 
-Pressable is a primitive used for building custom buttons with Atlassian Design System styling and built-in event tracking. It renders a `<button>` element.
-
-Only use Pressable when existing components such as [button](/components/button/examples) are unsuitable and unable to be customized to fit your needs.
+Pressable is a primitive for building custom buttons with Atlassian Design System styling and
+built-in event tracking. It renders a `<button>` element. Use pressable when existing
+[buttons](/components/button/examples) can't be customized to fit your needs.
 
 ## Default
 
-Pressable is unstyled by default.
+Pressable is unstyled by default, aside from basic focus styles.
 
-<Example
-  Component={PressableDefault}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressableDefault} packageName="@atlaskit/primitives/pressable" />
 
 ## Basic styling with XCSS
 
-Pressable can be styled using XCSS. Ensure styling indicates the interaction state using `:hover` and `:active` pseudo-classes. Pressable includes consistent Atlassian Design System `:focus` styles, so it's unnecessary to add your own.
+Pressable can be styled further using the design system styling API,
+[XCSS](/components/primitives/xcss).
 
-For more information on XCSS, see the [XCSS documentation](/components/primitives/xcss).
+Make sure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
 
-<Example
-  Component={PressableBasic}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressableBasic} packageName="@atlaskit/primitives/pressable" />
 
 ## Advanced styling
 
 Use a combination of XCSS and other primitives for more complex designs.
 
 <Example
-  Component={PressableStyled}
-  packageName="@atlaskit/primitives/pressable"
-  backgroundColor="white"
+	Component={PressableStyled}
+	packageName="@atlaskit/primitives/pressable"
+	backgroundColor="white"
 />
 
 ## Disabled
 
-Pressable can be disabled using the `isDisabled` prop. Disabled styles should be conditionally applied and defined using XCSS.
+You can disable pressable buttons with the `isDisabled` prop. Disabled styles should be applied and
+defined conditionally using XCSS.
 
-<Example
-  Component={PressableDisabled}
-  packageName="@atlaskit/primitives/pressable"
-/>
+Disabled buttons can cause accessibility issues (disabled elements are not in the tab order) so
+wherever possible, avoid using `isDisabled`. Instead, use validation or other techniques to show
+users how to proceed.
+
+<!-- todo: snippet for disabled a11y warnings? -->
+
+<Example Component={PressableDisabled} packageName="@atlaskit/primitives/pressable" />
 
 ## Buttons without visible labels
 
-For buttons without visible labels such as icon buttons, ensure an accessible label is still available by using [the visually hidden component](/components/visually-hidden/examples). This will render hidden text inside the button, which is preferable over the `aria-label` attribute because not all screen readers translate this between languages.
+For buttons without visible labels such as icon buttons, make an accessible label available using
+the [visually hidden component](/components/visually-hidden/examples). This renders hidden text
+inside the button for assistive technologies, which is preferable to an `aria-label` attribute
+because not all screen readers translate these between languages.
 
-Provide a tooltip to help sighted users understand the button's purpose rather than relying on iconography alone.
+Also, consider providing a [tooltip](/components/tooltip) to help sighted users understand the
+button's purpose.
 
 <Example
-  Component={PressableWithoutVisibleLabels}
-  packageName="@atlaskit/primitives/pressable"
-  backgroundColor="white"
+	Component={PressableWithoutVisibleLabels}
+	packageName="@atlaskit/primitives/pressable"
+	backgroundColor="white"
 />
 
 ## HTML attributes
 
-Pressable passes through all valid HTML attributes to the underlying `<button>` element. It will default the `type` attribute to `button` to prevent buttons unintentionally submitting forms.
+Pressable passes all valid HTML attributes to the underlying `<button>` element. The `type`
+attribute defaults to `button` to prevent unintentionally submitting forms.
 
-<Example
-  Component={PressableHtmlAttributes}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressableHtmlAttributes} packageName="@atlaskit/primitives/pressable" />
 
-<Snippet
-  name="primitives-event-tracking-header"
-  variables={{ componentName: 'pressable' }}
-/>
+<Snippet name="primitives-event-tracking-header" variables={{ componentName: 'pressable' }} />
 
-<Example
-  Component={PressableAnalytics}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressableAnalytics} packageName="@atlaskit/primitives/pressable" />
 
 <Snippet name="primitives-event-tracking-gasv3" />
 
-<Example
-  Component={PressableAnalyticsGASv3}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressableAnalyticsGASv3} packageName="@atlaskit/primitives/pressable" />
 
-<Snippet
-  name="primitives-event-tracking-ufo"
-  variables={{ componentName: 'pressable' }}
-/>
+<Snippet name="primitives-event-tracking-ufo" variables={{ componentName: 'pressable' }} />
 
-<Example
-  Component={PressablePressTracing}
-  packageName="@atlaskit/primitives/pressable"
-/>
+<Example Component={PressablePressTracing} packageName="@atlaskit/primitives/pressable" />