chore: v9 QA sweep

docs/changelogs/v6.md

@@ -1,4 +1,4 @@
-# Changelog
+# v6 Changelog
 
 > **Tags:**
 > - :boom: Breaking Change
@@ -331,6 +331,7 @@ improved autocompletion and documentation in certain IDEs and editors like VSCod
 ## v6.0.0 (2019-06-07)
 
 #### :boom: Breaking Change
+* All breaking changes are detailed in the [Migration Guide](https://github.com/zendeskgarden/react-components/blob/main/docs/migrations/v6.md). Follow the guide to upgrade to version 6.
 * `all packages`
   * [#342](https://github.com/zendeskgarden/react-components/pull/342) BREAKING CHANGE: upgrade to [email protected] and styled-components@v4 ([@austin94](https://github.com/austin94))
 
@@ -342,43 +343,7 @@ improved autocompletion and documentation in certain IDEs and editors like VSCod
 * `all packages`
   * [#353](https://github.com/zendeskgarden/react-components/pull/353) chore(lerna): update versioning flow ([@austin94](https://github.com/austin94))
 
-### Breaking Change Details
-
-#### New versioning strategy
-
-- Garden React packages are now published under a shared, fixed (common major) version number
-- You are still able to upgrade packages individually
-- This change will help us better communicate changes and allows consumers to better understand the state of their dependencies
-- This is the first release under the new versioning strategy, **v6.0.0**
-
-#### New peer dependencies
-
-From **v6.0.0** all Garden React libraries now require the following peer dependencies:
-
-```bash
-react@^16.8.0
-react-dom@^16.8.0
-styled-components@^4.2.0
-@zendeskgarden/react-theming@^6.0.0
-```
-
-[React v16 upgrade docs](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
-[styled-components v4 upgrade docs](https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4)
-
-Beginning with v4, styled-components now uses the [React.forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref) API.
-
-This means that all existing `innerRef`, `menuRef`, `buttonRef`, etc. props are now replaced with `ref`.
-
-#### How to upgrade
-
-1. Upgrade `react` and `react-dom` to `latest`
-2. Upgrade all Garden dependencies to their most recent, pre v6 versions
-3. Upgrade styled-components and all Garden dependencies to `latest`
-  1. Correct all `innerRef`, `buttonRef`, `menuRef`, etc. usages based on the [styled-components v4 upgrade docs](https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4)
-
-If you have any upgrade questions please [create an issue](https://github.com/zendeskgarden/react-components/issues).
-
-#### Pre v6 changelogs
+## Pre v6 changelogs
 
 [react-autocomplete](https://github.com/zendeskgarden/react-components/blob/930d97a0c923a98aa821a475c2557ceda22bec2c/packages/autocomplete/CHANGELOG.md),
 [react-avatars](https://github.com/zendeskgarden/react-components/blob/930d97a0c923a98aa821a475c2557ceda22bec2c/packages/avatars/CHANGELOG.md),

docs/changelogs/v7.md

@@ -1,4 +1,4 @@
-# Changelog
+# v7 Changelog
 
 > **Tags:**
 > - :boom: Breaking Change
@@ -151,6 +151,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 ## v7.0.0 (2019-10-17)
 
 #### :boom: Breaking Change
+* All breaking changes are detailed in the [Migration Guide](https://github.com/zendeskgarden/react-components/blob/main/docs/migrations/v7.md). Follow the guide to upgrade from version 6 to version 7.
 * `buttons`, `chrome`, `modals`, `pagination`, `selection`, `tabs`, `tooltips`
   * [#486](https://github.com/zendeskgarden/react-components/pull/486) chore(internal): deprecated react-selection and migrate Tabs and Pagination components BREAKING ([@austin94](https://github.com/austin94))
 * `breadcrumbs`, `buttons`, `chrome`, `modals`, `pagination`, `tabs`, `tooltips`
@@ -175,73 +176,6 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 * `buttons`, `modals`, `selection`, `tables`
   * [#490](https://github.com/zendeskgarden/react-components/pull/490) chore(deps): update dom-helpers ([@hzhu](https://github.com/hzhu))
 
-### Breaking Changes
-
-#### `react-loaders`
-
-* The `Dots` and `Spinner` components no longer accept a `velocity` prop
-  * To customize the speed of the animation use the `duration` prop to provide the time in MS.
-
-#### `react-pagination`
-
-* The `focusedKey` prop is no longer accepted
-  * This state is no longer controllable
-* The `onStateChange` prop is no longer accepted
-  * Use the `onChange` prop to receive `currentPage` updates.
-
-#### `react-tabs`
-
-* The `selectedKey` prop has been renamed to `selectedItem`
-  * This API now aligns with other components
-* All `<TabPanel>` components now require an `item` prop instead of a `key` prop
-  * Previously we used the `key` attribute to uniquely identify each tab
-  * This created confusion as `key` is also a reserved prop name in React
-* The `onStateChange` prop is no longer valid
-  * Use the `onChange` prop to receive `selectedItem` updates
-
-#### Removal of deprecated packages
-
-The following deprecated packages have been removed from the repository and will not be upgraded to `v7`:
-
-* `@zendeskgarden/react-autocomplete`
-  * Migrate to the `@zendeskgarden/react-dropdowns` package
-* `@zendeskgarden/react-checkboxes`
-  * Migrate to the `@zendeskgarden/react-forms` package
-* `@zendeskgarden/react-menus`
-* Migrate to the `@zendeskgarden/react-dropdowns` package
-* `@zendeskgarden/react-radios`
-  * Migrate to the `@zendeskgarden/react-forms` package
-* `@zendeskgarden/react-ranges`
-  * Migrate to the `@zendeskgarden/react-forms` package
-* `@zendeskgarden/react-select`
-  * Migrate to the `@zendeskgarden/react-dropdowns` package
-* `@zendeskgarden/react-textfields`
-  * Migrate to the `@zendeskgarden/react-forms` package
-* `@zendeskgarden/react-toggles`
-  * Migrate to the `@zendeskgarden/react-forms` package
-
-#### Removal of deprecated Render-Prop Containers
-
-In previous versions we have included render-prop containers for
-the common UX patterns provided in our components. To help make these
-assets more flexible, we have created a new repository [react-containers](https://github.com/zendeskgarden/react-containers).
-
-In `v7` all render-prop containers (`*Container`) has been moved to standalone packages.
-These containers are now available as standard React Hooks as well as render-props.
-
-### Migration Steps
-
-* Upgrade all Garden React dependencies to their latest `v6.x` version
-* Check your console and testing environments to see if any deprecation warnings can be seen
-* Remove any usages of deprecated packages and containers
-* Upgrade all Garden React dependencies to their latest `v7.x` version
-* Update any `react-tabs`, `react-pagination`, and `react-loaders` usages affected by the breaking changes listed above
-
-For this breaking change we were able to allow an open range for our peer dependency of `react-theming` to allow `v6` and `v7` versions.
-
-This allows you to upgrade each package individually if necessary, ending with `react-theming`.
-If you have any questions about this process please open an issue.
-
 ## v6 changelog
 
 https://github.com/zendeskgarden/react-components/blob/main/docs/changelogs/v6.md

docs/changelogs/v8.md

@@ -1,4 +1,4 @@
-# Changelog
+# v8 Changelog
 
 > **Tags:**
 > - :boom: Breaking Change
@@ -2372,6 +2372,7 @@ utilities upgrade to `@zendeskgarden/[email protected]` first.
 ## v8.0.0 (2020-02-18)
 
 #### :boom: Breaking Change
+* All breaking changes are detailed in the [Migration Guide](https://github.com/zendeskgarden/react-components/blob/main/docs/migrations/v8.md). Follow the guide to upgrade from version 7 to version 8.
 * `.template`, `avatars`, `breadcrumbs`, `buttons`, `chrome`, `datepickers`, `dropdowns`, `forms`, `grid`, `loaders`, `modals`, `notifications`, `pagination`, `selection`, `tables`, `tabs`, `tags`, `theming`, `tooltips`, `typography`, `utilities`
   * [#639](https://github.com/zendeskgarden/react-components/pull/639) feat(build): bring master up-to-date with next ([@austin94](https://github.com/austin94))
 

docs/migration.md

@@ -13,9 +13,8 @@ completely removed.
 
 The theme object, along with its utility functions, introduce a minimal set of
 breaking changes for Garden version 9. It is important to proceed with caution
-when upgrading each Garden package individually.
-
-To begin a v9 migration, these initial steps must be taken before upgrading individual packages:
+when upgrading each Garden package individually. To begin a v9 migration, these
+initial steps must be taken before upgrading individual packages:
 
 - All existing v8 packages must be set to
   [v8.75.0](https://github.com/zendeskgarden/react-components/releases/tag/v8.75.0)

docs/migrations/v6.md

@@ -0,0 +1,39 @@
+# Garden Migration Guide
+
+## v6
+
+### Breaking Change Details
+
+#### New versioning strategy
+
+- Garden React packages are now published under a shared, fixed (common major) version number
+- You are still able to upgrade packages individually
+- This change will help us better communicate changes and allows consumers to better understand the state of their dependencies
+- This is the first release under the new versioning strategy, **v6.0.0**
+
+#### New peer dependencies
+
+From **v6.0.0** all Garden React libraries now require the following peer dependencies:
+
+```bash
+react@^16.8.0
+react-dom@^16.8.0
+styled-components@^4.2.0
+@zendeskgarden/react-theming@^6.0.0
+```
+
+[React v16 upgrade docs](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
+[styled-components v4 upgrade docs](https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4)
+
+Beginning with v4, styled-components now uses the [React.forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref) API.
+
+This means that all existing `innerRef`, `menuRef`, `buttonRef`, etc. props are now replaced with `ref`.
+
+#### How to upgrade
+
+1. Upgrade `react` and `react-dom` to `latest`
+2. Upgrade all Garden dependencies to their most recent, pre v6 versions
+3. Upgrade styled-components and all Garden dependencies to `latest`
+4. Correct all `innerRef`, `buttonRef`, `menuRef`, etc. usages based on the [styled-components v4 upgrade docs](https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4)
+
+If you have any upgrade questions please [create an issue](https://github.com/zendeskgarden/react-components/issues).

docs/migrations/v7.md

@@ -0,0 +1,70 @@
+# Garden Migration Guide
+
+## v7
+
+### Breaking Changes
+
+#### `react-loaders`
+
+- The `Dots` and `Spinner` components no longer accept a `velocity` prop
+  - To customize the speed of the animation use the `duration` prop to provide the time in MS.
+
+#### `react-pagination`
+
+- The `focusedKey` prop is no longer accepted
+  - This state is no longer controllable
+- The `onStateChange` prop is no longer accepted
+  - Use the `onChange` prop to receive `currentPage` updates.
+
+#### `react-tabs`
+
+- The `selectedKey` prop has been renamed to `selectedItem`
+  - This API now aligns with other components
+- All `<TabPanel>` components now require an `item` prop instead of a `key` prop
+  - Previously we used the `key` attribute to uniquely identify each tab
+  - This created confusion as `key` is also a reserved prop name in React
+- The `onStateChange` prop is no longer valid
+  - Use the `onChange` prop to receive `selectedItem` updates
+
+#### Removal of deprecated packages
+
+The following deprecated packages have been removed from the repository and will not be upgraded to `v7`:
+
+- `@zendeskgarden/react-autocomplete`
+  - Migrate to the `@zendeskgarden/react-dropdowns` package
+- `@zendeskgarden/react-checkboxes`
+  - Migrate to the `@zendeskgarden/react-forms` package
+- `@zendeskgarden/react-menus`
+- Migrate to the `@zendeskgarden/react-dropdowns` package
+- `@zendeskgarden/react-radios`
+  - Migrate to the `@zendeskgarden/react-forms` package
+- `@zendeskgarden/react-ranges`
+  - Migrate to the `@zendeskgarden/react-forms` package
+- `@zendeskgarden/react-select`
+  - Migrate to the `@zendeskgarden/react-dropdowns` package
+- `@zendeskgarden/react-textfields`
+  - Migrate to the `@zendeskgarden/react-forms` package
+- `@zendeskgarden/react-toggles`
+  - Migrate to the `@zendeskgarden/react-forms` package
+
+#### Removal of deprecated Render-Prop Containers
+
+In previous versions we have included render-prop containers for
+the common UX patterns provided in our components. To help make these
+assets more flexible, we have created a new repository [react-containers](https://github.com/zendeskgarden/react-containers).
+
+In `v7` all render-prop containers (`*Container`) has been moved to standalone packages.
+These containers are now available as standard React Hooks as well as render-props.
+
+### Migration Steps
+
+- Upgrade all Garden React dependencies to their latest `v6.x` version
+- Check your console and testing environments to see if any deprecation warnings can be seen
+- Remove any usages of deprecated packages and containers
+- Upgrade all Garden React dependencies to their latest `v7.x` version
+- Update any `react-tabs`, `react-pagination`, and `react-loaders` usages affected by the breaking changes listed above
+
+For this breaking change we were able to allow an open range for our peer dependency of `react-theming` to allow `v6` and `v7` versions.
+
+This allows you to upgrade each package individually if necessary, ending with `react-theming`.
+If you have any questions about this process please open an issue.

packages/colorpickers/src/elements/ColorPickerDialog/index.tsx

@@ -14,6 +14,7 @@ import React, {
   forwardRef,
   ReactElement
 } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
@@ -27,7 +28,7 @@ import {
   StyledTooltipBody
 } from '../../styled';
 import { IColor, IColorPickerDialogProps } from '../../types';
-import { useText } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, useText } from '@zendeskgarden/react-theming';
 
 /**
  * @extends HTMLAttributes<HTMLDivElement>
@@ -70,6 +71,7 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
       'aria-label',
       'Color picker'
     );
+    const theme = useTheme() || DEFAULT_THEME;
 
     const openDialog = () => {
       setReferenceElement(buttonRef.current);
@@ -128,6 +130,7 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
           isAnimated={isAnimated}
           focusOnMount={false}
           placement={placement}
+          offset={theme.space.base}
           referenceElement={referenceElement}
           onClose={() => {
             closeDialog();

packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx

@@ -14,10 +14,11 @@ import React, {
   forwardRef,
   ReactElement
 } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PLACEMENT } from '@zendeskgarden/react-modals';
-import { useText } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, useText } from '@zendeskgarden/react-theming';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import Chevron from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 import { ColorSwatch } from '../ColorSwatch';
@@ -65,6 +66,7 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
     const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
     const [rowIndex, setRowIndex] = useState<number | undefined>(defaultSelectedRowIndex);
     const [colIndex, setColIndex] = useState<number | undefined>(defaultSelectedColIndex);
+    const theme = useTheme() || DEFAULT_THEME;
     let backgroundColor;
 
     if (isControlled) {
@@ -159,6 +161,7 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
           hasArrow={hasArrow}
           focusOnMount={false}
           placement={placement}
+          offset={theme.space.base}
           isAnimated={isAnimated}
           referenceElement={referenceElement}
           onClose={closeDialog}

packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx

@@ -35,6 +35,7 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
       appendToNode,
       referenceElement,
       placement: _placement,
+      offset: _offset,
       onClose,
       hasArrow,
       isAnimated,
@@ -81,7 +82,7 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
       elements: { reference: referenceElement, floating: floatingElement },
       placement: floatingPlacement,
       middleware: [
-        offset(theme.space.base * 3),
+        offset(_offset === undefined ? theme.space.base * 3 : _offset),
         _placement === 'auto' ? autoPlacement() : undefined
       ]
     });

packages/modals/src/types/index.ts

@@ -79,6 +79,8 @@ export interface ITooltipDialogProps extends Omit<IModalProps, 'isCentered' | 'i
    * Positions the modal relative to the provided `HTMLElement`
    */
   referenceElement?: HTMLElement | null;
+  /** @ignore Modifies the placement offset from the reference element (internal only) */
+  offset?: number;
   /**
    * Adjusts the placement of the tooltip
    **/

packages/theming/demo/stories/GetColorStory.tsx

@@ -11,11 +11,12 @@ import styled, { useTheme } from 'styled-components';
 import { IGardenTheme, getCheckeredBackground, getColor } from '@zendeskgarden/react-theming';
 import { Tag } from '@zendeskgarden/react-tags';
 
-const StyledDiv = styled.div<{ background: string }>`
+const StyledDiv = styled.div.attrs<{ background: string }>(p => ({
+  style: { background: p.background }
+}))<{ background: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${p => p.background};
   height: 208px;
 `;