feat!: renames and prunes type/constant exports from packages (#1725)

geotrev · web-flow · commit 6844b7a6f77f · 2024-02-28T12:26:04.000-06:00
diff --git a/docs/migration.md b/docs/migration.md
@@ -32,9 +32,18 @@ consider additional positioning prop support on a case-by-case basis.
     [jest.config.js](https://github.com/zendeskgarden/react-components/blob/c2aa97d1edccfa0578ee5655b543ca6635767fb9/utils/test/jest.config.js#L28-L30)
     for details.
 
+#### @zendeskgarden/react-accordions
+
+- Removed `IItem` type export. Use `ITimelineItemProps` instead.
+
 #### @zendeskgarden/react-buttons
 
 - Removed `ButtonGroup`: UI no longer recommended by Garden
+- Removed `IIconProps` type export. Use `IButtonStartIconProps` or `IButtonEndIconProps` instead.
+
+#### @zendeskgarden/react-chrome
+
+- Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
 
 #### @zendeskgarden/react-colorpickers
 
@@ -68,23 +77,46 @@ consider additional positioning prop support on a case-by-case basis.
 #### @zendeskgarden/react-forms
 
 - Removed `MultiThumbRange`: UI no longer recommended by Garden
+- The following types have changed:
+  - removed `IFieldProps`
+  - removed `IIconProps`. Use `IFauxInputStartIconProps` or `IFauxInputEndIconProps` instead.
+
+#### @zendeskgarden/react-grid
+
+- Exported constants prefixed with `ARRAY_` no longer have a prefix.
+- The following types have been removed: `ALIGN_ITEMS`, `ALIGN_SELF`, `DIRECTION`,
+  `JUSTIFY_CONTENT`, `TEXT_ALIGN`, `GRID_NUMBER`, `BREAKPOINT`, `SPACE`, and `WRAP`
 
 #### @zendeskgarden/react-modals
 
 - `DrawerModal`: renamed to `Drawer`
 - `TooltipModal`: removed `popperModifiers` prop (see [note](#breaking-changes))
+- Removed `GARDEN_PLACEMENT` type export. Use `ITooltipModalProps['placement']` instead.
+
+#### @zendeskgarden/react-notification
+
+- The following types have changed:
+  - removed `ToastPlacement`. Use `IToastOptions['placement']` instead.
+  - removed `ToastContent`. Use `IToast['content']` instead.
 
 #### @zendeskgarden/react-pagination
 
 - `Pagination`: renamed to `OffsetPagination`
   - changed type export from `HTMLAttributes<HTMLUListElement>` to `HTMLAttributes<HTMLElement>`
   - removed `transformPageProps` prop
   - added `labels` prop
+- Renamed `PAGE_TYPE` type export to `PageType`
 
 #### @zendeskgarden/react-theming
 
 - Utility function `isRtl` has been removed. Use `props.theme.rtl` instead.
 - Utility function `getDocument` has been removed. Use `useDocument` instead.
+- The following exports have changed:
+  - removed `retrieveTheme`. Use `retriveComponentStyles` instead.
+  - constants prefixed with `ARRAY_` no longer have a prefix.
+- The following types have changed:
+  - renamed `ARROW_POSITION` to `ArrowPosition`
+  - renamed `MENU_POSITION` to `MenuPosition`
 
 #### @zendeskgarden/react-tooltips
 
diff --git a/packages/accordions/src/elements/timeline/components/Item.tsx b/packages/accordions/src/elements/timeline/components/Item.tsx
@@ -11,11 +11,6 @@ import { StyledTimelineItem } from '../../../styled';
 import { TimelineItemContext, useTimelineContext } from '../../../utils';
 import { ITimelineItemProps } from '../../../types';
 
-/**
- * @deprecated use ITimelineItemProps instead
- */
-export type IItem = ITimelineItemProps;
-
 const ItemComponent = forwardRef<HTMLLIElement, ITimelineItemProps>(
   ({ icon, surfaceColor, ...props }, ref) => {
     const value = useMemo(() => ({ icon, surfaceColor }), [icon, surfaceColor]);
diff --git a/packages/accordions/src/index.ts b/packages/accordions/src/index.ts
@@ -7,10 +7,7 @@
 
 export { Accordion } from './elements/accordion/Accordion';
 export { Stepper } from './elements/stepper/Stepper';
-
 export { Timeline } from './elements/timeline/Timeline';
-/** @deprecated */
-export type { IItem } from './elements/timeline/components/Item';
 
 export type {
   IAccordionProps,
diff --git a/packages/avatars/src/index.ts b/packages/avatars/src/index.ts
@@ -7,4 +7,5 @@
 
 export { Avatar } from './elements/Avatar';
 export { StatusIndicator } from './elements/StatusIndicator';
+
 export type { IAvatarProps, IStatusIndicatorProps } from './types';
diff --git a/packages/buttons/src/elements/Button.tsx b/packages/buttons/src/elements/Button.tsx
@@ -5,21 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, SVGAttributes } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { IButtonProps, SIZE } from '../types';
 import { StyledButton } from '../styled';
 import { useSplitButtonContext } from '../utils/useSplitButtonContext';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
 
-/**
- * @deprecated use IButtonStartIconProps or IButtonEndIconProps instead
- */
-export interface IIconProps extends SVGAttributes<SVGSVGElement> {
-  isRotated?: boolean;
-}
-
 const ButtonComponent = forwardRef<HTMLButtonElement, IButtonProps>((props, ref) => {
   const splitButtonContext = useSplitButtonContext();
 
diff --git a/packages/buttons/src/index.ts b/packages/buttons/src/index.ts
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-export { Button, type IIconProps } from './elements/Button';
+export { Button } from './elements/Button';
 export { Anchor } from './elements/Anchor';
 export { ChevronButton } from './elements/ChevronButton';
 export { IconButton } from './elements/IconButton';
diff --git a/packages/chrome/demo/stories/ChromeStory.tsx b/packages/chrome/demo/stories/ChromeStory.tsx
@@ -48,7 +48,6 @@ import {
   NavItem,
   NavItemIcon,
   NavItemText,
-  PRODUCT,
   Sidebar,
   SkipNav,
   SubNav,
@@ -58,6 +57,7 @@ import {
 import { Button } from '@zendeskgarden/react-buttons';
 import { IFooterItem, IHeaderItem, INavItem, ISubNavItem } from './types';
 import { SheetComponent } from './SheetStory';
+import { Product } from '../../src/types';
 
 const HEADER_ICONS = [
   <HeaderIcon1 key={1} />,
@@ -75,7 +75,7 @@ const NAV_ICONS = [
   <NavIcon6 key={6} />
 ];
 
-const PRODUCT_ICONS: Record<PRODUCT, ReactElement<SVGElement>> = {
+const PRODUCT_ICONS: Record<Product, ReactElement<SVGElement>> = {
   chat: <ChatIcon />,
   connect: <ConnectIcon />,
   explore: <ExploreIcon />,
diff --git a/packages/chrome/src/elements/header/HeaderItem.spec.tsx b/packages/chrome/src/elements/header/HeaderItem.spec.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { render } from 'garden-test-utils';
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { HeaderItem } from './HeaderItem';
-import { PRODUCT, Product } from '../../types';
+import { PRODUCTS, Product } from '../../types';
 
 describe('HeaderItem', () => {
   it('passes ref to underlying DOM element', () => {
@@ -55,7 +55,7 @@ describe('HeaderItem', () => {
     };
 
     it('renders correct product color', () => {
-      PRODUCT.forEach(product => {
+      PRODUCTS.forEach(product => {
         const { container } = render(<HeaderItem hasLogo product={product} />);
 
         expect(container.firstChild).toHaveStyleRule('color', VALID_COLOR_MAP[product]);
diff --git a/packages/chrome/src/elements/header/HeaderItem.tsx b/packages/chrome/src/elements/header/HeaderItem.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IHeaderItemProps, PRODUCT } from '../../types';
+import { IHeaderItemProps, PRODUCTS } from '../../types';
 import { StyledHeaderItem, StyledLogoHeaderItem } from '../../styled';
 
 /**
@@ -29,6 +29,6 @@ HeaderItem.propTypes = {
   maxX: PropTypes.bool,
   maxY: PropTypes.bool,
   isRound: PropTypes.bool,
-  product: PropTypes.oneOf(PRODUCT),
+  product: PropTypes.oneOf(PRODUCTS),
   hasLogo: PropTypes.bool
 };
diff --git a/packages/chrome/src/elements/nav/NavItem.spec.tsx b/packages/chrome/src/elements/nav/NavItem.spec.tsx
@@ -11,7 +11,7 @@ import { PALETTE, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Chrome } from '../Chrome';
 import { NavItem } from './NavItem';
 import { Nav } from './Nav';
-import { PRODUCT, Product } from '../../types';
+import { PRODUCTS, Product } from '../../types';
 
 describe('NavItem', () => {
   it('passes ref to underlying DOM element', () => {
@@ -173,7 +173,7 @@ describe('NavItem', () => {
     };
 
     it('renders correct product color if provided', () => {
-      PRODUCT.forEach(product => {
+      PRODUCTS.forEach(product => {
         const { container } = render(<NavItem hasLogo product={product} />);
 
         expect(container.firstChild).toHaveStyleRule('color', VALID_COLOR_MAP[product]);
diff --git a/packages/chrome/src/elements/nav/NavItem.tsx b/packages/chrome/src/elements/nav/NavItem.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { INavItemProps, PRODUCT } from '../../types';
+import { INavItemProps, PRODUCTS } from '../../types';
 import { StyledNavItem, StyledLogoNavItem, StyledBrandmarkNavItem } from '../../styled';
 import { useNavContext } from '../../utils/useNavContext';
 import { useChromeContext } from '../../utils/useChromeContext';
@@ -56,7 +56,7 @@ export const NavItem = React.forwardRef<HTMLButtonElement, INavItemProps>(
 NavItem.displayName = 'NavItem';
 
 NavItem.propTypes = {
-  product: PropTypes.oneOf(PRODUCT),
+  product: PropTypes.oneOf(PRODUCTS),
   hasLogo: PropTypes.bool,
   hasBrandmark: PropTypes.bool
 };
diff --git a/packages/chrome/src/index.ts b/packages/chrome/src/index.ts
@@ -29,7 +29,7 @@ export { CollapsibleSubNavItem } from './elements/subnav/CollapsibleSubNavItem';
 export { Sheet } from './elements/sheet/Sheet';
 
 export {
-  PRODUCT as PRODUCTS,
+  PRODUCTS,
   type IChromeProps,
   type ISkipNavProps,
   type IBodyProps,
@@ -43,7 +43,5 @@ export {
   type ISubNavItemProps,
   type ICollapsibleSubNavItemProps,
   type ISheetProps,
-  type ISheetFooterProps,
-  /** @deprecated can be accessed via IHeaderItemProps['product'] */
-  type Product as PRODUCT
+  type ISheetFooterProps
 } from './types';
diff --git a/packages/chrome/src/types/index.ts b/packages/chrome/src/types/index.ts
@@ -9,7 +9,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode }
 
 export const PLACEMENT = ['end', 'start'] as const;
 
-export const PRODUCT = [
+export const PRODUCTS = [
   'chat',
   'connect',
   'explore',
@@ -19,7 +19,7 @@ export const PRODUCT = [
   'talk'
 ] as const;
 
-export type Product = (typeof PRODUCT)[number];
+export type Product = (typeof PRODUCTS)[number];
 
 export interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
   /** Applies a custom hue to the chrome navigation */
diff --git a/packages/dropdowns.legacy/src/utils/garden-placements.ts b/packages/dropdowns.legacy/src/utils/garden-placements.ts
@@ -5,10 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import {
-  ARROW_POSITION as ArrowPosition,
-  MENU_POSITION as MenuPosition
-} from '@zendeskgarden/react-theming';
+import { ArrowPosition, MenuPosition } from '@zendeskgarden/react-theming';
 import { GardenPlacement, PopperPlacement } from '../types';
 
 /**
diff --git a/packages/dropdowns.legacy/src/utils/gardenPlacements.spec.ts b/packages/dropdowns.legacy/src/utils/gardenPlacements.spec.ts
@@ -5,10 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import {
-  ARROW_POSITION as ArrowPosition,
-  MENU_POSITION as MenuPosition
-} from '@zendeskgarden/react-theming';
+import { ArrowPosition, MenuPosition } from '@zendeskgarden/react-theming';
 import { GardenPlacement, PLACEMENT, PopperPlacement } from '../types';
 import {
   getPopperPlacement,
diff --git a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
@@ -9,7 +9,7 @@ import styled, { ThemeProps, DefaultTheme } from 'styled-components';
 import {
   retrieveComponentStyles,
   DEFAULT_THEME,
-  MENU_POSITION as MenuPosition,
+  MenuPosition,
   menuStyles
 } from '@zendeskgarden/react-theming';
 import { IListboxProps } from '../../types';
diff --git a/packages/dropdowns/src/views/menu/StyledMenu.ts b/packages/dropdowns/src/views/menu/StyledMenu.ts
@@ -10,7 +10,7 @@ import {
   retrieveComponentStyles,
   DEFAULT_THEME,
   arrowStyles,
-  ARROW_POSITION as ArrowPosition
+  ArrowPosition
 } from '@zendeskgarden/react-theming';
 import { IStyledListboxProps, StyledListbox } from '../combobox/StyledListbox';
 
diff --git a/packages/forms/src/elements/common/Field.tsx b/packages/forms/src/elements/common/Field.tsx
@@ -10,14 +10,6 @@ import { useField } from '@zendeskgarden/container-field';
 import { FieldContext } from '../../utils/useFieldContext';
 import { StyledField } from '../../styled';
 
-/**
- * @deprecated
- */
-export interface IFieldProps extends HTMLAttributes<HTMLDivElement> {
-  /** Sets the field ID and the prefix for the generated label, input, and hint IDs */
-  id?: string;
-}
-
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
diff --git a/packages/forms/src/elements/faux-input/FauxInput.tsx b/packages/forms/src/elements/faux-input/FauxInput.tsx
@@ -5,25 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, HTMLAttributes, forwardRef } from 'react';
+import React, { useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { IFauxInputProps, VALIDATION } from '../../types';
 import { StyledTextFauxInput } from '../../styled';
 import { StartIcon } from './components/StartIcon';
 import { EndIcon } from './components/EndIcon';
 
-/**
- * @deprecated use IFauxInputStartIconProps or IFauxInputEndIconProps instead
- */
-export interface IIconProps extends HTMLAttributes<HTMLElement> {
-  isHovered?: boolean;
-  isFocused: boolean;
-  isDisabled: boolean;
-  isRotated: boolean;
-  children: any;
-}
-
 const FauxInputComponent = forwardRef<HTMLDivElement, IFauxInputProps>(
   ({ onFocus, onBlur, disabled, readOnly, isFocused: controlledIsFocused, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
@@ -6,7 +6,7 @@
  */
 
 /** Common */
-export { Field, type IFieldProps } from './elements/common/Field';
+export { Field } from './elements/common/Field';
 export { Fieldset } from './elements/common/Fieldset';
 export { Hint } from './elements/common/Hint';
 export { Label } from './elements/common/Label';
@@ -35,7 +35,7 @@ export { FileList } from './elements/file-list/FileList';
 export { File } from './elements/file-list/components/File';
 
 /** Other */
-export { FauxInput, type IIconProps } from './elements/faux-input/FauxInput';
+export { FauxInput } from './elements/faux-input/FauxInput';
 export { MediaInput } from './elements/MediaInput';
 
 /** types */
diff --git a/packages/grid/src/index.ts b/packages/grid/src/index.ts
@@ -13,27 +13,17 @@ export { PaneProvider } from './elements/pane/PaneProvider';
 export { Pane } from './elements/pane/Pane';
 
 export {
-  ALIGN_ITEMS as ARRAY_ALIGN_ITEMS,
-  ALIGN_SELF as ARRAY_ALIGN_SELF,
-  DIRECTION as ARRAY_DIRECTION,
-  JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT,
-  TEXT_ALIGN as ARRAY_TEXT_ALIGN,
-  SPACE as ARRAY_SPACE,
-  WRAP as ARRAY_WRAP,
+  ALIGN_ITEMS,
+  ALIGN_SELF,
+  DIRECTION,
+  JUSTIFY_CONTENT,
+  TEXT_ALIGN,
+  SPACE,
+  WRAP,
   type IPaneProviderProps,
   type ISplitterProps,
   type ISplitterButtonProps,
   type IColProps,
   type IGridProps,
-  type IRowProps,
-  /* @deprecated these types can be dereferenced on the exported interfaces */
-  type AlignItems as ALIGN_ITEMS,
-  type AlignSelf as ALIGN_SELF,
-  type Direction as DIRECTION,
-  type JustifyContent as JUSTIFY_CONTENT,
-  type TextAlign as TEXT_ALIGN,
-  type GridNumber as GRID_NUMBER,
-  type Breakpoint as BREAKPOINT,
-  type Space as SPACE,
-  type Wrap as WRAP
+  type IRowProps
 } from './types';
diff --git a/packages/modals/src/index.ts b/packages/modals/src/index.ts
diff --git a/packages/notifications/src/index.ts b/packages/notifications/src/index.ts
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
diff --git a/packages/theming/demo/stories/ArrowStylesStory.tsx b/packages/theming/demo/stories/ArrowStylesStory.tsx
diff --git a/packages/theming/demo/stories/MenuStylesStory.tsx b/packages/theming/demo/stories/MenuStylesStory.tsx
diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts
