diff --git a/UNRELEASED.md b/UNRELEASED.md index c9a7866841f..3db95c0af31 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -19,6 +19,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Development workflow - Added a slight delay to the Percy screenshot script to give time for components to render fully ([#704](https://github.com/Shopify/polaris-react/pull/704)) -- Refactors to remove cyclical type imports ([#759](https://github.com/Shopify/polaris-react/pull/759)) +- Refactors to remove cyclical type imports ([#759](https://github.com/Shopify/polaris-react/pull/759) and [#754](https://github.com/Shopify/polaris-react/pull/754)) ### Dependency upgrades diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index 57a2593f52d..0626f3eb4f0 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -9,24 +9,14 @@ import EventListener from '../EventListener'; import {Cell, CellProps, Navigation} from './components'; import {measureColumn, getPrevAndCurrentColumns} from './utilities'; +import {DataTableState, SortDirection} from './types'; import * as styles from './DataTable.scss'; export type CombinedProps = Props & WithAppProviderProps; export type TableRow = Props['headings'] | Props['rows'] | Props['totals']; export type TableData = string | number | React.ReactNode; -export type SortDirection = 'ascending' | 'descending' | 'none'; -export type ColumnContentType = 'text' | 'numeric'; - -export interface ColumnVisibilityData { - leftEdge: number; - rightEdge: number; - isVisible?: boolean; -} -export interface ScrollPosition { - left?: number; - top?: number; -} +export type ColumnContentType = 'text' | 'numeric'; export interface Props { /** List of data types, which determines content alignment for each column. Data types are "text," which aligns left, or "numeric," which aligns right. */ @@ -59,22 +49,11 @@ export interface Props { onSort?(headingIndex: number, direction: SortDirection): void; } -export interface State { - collapsed: boolean; - columnVisibilityData: ColumnVisibilityData[]; - previousColumn?: ColumnVisibilityData; - currentColumn?: ColumnVisibilityData; - sortedColumnIndex?: number; - sortDirection?: SortDirection; - heights: number[]; - fixedColumnWidth?: number; - preservedScrollPosition: ScrollPosition; - isScrolledFarthestLeft?: boolean; - isScrolledFarthestRight?: boolean; -} - -export class DataTable extends React.PureComponent { - state: State = { +export class DataTable extends React.PureComponent< + CombinedProps, + DataTableState +> { + state: DataTableState = { collapsed: false, columnVisibilityData: [], heights: [], diff --git a/src/components/DataTable/components/Cell/Cell.tsx b/src/components/DataTable/components/Cell/Cell.tsx index 8aaaf3e82ab..fc856cae960 100644 --- a/src/components/DataTable/components/Cell/Cell.tsx +++ b/src/components/DataTable/components/Cell/Cell.tsx @@ -4,7 +4,7 @@ import {classNames} from '@shopify/react-utilities/styles'; import {headerCell} from '../../../shared'; import {withAppProvider, WithAppProviderProps} from '../../../AppProvider'; import Icon, {IconSource} from '../../../Icon'; -import {SortDirection} from '../../DataTable'; +import {SortDirection} from '../../types'; import * as styles from '../../DataTable.scss'; diff --git a/src/components/DataTable/components/Navigation/Navigation.tsx b/src/components/DataTable/components/Navigation/Navigation.tsx index 8b7d1d37d53..fa240c1a773 100644 --- a/src/components/DataTable/components/Navigation/Navigation.tsx +++ b/src/components/DataTable/components/Navigation/Navigation.tsx @@ -4,7 +4,7 @@ import {classNames} from '@shopify/react-utilities/styles'; import {withAppProvider, WithAppProviderProps} from '../../../AppProvider'; import Button from '../../../Button'; -import {ColumnVisibilityData} from '../../DataTable'; +import {ColumnVisibilityData} from '../../types'; import * as styles from '../../DataTable.scss'; diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts index 71581f862aa..4552c3815b5 100644 --- a/src/components/DataTable/index.ts +++ b/src/components/DataTable/index.ts @@ -1,11 +1,7 @@ import DataTable from './DataTable'; -export { - Props, - TableRow, - TableData, - SortDirection, - ColumnContentType, -} from './DataTable'; +export {SortDirection} from './types'; + +export {Props, TableRow, TableData, ColumnContentType} from './DataTable'; export default DataTable; diff --git a/src/components/DataTable/types.ts b/src/components/DataTable/types.ts new file mode 100644 index 00000000000..8171f43eb46 --- /dev/null +++ b/src/components/DataTable/types.ts @@ -0,0 +1,26 @@ +export type SortDirection = 'ascending' | 'descending' | 'none'; + +export interface ColumnVisibilityData { + leftEdge: number; + rightEdge: number; + isVisible?: boolean; +} + +interface ScrollPosition { + left?: number; + top?: number; +} + +export interface DataTableState { + collapsed: boolean; + columnVisibilityData: ColumnVisibilityData[]; + previousColumn?: ColumnVisibilityData; + currentColumn?: ColumnVisibilityData; + sortedColumnIndex?: number; + sortDirection?: SortDirection; + heights: number[]; + fixedColumnWidth?: number; + preservedScrollPosition: ScrollPosition; + isScrolledFarthestLeft?: boolean; + isScrolledFarthestRight?: boolean; +} diff --git a/src/components/DataTable/utilities.ts b/src/components/DataTable/utilities.ts index f345f565ed5..507fef9fe41 100644 --- a/src/components/DataTable/utilities.ts +++ b/src/components/DataTable/utilities.ts @@ -1,4 +1,4 @@ -import {State} from './DataTable'; +import {DataTableState} from './types'; interface TableMeasurements { fixedColumnWidth: number; @@ -43,7 +43,7 @@ export function isEdgeVisible(position: number, start: number, end: number) { export function getPrevAndCurrentColumns( tableData: TableMeasurements, - columnData: State['columnVisibilityData'], + columnData: DataTableState['columnVisibilityData'], ) { const {firstVisibleColumnIndex} = tableData; const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0); diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx index d77d3b858d8..dc2760c0eb8 100644 --- a/src/components/ResourceList/ResourceList.tsx +++ b/src/components/ResourceList/ResourceList.tsx @@ -21,7 +21,7 @@ import { Provider, } from './components'; -import {SelectedItems, SELECT_ALL_ITEMS} from './types'; +import {ResourceListContext, SelectedItems, SELECT_ALL_ITEMS} from './types'; import * as styles from './ResourceList.scss'; @@ -70,18 +70,6 @@ export interface Props { idForItem?(item: any, index: number): string; } -export interface ResourceListContext { - selectMode: boolean; - selectable?: boolean; - selectedItems?: SelectedItems; - resourceName: { - singular: string; - plural: string; - }; - loading?: boolean; - onSelectionChange?(selected: boolean, id: string): void; -} - export type CombinedProps = Props & WithAppProviderProps; const getUniqueID = createUniqueIDFactory('Select'); diff --git a/src/components/ResourceList/components/Context/Context.tsx b/src/components/ResourceList/components/Context/Context.tsx index f2b4a7dee8f..f38d8d6dc10 100644 --- a/src/components/ResourceList/components/Context/Context.tsx +++ b/src/components/ResourceList/components/Context/Context.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import {Intl} from '../../../AppProvider'; -import {ResourceListContext} from '../../ResourceList'; +import {ResourceListContext} from '../../types'; const intl = new Intl(undefined); diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx index da0238169b1..beace809158 100644 --- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx +++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx @@ -10,7 +10,7 @@ import TextField from '../../../TextField'; import Tag from '../../../Tag'; import withContext from '../../../WithContext'; -import {ResourceListContext} from '../../ResourceList'; +import {ResourceListContext} from '../../types'; import {Consumer} from '../Context'; import {FilterCreator} from './components'; diff --git a/src/components/ResourceList/components/Item/Item.tsx b/src/components/ResourceList/components/Item/Item.tsx index 7334c6d5c02..9f969d659da 100644 --- a/src/components/ResourceList/components/Item/Item.tsx +++ b/src/components/ResourceList/components/Item/Item.tsx @@ -12,10 +12,9 @@ import {Props as ThumbnailProps} from '../../../Thumbnail'; import ButtonGroup from '../../../ButtonGroup'; import Checkbox from '../../../Checkbox'; import Button, {buttonsFrom} from '../../../Button'; -import {SELECT_ALL_ITEMS} from '../../types'; import {withAppProvider, WithAppProviderProps} from '../../../AppProvider'; -import {ResourceListContext} from '../../ResourceList'; +import {ResourceListContext, SELECT_ALL_ITEMS} from '../../types'; import withContext from '../../../WithContext'; import {Consumer} from '../Context'; import * as styles from './Item.scss'; diff --git a/src/components/ResourceList/types.ts b/src/components/ResourceList/types.ts index 35319884bf0..a184f0ad902 100644 --- a/src/components/ResourceList/types.ts +++ b/src/components/ResourceList/types.ts @@ -1,3 +1,15 @@ export type SelectedItems = string[] | 'All'; export const SELECT_ALL_ITEMS = 'All'; + +export interface ResourceListContext { + selectMode: boolean; + selectable?: boolean; + selectedItems?: SelectedItems; + resourceName: { + singular: string; + plural: string; + }; + loading?: boolean; + onSelectionChange?(selected: boolean, id: string): void; +} diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index f25c55ce846..c55405087d4 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -5,25 +5,14 @@ import {noop} from '@shopify/javascript-utilities/other'; import Icon from '../Icon'; import Popover from '../Popover'; + +import {TabDescriptor} from './types'; import {getVisibleAndHiddenTabIndices} from './utilities'; import {List, Panel, Tab, TabMeasurer, TabMeasurements} from './components'; import * as styles from './Tabs.scss'; -export interface TabDescriptor { - /** A unique identifier for the tab */ - id: string; - /** A destination to link to */ - url?: string; - /** Content for the tab */ - content: string; - /** A unique identifier for the panel */ - panelID?: string; - /** Visually hidden text for screen readers */ - accessibilityLabel?: string; -} - export interface Props { /** Content to display in tabs */ children?: React.ReactNode; diff --git a/src/components/Tabs/components/List/List.tsx b/src/components/Tabs/components/List/List.tsx index b589a7605f5..f7e2262a03f 100644 --- a/src/components/Tabs/components/List/List.tsx +++ b/src/components/Tabs/components/List/List.tsx @@ -3,7 +3,7 @@ import {noop} from '@shopify/javascript-utilities/other'; import {autobind} from '@shopify/javascript-utilities/decorators'; import Item from '../Item'; -import {TabDescriptor} from '../../Tabs'; +import {TabDescriptor} from '../../types'; import * as styles from '../../Tabs.scss'; export interface Props { diff --git a/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx b/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx index 7c83b9eda61..be46d8be128 100644 --- a/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx +++ b/src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx @@ -6,7 +6,7 @@ import {autobind} from '@shopify/javascript-utilities/decorators'; import EventListener from '../../../EventListener'; -import {TabDescriptor} from '../../Tabs'; +import {TabDescriptor} from '../../types'; import Tab from '../Tab'; import * as styles from '../../Tabs.scss'; diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts new file mode 100644 index 00000000000..e21f0eedf1c --- /dev/null +++ b/src/components/Tabs/types.ts @@ -0,0 +1,12 @@ +export interface TabDescriptor { + /** A unique identifier for the tab */ + id: string; + /** A destination to link to */ + url?: string; + /** Content for the tab */ + content: string; + /** A unique identifier for the panel */ + panelID?: string; + /** Visually hidden text for screen readers */ + accessibilityLabel?: string; +} diff --git a/src/components/Tabs/utilities.ts b/src/components/Tabs/utilities.ts index 9eec8f3124c..10abd5fb0b7 100644 --- a/src/components/Tabs/utilities.ts +++ b/src/components/Tabs/utilities.ts @@ -1,4 +1,4 @@ -import {TabDescriptor} from './Tabs'; +import {TabDescriptor} from './types'; export function getVisibleAndHiddenTabIndices( tabs: TabDescriptor[], diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx index fd1fc2da0a9..0914a8a79b5 100644 --- a/src/components/ThemeProvider/ThemeProvider.tsx +++ b/src/components/ThemeProvider/ThemeProvider.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import isEqual from 'lodash/isEqual'; import {autobind} from '@shopify/javascript-utilities/decorators'; import {setColors} from './utils'; -import {Theme, ThemeContext, THEME_CONTEXT_TYPES} from './types'; +import {Theme, ThemeProviderContext, THEME_CONTEXT_TYPES} from './types'; export interface Props { /** Custom logos and colors provided to select components */ @@ -11,10 +11,6 @@ export interface Props { children?: React.ReactNode; } -export interface Context { - polarisTheme?: ThemeContext; -} - const defaultTheme = { '--top-bar-background': '#00848e', '--top-bar-color': '#f9fafb', @@ -24,7 +20,7 @@ const defaultTheme = { export default class ThemeProvider extends React.Component { static childContextTypes = THEME_CONTEXT_TYPES; - public themeContext: Context; + public themeContext: ThemeProviderContext; private subscriptions: {(): void}[] = []; private colors: string[][] | undefined; @@ -92,7 +88,7 @@ function setThemeContext( ctx: Theme, subscribe: (callback: () => void) => void, unsubscribe: (callback: () => void) => void, -): Context { +): ThemeProviderContext { const {colors, logo = null, ...rest} = ctx; return {polarisTheme: {logo, subscribe, unsubscribe, ...rest}}; } diff --git a/src/components/ThemeProvider/index.ts b/src/components/ThemeProvider/index.ts index d654fb8cbe0..04e201c202f 100644 --- a/src/components/ThemeProvider/index.ts +++ b/src/components/ThemeProvider/index.ts @@ -3,6 +3,7 @@ import ThemeProvider from './ThemeProvider'; export { Theme, ThemeContext, + ThemeProviderContext as Context, ColorsToParse, ThemeVariant, ThemeColors, @@ -15,5 +16,5 @@ export { createThemeContext, setTheme, } from './utils'; -export {Props, Context} from './ThemeProvider'; +export {Props} from './ThemeProvider'; export default ThemeProvider; diff --git a/src/components/ThemeProvider/types.ts b/src/components/ThemeProvider/types.ts index bb7dcfefa0e..8e63926f86b 100644 --- a/src/components/ThemeProvider/types.ts +++ b/src/components/ThemeProvider/types.ts @@ -40,6 +40,10 @@ export interface ThemeContext { unsubscribe: (callback: () => void) => void; } +export interface ThemeProviderContext { + polarisTheme?: ThemeContext; +} + export type ThemeVariant = 'light' | 'dark'; export const THEME_CONTEXT_TYPES = {polarisTheme: PropTypes.any}; diff --git a/src/components/ThemeProvider/utils/index.ts b/src/components/ThemeProvider/utils/index.ts index de72ea331b8..ef34b502c8c 100644 --- a/src/components/ThemeProvider/utils/index.ts +++ b/src/components/ThemeProvider/utils/index.ts @@ -15,13 +15,13 @@ import { } from '../../../utilities/color-manipulation'; import {compose} from '../../../utilities/compose'; -import {Context as ThemeProviderContext} from '../ThemeProvider'; import { Theme, ColorsToParse, ThemeVariant, ThemeColors, ThemeContext, + ThemeProviderContext, } from '../types'; export function setColors(theme: Theme | undefined): string[][] | undefined {