diff --git a/UNRELEASED.md b/UNRELEASED.md index 7c29946a982..ac5e9149c1d 100644 --- a/UNRELEASED.md +++ b/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 diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx index 5e759565a7e..973ac8bdeaf 100644 --- a/src/components/AppProvider/AppProvider.tsx +++ b/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 { +export default class AppProvider extends React.Component { 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 { apiKey, shopOrigin, forceRedirect, - }: AppProviderProps) { + }: Props) { if ( i18n !== this.props.i18n || linkComponent !== this.props.linkComponent || diff --git a/src/components/AppProvider/index.ts b/src/components/AppProvider/index.ts index 6482e8eae61..c676915eca3 100644 --- a/src/components/AppProvider/index.ts +++ b/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'; diff --git a/src/components/AppProvider/types.ts b/src/components/AppProvider/types.ts index a6a180ea6fc..dd7d8be103a 100644 --- a/src/components/AppProvider/types.ts +++ b/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: { diff --git a/src/components/AppProvider/utilities/createAppProviderContext/createAppProviderContext.ts b/src/components/AppProvider/utilities/createAppProviderContext/createAppProviderContext.ts index e0c40082038..43a71549fac 100644 --- a/src/components/AppProvider/utilities/createAppProviderContext/createAppProviderContext.ts +++ b/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; diff --git a/src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts b/src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts index 0885a2930eb..b48d9e8b25b 100644 --- a/src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts +++ b/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, diff --git a/src/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/ContextualSaveBar/ContextualSaveBar.tsx index 4c6df1ab58b..8d3f642f034 100644 --- a/src/components/ContextualSaveBar/ContextualSaveBar.tsx +++ b/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 { static contextTypes = frameContextTypes; diff --git a/src/components/ContextualSaveBar/index.ts b/src/components/ContextualSaveBar/index.ts index abfd294fe06..9c12793f1b6 100644 --- a/src/components/ContextualSaveBar/index.ts +++ b/src/components/ContextualSaveBar/index.ts @@ -1,3 +1,4 @@ import ContextualSaveBar from './ContextualSaveBar'; +export {Props as ContextualSaveBarProps} from './ContextualSaveBar'; export default ContextualSaveBar; diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx index 4e30bc5c38d..6fa05c4a07d 100644 --- a/src/components/Frame/Frame.tsx +++ b/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'; diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx index c831104f025..c78c7349e84 100644 --- a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx +++ b/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'; diff --git a/src/components/Frame/components/Toast/Toast.tsx b/src/components/Frame/components/Toast/Toast.tsx index 14df9a58a83..f3c40538b3d 100644 --- a/src/components/Frame/components/Toast/Toast.tsx +++ b/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'; diff --git a/src/components/Frame/components/Toast/tests/Toast.test.tsx b/src/components/Frame/components/Toast/tests/Toast.test.tsx index 14a4594f827..8a24178dd2a 100644 --- a/src/components/Frame/components/Toast/tests/Toast.test.tsx +++ b/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'; diff --git a/src/components/Frame/components/ToastManager/ToastManager.tsx b/src/components/Frame/components/ToastManager/ToastManager.tsx index ce85733987a..f725e6f3a8f 100644 --- a/src/components/Frame/components/ToastManager/ToastManager.tsx +++ b/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'; diff --git a/src/components/Frame/index.ts b/src/components/Frame/index.ts index 4afafa89515..123de9b7ec4 100644 --- a/src/components/Frame/index.ts +++ b/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; diff --git a/src/components/Frame/types.ts b/src/components/Frame/types.ts index 0be89ca61a8..f24778610e6 100644 --- a/src/components/Frame/types.ts +++ b/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; -} diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 2ed76a878b0..24a110a3429 100644 --- a/src/components/Toast/Toast.tsx +++ b/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 { +export class Toast extends React.PureComponent { static contextTypes = frameContextTypes; context: FrameContext; @@ -34,7 +47,7 @@ export class Toast extends React.PureComponent { 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 { } } -export default withAppProvider()(Toast); +export default withAppProvider()(Toast); diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts index 258888627b9..af798f53d9d 100644 --- a/src/components/Toast/index.ts +++ b/src/components/Toast/index.ts @@ -1,3 +1,4 @@ import Toast from './Toast'; +export {ToastProps} from './Toast'; export default Toast; diff --git a/src/components/index.ts b/src/components/index.ts index 5ac945bb2c0..e851807a386 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,7 +7,7 @@ export {default as ActionList, Props as ActionListProps} from './ActionList'; export { default as AppProvider, - Props as AppProviderProps, + AppProviderProps, Context as AppProviderContext, polarisAppProviderContextTypes as polarisContextTypes, createAppProviderContext, @@ -77,7 +77,10 @@ export { export {default as Connected, Props as ConnectedProps} from './Connected'; -export {default as ContextualSaveBar} from './ContextualSaveBar'; +export { + default as ContextualSaveBar, + ContextualSaveBarProps, +} from './ContextualSaveBar'; export { default as DataTable, @@ -135,8 +138,6 @@ export {default as FormLayout, Props as FormLayoutProps} from './FormLayout'; export { default as Frame, Props as FrameProps, - ContextualSaveBarProps, - ToastProps, DEFAULT_TOAST_DURATION, } from './Frame'; @@ -260,7 +261,7 @@ export { Context as ThemeProviderContext, } from './ThemeProvider'; -export {default as Toast} from './Toast'; +export {default as Toast, ToastProps} from './Toast'; export {default as Tooltip, Props as TooltipProps} from './Tooltip';