Fix consistency issue in prop types

UNRELEASED.md

@@ -23,5 +23,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Development workflow
 
 - Upgrade to TypeScript 3.1.6 ([#700](https://github.com/Shopify/polaris-react/pull/700))
+- Moved some inconsistent prop types around for compatibility with the styleguide's Props Explorer ([#727](https://github.com/Shopify/polaris-react/pull/727))
 
 ### Dependency upgrades

src/components/AppProvider/AppProvider.tsx

@@ -1,25 +1,42 @@
 import * as React from 'react';
 import {autobind} from '@shopify/javascript-utilities/decorators';
-import ThemeProvider from '../ThemeProvider';
+import ThemeProvider, {Theme} from '../ThemeProvider';
+import {LinkLikeComponent} from '../UnstyledLink';
 import {
   StickyManager,
   ScrollLockManager,
+  TranslationDictionary,
   createAppProviderContext,
 } from './utilities';
-import {
-  AppProviderProps,
-  Context,
-  polarisAppProviderContextTypes,
-} from './types';
+import {Context, polarisAppProviderContextTypes} from './types';
+
+export interface Props {
+  /** A locale object or array of locale objects that overrides default translations */
+  i18n?: TranslationDictionary | TranslationDictionary[];
+  /** A custom component to use for all links used by Polaris components */
+  linkComponent?: LinkLikeComponent;
+  /** The API key for your application from the Partner dashboard */
+  apiKey?: string;
+  /**
+   * The current shop’s origin, provided in the session from the Shopify API (to be provided without the https://)
+   * @default getShopOrigin()
+   * @see {@link https://help.shopify.com/en/api/embedded-apps/app-bridge#set-up-your-app|Shopify App Bridge docs}
+   **/
+  shopOrigin?: string;
+  /** Forces a redirect to the relative admin path when not rendered in an iframe */
+  forceRedirect?: boolean;
+  /** Custom logos and colors provided to select components */
+  theme?: Theme;
+}
 
-export default class AppProvider extends React.Component<AppProviderProps> {
+export default class AppProvider extends React.Component<Props> {
   static childContextTypes = polarisAppProviderContextTypes;
   public polarisContext: Context;
   private stickyManager: StickyManager;
   private scrollLockManager: ScrollLockManager;
   private subscriptions: {(): void}[] = [];
 
-  constructor(props: AppProviderProps) {
+  constructor(props: Props) {
     super(props);
     this.stickyManager = new StickyManager();
     this.scrollLockManager = new ScrollLockManager();
@@ -46,7 +63,7 @@ export default class AppProvider extends React.Component<AppProviderProps> {
     apiKey,
     shopOrigin,
     forceRedirect,
-  }: AppProviderProps) {
+  }: Props) {
     if (
       i18n !== this.props.i18n ||
       linkComponent !== this.props.linkComponent ||

src/components/AppProvider/index.ts

@@ -14,9 +14,5 @@ export {
   ComplexReplacementDictionary,
   CreateAppProviderContext,
 } from './utilities';
-export {
-  AppProviderProps as Props,
-  Context,
-  polarisAppProviderContextTypes,
-} from './types';
-export {default} from './AppProvider';
+export {Context, polarisAppProviderContextTypes} from './types';
+export {default, Props as AppProviderProps} from './AppProvider';

src/components/AppProvider/types.ts

@@ -1,34 +1,8 @@
 import {ClientApplication} from '@shopify/app-bridge';
 import {ValidationMap} from 'react';
 import * as PropTypes from 'prop-types';
-import {LinkLikeComponent} from '../UnstyledLink';
-import {Theme, THEME_CONTEXT_TYPES as polarisTheme} from '../ThemeProvider';
-import {
-  Intl,
-  Link,
-  StickyManager,
-  ScrollLockManager,
-  TranslationDictionary,
-} from './utilities';
-
-export interface AppProviderProps {
-  /** A locale object or array of locale objects that overrides default translations */
-  i18n?: TranslationDictionary | TranslationDictionary[];
-  /** A custom component to use for all links used by Polaris components */
-  linkComponent?: LinkLikeComponent;
-  /** The API key for your application from the Partner dashboard */
-  apiKey?: string;
-  /**
-   * The current shop’s origin, provided in the session from the Shopify API (to be provided without the https://)
-   * @default getShopOrigin()
-   * @see {@link https://help.shopify.com/en/api/embedded-apps/app-bridge#set-up-your-app|Shopify App Bridge docs}
-   **/
-  shopOrigin?: string;
-  /** Forces a redirect to the relative admin path when not rendered in an iframe */
-  forceRedirect?: boolean;
-  /** Custom logos and colors provided to select components */
-  theme?: Theme;
-}
+import {THEME_CONTEXT_TYPES as polarisTheme} from '../ThemeProvider';
+import {Intl, Link, StickyManager, ScrollLockManager} from './utilities';
 
 export interface Context {
   polaris: {

src/components/AppProvider/utilities/createAppProviderContext/createAppProviderContext.ts

@@ -1,11 +1,12 @@
 import {noop} from '@shopify/javascript-utilities/other';
 import createApp, {getShopOrigin} from '@shopify/app-bridge';
 import {isServer} from '@shopify/react-utilities/target';
-import {AppProviderProps, Context} from '../../types';
+import {Context} from '../../types';
 import {StickyManager} from '../withSticky';
 import ScrollLockManager from '../ScrollLockManager';
 import Intl from '../Intl';
 import Link from '../Link';
+import {Props as AppProviderProps} from '../../AppProvider';
 
 export interface CreateAppProviderContext extends AppProviderProps {
   stickyManager?: StickyManager;

src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts

@@ -3,7 +3,7 @@ import {
   createThemeContext,
   ThemeContext as CreateThemeContext,
 } from '../../../ThemeProvider';
-import {AppProviderProps} from '../../types';
+import {Props as AppProviderProps} from '../../AppProvider';
 import {StickyManager} from '../withSticky';
 import createAppProviderContext, {
   CreateAppProviderContext,

src/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -1,10 +1,38 @@
 import * as React from 'react';
 import isEqual from 'lodash/isEqual';
-import {
-  ContextualSaveBarProps as Props,
-  FrameContext,
-  frameContextTypes,
-} from '../Frame';
+import {FrameContext, frameContextTypes} from '../Frame';
+
+interface ContextualSaveBarAction {
+  /** A destination to link to */
+  url?: string;
+  /** Content the action displays */
+  content?: string;
+  /** Should a spinner be displayed */
+  loading?: boolean;
+  /** Should the action be disabled */
+  disabled?: boolean;
+  /** Callback when an action takes place */
+  onAction?(): void;
+}
+
+interface ContextualSaveBarDiscardActionProps {
+  /** Whether to show a modal confirming the discard action */
+  discardConfirmationModal?: boolean;
+}
+
+type ContextualSaveBarCombinedActionProps = ContextualSaveBarDiscardActionProps &
+  ContextualSaveBarAction;
+
+export interface Props {
+  /** Extend the contents section to be flush with the left edge  */
+  alignContentFlush?: boolean;
+  /** Accepts a string of content that will be rendered to the left of the actions */
+  message?: string;
+  /** Save or commit contextual save bar action with text defaulting to 'Save' */
+  saveAction?: ContextualSaveBarAction;
+  /** Discard or cancel contextual save bar action with text defaulting to 'Discard' */
+  discardAction?: ContextualSaveBarCombinedActionProps;
+}
 
 class ContextualSaveBar extends React.PureComponent<Props, never> {
   static contextTypes = frameContextTypes;

src/components/ContextualSaveBar/index.ts

@@ -1,3 +1,4 @@
 import ContextualSaveBar from './ContextualSaveBar';
 
+export {Props as ContextualSaveBarProps} from './ContextualSaveBar';
 export default ContextualSaveBar;

src/components/Frame/Frame.tsx

@@ -11,12 +11,9 @@ import Backdrop from '../Backdrop';
 import TrapFocus from '../TrapFocus';
 import {dataPolarisTopBar, layer, Duration} from '../shared';
 import {setRootProperty} from '../../utilities/setRootProperty';
-import {
-  ContextualSaveBarProps,
-  FrameContext,
-  frameContextTypes,
-  ToastProps,
-} from './types';
+import {ContextualSaveBarProps} from '../ContextualSaveBar';
+import {ToastProps} from '../Toast';
+import {FrameContext, frameContextTypes} from './types';
 import {ToastManager, Loading, ContextualSaveBar} from './components';
 
 import * as styles from './Frame.scss';

src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -3,7 +3,7 @@ import {autobind} from '@shopify/javascript-utilities/decorators';
 
 import {getWidth} from '../../../../utilities/getWidth';
 
-import {ContextualSaveBarProps as Props} from '../../types';
+import {ContextualSaveBarProps as Props} from '../../../ContextualSaveBar';
 import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 import Button from '../../../Button';
 import Image from '../../../Image';

src/components/Frame/components/Toast/Toast.tsx

@@ -5,7 +5,7 @@ import {Key} from '../../../../types';
 
 import Icon from '../../../Icon';
 import KeypressListener from '../../../KeypressListener';
-import {ToastProps as Props} from '../../types';
+import {ToastProps as Props} from '../../../Toast';
 
 import * as styles from './Toast.scss';
 

src/components/Frame/components/Toast/tests/Toast.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities';
 import {noop} from 'utilities/other';
-import {ToastProps as Props} from '../../../types';
+import {ToastProps as Props} from '../../../../Toast';
 import Toast from '../Toast';
 import {Key} from '../../../../../types';
 

src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -4,7 +4,7 @@ import {autobind} from '@shopify/javascript-utilities/decorators';
 import {classNames} from '@shopify/react-utilities/styles';
 import EventListener from '../../../EventListener';
 import Portal from '../../../Portal';
-import {ToastProps} from '../../types';
+import {ToastProps} from '../../../Toast';
 import Toast from '../Toast';
 
 import * as styles from './ToastManager.scss';

src/components/Frame/index.ts

@@ -4,11 +4,6 @@ export {Props} from './Frame';
 
 export {DEFAULT_TOAST_DURATION} from './components';
 
-export {
-  ContextualSaveBarProps,
-  FrameContext,
-  frameContextTypes,
-  ToastProps,
-} from './types';
+export {FrameContext, frameContextTypes} from './types';
 
 export default Frame;

src/components/Frame/types.ts

@@ -1,4 +1,6 @@
 import * as PropTypes from 'prop-types';
+import {ToastProps} from '../Toast';
+import {ContextualSaveBarProps} from '../ContextualSaveBar';
 
 export interface FrameManager {
   showToast(toast: {id: string} & ToastProps): void;
@@ -17,50 +19,4 @@ export const frameContextTypes = {
   frame: PropTypes.object,
 };
 
-interface ContextualSaveBarAction {
-  /** A destination to link to */
-  url?: string;
-  /** Content the action displays */
-  content?: string;
-  /** Should a spinner be displayed */
-  loading?: boolean;
-  /** Should the action be disabled */
-  disabled?: boolean;
-  /** Callback when an action takes place */
-  onAction?(): void;
-}
-
-interface ContextualSaveBarDiscardActionProps {
-  /** Whether to show a modal confirming the discard action */
-  discardConfirmationModal?: boolean;
-}
-
-type ContextualSaveBarCombinedActionProps = ContextualSaveBarDiscardActionProps &
-  ContextualSaveBarAction;
-
-export interface ContextualSaveBarProps {
-  /** Extend the contents section to be flush with the left edge  */
-  alignContentFlush?: boolean;
-  /** Accepts a string of content that will be rendered to the left of the actions */
-  message?: string;
-  /** Save or commit contextual save bar action with text defaulting to 'Save' */
-  saveAction?: ContextualSaveBarAction;
-  /** Discard or cancel contextual save bar action with text defaulting to 'Discard' */
-  discardAction?: ContextualSaveBarCombinedActionProps;
-}
-
 // Toast
-
-export interface ToastProps {
-  /** The content that should appear in the toast message */
-  content: string;
-  /**
-   * The length of time in milliseconds the toast message should persist
-   * @default 5000
-   */
-  duration?: number;
-  /** Display an error toast. */
-  error?: boolean;
-  /** Callback when the dismiss icon is clicked */
-  onDismiss(): void;
-}

src/components/Toast/Toast.tsx

@@ -6,15 +6,28 @@ import {
   DEFAULT_TOAST_DURATION,
   FrameContext,
   frameContextTypes,
-  ToastProps as Props,
 } from '../Frame';
 import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 
 const createId = createUniqueIDFactory('Toast');
 
-export type ComposedProps = Props & WithAppProviderProps;
+export interface ToastProps {
+  /** The content that should appear in the toast message */
+  content: string;
+  /**
+   * The length of time in milliseconds the toast message should persist
+   * @default 5000
+   */
+  duration?: number;
+  /** Display an error toast. */
+  error?: boolean;
+  /** Callback when the dismiss icon is clicked */
+  onDismiss(): void;
+}
+
+export type Props = ToastProps & WithAppProviderProps;
 
-export class Toast extends React.PureComponent<ComposedProps, never> {
+export class Toast extends React.PureComponent<Props, never> {
   static contextTypes = frameContextTypes;
   context: FrameContext;
 
@@ -34,7 +47,7 @@ export class Toast extends React.PureComponent<ComposedProps, never> {
     if (appBridge == null) {
       context.frame.showToast({
         id,
-        ...(props as Props),
+        ...(props as ToastProps),
       });
     } else {
       this.appBridgeToast = AppBridgeToast.create(appBridge, {
@@ -64,4 +77,4 @@ export class Toast extends React.PureComponent<ComposedProps, never> {
   }
 }
 
-export default withAppProvider<Props>()(Toast);
+export default withAppProvider<ToastProps>()(Toast);

src/components/Toast/index.ts

@@ -1,3 +1,4 @@
 import Toast from './Toast';
 
+export {ToastProps} from './Toast';
 export default Toast;