vv2.0.0-beta.16

CHANGELOG_V2.md

@@ -6,6 +6,12 @@ The format is based on [these versioning and changelog guidelines][changelog-gui
 
 <!-- ## Unreleased -->
 
+## 2.0.0-beta.16 - 2018-04-12
+
+### Enhancements
+
+* Exposed polarisContextTypes to make testing easier for external apps
+
 ## 2.0.0-beta.15 - 2018-04-11
 
 ### Breaking changes

README.md

@@ -23,7 +23,7 @@ yarn add @shopify/polaris
 1. Include the CSS in your HTML:
 
 ```html
- <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-beta.15/polaris.min.css" />
+ <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/v2.0.0-beta.16/polaris.min.css" />
  ```
 
 > Note: you can import the CSS directly into your project if your asset packager supports it:
@@ -62,7 +62,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 1. Include the CSS in your HTML:
 
 ```html
-<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-beta.15/polaris.min.css" />
+<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/v2.0.0-beta.16/polaris.min.css" />
 ```
 
 2. Include the markup and associated classes in your HTML document:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s product component library",
-  "version": "2.0.0-beta.15",
+  "version": "v2.0.0-beta.16",
   "private": false,
   "license": "MIT",
   "author": "Shopify <[email protected]>",

src/components/ActionList/ActionList.tsx

@@ -3,7 +3,6 @@ import {Props as ItemProps} from './Item';
 import Section, {ActionListSection} from './Section';
 
 import * as styles from './ActionList.scss';
-import {withAppProvider} from '../AppProvider';
 
 export interface Props {
   /** Collection of actions for list */
@@ -14,7 +13,11 @@ export interface Props {
   onActionAnyItem?: ItemProps['onAction'];
 }
 
-export function ActionList({items, sections = [], onActionAnyItem}: Props) {
+export default function ActionList({
+  items,
+  sections = [],
+  onActionAnyItem,
+}: Props) {
   let finalSections: ActionListSection[] = [];
 
   if (items) {
@@ -38,5 +41,3 @@ export function ActionList({items, sections = [], onActionAnyItem}: Props) {
 
   return <Element className={styles.ActionList}>{sectionMarkup}</Element>;
 }
-
-export default withAppProvider<Props>()(ActionList);

src/components/ExceptionList/ExceptionList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {classNames, variationName} from '@shopify/react-utilities/styles';
 
 import Icon from '../Icon';
@@ -40,9 +40,6 @@ export default function ExceptionList({items: itemsList}: Props) {
       <span className={styles.Description}>{description}</span>
     );
 
-    // React types package does not currently include React.Fragment
-    const Fragment = (React as any).Fragment;
-
     const Element = truncate ? Truncate : Fragment;
 
     return (

src/components/Link/Link.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import UnstyledLink from '../UnstyledLink';
 import * as styles from './Link.scss';
-import {withAppProvider} from '../AppProvider';
 
 export interface Props {
   /** ID for the link */
@@ -16,7 +15,7 @@ export interface Props {
   onClick?(): void;
 }
 
-export function Link({url, children, onClick, external, id}: Props) {
+export default function Link({url, children, onClick, external, id}: Props) {
   return url ? (
     <UnstyledLink
       onClick={onClick}
@@ -33,5 +32,3 @@ export function Link({url, children, onClick, external, id}: Props) {
     </button>
   );
 }
-
-export default withAppProvider<Props>()(Link);

src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -210,7 +210,7 @@ export default class PositionedOverlay extends React.PureComponent<
           activatorRect: getRectForNode(activator),
           left: horizontalPosition,
           top: verticalPosition.top,
-          height: verticalPosition.height,
+          height: verticalPosition.height || 0,
           width: fullWidth ? overlayRect.width : null,
           positioning: verticalPosition.positioning as Positioning,
           outsideScrollableContainer:

src/components/README.md

@@ -50,7 +50,7 @@ Use React components in most cases, especially if you’re building a highly int
 * Include the CSS in your HTML to implement:
 
 ```html
-<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-beta.15/polaris.min.css" />
+<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/v2.0.0-beta.16/polaris.min.css" />
 ```
 
 * Have a look at the [CSS examples](https://github.com/Shopify/polaris/tree/master/examples/cdn-styles) to see how it’s done
@@ -68,7 +68,7 @@ Here are some basic instructions to help you get started for both React and CSS-
 Include the CSS in your HTML:
 
 ```html
-<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-beta.15/polaris.min.css" />
+<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/v2.0.0-beta.16/polaris.min.css" />
 ```
 
 First, import the component into your project:
@@ -98,7 +98,7 @@ ReactDOM.render(app, domContainerNode);
 Include the CSS stylesheet in your HTML:
 
 ```html
-<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-beta.15/polaris.min.css" />
+<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/v2.0.0-beta.16/polaris.min.css" />
 ```
 
 Add the appropriate classes to your HTML elements:

src/components/Tabs/Tab.tsx

@@ -4,7 +4,6 @@ import {focusFirstFocusableNode} from '@shopify/javascript-utilities/focus';
 import {autobind} from '@shopify/javascript-utilities/decorators';
 
 import UnstyledLink from '../UnstyledLink';
-import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 
 import * as styles from './Tabs.scss';
@@ -22,9 +21,7 @@ export interface Props {
   onClick?(id: string): void;
 }
 
-export type CombinedProps = Props & WithAppProviderProps;
-
-export class Tab extends React.PureComponent<CombinedProps, never> {
+export default class Tab extends React.PureComponent<Props, never> {
   private node: HTMLElement | null = null;
 
   // A tab can start selected when it is moved from the disclosure dropdown
@@ -150,5 +147,3 @@ function focusPanelID(panelID: string) {
     panel.focus();
   }
 }
-
-export default withAppProvider<Props>()(Tab);

src/components/Tabs/Tabs.tsx

@@ -11,7 +11,6 @@ import Tab from './Tab';
 import TabMeasurer, {Measurements} from './TabMeasurer';
 import Panel from './Panel';
 import * as styles from './Tabs.scss';
-import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 
 export interface TabDescriptor {
   id: string;
@@ -34,8 +33,6 @@ export interface Props {
   onSelect?(selectedTabIndex: number): void;
 }
 
-export type CombinedProps = Props & WithAppProviderProps;
-
 export interface State {
   disclosureWidth: number;
   tabWidths: number[];
@@ -46,7 +43,7 @@ export interface State {
   tabToFocus: number;
 }
 
-export class Tabs extends React.PureComponent<CombinedProps, State> {
+export default class Tabs extends React.PureComponent<Props, State> {
   static Panel = Panel;
 
   state: State = {
@@ -383,5 +380,3 @@ function getVisibleAndHiddenTabIndices(
     hiddenTabs,
   };
 }
-
-export default withAppProvider<Props>()(Tabs);

src/components/Tabs/tests/Tab.test.tsx

@@ -1,63 +1,51 @@
 import * as React from 'react';
-import {ShallowWrapper} from 'enzyme';
-import {
-  shallowWithAppProvider,
-  mountWithAppProvider,
-} from '../../../../tests/utilities';
+import {mountWithAppProvider} from '../../../../tests/utilities';
 import Tab from '../Tab';
 
 describe('<Tab />', () => {
   it('has the correct role', () => {
-    const tab = shallowWithAppProvider(<Tab id="my-tab">Tab</Tab>);
+    const tab = mountWithAppProvider(<Tab id="my-tab">Tab</Tab>);
     expect(tab.find('button').prop('role')).toBe('tab');
   });
 
   describe('id', () => {
     it('uses the ID for the underlying actionable item', () => {
-      const tab = shallowWithAppProvider(<Tab id="my-tab">Tab</Tab>);
+      const tab = mountWithAppProvider(<Tab id="my-tab">Tab</Tab>);
       expect(tab.find('button').prop('id')).toBe('my-tab');
     });
   });
 
   describe('selected', () => {
     it('is aria-selected when the tab is selected', () => {
-      const tab = shallowWithAppProvider(
+      const tab = mountWithAppProvider(
         <Tab id="my-tab" selected>
           Tab
         </Tab>,
       );
-      expect(
-        (tab.find('button') as ShallowWrapper<any, any>).prop('aria-selected'),
-      ).toBe(true);
+      expect(tab.find('button').prop('aria-selected')).toBe(true);
     });
 
     it('is not aria-selected when the tab is not selected', () => {
-      let tab = shallowWithAppProvider(<Tab id="my-tab">Tab</Tab>);
-      expect(
-        (tab.find('button') as ShallowWrapper<any, any>).prop('aria-selected'),
-      ).toBeFalsy();
+      let tab = mountWithAppProvider(<Tab id="my-tab">Tab</Tab>);
+      expect(tab.find('button').prop('aria-selected')).toBeFalsy();
 
-      tab = shallowWithAppProvider(
+      tab = mountWithAppProvider(
         <Tab id="my-tab" selected={false}>
           Tab
         </Tab>,
       );
-      expect(
-        (tab.find('button') as ShallowWrapper<any, any>).prop('aria-selected'),
-      ).toBeFalsy();
+      expect(tab.find('button').prop('aria-selected')).toBeFalsy();
     });
   });
 
   describe('panelID', () => {
     it('uses the panelID as the controlled element’s ID', () => {
-      const tab = shallowWithAppProvider(
+      const tab = mountWithAppProvider(
         <Tab id="my-tab" panelID="my-panel">
           Tab
         </Tab>,
       );
-      expect(
-        (tab.find('button') as ShallowWrapper<any, any>).prop('aria-controls'),
-      ).toBe('my-panel');
+      expect(tab.find('button').prop('aria-controls')).toBe('my-panel');
     });
   });
 
@@ -77,7 +65,7 @@ describe('<Tab />', () => {
   describe('onClick()', () => {
     it('is called when the underlying button is clicked', () => {
       const spy = jest.fn();
-      const tab = shallowWithAppProvider(
+      const tab = mountWithAppProvider(
         <Tab id="my-tab" onClick={spy}>
           Tab
         </Tab>,

src/components/Tag/Tag.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import {classNames} from '@shopify/react-utilities';
+import {
+  withAppProvider,
+  WithAppProviderProps,
+} from '../../components/AppProvider';
 import Icon from '../Icon/';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 import * as styles from './Tag.scss';
@@ -13,15 +17,23 @@ export interface Props {
   onRemove?(): void;
 }
 
-export default function Tag({children, disabled = false, onRemove}: Props) {
+export type CombinedProps = Props & WithAppProviderProps;
+
+function Tag({
+  children,
+  disabled = false,
+  onRemove,
+  polaris: {intl},
+}: CombinedProps) {
   const className = classNames(disabled && styles.disabled, styles.Tag);
+  const ariaLabel = intl.translate('Polaris.Tag.ariaLabel', {children});
 
   return (
     <span className={className}>
       <span>{children}</span>
       <button
         type="button"
-        aria-label="Remove"
+        aria-label={ariaLabel}
         className={styles.Button}
         onClick={onRemove}
         onMouseUp={handleMouseUpByBlurring}
@@ -32,3 +44,5 @@ export default function Tag({children, disabled = false, onRemove}: Props) {
     </span>
   );
 }
+
+export default withAppProvider<Props>()(Tag);

src/components/Tag/tests/Tag.test.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {mount} from 'enzyme';
+import {mountWithAppProvider} from '../../../../tests/utilities';
 import Tag from '../Tag';
 
 describe('<Tag />', () => {
   it('onRemove gets called when remove button is clicked', () => {
     const spy = jest.fn();
-    const tag = mount(<Tag onRemove={spy} />);
+    const tag = mountWithAppProvider(<Tag onRemove={spy} />);
     tag.find('button').simulate('click');
     expect(spy).toHaveBeenCalled();
   });

src/components/Tooltip/Tooltip.tsx

@@ -7,7 +7,6 @@ import {PreferredPosition} from '../PositionedOverlay';
 import Portal from '../Portal';
 import TooltipOverlay from './TooltipOverlay';
 import * as styles from './Tooltip.scss';
-import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 
 export interface Props {
   /** The element that will activate to tooltip */
@@ -37,9 +36,7 @@ export interface State {
 
 const getUniqueID = createUniqueIDFactory('TooltipContent');
 
-export type CombinedProps = Props & WithAppProviderProps;
-
-export class Tooltip extends React.PureComponent<CombinedProps, State> {
+export default class Tooltip extends React.PureComponent<Props, State> {
   state: State = {
     active: false,
     activatorNode: null,
@@ -146,5 +143,3 @@ export class Tooltip extends React.PureComponent<CombinedProps, State> {
     accessibilityNode.setAttribute('aria-describedby', id);
   }
 }
-
-export default withAppProvider<Props>()(Tooltip);

src/components/index.ts

@@ -146,6 +146,7 @@ export {default as Portal, Props as PortalProps} from './Portal';
 export {
   default as AppProvider,
   Props as AppProviderProps,
+  polarisAppProviderContextTypes as polarisContextTypes,
   createPolarisContext,
 } from './AppProvider';
 

src/locales/en.json

@@ -58,6 +58,10 @@
       "FilterValueSelector": {
         "selectFilterValuePlaceholder": "Select a filter\u2026"
       }
+    },
+
+    "Tag": {
+      "ariaLabel": "Remove {children}"
     }
   }
 }