Reformat exports

.eslintrc

@@ -29,7 +29,7 @@
     ],
     "babel/no-unused-expressions": "off",
     "import/named": "off",
-    "import/no-named-as-default": "off",
+    "import/no-default-export": ["error"],
     "react/button-has-type": "off",
     "react/no-array-index-key": "off",
     "react/jsx-fragments": ["error", "element"],

.github/PULL_REQUEST_TEMPLATE.md

@@ -49,7 +49,7 @@ Fixes #0000 <!-- link to issue if one exists -->
 import React from 'react';
 import {Page} from '../src';
 
-export default function Playground() {
+export function Playground() {
   return (
     <Page title="Playground">
       {/* Add the code you want to test in here */}

.storybook/stories-from-readme.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {AppProvider, Heading} from '../src';
 import {withA11y} from '@storybook/addon-a11y';
 import {storiesOf} from '@storybook/react';
-import Playground from '../playground/Playground';
+import {Playground} from '../playground/Playground';
 import en from '../locales/en.json';
 
 /**

UNRELEASED.md

@@ -35,6 +35,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Update subcomponents to use named exports for components and better names props exports ([#2058](https://github.com/Shopify/polaris-react/pull/2058))
+
 ### Dependency upgrades
 
 ### Code quality

playground/Playground.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Page} from '../src';
 
-export default function Playground() {
+export function Playground() {
   return (
     <Page title="Playground">
       {/* Add the code you want to test in here */}

sewing-kit.config.ts

@@ -7,6 +7,7 @@ interface InitialOptions extends jest.InitialOptions {
   setupFilesAfterEnv: string[];
 }
 
+// eslint-disable-next-line import/no-default-export
 export default function sewingKitConfig(
   plugins: Plugins,
   env: Env,

src/components/AccountConnection/AccountConnection.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
 import {Action} from '../../types';
-import Avatar from '../Avatar';
+import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
-import Card from '../Card';
-import Stack from '../Stack';
-import TextStyle from '../TextStyle';
-import SettingAction from '../SettingAction';
+import {Card} from '../Card';
+import {Stack} from '../Stack';
+import {TextStyle} from '../TextStyle';
+import {SettingAction} from '../SettingAction';
 
 import styles from './AccountConnection.scss';
 
-export interface Props {
+export interface AccountConnectionProps {
   /** Content to display as title */
   title?: React.ReactNode;
   /** Content to display as additional details */
@@ -27,15 +27,15 @@ export interface Props {
   action?: Action;
 }
 
-export default function AccountConnection({
+export function AccountConnection({
   connected = false,
   action,
   avatarUrl,
   accountName = '',
   title,
   details,
   termsOfService,
-}: Props) {
+}: AccountConnectionProps) {
   const initials = accountName
     ? accountName
         .split(/\s+/)

src/components/AccountConnection/index.ts

@@ -1,4 +1 @@
-import AccountConnection from './AccountConnection';
-
-export {Props} from './AccountConnection';
-export default AccountConnection;
+export {AccountConnection, AccountConnectionProps} from './AccountConnection';

src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Avatar, buttonFrom} from 'components';
-import AccountConnection from '../AccountConnection';
+import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {
   describe('title', () => {

src/components/ActionList/ActionList.tsx

@@ -4,7 +4,7 @@ import {Section} from './components';
 
 import styles from './ActionList.scss';
 
-export interface Props {
+export interface ActionListProps {
   /** Collection of actions for list */
   items?: ActionListItemDescriptor[];
   /** Collection of sectioned action items */
@@ -15,12 +15,12 @@ export interface Props {
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
 
-export default function ActionList({
+export function ActionList({
   items,
   sections = [],
   actionRole,
   onActionAnyItem,
-}: Props) {
+}: ActionListProps) {
   let finalSections: ActionListSection[] = [];
 
   if (items) {

src/components/ActionList/components/Item/Item.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {ActionListItemDescriptor} from '../../../../types';
-import Scrollable from '../../../Scrollable';
-import Icon from '../../../Icon';
-import UnstyledLink from '../../../UnstyledLink';
-import Badge from '../../../Badge';
-import TextStyle from '../../../TextStyle';
+import {Scrollable} from '../../../Scrollable';
+import {Icon} from '../../../Icon';
+import {UnstyledLink} from '../../../UnstyledLink';
+import {Badge} from '../../../Badge';
+import {TextStyle} from '../../../TextStyle';
 
 import styles from '../../ActionList.scss';
 
-export type Props = ActionListItemDescriptor;
+export type ItemProps = ActionListItemDescriptor;
 
-export default function Item({
+export function Item({
   id,
   badge,
   content,
@@ -28,7 +28,7 @@ export default function Item({
   ellipsis,
   active,
   role,
-}: Props) {
+}: ItemProps) {
   const className = classNames(
     styles.Item,
     disabled && styles.disabled,

src/components/ActionList/components/Item/index.ts

@@ -1,4 +1 @@
-import Item from './Item';
-
-export {Props} from './Item';
-export default Item;
+export {Item, ItemProps} from './Item';

src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {UnstyledLink} from 'components';
-import Item from '../Item';
-import TextStyle from '../../../../TextStyle';
+import {Item} from '../Item';
+import {TextStyle} from '../../../../TextStyle';
 
 describe('<Item />', () => {
   it('adds a style property when the image prop is present', () => {

src/components/ActionList/components/Section/Section.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Item from '../Item';
+import {Item} from '../Item';
 import {ActionListItemDescriptor, ActionListSection} from '../../../../types';
 
 import styles from '../../ActionList.scss';
 
-export interface Props {
+export interface SectionProps {
   /** Section of action items */
   section: ActionListSection;
   /** Should there be multiple sections */
@@ -15,12 +15,12 @@ export interface Props {
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
 
-export default function Section({
+export function Section({
   section,
   hasMultipleSections,
   actionRole,
   onActionAnyItem,
-}: Props) {
+}: SectionProps) {
   const handleAction = (itemOnAction: ActionListItemDescriptor['onAction']) => {
     return () => {
       if (itemOnAction) {

src/components/ActionList/components/Section/index.ts

@@ -1,4 +1 @@
-import Section from './Section';
-
-export {Props} from './Section';
-export default Section;
+export {Section, SectionProps} from './Section';

src/components/ActionList/components/Section/tests/Section.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Item from '../../Item';
-import Section from '../Section';
+import {Item} from '../../Item';
+import {Section} from '../Section';
 
 describe('<Section />', () => {
   it('renders its items', () => {

src/components/ActionList/components/index.ts

@@ -1,3 +1,3 @@
-export {default as Item, Props as ItemProps} from './Item';
+export {Item, ItemProps} from './Item';
 
-export {default as Section, Props as SectionProps} from './Section';
+export {Section, SectionProps} from './Section';

src/components/ActionList/index.ts

@@ -1,4 +1 @@
-import ActionList from './ActionList';
-
-export {Props} from './ActionList';
-export default ActionList;
+export {ActionList, ActionListProps} from './ActionList';

src/components/ActionList/tests/ActionList.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import ActionList from '../ActionList';
-import Badge from '../../Badge';
+import {ActionList} from '../ActionList';
+import {Badge} from '../../Badge';
 import {Item, Section} from '../components';
 
 describe('<ActionList />', () => {

src/components/ActionMenu/ActionMenu.tsx

@@ -11,7 +11,7 @@ import {MenuAction, MenuGroup, RollupActions} from './components';
 
 import styles from './ActionMenu.scss';
 
-export interface Props {
+export interface ActionMenuProps {
   /** Collection of page-level secondary actions */
   actions?: ComplexAction[];
   /** Collection of page-level action groups */
@@ -24,7 +24,7 @@ interface State {
   activeMenuGroup?: string;
 }
 
-export default class ActionMenu extends React.PureComponent<Props, State> {
+export class ActionMenu extends React.PureComponent<ActionMenuProps, State> {
   state: State = {
     activeMenuGroup: undefined,
   };
@@ -100,7 +100,7 @@ export default class ActionMenu extends React.PureComponent<Props, State> {
   };
 }
 
-export function hasGroupsWithActions(groups: Props['groups'] = []) {
+export function hasGroupsWithActions(groups: ActionMenuProps['groups'] = []) {
   return groups.length === 0
     ? false
     : groups.some((group) => group.actions.length > 0);

src/components/ActionMenu/components/MenuAction/MenuAction.tsx

@@ -5,17 +5,17 @@ import {classNames} from '../../../../utilities/css';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 import {ComplexAction} from '../../../../types';
 
-import Icon from '../../../Icon';
-import UnstyledLink from '../../../UnstyledLink';
+import {Icon} from '../../../Icon';
+import {UnstyledLink} from '../../../UnstyledLink';
 
 import styles from './MenuAction.scss';
 
-export interface Props extends ComplexAction {
+export interface MenuActionProps extends ComplexAction {
   /** Whether or not the action discloses a menu group */
   disclosure?: boolean;
 }
 
-export default function MenuAction({
+export function MenuAction({
   content,
   accessibilityLabel,
   url,
@@ -24,7 +24,7 @@ export default function MenuAction({
   disclosure,
   disabled,
   onAction,
-}: Props) {
+}: MenuActionProps) {
   const iconMarkup = icon && (
     <span className={styles.IconWrapper}>
       <Icon source={icon} />

src/components/ActionMenu/components/MenuAction/index.ts

@@ -1 +1 @@
-export {default, Props} from './MenuAction';
+export {MenuAction, MenuActionProps} from './MenuAction';

src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import {CaretDownMinor, SaveMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
-import Icon from '../../../../Icon';
-import UnstyledLink from '../../../../UnstyledLink';
+import {Icon} from '../../../../Icon';
+import {UnstyledLink} from '../../../../UnstyledLink';
 
-import MenuAction, {Props} from '../MenuAction';
+import {MenuAction} from '../MenuAction';
 
 describe('<MenuAction />', () => {
-  const mockProps: Props = {
+  const mockProps = {
     content: 'content',
   };
 

src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import {MenuGroupDescriptor} from '../../../../types';
 
-import ActionList from '../../../ActionList';
-import Popover from '../../../Popover';
-import MenuAction from '../MenuAction';
+import {ActionList} from '../../../ActionList';
+import {Popover} from '../../../Popover';
+import {MenuAction} from '../MenuAction';
 
 import styles from './MenuGroup.scss';
 
-export interface Props extends MenuGroupDescriptor {
+export interface MenuGroupProps extends MenuGroupDescriptor {
   /** Visually hidden menu description for screen readers */
   accessibilityLabel?: string;
   /** Whether or not the menu is open */
@@ -19,7 +19,7 @@ export interface Props extends MenuGroupDescriptor {
   onClose(title: string): void;
 }
 
-export default class MenuGroup extends React.Component<Props, never> {
+export class MenuGroup extends React.Component<MenuGroupProps, never> {
   render() {
     const {
       accessibilityLabel,

src/components/ActionMenu/components/MenuGroup/index.ts

@@ -1 +1 @@
-export {default, Props} from './MenuGroup';
+export {MenuGroup, MenuGroupProps} from './MenuGroup';

src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx

@@ -4,11 +4,11 @@ import {SaveMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {Popover, ActionList} from 'components';
-import MenuAction from '../../MenuAction';
-import MenuGroup, {Props} from '../MenuGroup';
+import {MenuAction} from '../../MenuAction';
+import {MenuGroup} from '../MenuGroup';
 
 describe('<MenuGroup />', () => {
-  const mockProps: Props = {
+  const mockProps = {
     title: 'title',
     actions: [],
     active: undefined,
@@ -80,7 +80,7 @@ describe('<MenuGroup />', () => {
     });
 
     it('passes `actions` into the <ActionList />', () => {
-      const mockActions: Props['actions'] = [
+      const mockActions = [
         {content: 'mock content 1'},
         {content: 'mock content 2'},
       ];