kylefang/polaris-react
1
0
Fork 0
mirror of https://github.com/HackPlan/polaris-react.git synced 2026-04-29 17:55:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:Shopify/polaris-react into master-into-src-build-beta

Browse Source
This commit is contained in:
Dan Rosenthal
2018-08-27 12:12:27 -04:00
parent a609921c11 aaf1b2ae69
commit 537e59956e
100 changed files with 1241 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintignore
View File

@@ -1,4 +1,16 @@
node_modules/
src/styles/polaris-tokens/
/build
/build-intermediate
/build-esnext
/coverage
/esnext
/shrink-ray-build
/tophat
/types
/index.*
/embedded.js
# These files contain weird config that causes our plugins to crash
/tests/utilities
/playground/index.tsx

9
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@@ -26,6 +26,7 @@
🖥 [Local development instructions](https://github.com/Shopify/polaris-react/blob/master/README.md#development)
🗒 [General tophatting guidelines](https://vault.shopify.com/developers/Tophatting)
📄 [Changelog guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md)
<!--
Give as much information as needed to experiment with the component
@@ -63,8 +64,12 @@ export default class Playground extends React.Component<never, State> {
* [ ] Tested on mobile
* [ ] Tested on multiple browsers
* [ ] Tested for [accessibility](https://vault.shopify.com/Accessibility#implementation-best-practices)
* [ ] Updated [CHANGELOG.md](https://github.com/Shopify/polaris-react/blob/master/CHANGELOG.md)
* [ ] Updated [UNRELEASED.md](https://github.com/Shopify/polaris-react/blob/master/UNRELEASED.md)
<!--
If you don't have access to Percy, please request access in the #polaris Slack channel.
When tophatting, please check the UNRELEASED entry for consistency, as per the [guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md).
-->
<!--
If you don't have access to Percy, please request access in the #polaris Slack channel.
-->

4
.github/changelog.yml vendored
View File

@@ -1,4 +1,4 @@
filename: CHANGELOG.md
filename: UNRELEASED.md
include:
- /^config\//
- /^documentation\//
@@ -12,3 +12,5 @@ include:
- /^LICENSE.md$/
- /^package.json$/
- /^tsconfig.json$/
inProgressMessage: missing an entry in UNRELEASED.md
skipLabel: skip changelog

1
.prettierignore
View File

@@ -1,2 +1,3 @@
.github/
/coverage
/package.json

132
CHANGELOG.md
View File

@@ -2,19 +2,11 @@
All notable changes to this project will be documented in this file.
The format is based on [these versioning and changelog guidelines][changelog-guidelines].
The format is based on [these versioning and changelog guidelines](https://git.io/polaris-changelog-guidelines).
## Unreleased
<!-- Unreleased changes should go to UNRELEASED.md -->
- Adjusted spacing for `ChoiceChildren` in a `ChoiceList` for readability ([#2016](https://github.com/Shopify/polaris-react/pull/2016))
### Enhancements
- Added a `loading` prop to resource list that adds a spinner overtop items if true ([#1922](https://github.com/Shopify/polaris-react/pull/1922))
### Enhancements
- Updated the page component's primary action to support `Button` props. ([#1994](https://github.com/Shopify/polaris-react/pull/1994))
---
## 2.6.1 - 2018-08-21
@@ -42,6 +34,7 @@ Use the autocomplete component to present a searchable and selectable list of op
### Enhancements
- Added support for `titleMetadata` in `Page` component ([#1960](https://github.com/Shopify/polaris-react/pull/1960))
- Added support for `FilterType.DateSelector` in `ResourceList` component ([#1898](https://github.com/Shopify/polaris-react/pull/1898))
- Added `code` as an accepted `variation` of the text style component to provide support for accessible markup and styling of inline code snippets and code-like text ([#1889](https://github.com/Shopify/polaris-react/pull/1889))
- Added new `border-width` SCSS function ([#1953](https://github.com/Shopify/polaris-react/pull/1953))
@@ -57,7 +50,7 @@ Use the autocomplete component to present a searchable and selectable list of op
- Added a `ScrollTo` subcomponent to the scrollable component to support scrolling to a child node programmatically ([#1816](https://github.com/Shopify/polaris-react/pull/1816))
- Added support for the button component to accept an array of strings as children ([#1817](https://github.com/Shopify/polaris-react/pull/1817))
- Changed the primary focus target of an activated popover from the first focusable child to the popover itself ([#1589](https://github.com/Shopify/polaris-react/pull/1589))
- Added an improved error message when the child of an embedded alert component is not a string ([#1803](https://github.com/Shopify/polaris-react/pull/1803))(thanks [@superwhykz](https://github.com/superwhykz) for the [original issue](https://github.com/Shopify/polaris/issues/378))
- Added an improved error message when the child of an embedded alert component is not a string ([#1803](https://github.com/Shopify/polaris-react/pull/1803)) (thanks [@superwhykz](https://github.com/superwhykz) for the [original issue](https://github.com/Shopify/polaris/issues/378))
- Added a minimum width to tab items to improve touch target sizing and account for smaller tab titles ([#1901](https://github.com/Shopify/polaris-react/pull/1901))
- Added support for additional accessibility attributes to the text field and option list components ([#1879](https://github.com/Shopify/polaris-react/pull/1879))
- Added support for option list with avatars, icons, and thumbnails when `options` descriptors have a `media` property ([#1895](https://github.com/Shopify/polaris-react/pull/1895))
@@ -65,7 +58,7 @@ Use the autocomplete component to present a searchable and selectable list of op
- Added support for option list `options` descriptors to accept a block for the `label` property ([#1920](https://github.com/Shopify/polaris-react/pull/1920))
- Added `$page-max-width` variable to capture page calculated `max-width` value and `page-when-not-max-width` mixin to trigger when page is resized horizontally ([#1886](https://github.com/Shopify/polaris-react/pull/1886))
- Added support for select error messages to be optional ([#1941](https://github.com/Shopify/polaris-react/pull/1941))
- Updated the breadcrumbs component to support the `CallbackAction` type as a prop ([#1966](https://github.com/Shopify/polaris-react/pull/1966))(thanks [@dylan](https://github.com/dylan) for the [current issue](https://github.com/Shopify/polaris/issues/278) and everyone who identified this.)
- Updated the breadcrumbs component to support the `CallbackAction` type as a prop ([#1966](https://github.com/Shopify/polaris-react/pull/1966)) (thanks [@dylan](https://github.com/dylan) for the [current issue](https://github.com/Shopify/polaris/issues/278) and everyone who identified this.)
- Added support for text field error messages to be optional ([#1940](https://github.com/Shopify/polaris-react/pull/1940))
- Added a `disabled` prop to the choice component. Checkbox and radio labels are now styled to reflect their disabled state ([#1956](https://github.com/Shopify/polaris-react/pull/1956))
- Added support for Windows High Contrast mode in the select, checkbox and radio components ([#1956](https://github.com/Shopify/polaris-react/pull/1956))
@@ -80,7 +73,7 @@ Use the autocomplete component to present a searchable and selectable list of op
- Fixed alignment of wrapped empty state actions ([#1828](https://github.com/Shopify/polaris-react/pull/1828))
- Swapped the import and export icons ([#1849](https://github.com/Shopify/polaris-react/pull/1849))
- Fixed incorrect data table column count and content skipping in assistive technologies ([#1723](https://github.com/Shopify/polaris-react/pull/1723))
- Fixed unintended form submittal by action list items enclosed in a `form` ([#1865](https://github.com/Shopify/polaris-react/pull/1865) (thanks [andrewpye](https://github.com/andrewpye) for the [original issue](https://github.com/Shopify/polaris/issues/391)))
- Fixed unintended form submittal by action list items enclosed in a `form` ([#1865](https://github.com/Shopify/polaris-react/pull/1865) (thanks [@andrewpye](https://github.com/andrewpye) for the [original issue](https://github.com/Shopify/polaris/issues/391)))
- Fixed text alignment of multiline option list option text [#1905](https://github.com/Shopify/polaris-react/pull/1905)
- Fixed an issue where the stack component would render incorrectly nested items [#1924](https://github.com/Shopify/polaris-react/pull/1924)
- Fixed spacing above annotated sections on smaller screens [#1972](https://github.com/Shopify/polaris-react/pull/1972)
@@ -95,6 +88,7 @@ Use the autocomplete component to present a searchable and selectable list of op
- Added examples for iOS and Android buttons ([#1863](https://github.com/Shopify/polaris-react/pull/1863))
- Added examples for iOS and Android button groups ([#1864](https://github.com/Shopify/polaris-react/pull/1864))
- Added examples for iOS and Android badge ([#1892](https://github.com/Shopify/polaris-react/pull/1892))
- Added examples for iOS and Android avatar ([#1904](https://github.com/Shopify/polaris-react/pull/1904))
- Added stepper component ([#1914](https://github.com/Shopify/polaris-react/pull/1914))
### New components
@@ -216,7 +210,7 @@ Use range slider to select a number value between a min and max range.
### Bug fixes
- Fixed an issue where resource list filters lost padding ([#1438](https://github.com/Shopify/polaris-react/pull/1438)) (thanks to [@BarryCarlyon](https://github.com/BarryCarlyon) for the [original issue](https://github.com/Shopify/polaris/issues/330))
- Fixed an issue where resource list filters lost padding ([#1438](https://github.com/Shopify/polaris-react/pull/1438)) (thanks [@BarryCarlyon](https://github.com/BarryCarlyon) for the [original issue](https://github.com/Shopify/polaris/issues/330))
- Fixed unexpected focus jumps when date picker props are updated ([#1399](https://github.com/Shopify/polaris-react/pull/1399))
- Fixed the spacing and text wrapping of exception list title and description ([#1503](https://github.com/Shopify/polaris-react/pull/1503))
@@ -250,13 +244,13 @@ Use Exception lists to draw the merchant’s attention to important information
### Bug fixes
- Fixed unexpected window scroll on rendering data table ([#1383](https://github.com/Shopify/polaris-react/pull/1383)) (thanks to [@mfurniss](https://github.com/mfurniss) for the [original issue](https://github.com/Shopify/polaris/issues/317))
- Fixed unexpected window scroll on rendering data table ([#1383](https://github.com/Shopify/polaris-react/pull/1383)) (thanks [@mfurniss](https://github.com/mfurniss) for the [original issue](https://github.com/Shopify/polaris/issues/317))
- Fixed focused inner interaction state on resource list item for reverse tabbing ([#1403](https://github.com/Shopify/polaris-react/pull/1403))
- Fixed border radius on card to match the padding on page ([#1424](https://github.com/Shopify/polaris-react/pull/1424))
- Added target to the breadcrumb prop on page ([#1345](https://github.com/Shopify/polaris-react/pull/1345)) (thanks to [@sdn90](https://github.com/sdn90) for the [original issue](https://github.com/Shopify/polaris/issues/306))
- Added target to the breadcrumb prop on page ([#1345](https://github.com/Shopify/polaris-react/pull/1345)) (thanks [@sdn90](https://github.com/sdn90) for the [original issue](https://github.com/Shopify/polaris/issues/306))
- Fixed visual representation of disabled bulk action buttons in ResourceList ([#1396](https://github.com/Shopify/polaris-react/pull/1396))
- Fixed margins of a fullWidth Popover that appears above its activator ([#1388](https://github.com/Shopify/polaris-react/pull/1388))
- Fixed rendering of Popover when activator rerenders ([#1414](https://github.com/Shopify/polaris-react/pull/1414)) (thanks to [@nerfologist](https://github.com/nerfologist) for the [original issue](https://github.com/Shopify/polaris/issues/324))
- Fixed rendering of Popover when activator rerenders ([#1414](https://github.com/Shopify/polaris-react/pull/1414)) (thanks [@nerfologist](https://github.com/nerfologist) for the [original issue](https://github.com/Shopify/polaris/issues/324))
- Fixed z-index calculation for PositionOverlay and Dialog ([#1421]([https://github.com/Shopify/polaris-react/pull/1421]))
- Fixed an issue where selecting a date in DatePicker would submit its enclosing form ([#1413](https://github.com/Shopify/polaris-react/pull/1413))
- Fixed ResourceList reverse tabbing focus interaction on Action Buttons ([#1406](https://github.com/Shopify/polaris-react/pull/1406))
@@ -439,7 +433,7 @@ _This will be the last v1.x release outside of critical security fixes._
### Bug fixes
- Fixed external prop not working within ActionList component ([#1177](https://github.com/Shopify/polaris-react/pull/1177))
- Fixed a syntax error in one of the Card component examples ([#1175](https://github.com/Shopify/polaris-react/pull/1175)) (thanks [meecrobe](https://github.com/meecrobe) for the [original issue](https://github.com/Shopify/polaris/issues/281))
- Fixed a syntax error in one of the Card component examples ([#1175](https://github.com/Shopify/polaris-react/pull/1175)) (thanks [@meecrobe](https://github.com/meecrobe) for the [original issue](https://github.com/Shopify/polaris/issues/281))
## 1.12.4 - 2018-03-19
@@ -517,14 +511,14 @@ _This will be the last v1.x release outside of critical security fixes._
- Added breadcrumbs to SkeletonPage ([#985](https://github.com/Shopify/polaris-react/pull/985))
- Added max-width and auto margin to EmptyState ([#969](https://github.com/Shopify/polaris-react/pull/969))
- Fixed outline button disabled state styles ([#972](https://github.com/Shopify/polaris-react/pull/972))
- Fixed Tag so the onRemove function is not imporperly called (thanks [chaddjohnson](https://github.com/chaddjohnson) for the [original issue](https://github.com/Shopify/polaris/issues/235) ) ([#970](https://github.com/Shopify/polaris-react/pull/970))
- Fixed Tag so the onRemove function is not improperly called ([#970](https://github.com/Shopify/polaris-react/pull/970)) (thanks [@chaddjohnson](https://github.com/chaddjohnson) for the [original issue](https://github.com/Shopify/polaris/issues/235))
- Fixed border on inputs disabled state ([#1007](https://github.com/Shopify/polaris-react/pull/1007))
- Fixed an issue in TextInput, when you increment or decrement with a float value, and the digits after the decimal point where wrong ([#833](https://github.com/Shopify/polaris-react/pull/898)) (thanks to [@cgidzinski](https://github.com/cgidzinski) for the [original issue](https://github.com/Shopify/polaris-react/issues/761))
- Fixed an issue in TextInput, when you increment or decrement with a float value, and the digits after the decimal point where wrong ([#833](https://github.com/Shopify/polaris-react/pull/898)) (thanks [@cgidzinski](https://github.com/cgidzinski) for the [original issue](https://github.com/Shopify/polaris-react/issues/761))
- Added top alignment to FormLayout.Group [#876](https://github.com/Shopify/polaris-react/pull/876)
### Documentation
- Fixed capitalization of prop names in Pagination component’s documentation (thanks [donnguyen](https://github.com/donnguyen) for the [original issue](https://github.com/Shopify/polaris/issues/141)) ([#975](https://github.com/Shopify/polaris-react/pull/975))
- Fixed capitalization of prop names in Pagination component’s documentation ([#975](https://github.com/Shopify/polaris-react/pull/975)) (thanks [@donnguyen](https://github.com/donnguyen) for the [original issue](https://github.com/Shopify/polaris/issues/141))
- Exposed Option from the Select component ([#976](https://github.com/Shopify/polaris-react/pull/976))
## 1.10.2 - 2018-01-22
@@ -537,13 +531,13 @@ _This will be the last v1.x release outside of critical security fixes._
### Bug fixes
- Fixed CSS only checkbox (thanks [daddy88](https://github.com/daddy88) for the [original issue](https://github.com/Shopify/polaris/issues/252)) ([#932](https://github.com/Shopify/polaris-react/pull/932))
- Fixed CSS only checkbox ([#932](https://github.com/Shopify/polaris-react/pull/932)) (thanks [@daddy88](https://github.com/daddy88) for the [original issue](https://github.com/Shopify/polaris/issues/252))
## 1.10.0 - 2018-01-17
- Restored the correct `latest` version to the CDN
- Fixed rgbToHsb function when red is the largest number and added tests (thanks [emcmanus](https://github.com/emcmanus) for the [original issue](https://github.com/Shopify/polaris/issues/251)) ([#877](https://github.com/Shopify/polaris-react/pull/877))
- Fixed an issue where a hard-coded path would cause the build to fail on Windows ([#833](https://github.com/Shopify/polaris-react/pull/833)) (thanks to [@Invader444](https://github.com/Invader444) for the [original issue](https://github.com/Shopify/polaris/issues/245) and [pull request](https://github.com/Shopify/polaris/pull/246))
- Fixed rgbToHsb function when red is the largest number and added tests ([#877](https://github.com/Shopify/polaris-react/pull/877)) (thanks [@emcmanus](https://github.com/emcmanus) for the [original issue](https://github.com/Shopify/polaris/issues/251))
- Fixed an issue where a hard-coded path would cause the build to fail on Windows ([#833](https://github.com/Shopify/polaris-react/pull/833)) (thanks [@Invader444](https://github.com/Invader444) for the [original issue](https://github.com/Shopify/polaris/issues/245) and [pull request](https://github.com/Shopify/polaris/pull/246))
- Added `onClick` to `UnstyledLink` ([#832](https://github.com/Shopify/polaris-react/pull/832))
- Added tests to `Link` ([#832](https://github.com/Shopify/polaris-react/pull/897))
@@ -572,7 +566,7 @@ _This will be the last v1.x release outside of critical security fixes._
- Fixed positioned overlay not responding to scrollable container events
- Fixed first focusable item focus in popovers ([#764](https://github.com/Shopify/polaris-react/pull/764))
- Fixed typos in the select component documentation (thanks [mattchidley](https://github.com/mattchidley) for the [original issue](https://github.com/Shopify/polaris/issues/224)) ([#773](https://github.com/Shopify/polaris-react/pull/773))
- Fixed typos in the select component documentation ([#773](https://github.com/Shopify/polaris-react/pull/773)) (thanks [@mattchidley](https://github.com/mattchidley) for the [original issue](https://github.com/Shopify/polaris/issues/224))
## 1.8.3 - 2017-10-26
@@ -596,7 +590,7 @@ _This will be the last v1.x release outside of critical security fixes._
### Documentation
- Updated README to consistently use contractions (thanks [stefanmiodrag](https://github.com/stefanmiodrag) for the [original pull request](https://github.com/Shopify/polaris/pull/191)) ([#682](https://github.com/Shopify/polaris-react/pull/682))
- Updated README to consistently use contractions ([#682](https://github.com/Shopify/polaris-react/pull/682)) (thanks [@stefanmiodrag](https://github.com/stefanmiodrag) for the [original pull request](https://github.com/Shopify/polaris/pull/191))
- Improved example description for Layout component ([#683](https://github.com/Shopify/polaris-react/pull/683))
- Updated Spinner documentation ([#696](https://github.com/Shopify/polaris-react/pull/696))
- Improved component purpose documentation across components ([#717](https://github.com/Shopify/polaris-react/pull/717))
@@ -616,7 +610,7 @@ _This will be the last v1.x release outside of critical security fixes._
### Bug fixes
- Fixed Layout component example description
- Fixed SkeletonPage header appearing in embedded apps (thanks [rkbhochalya](https://github.com/rkbhochalya) for the [original issue](https://github.com/Shopify/polaris/issues/202))) ([#714](https://github.com/Shopify/polaris-react/pull/714))
- Fixed SkeletonPage header appearing in embedded apps ([#714](https://github.com/Shopify/polaris-react/pull/714)) (thanks [@rkbhochalya](https://github.com/rkbhochalya) for the [original issue](https://github.com/Shopify/polaris/issues/202)))
- Fixed border-radius on Action list component in Chrome ([#719](https://github.com/Shopify/polaris-react/pull/719))
## 1.7.0 - 2017-10-06
@@ -631,11 +625,11 @@ _This will be the last v1.x release outside of critical security fixes._
- Enabled the primaryAction of PageActions to be loading ([#653](https://github.com/Shopify/polaris-react/pull/653/))
- Stack now supports non-wrapping layouts on small screens ([#638](https://github.com/shopify/polaris-react/pull/638))
- Updated text field min and max documentation ([#635](https://github.com/shopify/polaris-react/pull/635))
- Breadcrumbs now accept a callback through onAction (thanks [arypbatista](https://github.com/arypbatista) for the [original issue](https://github.com/Shopify/polaris/issues/188)) ([#663](https://github.com/Shopify/polaris-react/pull/663))
- Breadcrumbs now accept a callback through onAction ([#663](https://github.com/Shopify/polaris-react/pull/663)) (thanks [@arypbatista](https://github.com/arypbatista) for the [original issue](https://github.com/Shopify/polaris/issues/188))
### Bug fixes
- Fixed issue with embedded app breadcrumb linking to Shopify settings page (thanks [cargix1](https://github.com/cargix1) for the [original issue](https://github.com/Shopify/polaris/issues/116))([#663](https://github.com/Shopify/polaris-react/pull/663))
- Fixed issue with embedded app breadcrumb linking to Shopify settings page ([#663](https://github.com/Shopify/polaris-react/pull/663)) (thanks [@cargix1](https://github.com/cargix1) for the [original issue](https://github.com/Shopify/polaris/issues/116))
- Fixed Avatar to display image and initials simultaneously ([#642](https://github.com/shopify/polaris-react/pull/642))
- Fixed various links to embedded components ([#643](https://github.com/shopify/polaris-react/pull/643))
- Fixed left and right ends of TextField not responding to clicks([#644](https://github.com/shopify/polaris-react/pull/644))
@@ -647,10 +641,10 @@ _This will be the last v1.x release outside of critical security fixes._
### Enhancements
- Documented disabled prop for Checkbox and RadioButton (thanks [LeoAref](https://github.com/LeoAref) for the [original issue](https://github.com/Shopify/polaris/issues/114)) ([#627](https://github.com/Shopify/polaris-react/pull/627/files))
- Documented progress prop for Badge (thanks [sp4cecat](https://github.com/sp4cecat) for the [original issue](https://github.com/Shopify/polaris/issues/172)) ([#625](https://github.com/Shopify/polaris-react/pull/625/files))
- Added loading prop to Button (thanks [bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/30)) ([#626](https://github.com/Shopify/polaris-react/pull/626/files))
- Documented complex Select option (thanks [sp4cecat](https://github.com/sp4cecat) for the [original issue](https://github.com/Shopify/polaris/issues/174)) ([#630](https://github.com/Shopify/polaris-react/pull/630/files))
- Documented disabled prop for Checkbox and RadioButton ([#627](https://github.com/Shopify/polaris-react/pull/627/files)) (thanks [@LeoAref](https://github.com/LeoAref) for the [original issue](https://github.com/Shopify/polaris/issues/114))
- Documented progress prop for Badge ([#625](https://github.com/Shopify/polaris-react/pull/625/files)) (thanks [@sp4cecat](https://github.com/sp4cecat) for the [original issue](https://github.com/Shopify/polaris/issues/172))
- Added loading prop to Button ([#626](https://github.com/Shopify/polaris-react/pull/626/files)) (thanks [@bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/30))
- Documented complex Select option ([#630](https://github.com/Shopify/polaris-react/pull/630/files)) (thanks [@sp4cecat](https://github.com/sp4cecat) for the [original issue](https://github.com/Shopify/polaris/issues/174))
- Documented TextStyle component ([#631](https://github.com/Shopify/polaris-react/pull/631))
- Improved avatar typography spacing ([#629](https://github.com/Shopify/polaris-react/pull/629))
- Added subtract icon ([#648](https://github.com/Shopify/polaris-react/pull/648))
@@ -658,7 +652,7 @@ _This will be the last v1.x release outside of critical security fixes._
### Bug fixes
- Fixed failed dependency installation for unauthenticated GitHub users (thanks [mikeyhew](https://github.com/mikeyhew) for the [original issue](https://github.com/Shopify/polaris/issues/184)) ([#623](https://github.com/Shopify/polaris-react/pull/623/files))
- Fixed failed dependency installation for unauthenticated GitHub users ([#623](https://github.com/Shopify/polaris-react/pull/623/files)) (thanks [@mikeyhew](https://github.com/mikeyhew) for the [original issue](https://github.com/Shopify/polaris/issues/184))
- Fixed Page header spacing ([#634](https://github.com/Shopify/polaris-react/pull/634))
- Fixed TextField focus ring transition ([#636](https://github.com/Shopify/polaris-react/pull/636))
- Fixed Popover not resizing on content updates ([#506](https://github.com/Shopify/polaris-react/pull/506))
@@ -705,7 +699,7 @@ Various documentation fixes.
- Fixed PageActions spacing in IE11 ([#544](https://github.com/Shopify/polaris-react/pull/544))
- Fixed ID inconsistency on TextFields ([#553](https://github.com/Shopify/polaris-react/pull/553))
- Fixed spacing on Page component with no header (thanks [bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/160)) ([#563](https://github.com/Shopify/polaris-react/pull/563/files))
- Fixed spacing on Page component with no header ([#563](https://github.com/Shopify/polaris-react/pull/563/files)) (thanks [@bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/160))
- Fixed disabled state on primary and destructive buttons ([#549](https://github.com/Shopify/polaris-react/pull/549/files))
### Chores
@@ -730,8 +724,8 @@ Various documentation fixes.
### Bug fixes
- Updated Static HTML page examples to correct markup (thanks [bartcoppens](https://github.com/bartcoppens) for the [original issue](https://github.com/Shopify/polaris/issues/159)) ([#502](https://github.com/Shopify/polaris-react/pull/502))
- Hide increment and decrement buttons on number input when disabled (thanks [kguller](https://github.com/kguller) for the [original issue](https://github.com/Shopify/polaris/issues/163)) ([#524](https://github.com/Shopify/polaris-react/pull/524))
- Updated Static HTML page examples to correct markup ([#502](https://github.com/Shopify/polaris-react/pull/502)) (thanks [@bartcoppens](https://github.com/bartcoppens) for the [original issue](https://github.com/Shopify/polaris/issues/159))
- Hide increment and decrement buttons on number input when disabled ([#524](https://github.com/Shopify/polaris-react/pull/524)) (thanks [@kguller](https://github.com/kguller) for the [original issue](https://github.com/Shopify/polaris/issues/163))
- Fixed link to product content documentation ([#528](https://github.com/Shopify/polaris-react/pull/528))
- Fixed documented type for error prop on Checkbox component ([#523](https://github.com/Shopify/polaris-react/pull/523))
- Fixed Popover reopening when clicking around during transition ([#531](https://github.com/Shopify/polaris-react/pull/531))
@@ -752,27 +746,27 @@ Various documentation fixes.
### Enhancements
- Added helpText to ChoiceList choices (thanks [cgenevier](https://github.com/cgenevier) for the [original issue](https://github.com/Shopify/polaris/issues/103)) ([#409](https://github.com/Shopify/polaris-react/pull/409))
- Added helpText to ChoiceList choices ([#409](https://github.com/Shopify/polaris-react/pull/409)) (thanks [@cgenevier](https://github.com/cgenevier) for the [original issue](https://github.com/Shopify/polaris/issues/103))
- Added save icon ([#433](https://github.com/Shopify/polaris-react/pull/433))
- Added accessibilityLabel to Tabs ([#439](https://github.com/Shopify/polaris-react/pull/439))
- Updated icons for Banner ([#441](https://github.com/Shopify/polaris-react/pull/441))
- Improved Page component by fixing up spacing, addin a prop to show a separator below the page title, and changing the secondary actions to roll up into a dropdown menu on small screens ([#421](https://github.com/Shopify/polaris-react/pull/421)) ([#465](https://github.com/Shopify/polaris-react/pull/465)) ([#481](https://github.com/Shopify/polaris-react/pull/481))
- Improved default stacking behavior for Tooltip and Popover (thanks [Taphood](https://github.com/Taphood) for the [original issue](https://github.com/Shopify/polaris/issues/129)) ([#472](https://github.com/Shopify/polaris-react/pull/472))
- Improved default stacking behavior for Tooltip and Popover ([#472](https://github.com/Shopify/polaris-react/pull/472)) (thanks [@Taphood](https://github.com/Taphood) for the [original issue](https://github.com/Shopify/polaris/issues/129))
- Added extraTight spacing option to Stack ([#474](https://github.com/Shopify/polaris-react/pull/474))
- Use default subheading type styles for ActionList ([#479](https://github.com/Shopify/polaris-react/pull/479))
- Improved large Button styles ([#442](https://github.com/Shopify/polaris-react/pull/442))
- Updated font-weight for text emphasis (thanks [bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/156)) ([#494](https://github.com/Shopify/polaris-react/pull/494/files))
- Updated font-weight for text emphasis ([#494](https://github.com/Shopify/polaris-react/pull/494/files)) (thanks [@bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/156))
### Bug fixes
- Removed the focus state for Banner on click ([#363](https://github.com/Shopify/polaris-react/pull/363))
- Fixed disabled Pagination button looking active
- Fixed alignment on Button
- Fixed min-width on TextField (thanks [Asa](https://github.com/asacarter) for the [original issue](https://github.com/Shopify/polaris/issues/96)) ([#440](https://github.com/Shopify/polaris-react/pull/440))
- Removed the border-top on EmptyState (thanks [Alex](https://github.com/alexdover) for the [original issue](https://github.com/Shopify/polaris/issues/102) [#408](https://github.com/Shopify/polaris-react/pull/408))
- Fixed Select placeholder value warnings (thanks [cgenevier](https://github.com/cgenevier) for the [original issue](https://github.com/Shopify/polaris/issues/98))
- Fixed min-width on TextField ([#440](https://github.com/Shopify/polaris-react/pull/440)) (thanks [@asacarter](https://github.com/asacarter) for the [original issue](https://github.com/Shopify/polaris/issues/96))
- Removed the border-top on EmptyState ([#408](https://github.com/Shopify/polaris-react/pull/408))) (thanks [@alexdover](https://github.com/alexdover) for the [original issue](https://github.com/Shopify/polaris/issues/102)
- Fixed Select placeholder value warnings (thanks [@cgenevier](https://github.com/cgenevier) for the [original issue](https://github.com/Shopify/polaris/issues/98))
- Fixed disabled text on iOS ([#448](https://github.com/Shopify/polaris-react/pull/448))
- Fixed type for onChange event (thanks [Michaël](https://github.com/bakura10) for the original issue ([#461](https://github.com/Shopify/polaris-react/pull/461))
- Fixed type for onChange event ([#461](https://github.com/Shopify/polaris-react/pull/461) (thanks [@bakura10](https://github.com/bakura10) for the [original issue](https://github.com/Shopify/polaris/issues/135))
### Sketch UIKit
@@ -784,9 +778,9 @@ Various documentation fixes.
### Documentation
- Fixed disabled Button documentation (thanks [Michael](https://github.com/michaelsunglee) for the [original issue](https://github.com/Shopify/polaris/issues/113)) ([#422](https://github.com/Shopify/polaris-react/pull/422))
- Fixed disabled Button documentation ([#422](https://github.com/Shopify/polaris-react/pull/422)) (thanks [@michaelsunglee](https://github.com/michaelsunglee) for the [original issue](https://github.com/Shopify/polaris/issues/113))
- Fixed project URL in CircleCI badge ([#423](https://github.com/Shopify/polaris-react/pull/423))
- Fixed Stack documentation (thanks [Marco](https://github.com/nerfologist) for the [original issue](https://github.com/Shopify/polaris/issues/120) ) ([#438](https://github.com/Shopify/polaris-react/pull/438))
- Fixed Stack documentation ([#438](https://github.com/Shopify/polaris-react/pull/438)) (thanks [@nerfologist](https://github.com/nerfologist) for the [original issue](https://github.com/Shopify/polaris/issues/120))
- Added embedded Alert documentation and updated other embedded documentation ([#446](https://github.com/Shopify/polaris-react/pull/446/files))
### Dependency updates
@@ -808,11 +802,11 @@ Various documentation fixes.
### Enhancements
- Added automatic inference of the `target` property of EASDK buttons in `Page`’s `primaryAction` and `secondaryActions` based on their URL (thanks [Dmitriy](https://github.com/jimmyn) for the [original issue](https://github.com/Shopify/polaris/issues/46)) ([#310](https://github.com/Shopify/polaris-react/pull/310))
- Added automatic inference of the `target` property of EASDK buttons in `Page`’s `primaryAction` and `secondaryActions` based on their URL ([#310](https://github.com/Shopify/polaris-react/pull/310)) (thanks [@jimmyn](https://github.com/jimmyn) for the [original issue](https://github.com/Shopify/polaris/issues/46))
- Added automatic inference of the `target` property of EASDK breadcrumbs in `Page`'s `breadcrumbs` prop based on the URL ([#396](https://github.com/Shopify/polaris-react/pull/396))
- `Select` option descriptors now accept a `diabled` attribute to disabled the generated `option` (thanks to [Hafiz](https://github.com/sogko) for the [original issue](https://github.com/Shopify/polaris/issues/68)) ([#349](https://github.com/Shopify/polaris-react/pull/349))
- `Select` option descriptors now accept a `disabled` attribute to disable the generated `option` ([#349](https://github.com/Shopify/polaris-react/pull/349)) (thanks [@sogko](https://github.com/sogko) for the [original issue](https://github.com/Shopify/polaris/issues/68))
- `easdk.showFlashNotice` now accepts an optional options object as its second parameter. Passing `{error: true}` will cause the flash to appear as an error, matching the behaviour of [`ShopifyApp.flashError`](https://help.shopify.com/api/sdks/shopify-apps/embedded-app-sdk/methods#shopifyapp-flasherror-message) ([#392](https://github.com/Shopify/polaris-react/pull/392))
- `Checkbox`, `RadioButton`, `ChoiceList`, `Select`, and `TextField` now pass the ID of the changed input as the second argument to their `onChange` callback (thanks to [Miika](https://github.com/milep) for the [original issue](https://github.com/Shopify/polaris/issues/83)) ([#391](https://github.com/Shopify/polaris-react/pull/391))
- `Checkbox`, `RadioButton`, `ChoiceList`, `Select`, and `TextField` now pass the ID of the changed input as the second argument to their `onChange` callback ([#391](https://github.com/Shopify/polaris-react/pull/391)) (thanks [@milep](https://github.com/milep) for the [original issue](https://github.com/Shopify/polaris/issues/83))
- `Popover` now respects the `z-index` of the activator if it exists ([#347](https://github.com/Shopify/polaris-react/pull/347/files))
- When putting content as children of `Tabs`, the default panel that is generated now respects the `panelID` of the selected tab, and uses a sensible default based on the tab’s `id` if no `panelID` exists ([#347](https://github.com/Shopify/polaris-react/pull/347))
- When selecting a tab in `Tabs`, the matching panel is now focused by default ([#347](https://github.com/Shopify/polaris-react/pull/347))
@@ -824,14 +818,14 @@ Various documentation fixes.
### Bug fixes
- Fixed contents in `Layout.AnnotatedSection` breaking out of their container (thanks [Andrew](https://github.com/cargix1) for the [original issue](https://github.com/Shopify/polaris/issues/75)) ([#365](https://github.com/Shopify/polaris-react/pull/365))
- Fixed contents in `Layout.AnnotatedSection` breaking out of their container ([#365](https://github.com/Shopify/polaris-react/pull/365)) (thanks [@cargix1](https://github.com/cargix1) for the [original issue](https://github.com/Shopify/polaris/issues/75))
- Fixed spacing above a primary action in `CalloutCard` when there is no secondary action ([#364](https://github.com/Shopify/polaris-react/pull/364))
- Aria attributes are now on the actionable elements of `Tabs` instead of in the list items ([#347](https://github.com/Shopify/polaris-react/pull/347))
- Exposed `Panel` as `Tabs.Panel` instead of `Tabs.panel` ([#347](https://github.com/Shopify/polaris-react/pull/347))
- Fixed the alignment of `prefix` and `suffix` content of `TextField` (thanks [bdillon3](https://github.com/bdillon3) for the [original issue](https://github.com/Shopify/polaris/issues/60)) ([#372](https://github.com/Shopify/polaris-react/pull/372))
- Fixed the alignment of `prefix` and `suffix` content of `TextField` ([#372](https://github.com/Shopify/polaris-react/pull/372)) (thanks [@bdillon3](https://github.com/bdillon3) for the [original issue](https://github.com/Shopify/polaris/issues/60))
- Fixed the disabled text color in `TextField` ([#372](https://github.com/Shopify/polaris-react/pull/372))
- `Checkbox`s and `RadioButton`s no longer generate invalid HTML in their labels (thanks [Ernesto](https://github.com/ernestogutierrez) for the [original issue](https://github.com/Shopify/polaris/issues/88)) ([#391](https://github.com/Shopify/polaris-react/pull/391))
- `Tabs` no longer steals focus from contained elements (thanks [Alex](https://github.com/alexdover) for the [original issue](https://github.com/Shopify/polaris/issues/74)) ([#347](https://github.com/Shopify/polaris-react/pull/347))
- `Checkbox`s and `RadioButton`s no longer generate invalid HTML in their labels([#391](https://github.com/Shopify/polaris-react/pull/391)) (thanks [@ernestogutierrez](https://github.com/ernestogutierrez) for the [original issue](https://github.com/Shopify/polaris/issues/88))
- `Tabs` no longer steals focus from contained elements ([#347](https://github.com/Shopify/polaris-react/pull/347)) (thanks [@alexdover](https://github.com/alexdover) for the [original issue](https://github.com/Shopify/polaris/issues/74))
### Design updates
@@ -844,7 +838,7 @@ Various documentation fixes.
- Fixed the code examples o n the embedded app documentation ([#375](https://github.com/Shopify/polaris-react/pull/375))
- Added a simple embedded app example ([#308](https://github.com/Shopify/polaris-react/pull/308/files))
- Renamed the “Tables and lists” category to “Lists”
- A variety of other documentation updates (thanks to [Pablo](https://github.com/sebnun), [Asa](https://github.com/asacarter), and [David](https://github.com/resistorsoftware) for raising issues)
- A variety of other documentation updates (thanks [@sebnun](https://github.com/sebnun), [@asacarter](https://github.com/asacarter), and [@resistorsoftware](https://github.com/resistorsoftware) for raising issues)
### Dependency updates
@@ -860,20 +854,20 @@ Various documentation fixes.
### Big fixes
- Fixed an issue where the embedded components would not reload the page within the Shopify admin (thanks [Rich](https://github.com/buggy) for the [original issue](https://github.com/Shopify/polaris/issues/28)) ([#307](https://github.com/Shopify/polaris-react/pull/307))
- Fixed an issue where the embedded components would not reload the page within the Shopify admin ([#307](https://github.com/Shopify/polaris-react/pull/307)) (thanks [@buggy](https://github.com/buggy) for the [original issue](https://github.com/Shopify/polaris/issues/28))
- Fixed the `spacing="none"` variation on `Stack` not working correctly, and added the missing `extraLarge` enum value for `spacing` ([#320](https://github.com/Shopify/polaris-react/pull/320))
- Fixed `Banner`’s `onDismiss` callback not being called when the dismiss button was clicked (thanks to [Taylor](https://github.com/tlwirtz) for the [original issue](https://github.com/Shopify/polaris/issues/52)) ([76ce13f](https://github.com/Shopify/polaris-react/commit/76ce13f328c2446c316f3d7f1f2a3f007658b6f7))
- Fixed `Banner`’s `onDismiss` callback not being called when the dismiss button was clicked ([76ce13f](https://github.com/Shopify/polaris-react/commit/76ce13f328c2446c316f3d7f1f2a3f007658b6f7)) (thanks [@tlwirtz](https://github.com/tlwirtz) for the [original issue](https://github.com/Shopify/polaris/issues/52))
### Design updates
- Updated Badge text colors ([#319](https://github.com/Shopify/polaris-react/pull/319))
- Updated line height for the small `DisplayText` variation ([#318](https://github.com/Shopify/polaris-react/pull/318))
- Updated the default icon for error `Banner`s (thanks to [Michael](https://github.com/heyneff) for the [original issue](https://github.com/Shopify/polaris/issues/42)) ([#317](https://github.com/Shopify/polaris-react/pull/317))
- Updated the default icon for error `Banner`s ([#317](https://github.com/Shopify/polaris-react/pull/317)) (thanks [@heyneff](https://github.com/heyneff) for the [original issue](https://github.com/Shopify/polaris/issues/42))
### Sketch UIKit
- Added app examples (thanks to [lukepxu](https://github.com/lukepxu) for the [original issue](https://github.com/Shopify/polaris/issues/17))
- Removed references to the Graphik typeface (thanks to [Adam](https://github.com/adamnel) for the [original issue](https://github.com/Shopify/polaris/issues/22))
- Added app examples (thanks [@lukepxu](https://github.com/lukepxu) for the [original issue](https://github.com/Shopify/polaris/issues/17))
- Removed references to the Graphik typeface (thanks [@adamnel](https://github.com/adamnel) for the [original issue](https://github.com/Shopify/polaris/issues/22))
- Left-aligned button text for better resizing
- Added Messenger link to navigation to better communicate that the channel nav collapses after 3 items
- Fixed alignment of table headers
@@ -888,7 +882,7 @@ Various documentation fixes.
- Fixed an issue that prevented the public CHANGELOG from being generated correctly ([#292](https://github.com/Shopify/polaris-react/pull/292))
- Added a hot-reloading Playground to easily try out different components ([#315](https://github.com/Shopify/polaris-react/pull/315))
- Removed the references to Babel presets from `package.json` (thanks to [Massimo](https://github.com/macs91) for digging into this with us) ([#322](https://github.com/Shopify/polaris-react/pull/322))
- Removed the references to Babel presets from `package.json` ([#322](https://github.com/Shopify/polaris-react/pull/322)) (thanks [@macs91](https://github.com/macs91) for digging into this with us)
- Removed the `@import` statements at the top of source Sass files ([#312](https://github.com/Shopify/polaris-react/pull/312))
- Updated TSLint and related linting dependencies ([#316](https://github.com/Shopify/polaris-react/pull/316))
@@ -896,9 +890,9 @@ Various documentation fixes.
### Bug fixes
- Fixed an issue where subcomponents with variations would use a single `-` instead of `--` (thanks [johnsonab](https://github.com/johnsonab) for the [original issue](https://github.com/Shopify/polaris/issues/9)) ([#278](https://github.com/Shopify/polaris-react/pull/278))
- Fixed a missing typing dependency and a missing `embedded` types entry point that were causing issues using this package with TypeScript (thanks to [Rich](https://github.com/buggy) for the [original](https://github.com/Shopify/polaris/issues/19) [issues](https://github.com/Shopify/polaris/issues/20)) ([#286](https://github.com/Shopify/polaris-react/pull/286))
- Fixed an issue where the anchor tag for `ResourceList.Item`s would not span the full width of the item (thanks to [Steven](https://github.com/sdn90) for the [original issue](https://github.com/Shopify/polaris/issues/14)) ([0c11498](https://github.com/Shopify/polaris-react/commit/0c11498406d90850f569824d0979c9a8f84d45c9))
- Fixed an issue where subcomponents with variations would use a single `-` instead of `--` ([#278](https://github.com/Shopify/polaris-react/pull/278)) (thanks [@johnsonab](https://github.com/johnsonab) for the [original issue](https://github.com/Shopify/polaris/issues/9))
- Fixed a missing typing dependency and a missing `embedded` types entry point that were causing issues using this package with TypeScript ([#286](https://github.com/Shopify/polaris-react/pull/286)) (thanks [@buggy](https://github.com/buggy) for the [original](https://github.com/Shopify/polaris/issues/19) [issues](https://github.com/Shopify/polaris/issues/20))
- Fixed an issue where the anchor tag for `ResourceList.Item`s would not span the full width of the item ([0c11498](https://github.com/Shopify/polaris-react/commit/0c11498406d90850f569824d0979c9a8f84d45c9)) (thanks [@sdn90](https://github.com/sdn90) for the [original issue](https://github.com/Shopify/polaris/issues/14))
### Dependency updates
@@ -906,14 +900,14 @@ Various documentation fixes.
### Documentation
- Corrected the name of `documentation/Embeddded apps.md` to `documentation/Embedded apps.md` (thanks to [Chris](https://github.com/chrispappas) for the [original issue](https://github.com/Shopify/polaris/issues/10)) ([#269](https://github.com/Shopify/polaris-react/pull/269))
- Fixed the `ColorPicker` documentation to show valid values for `saturation`, `brightness`, and `alpha` (thanks to [Allan](https://github.com/allanarmstrong) for the [original issue](https://github.com/Shopify/polaris/issues/13)) ([#284](https://github.com/Shopify/polaris-react/pull/284))
- Corrected the name of `documentation/Embeddded apps.md` to `documentation/Embedded apps.md` ([#269](https://github.com/Shopify/polaris-react/pull/269)) (thanks [@chrispappas](https://github.com/chrispappas) for the [original issue](https://github.com/Shopify/polaris/issues/10))
- Fixed the `ColorPicker` documentation to show valid values for `saturation`, `brightness`, and `alpha` ([#284](https://github.com/Shopify/polaris-react/pull/284)) (thanks [@allanarmstrong](https://github.com/allanarmstrong) for the [original issue](https://github.com/Shopify/polaris/issues/13))
### Chores
- Added a description to `package.json` ([#281](https://github.com/Shopify/polaris-react/pull/281))
- Added license to `package.json` and to the root of the repo (thanks to [Daniel](https://github.com/d2s) for the [original issue](https://github.com/Shopify/polaris/issues/15)) ([#283](https://github.com/Shopify/polaris-react/pull/283))
- Fixed an issue where the Webpack example would complain about a missing dependency (thanks to [Rafael](https://github.com/rafaedez) for the [original issue](https://github.com/Shopify/polaris/issues/21)) ([#279](https://github.com/Shopify/polaris-react/pull/279))
- Added license to `package.json` and to the root of the repo ([#283](https://github.com/Shopify/polaris-react/pull/283)) (thanks [@d2s](https://github.com/d2s) for the [original issue](https://github.com/Shopify/polaris/issues/15))
- Fixed an issue where the Webpack example would complain about a missing dependency ([#279](https://github.com/Shopify/polaris-react/pull/279)) (thanks [@rafaedez](https://github.com/rafaedez) for the [original issue](https://github.com/Shopify/polaris/issues/21))
## 1.0.1 - 2017-04-20
@@ -924,5 +918,3 @@ Various documentation fixes.
## 1.0.0 - 2017-04-20
- Initial release
[changelog-guidelines]: https://github.com/Shopify/polaris/blob/master/documentation/Versioning%20and%20changelog.md

31
UNRELEASED.md Normal file
View File

@@ -0,0 +1,31 @@
# Unreleased changes
Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to format new entries. 💜
---
- Adjusted spacing for `ChoiceChildren` in choice list for readability ([#2016](https://github.com/Shopify/polaris-react/pull/2016))
- Made `Card.Header` a seperate publically accessible component ([#1946](https://github.com/Shopify/polaris-react/pull/1946))
### Enhancements
- Added support for complex operators in `ResourceList` component ([#2006](https://github.com/Shopify/polaris-react/pull/2006))
- Updated the page component's primary action to support `Button` props. ([#1994](https://github.com/Shopify/polaris-react/pull/1994))
- Added validation for non-numeric input in a type="number" `TextField` ([#2001](https://github.com/Shopify/polaris-react/pull/2001))
- Added support for Windows High Contrast mode in the popover component ([#1987](https://github.com/Shopify/polaris-react/pull/1987))
- Added circle information icon ([#1967](https://github.com/Shopify/polaris-react/pull/1967))
### Documentation
- Updated banner guidelines to make it clearer when success banners should be used vs success toasts. ([#2046](https://github.com/Shopify/polaris-react/pull/2046))
- Added documentation for iOS and Android section header ([#1918](https://github.com/Shopify/polaris-react/pull/1918))
## 2.6.1 - 2018-08-21
### Development workflow
- Moved `pa11y` and `object-hash` from dependencies to devDependencies ([#2003](https://github.com/Shopify/polaris-react/pull/2003))
### Bug fixes
- Fixed inconsistent drop zone error styling ([#1981](https://github.com/Shopify/polaris-react/pull/1981))

6
config/babel/plugins/sass-namespace-to-default-import.js
View File

@@ -6,9 +6,9 @@ module.exports = function sassNamespaceToDefaultImport(babel) {
const {node} = path;
if (
node.specifiers.length === 1 &&
node.specifiers[0].type === 'ImportNamespaceSpecifier' &&
node.source.value.endsWith('.scss')
node.specifiers.length === 1 &&
node.specifiers[0].type === 'ImportNamespaceSpecifier' &&
node.source.value.endsWith('.scss')
) {
const specifierPath = path.get('specifiers.0');
const identifier = t.identifier(specifierPath.node.local.name);

6
config/jest/config.json
View File

@@ -14,9 +14,5 @@
},
"collectCoverageFrom": ["src/**/*.{ts,tsx}"],
"coverageDirectory": "coverage",
"coveragePathIgnorePatterns": [
"[\\w+]\\.(svg)$",
"index.*",
"types.*"
]
"coveragePathIgnorePatterns": ["[\\w+]\\.(svg)$", "index.*", "types.*"]
}

5
config/jest/transformers/javascript.js
View File

@@ -1,10 +1,7 @@
const {createTransformer} = require('babel-jest');
const babelOptions = {
presets: [
['shopify/node', {modules: 'commonjs'}],
'shopify/react',
],
presets: [['shopify/node', {modules: 'commonjs'}], 'shopify/react'],
};
module.exports = createTransformer(babelOptions);

7
config/jest/transformers/typescript.js
View File

@@ -14,12 +14,7 @@ module.exports = {
},
process(src, path, ...rest) {
if (path.endsWith('.ts') || path.endsWith('.tsx')) {
const tsOutput = tsc.transpile(
src,
tsConfig.compilerOptions,
path,
[],
);
const tsOutput = tsc.transpile(src, tsConfig.compilerOptions, path, []);
const fakeJSPath = path.replace(/\.tsx?$/, '.js');
return babelTransformer.process(tsOutput, fakeJSPath, ...rest);

16
config/rollup/index.js
View File

@@ -19,7 +19,10 @@ const project = resolve(__dirname, '../..');
const buildRoot = resolve(project, './build-intermediate');
const styleRoot = resolve(buildRoot, './styles');
const externalPackages = [...Object.keys(dependencies), ...Object.keys(peerDependencies)];
const externalPackages = [
...Object.keys(dependencies),
...Object.keys(peerDependencies),
];
const sassResources = [
resolve(styleRoot, './foundation.scss'),
resolve(styleRoot, './shared.scss'),
@@ -36,10 +39,12 @@ export default function createRollupConfig({
if (useExistingClassTokens) {
generateScopedName = createExistingClassnameTokenUser(
readJSONSync(`${cssPath.slice(0, -4)}.tokens.json`)
readJSONSync(`${cssPath.slice(0, -4)}.tokens.json`),
);
} else {
generateScopedName = minifyClassnames ? getMinifiedClassName : getNamespacedClassName;
generateScopedName = minifyClassnames
? getMinifiedClassName
: getNamespacedClassName;
}
return {
@@ -71,10 +76,7 @@ export default function createRollupConfig({
exclude: 'node_modules/**',
}),
image({
exclude: [
'node_modules/**',
'**/icons/*.svg',
],
exclude: ['node_modules/**', '**/icons/*.svg'],
}),
],
};

2
config/rollup/minified-classname.js
View File

@@ -1,4 +1,4 @@
const cssNames = (function* () {
const cssNames = (function*() {
// 10 Digits + 26 lowercase letters.
const base = 36;
const min = parseInt('a0', base);

24
config/rollup/namespaced-classname.js
View File

@@ -14,23 +14,31 @@ export default function getNamespacedClassName(localName, filePath) {
const componentName = basename(filePath, '.scss');
const nestedComponentMatch = NESTED_COMPONENT_PATH_REGEX.exec(filePath);
const polarisComponentName = nestedComponentMatch && (nestedComponentMatch.length > 1)
? `${polarisClassName(nestedComponentMatch[1])}-${componentName}`
: polarisClassName(componentName);
const polarisComponentName =
nestedComponentMatch && nestedComponentMatch.length > 1
? `${polarisClassName(nestedComponentMatch[1])}-${componentName}`
: polarisClassName(componentName);
let className = file[localName];
if (className == null) {
if (isComponent(localName)) {
className = componentName === localName
? polarisComponentName
: subcomponentClassName(polarisComponentName, localName);
className =
componentName === localName
? polarisComponentName
: subcomponentClassName(polarisComponentName, localName);
} else if (SUBCOMPONENT_VARIATION_SELECTOR.test(localName)) {
const [subcomponent, variation] = localName.split('-');
const subcomponentName = subcomponentClassName(polarisComponentName, subcomponent);
const subcomponentName = subcomponentClassName(
polarisComponentName,
subcomponent,
);
className = variationClassName(subcomponentName, camelCase(variation));
} else {
className = variationClassName(polarisComponentName, camelCase(localName));
className = variationClassName(
polarisComponentName,
camelCase(localName),
);
}
}

8
config/rollup/plugins/icon.js
View File

@@ -17,8 +17,12 @@ export default function icon(options = {}) {
name: 'shopify-icon',
transform(source, id) {
if (extname(id) !== '.svg') { return null; }
if (!filter(id)) { return null; }
if (extname(id) !== '.svg') {
return null;
}
if (!filter(id)) {
return null;
}
return new Promise((resolve) => {
svgo.optimize(source, (result) => {

8
config/rollup/plugins/image.js
View File

@@ -17,10 +17,14 @@ export default function image(options = {}) {
name: 'shopify-image',
load(id) {
if (!filter(id)) { return null; }
if (!filter(id)) {
return null;
}
const mime = MIME_TYPES[extname(id)];
if (!mime) { return null; }
if (!mime) {
return null;
}
const data = readFileSync(id, 'base64');
return `export default 'data:${mime};base64,${data}';`;

76
config/rollup/plugins/styles.js
View File

@@ -14,7 +14,10 @@ import postcssShopify from 'postcss-shopify';
import genericNames from 'generic-names';
export default function styles(options = {}) {
const filter = createFilter(options.include || ['**/*.css', '**/*.scss'], options.exclude);
const filter = createFilter(
options.include || ['**/*.css', '**/*.scss'],
options.exclude,
);
const {
output,
includePaths = [],
@@ -24,11 +27,16 @@ export default function styles(options = {}) {
const compiledStyles = [];
const tokensByFile = {};
const generateScopedName = typeof userGenerateScopedName === 'function'
? userGenerateScopedName
: genericNames(userGenerateScopedName || '[path]___[name]___[local]___[hash:base64:5]', {
context: process.cwd(),
});
const generateScopedName =
typeof userGenerateScopedName === 'function'
? userGenerateScopedName
: genericNames(
userGenerateScopedName ||
'[path]___[name]___[local]___[hash:base64:5]',
{
context: process.cwd(),
},
);
const includeAlwaysSource = includeAlways
.map((resource) => readFileSync(resource, 'utf8'))
@@ -54,33 +62,41 @@ export default function styles(options = {}) {
name: 'shopify-styles',
transform(source, id) {
if (!filter(id)) { return null; }
if (!filter(id)) {
return null;
}
return new Promise((resolve, reject) => {
render({
data: `${includeAlwaysSource}\n${source}`,
includePaths: includePaths.concat(dirname(id)),
}, (error, result) => {
if (error) {
reject(error);
return;
}
render(
{
data: `${includeAlwaysSource}\n${source}`,
includePaths: includePaths.concat(dirname(id)),
},
(error, result) => {
if (error) {
reject(error);
return;
}
const sassOutput = result.css.toString();
resolve(getPostCSSOutput(processor, sassOutput, id));
});
})
.then(({css, tokens}) => {
tokensByFile[id] = tokens;
const sassOutput = result.css.toString();
resolve(getPostCSSOutput(processor, sassOutput, id));
},
);
}).then(({css, tokens}) => {
tokensByFile[id] = tokens;
const properties = Object
.keys(tokens)
.map((className) => ` ${JSON.stringify(className)}: ${JSON.stringify(tokens[className])},`)
.join('\n');
const properties = Object.keys(tokens)
.map(
(className) =>
` ${JSON.stringify(className)}: ${JSON.stringify(
tokens[className],
)},`,
)
.join('\n');
compiledStyles.push(css);
return `export default {\n${properties}\n};`;
});
compiledStyles.push(css);
return `export default {\n${properties}\n};`;
});
},
ongenerate(generateOptions) {
if (output === false) {
@@ -105,7 +121,9 @@ export default function styles(options = {}) {
return Promise.all([
write(cssDestination, css),
write(tokensDestination, JSON.stringify(tokensByFile, null, 2)),
cssnano.process(css).then((result) => write(minifiedCSSDestination, result.css)),
cssnano
.process(css)
.then((result) => write(minifiedCSSDestination, result.css)),
]);
},
};

31
documentation/Versioning and changelog.md
View File

@@ -1,13 +1,26 @@
# Versioning and Changelog
# Versioning and changelog
The changelog is prepared manually immediately before a release. Each changelog entry should follow this structure:
The changelog is prepared manually immediately before a release, by moving changelog entries from `UNRELEASED.md` to `CHANGELOG.md`, under a new heading for the version number.
How to write a changelog entry:
- Use a positive, conversational tone (for example, use “support” over “allow” and other authoritative verbs)
- Use sentence case (refer to components as plain nouns, for example drop zone and not DropZone)
- Use plain language
- Avoid redundancy when possible (try to phrase a bug fix entry without the word “bug”)
Change log entry descriptions should be brief but descriptive and follow this structure:
```md
## 2.0.0 - 2018-05-07
### Breaking changes
- A change ([#100](https://github.com/shopify/polaris/pull/100))
- Past tense verb + brief issue/enhancement description ([#100](https://github.com/shopify/polaris/pull/100))
Contributed from the community:
- Past tense verb + brief issue/enhancement description ([#100](https://github.com/shopify/polaris/pull/100)) (thanks [@username](https://github.com/username) for the [original issue](issue link)) and/or (thanks [@username](https://github.com/username) for the [pull request](pull request link))
```
The possible groups in which to categorize changes are:
@@ -21,7 +34,7 @@ The possible groups in which to categorize changes are:
- Dependency upgrades
- Development workflow (new yarn commands or changes to existing commands)
## Out of scope for CHANGELOG.md
## Out of scope for `CHANGELOG.md`
Generally, changes related to these topics can be omitted:
@@ -32,21 +45,15 @@ Generally, changes related to these topics can be omitted:
## Unreleased changes
Unreleased changes must go under the `## Unreleased` section (inspired by <https://keepachangelog.com>):
Unreleased changes must go under in the `UNRELEASED.md` file:
```md
## Unreleased
### Bug fixes
- Fixed something ([#100](https://github.com/shopify/polaris/pull/100))
```
This heading must be commented (leaving it for an easy future use) when publishing a release:
```md
<!-- ## Unreleased -->
```
Entries must be moved from `UNRELEASED.md` to `CHANGELOG.md` at each release.
## Versioning scheme

29
examples/browserify/src/App.js
View File

@@ -27,10 +27,7 @@ class App extends Component {
}
render() {
const breadcrumbs = [
{content: 'Example apps'},
{content: 'Browserify'},
];
const breadcrumbs = [{content: 'Example apps'}, {content: 'Browserify'}];
const primaryAction = {content: 'New product'};
const secondaryActions = [{content: 'Import', icon: 'import'}];
@@ -61,7 +58,7 @@ class App extends Component {
</SettingToggle>
</Layout.AnnotatedSection>
{this.renderAccount()}
{this.renderAccount()}
<Layout.AnnotatedSection
title="Form"
@@ -112,9 +109,11 @@ class App extends Component {
</Layout.AnnotatedSection>
<Layout.Section>
<FooterHelp>For more details on Polaris, visit our <Link url="https://polaris.shopify.com">styleguide</Link>.</FooterHelp>
<FooterHelp>
For more details on Polaris, visit our{' '}
<Link url="https://polaris.shopify.com">styleguide</Link>.
</FooterHelp>
</Layout.Section>
</Layout>
</Page>
</AppProvider>
@@ -140,7 +139,15 @@ class App extends Component {
onAction: this.toggleConnection.bind(this, this.state),
}}
details="No account connected"
termsOfService={<p>By clicking Connect, you are accepting Sample’s <Link url="https://polaris.shopify.com">Terms and Conditions</Link>, including a commission rate of 15% on sales.</p>}
termsOfService={
<p>
By clicking Connect, you are accepting Sample’s{' '}
<Link url="https://polaris.shopify.com">
Terms and Conditions
</Link>
, including a commission rate of 15% on sales.
</p>
}
/>
</Layout.AnnotatedSection>
);
@@ -149,9 +156,9 @@ class App extends Component {
disconnectAccountMarkup() {
return (
<Layout.AnnotatedSection
title="Account"
description="Disconnect your account from your Shopify store."
>
title="Account"
description="Disconnect your account from your Shopify store."
>
<AccountConnection
connected
action={{

5
examples/browserify/src/index.js
View File

@@ -2,7 +2,4 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

122
examples/cdn-styles/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,11 +8,14 @@
<title>Polaris CDN Styles</title>
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/latest/polaris.css" />
</head>
<body>
<div class="Polaris-Page">
<div class="Polaris-Page__Header Polaris-Page__Header--hasBreadcrumbs Polaris-Page__Header--hasSecondaryActions Polaris-Page__Header--hasSeparator">
<div class="Polaris-Page__Navigation">
<nav role="navigation"><a class="Polaris-Breadcrumbs__Breadcrumb" data-polaris-unstyled="true"><span class="Polaris-Breadcrumbs__Icon"><span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path></svg></span></span><span class="Polaris-Breadcrumbs__Content">Polaris</span></a></nav>
<nav role="navigation"><a class="Polaris-Breadcrumbs__Breadcrumb" data-polaris-unstyled="true"><span class="Polaris-Breadcrumbs__Icon"><span
class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16"
fill-rule="evenodd"></path></svg></span></span><span class="Polaris-Breadcrumbs__Content">Polaris</span></a></nav>
</div>
<div class="Polaris-Page__MainContent">
<div class="Polaris-Page__TitleAndActions">
@@ -19,13 +23,18 @@
<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Polaris</h1>
</div>
<div class="Polaris-Page__Actions">
<div class="Polaris-Page__PrimaryAction"><button type="button" class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled" disabled=""><span class="Polaris-Button__Content"><span>Save</span></span></button></div>
<div class="Polaris-Page__PrimaryAction"><button type="button" class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled"
disabled=""><span class="Polaris-Button__Content"><span>Save</span></span></button></div>
<div class="Polaris-Page__SecondaryActions">
<div class="Polaris-Page__IndividualActions"><button class="Polaris-Page__Action" type="button"><span class="Polaris-Page__ActionContent"><span class="Polaris-Page__ActionIcon"><span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z" fill-rule="evenodd"></path></svg></span></span><span>Import</span></span></button></div>
<div class="Polaris-Page__IndividualActions"><button class="Polaris-Page__Action" type="button"><span class="Polaris-Page__ActionContent"><span
class="Polaris-Page__ActionIcon"><span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path
d="M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z"
fill-rule="evenodd"></path></svg></span></span><span>Import</span></span></button></div>
</div>
</div>
</div>
<div class="Polaris-Page__PrimaryAction"><button type="button" class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled" disabled=""><span class="Polaris-Button__Content"><span>Save</span></span></button></div>
<div class="Polaris-Page__PrimaryAction"><button type="button" class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled"
disabled=""><span class="Polaris-Button__Content"><span>Save</span></span></button></div>
</div>
</div>
<div class="Polaris-Page__Content">
@@ -43,7 +52,8 @@
<div class="Polaris-Card__Section">
<div class="Polaris-SettingAction">
<div class="Polaris-SettingAction__Setting">Upload your store’s logo, change colors and fonts, and more.</div>
<div class="Polaris-SettingAction__Action"><button type="button" class="Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span>Customize Checkout</span></span></button></div>
<div class="Polaris-SettingAction__Action"><button type="button" class="Polaris-Button Polaris-Button--primary"><span
class="Polaris-Button__Content"><span>Customize Checkout</span></span></button></div>
</div>
</div>
</div>
@@ -71,7 +81,8 @@
</div>
</div>
</div>
<div class="Polaris-SettingAction__Action"><button type="button" class="Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span>Connect</span></span></button></div>
<div class="Polaris-SettingAction__Action"><button type="button" class="Polaris-Button Polaris-Button--primary"><span
class="Polaris-Button__Content"><span>Connect</span></span></button></div>
</div>
<div class="Polaris-AccountConnection__TermsOfService">
<p>
@@ -101,7 +112,8 @@
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="TextField1Label" for="TextField1" class="Polaris-Label__Text">First Name</label></div>
<div class="Polaris-Label"><label id="TextField1Label" for="TextField1" class="Polaris-Label__Text">First
Name</label></div>
</div>
<div class="Polaris-TextField">
<input id="TextField1" value="" placeholder="Tom" class="Polaris-TextField__Input" aria-labelledby="TextField1Label" aria-invalid="false">
@@ -112,7 +124,8 @@
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="TextField2Label" for="TextField2" class="Polaris-Label__Text">Last Name</label></div>
<div class="Polaris-Label"><label id="TextField2Label" for="TextField2" class="Polaris-Label__Text">Last
Name</label></div>
</div>
<div class="Polaris-TextField">
<input id="TextField2" value="" placeholder="Ford" class="Polaris-TextField__Input" aria-labelledby="TextField2Label" aria-invalid="false">
@@ -137,7 +150,8 @@
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="TextField5Label" for="TextField5" class="Polaris-Label__Text">How did you hear about us?</label></div>
<div class="Polaris-Label"><label id="TextField5Label" for="TextField5" class="Polaris-Label__Text">How
did you hear about us?</label></div>
</div>
<div class="Polaris-TextField Polaris-TextField--multiline">
<textarea id="TextField5" placeholder="Website, ads, email, etc." class="Polaris-TextField__Input" aria-labelledby="TextField5Label"
@@ -155,50 +169,51 @@
<ul class="Polaris-ChoiceList__Choices">
<li>
<label class="Polaris-Choice" for="Checkbox1">
<div class="Polaris-Choice__Control">
<div class="Polaris-Checkbox">
<input type="checkbox" id="Checkbox1" name="ChoiceList1[]" value="false" class="Polaris-Checkbox__Input" aria-invalid="false">
<div class="Polaris-Checkbox__Backdrop"></div>
<div class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
</g>
</svg>
</span>
<div class="Polaris-Choice__Control">
<div class="Polaris-Checkbox">
<input type="checkbox" id="Checkbox1" name="ChoiceList1[]" value="false" class="Polaris-Checkbox__Input" aria-invalid="false">
<div class="Polaris-Checkbox__Backdrop"></div>
<div class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="Polaris-Choice__Label">I accept the Terms of Service</div>
</label>
<div class="Polaris-Choice__Label">I accept the Terms of Service</div>
</label>
</li>
<li>
<label class="Polaris-Choice" for="Checkbox2">
<div class="Polaris-Choice__Control">
<div class="Polaris-Checkbox">
<input type="checkbox" id="Checkbox2" name="ChoiceList1[]" value="false2" class="Polaris-Checkbox__Input" aria-invalid="false">
<div class="Polaris-Checkbox__Backdrop"></div>
<div class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
</g>
</svg>
</span>
<div class="Polaris-Choice__Control">
<div class="Polaris-Checkbox">
<input type="checkbox" id="Checkbox2" name="ChoiceList1[]" value="false2" class="Polaris-Checkbox__Input" aria-invalid="false">
<div class="Polaris-Checkbox__Backdrop"></div>
<div class="Polaris-Checkbox__Icon">
<span class="Polaris-Icon">
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
<path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="Polaris-Choice__Label">I consent to receiving emails</div>
</label>
<div class="Polaris-Choice__Label">I consent to receiving emails</div>
</label>
</li>
</ul>
</fieldset>
</div>
<div class="Polaris-FormLayout__Item"><button type="button" class="Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span>Submit</span></span></button></div>
<div class="Polaris-FormLayout__Item"><button type="button" class="Polaris-Button Polaris-Button--primary"><span
class="Polaris-Button__Content"><span>Submit</span></span></button></div>
</div>
</div>
</div>
@@ -210,16 +225,18 @@
<div class="Polaris-FooterHelp__Content">
<div class="Polaris-FooterHelp__Icon">
<span class="Polaris-Icon Polaris-Icon--colorTeal Polaris-Icon--hasBackdrop">
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M6 4.038a2 2 0 1 0-3.999-.001A2 2 0 0 0 6 4.038zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zM18 4a2 2 0 1 0-3.999-.001A2 2 0 0 0 18 4zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zm-2 12a2 2 0 1 0-3.999-.001A2 2 0 0 0 18 16zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zm-14 .038a2 2 0 1 0-3.999-.001A2 2 0 0 0 6 16.038zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4z" fill-rule="nonzero"></path>
<path d="M18 10.038a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM10 14c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z" fill="currentColor"></path>
<path d="M17 10.038a7 7 0 1 0-14 0 7 7 0 0 0 14 0zm2 0a9 9 0 1 1-18.001-.001A9 9 0 0 1 19 10.038z" fill-rule="nonzero"></path>
<path d="M13 10.038a3 3 0 1 0-6 0 3 3 0 0 0 6 0zm2 0c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5z" fill-rule="nonzero"></path>
<path d="M13.707 7.707l2-2a1 1 0 0 0-1.414-1.414l-2 2a1 1 0 0 0 1.414 1.414zm-1.414 6l2 2a1 1 0 0 0 1.414-1.414l-2-2a1 1 0 0 0-1.414 1.414zM7.707 6.33l-2-2a1 1 0 0 0-1.414 1.415l2 2a1 1 0 0 0 1.414-1.414zm-1.414 6l-2 2a1 1 0 0 0 1.414 1.415l2-2a1 1 0 0 0-1.414-1.414z" fill-rule="nonzero"></path>
</g>
</svg>
</span>
<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
<g fill-rule="evenodd">
<path d="M6 4.038a2 2 0 1 0-3.999-.001A2 2 0 0 0 6 4.038zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zM18 4a2 2 0 1 0-3.999-.001A2 2 0 0 0 18 4zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zm-2 12a2 2 0 1 0-3.999-.001A2 2 0 0 0 18 16zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zm-14 .038a2 2 0 1 0-3.999-.001A2 2 0 0 0 6 16.038zm2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4z"
fill-rule="nonzero"></path>
<path d="M18 10.038a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM10 14c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z" fill="currentColor"></path>
<path d="M17 10.038a7 7 0 1 0-14 0 7 7 0 0 0 14 0zm2 0a9 9 0 1 1-18.001-.001A9 9 0 0 1 19 10.038z" fill-rule="nonzero"></path>
<path d="M13 10.038a3 3 0 1 0-6 0 3 3 0 0 0 6 0zm2 0c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5z" fill-rule="nonzero"></path>
<path d="M13.707 7.707l2-2a1 1 0 0 0-1.414-1.414l-2 2a1 1 0 0 0 1.414 1.414zm-1.414 6l2 2a1 1 0 0 0 1.414-1.414l-2-2a1 1 0 0 0-1.414 1.414zM7.707 6.33l-2-2a1 1 0 0 0-1.414 1.415l2 2a1 1 0 0 0 1.414-1.414zm-1.414 6l-2 2a1 1 0 0 0 1.414 1.415l2-2a1 1 0 0 0-1.414-1.414z"
fill-rule="nonzero"></path>
</g>
</svg>
</span>
</div>
<div class="Polaris-FooterHelp__Text">
For more details on Polaris, visit our <a class="Polaris-Link" href="https://polaris.shopify.com" data-polaris-unstyled="true">styleguide</a>.
@@ -231,4 +248,5 @@
</div>
</div>
</body>
</html>

3
examples/create-react-app/src/App.js
View File

@@ -144,7 +144,8 @@ class App extends Component {
By clicking Connect, you are accepting Sample’s{' '}
<Link url="https://polaris.shopify.com">
Terms and Conditions
</Link>, including a commission rate of 15% on sales.
</Link>
, including a commission rate of 15% on sales.
</p>
}
/>

3
examples/webpack/src/App.js
View File

@@ -144,7 +144,8 @@ class App extends Component {
By clicking Connect, you are accepting Sample’s{' '}
<Link url="https://polaris.shopify.com">
Terms and Conditions
</Link>, including a commission rate of 15% on sales.
</Link>
, including a commission rate of 15% on sales.
</p>
}
/>

5
examples/webpack/src/index.js
View File

@@ -2,7 +2,4 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

20
examples/webpack/webpack.config.js
View File

@@ -2,9 +2,7 @@ const {join} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
join(__dirname, 'src/index.js'),
],
entry: [join(__dirname, 'src/index.js')],
output: {
path: join(__dirname, 'build'),
filename: 'bundle.js',
@@ -21,17 +19,19 @@ module.exports = {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: join(__dirname, 'src'),
use: [{
loader: 'babel-loader',
options: {
babelrc: false,
presets: ['env', 'react'],
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: ['env', 'react'],
},
},
}],
],
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ],
use: ['style-loader', 'css-loader'],
},
],
},

4
package.json
View File

@@ -27,11 +27,11 @@
"scripts": {
"lint": "npm-run-all lint:js lint:css",
"lint:css": "stylelint './**/*.scss' --max-warnings 0",
"lint:js": "eslint './src/**/*.{ts,tsx}' --max-warnings 0 --format codeframe",
"lint:js": "eslint './**/*.{js,jsx,ts,tsx}' --max-warnings 0 --format codeframe",
"format": "npm-run-all format:js format:css format:prettier",
"format:css": "yarn run lint:css --fix",
"format:js": "yarn run lint:js --fix",
"format:prettier": "prettier '**/*.{md,yml}' --write",
"format:prettier": "prettier '**/*.{json,md,yml}' --write",
"ts": "tsc --noEmit",
"test": "jest --config ./config/jest/config.json",
"test:coverage": "yarn test --coverage --no-cache",

5
playground/.eslintrc.js
View File

@@ -1,6 +1,3 @@
module.exports = {
extends: [
'plugin:shopify/esnext',
'plugin:shopify/node',
],
extends: ['plugin:shopify/esnext', 'plugin:shopify/node'],
};

14
playground/tsconfig.json
View File

@@ -16,19 +16,9 @@
"noEmitHelpers": true,
"importHelpers": true,
"sourceMap": false,
"lib": [
"dom",
"es2015",
"es2016",
"es2017",
"dom.iterable",
"scripthost"
],
"lib": ["dom", "es2015", "es2016", "es2017", "dom.iterable", "scripthost"],
"paths": {
"@shopify/polaris": [
"../config/typescript/*",
"../src"
]
"@shopify/polaris": ["../config/typescript/*", "../src"]
}
}
}

2
scripts/build-consumer.js
View File

@@ -1,3 +1,5 @@
/* eslint-disable no-console */
import {cp, mkdir, rm} from 'shelljs';
import {resolve} from 'path';

2
scripts/build-shrink-ray.js
View File

@@ -1,3 +1,5 @@
/* eslint-disable no-console */
require('isomorphic-fetch');
const {resolve} = require('path');

5
scripts/optimize.js
View File

@@ -25,7 +25,10 @@ function optimizeFile(file) {
svgo.optimize(data, (result) => {
removeSync(file);
const newFile = resolvePath(dirname(file), `${paramCase(basename(file, '.svg'))}.svg`);
const newFile = resolvePath(
dirname(file),
`${paramCase(basename(file, '.svg'))}.svg`,
);
writeFileSync(newFile, `${result.data}\n`);
resolve();
});

5
scripts/tsconfig.json
View File

@@ -1,7 +1,4 @@
{
"extends": "../tsconfig.json",
"exclude": [
"../src/**/*.test.ts",
"../src/**/*.test.tsx"
]
"exclude": ["../src/**/*.test.ts", "../src/**/*.test.tsx"]
}

1
shipit.yml
View File

@@ -2,6 +2,7 @@ ci:
hide:
- shrink-ray
- 'ci/circleci: percy'
- percy/polaris-react
- codecov/patch
require:
- 'ci/circleci: check'

18
src/components/Avatar/README.md
View File

@@ -1,6 +1,10 @@
---
name: Avatar
category: Images and icons
platforms:
- android
- ios
- web
keywords:
- photo
- profile
@@ -17,6 +21,8 @@ keywords:
- business avatar
- customer thumbnail
- business thumbnail
- ios
- android
---
# Avatar
@@ -59,6 +65,18 @@ Use to present an avatar for a merchant, customer, or business.
<Avatar customer name="Farrah" />
```
<!-- content-for: android -->
![Default avatar](components/Avatar/android/default.png)
<!-- /content-for -->
<!-- content-for: ios -->
![Default avatar](components/Avatar/ios/default.png)
<!-- /content-for -->
---
## Related components

7
src/components/Banner/README.md
View File

@@ -101,11 +101,11 @@ Have a look at this
#### Do
Order archived
Online store is password protected
#### Don’t
Your Order was Archived Today
Your Online Store is now Password Protected
<!-- end -->
@@ -353,9 +353,8 @@ Use to update merchants about a change or give them advice.
### Success banner
- Use to inform merchants when actions are successfully completed
- Default to using toasts for success messages, unless the feedback is delayed, persistent, or has a call to action
- Include next steps if applicable
- If the feedback is delayed, persistent or has a call to action, use this banner
```jsx
<Banner

3
src/components/Card/Card.tsx
View File

@@ -27,6 +27,7 @@ export interface Props {
export default class Card extends React.PureComponent<Props, never> {
static Section = Section;
static Header = Header;
static childContextTypes = contentContextTypes;
getChildContext() {
@@ -49,7 +50,7 @@ export default class Card extends React.PureComponent<Props, never> {
const className = classNames(styles.Card, subdued && styles.subdued);
const headerMarkup = title ? (
<Header actions={actions}>{title}</Header>
<Header actions={actions} title={title} />
) : null;
const content = sectioned ? <Section>{children}</Section> : children;

37
src/components/Card/README.md
View File

@@ -399,6 +399,43 @@ Use for content that you want to deprioritize. Subdued cards don’t stand out a
</Card>
```
### Card with seperate header
<!-- example-for: web -->
Use to be able to use custom React elements as header content.
```jsx
<Card>
<Card.Header
actions={[
{
content: 'Preview',
},
]}
title="Staff accounts"
>
<Popover
active
activator={
<Button disclosure plain>
Add account
</Button>
}
onClose={() => {}}
>
<ActionList items={[{content: 'Member'}, {content: 'Admin'}]} />
</Popover>
</Card.Header>
<Card.Section>
<List>
<List.Item>Felix Crafford</List.Item>
<List.Item>Ezequiel Manno</List.Item>
</List>
</Card.Section>
</Card>
```
---
## Related components

30
src/components/Card/components/Header/Header.tsx
View File

@@ -9,30 +9,32 @@ import Heading from '../../../Heading';
import * as styles from '../../Card.scss';
export interface Props {
children?: React.ReactNode;
title?: React.ReactNode;
actions?: DisableableAction[];
children?: React.ReactNode;
}
export default function Header({children, actions}: Props) {
export default function Header({children, title, actions}: Props) {
const actionMarkup = actions ? (
<ButtonGroup>{buttonsFrom(actions, {plain: true})}</ButtonGroup>
) : null;
const childrenMarkup = React.isValidElement(children) ? (
children
const titleMarkup = React.isValidElement(title) ? (
title
) : (
<Heading>{children}</Heading>
<Heading>{title}</Heading>
);
const headingMarkup = actionMarkup ? (
<Stack alignment="baseline">
<Stack.Item fill>{childrenMarkup}</Stack.Item>
{actionMarkup}
</Stack>
) : (
childrenMarkup
);
const headingMarkup =
actionMarkup || children ? (
<Stack alignment="baseline">
<Stack.Item fill>{titleMarkup}</Stack.Item>
{actionMarkup}
{children}
</Stack>
) : (
titleMarkup
);
return <div className={styles.Header}>{headingMarkup}</div>;
}

66
src/components/Card/components/Header/tests/Header.test.tsx Normal file
View File

@@ -0,0 +1,66 @@
import * as React from 'react';
import {mountWithAppProvider} from '../../../../../../tests/utilities';
import ButtonGroup from '../../../../ButtonGroup';
import Heading from '../../../../Heading';
import {buttonsFrom} from '../../../../Button';
import Header from '../Header';
jest.mock('../../../../Button', () => ({
...require.requireActual('../../../../Button'),
buttonsFrom: jest.fn(),
}));
const buttonsFromMock = buttonsFrom as jest.Mock;
describe('<Header />', () => {
describe('title', () => {
it('renders a heading when defined', () => {
const header = mountWithAppProvider(<Header title="Staff accounts" />);
expect(header.find(Heading).exists()).toBeTruthy();
});
it('renders the title directly if its a valid React element', () => {
const title = <div>Staff accounts</div>;
const header = mountWithAppProvider(<Header title={title} />);
expect(header.find(Heading).exists()).toBeFalsy();
expect(header.find(title)).toBeTruthy();
});
it('is used as the content for the heading', () => {
const title = 'Staff accounts';
const header = mountWithAppProvider(<Header title={title} />);
expect(header.find(Heading).prop('children')).toBe(title);
});
});
describe('actions', () => {
const mockActions = [{content: 'Preview'}];
it('renders a button group when defined', () => {
const header = mountWithAppProvider(<Header actions={mockActions} />);
expect(header.find(ButtonGroup).exists()).toBeTruthy();
});
it('renders buttons for each action', () => {
mountWithAppProvider(<Header actions={mockActions} />);
expect(buttonsFromMock).toBeCalledWith(mockActions, expect.anything());
});
it('does not render a button group when not defined', () => {
const header = mountWithAppProvider(<Header />);
expect(header.find(ButtonGroup).exists()).toBeFalsy();
});
});
describe('children', () => {
it('renders when defined', () => {
const Children = () => <div>Hello!</div>;
const header = mountWithAppProvider(
<Header>
<Children />
</Header>,
);
expect(header.find(Children).exists()).toBeTruthy();
});
});
});

9
src/components/Card/tests/Card.test.tsx
View File

@@ -45,4 +45,13 @@ describe('<Card />', () => {
expect(headerMarkup.text().includes(titleString)).toBe(true);
expect(headerMarkup.find('Badge').text()).toBe(badgeString);
});
it('exposes the header component', () => {
const card = mountWithAppProvider(
<Card>
<Card.Header />
</Card>,
);
expect(card.find(Card.Header).exists()).toBeTruthy();
});
});

2
src/components/DisplayText/README.md
View File

@@ -58,6 +58,8 @@ reassure a merchant such as in marketing content or to capture attention during
statement without an exclamation mark
- Written in sentence case
---
## Examples
### Extra large

2
src/components/EmptyState/README.md
View File

@@ -140,6 +140,8 @@ Secondary actions are used for less important actions such as “Learn more” o
“Close” buttons. They should follow all the other content rules outlined for
primary buttons.
---
## Examples
### Default empty state

2
src/components/ExceptionList/README.md
View File

@@ -63,6 +63,8 @@ If placed next to an item in a [resource list](https://polaris.shopify.com/compo
<!-- end -->
---
## Examples
### Exception list with icon

2
src/components/FooterHelp/README.md
View File

@@ -63,6 +63,8 @@ Clearly labeled: Merchants should not need to guess where they’ll end up if th
<!-- end -->
---
## Examples
### Footer help box

2
src/components/FormLayout/README.md
View File

@@ -105,6 +105,8 @@ A label is a short description of a field. Labels are not help text, and they sh
Help text provides extra guidance to people filling out a form field. This text is easy for people to ignore, so merchants should not need to depend on it to fill out a form. As with all forms, help text should be succinct and easy to read.
---
## Examples
### Default form layout

2
src/components/Heading/README.md
View File

@@ -73,6 +73,8 @@ Conversational headings for areas like empty states and home cards are the only
<!-- end -->
---
## Examples
### Typographic heading

2
src/components/Icon/README.md
View File

@@ -40,6 +40,8 @@ Alt text should be written in [plain language](/content/grammar-and-mechanics#pl
- Write in the [active voice](/content/grammar-and-mechanics#active-and-passive-voice)
- Use words and language that our merchants use (avoid technical jargon)
---
## Examples
### Default icon

2
src/components/KeyboardKey/README.md
View File

@@ -44,6 +44,8 @@ Headings above the keyboard key should be:
The shortcut description should describe what action will be taken if merchants tap certain keys. When a hotkey combination takes merchants to a location in the interface, the format should be:
---
## Examples
### List of keyboard shortcuts

2
src/components/Layout/README.md
View File

@@ -176,6 +176,8 @@ The descriptions in annotated sections should:
- Not repeat the section title
- Use complete sentences and regular punctuation
---
## Examples
### One-column layout

2
src/components/Link/README.md
View File

@@ -70,6 +70,8 @@ Learn more about <a>fulfilling orders</a> at the Shopify Help Center
<!-- end -->
---
## Examples
### Default links

2
src/components/List/README.md
View File

@@ -79,6 +79,8 @@ When a line of text is placed next to an icon, it should:
- Follow all the rules for list items
- Elaborate on the meaning conveyed by the icon
---
## Examples
### Bulleted list

2
src/components/Modal/README.md
View File

@@ -171,6 +171,8 @@ Body content should be:
<!-- end -->
---
## Examples
### Basic modal

9
src/components/Page/Page.scss
View File

@@ -92,6 +92,15 @@ body {
.Title {
@include layout-flex-fix;
@include text-breakword;
display: flex;
align-items: baseline;
flex-wrap: wrap;
margin-top: -1 * spacing(tight);
> * {
margin-top: spacing(tight);
margin-right: spacing(tight);
}
}
.Title-hidden {

22
src/components/Page/README.md
View File

@@ -118,6 +118,8 @@ Add a menu item
<!-- end -->
---
## Examples
### Page with all header elements
@@ -277,6 +279,26 @@ Use a separator for pages that have an [empty state](/components/structure/empty
</Page>
```
### Page with title metadata
Use title metadata to communicate brief, important and non-interactive status information about an entire page.
```jsx
<Page
breadcrumbs={[{content: 'Products'}]}
title="Jar With Lock-Lid"
titleMetadata={<Badge status="attention">Verified</Badge>}
primaryAction={{content: 'Save', disabled: true}}
secondaryActions={[{content: 'Duplicate'}, {content: 'View on your store'}]}
pagination={{
hasPrevious: true,
hasNext: true,
}}
>
<p>Page content</p>
</Page>
```
---
## Related components

2
src/components/Page/components/Header/Header.tsx
View File

@@ -29,6 +29,7 @@ export default class Header extends React.PureComponent<Props, State> {
render() {
const {
title,
titleMetadata,
breadcrumbs = [],
titleHidden = false,
primaryAction,
@@ -90,6 +91,7 @@ export default class Header extends React.PureComponent<Props, State> {
<DisplayText size="large" element="h1">
{title}
</DisplayText>
{titleMetadata}
</div>
);

14
src/components/Page/types.ts
View File

@@ -1,13 +1,12 @@
import {
ActionListItemDescriptor,
Action,
BaseAction,
IconableAction,
DisableableAction,
BadgeAction,
} from '../../types';
import {PaginationDescriptor} from '../Pagination';
import {Props as BreadcrumbProps} from '../Breadcrumbs';
import {Props as ButtonProps} from '../Button';
export type SecondaryAction = IconableAction & DisableableAction;
@@ -37,9 +36,18 @@ export interface ActionProps {
hasIndicator?: boolean;
}
export interface PrimaryActionProps extends BaseAction {
/** Provides extra visual weight and identifies the primary action in a set of buttons */
primary?: boolean;
/** Indicates a dangerous or potentially negative action */
destructive?: boolean;
}
export interface HeaderProps {
/** Page title, in large type */
title: string;
/** Page title metadata */
titleMetadata?: React.ReactNode;
/** Visually hide the title */
titleHidden?: boolean;
/** App icon, for pages that are part of Shopify apps */
@@ -53,7 +61,7 @@ export interface HeaderProps {
/** Collection of page-level groups of secondary actions */
actionGroups?: ActionGroup[];
/** Primary page-level action */
primaryAction?: Action & ButtonProps;
primaryAction?: PrimaryActionProps;
/** Page-level pagination */
pagination?: PaginationDescriptor;
}

2
src/components/PageActions/README.md
View File

@@ -80,6 +80,8 @@ Buttons should be:
<!-- end -->
---
## Examples
### Default page actions

2
src/components/Pagination/README.md
View File

@@ -41,6 +41,8 @@ Pagination should:
There are no editable content elements that are specific to the pagination component.
---
## Examples
### Default pagination

11
src/components/Popover/Popover.scss
View File

@@ -57,6 +57,17 @@ $content-max-width: rem(400px);
overflow: hidden;
background-color: color('white');
border-radius: border-radius(large);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid transparent;
border-radius: border-radius(large);
}
}
.Content {

2
src/components/Popover/README.md
View File

@@ -110,6 +110,8 @@ If the menu items in a popover menu include a series of navigational links, each
<!-- end -->
---
## Examples
### Popover with action list

2
src/components/ProgressBar/README.md
View File

@@ -28,6 +28,8 @@ Progress bar components should:
There are no content elements that are specific to progress bar.
---
## Examples
### Default

2
src/components/RadioButton/README.md
View File

@@ -88,6 +88,8 @@ Toggle values should:
- Never be labeled
---
## Examples
### Default radio button

2
src/components/RangeSlider/README.md
View File

@@ -105,6 +105,8 @@ Error messages should:
<!-- end -->
---
## Examples
### Default range slider

39
src/components/ResourceList/components/FilterControl/FilterControl.tsx
View File

@@ -6,7 +6,7 @@ import {ComplexAction} from '../../../../types';
import {buttonsFrom, TextField, Icon, Tag, FormLayout} from '../../..';
import FilterCreator from './FilterCreator';
import {AppliedFilter, Filter, FilterType} from './types';
import {AppliedFilter, Filter, FilterType, Operator} from './types';
import * as styles from './FilterControl.scss';
export interface Props {
@@ -156,7 +156,6 @@ export class FilterControl extends React.Component<CombinedProps> {
private getFilterLabel(appliedFilter: AppliedFilter): string {
const {key, value, label} = appliedFilter;
if (label) {
return label;
}
@@ -164,12 +163,21 @@ export class FilterControl extends React.Component<CombinedProps> {
const {filters = []} = this.props;
const filter = filters.find((filter: any) => {
const {minKey, maxKey} = filter;
const {minKey, maxKey, operatorText} = filter;
if (minKey || maxKey) {
return filter.key === key || minKey === key || maxKey === key;
}
if (operatorText && typeof operatorText !== 'string') {
return (
filter.key === key ||
operatorText.filter(
({key: operatorKey}: Operator) => operatorKey === key,
).length === 1
);
}
return filter.key === key;
});
@@ -177,9 +185,14 @@ export class FilterControl extends React.Component<CombinedProps> {
return value;
}
const filterOperatorLabel = findOperatorLabel(filter, appliedFilter);
const filterLabelByType = this.findFilterLabelByType(filter, appliedFilter);
const filterLabels = [filter.label, filter.operatorText, filterLabelByType];
return filterLabels.join(' ');
if (!filterOperatorLabel) {
return `${filter.label} ${filterLabelByType}`;
}
return `${filter.label} ${filterOperatorLabel} ${filterLabelByType}`;
}
private findFilterLabelByType(
@@ -253,4 +266,20 @@ function formatDateForLabelDisplay(date: string) {
return new Date(date.replace(/-/g, '/')).toLocaleDateString();
}
function findOperatorLabel(filter: Filter, appliedFilter: AppliedFilter) {
const {operatorText} = filter;
if (!operatorText || typeof operatorText === 'string') {
return operatorText;
}
const appliedOperator = operatorText.find((operator) => {
return operator.key === appliedFilter.key;
});
if (appliedOperator) {
return appliedOperator.filterLabel || appliedOperator.optionLabel;
}
}
export default withAppProvider<Props>()(FilterControl);

14
src/components/ResourceList/components/FilterControl/FilterCreator.tsx
View File

@@ -6,7 +6,7 @@ import Form from '../../../Form';
import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
import FilterValueSelector from './FilterValueSelector';
import {AppliedFilter, Filter} from './types';
import {AppliedFilter, Filter, Operator} from './types';
export interface Props {
filters: Filter[];
@@ -144,7 +144,7 @@ export class FilterCreator extends React.PureComponent<CombinedProps, State> {
const {filters} = this.props;
const foundFilter = filters.find((filter: any) => {
const {minKey, maxKey} = filter;
const {minKey, maxKey, operatorText} = filter;
if (minKey || maxKey) {
return (
@@ -154,7 +154,15 @@ export class FilterCreator extends React.PureComponent<CombinedProps, State> {
);
}
return filter.key === filterKey;
if (operatorText && typeof operatorText !== 'string') {
return (
filter.key === filterKey ||
operatorText.filter(({key}: Operator) => key === filterKey).length ===
1
);
}
return filterKey.includes(filter.key);
});
if (!foundFilter) {

98
src/components/ResourceList/components/FilterControl/FilterValueSelector.tsx
View File

@@ -1,8 +1,9 @@
import * as React from 'react';
import {Select, TextField} from '../../..';
import {autobind} from '@shopify/javascript-utilities/decorators';
import {Select, Stack, TextField} from '../../..';
import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
import DateSelector from './DateSelector';
import {Filter, AppliedFilter, FilterType} from './types';
import {Filter, AppliedFilter, FilterType, Operator} from './types';
export interface Props {
filter: Filter;
@@ -15,6 +16,23 @@ export interface Props {
export type CombinedProps = Props & WithAppProviderProps;
export class FilterValueSelector extends React.PureComponent<CombinedProps> {
componentDidMount() {
const {
filter: {operatorText, type},
} = this.props;
if (
type === FilterType.DateSelector ||
!operatorText ||
typeof operatorText === 'string' ||
operatorText.length === 0
) {
return;
}
this.handleOperatorOptionChange(operatorText[0].key);
}
render() {
const {
filter,
@@ -25,28 +43,52 @@ export class FilterValueSelector extends React.PureComponent<CombinedProps> {
polaris: {intl},
} = this.props;
const selectedFilterLabel = filter.operatorText || '';
const {operatorText} = filter;
const showOperatorOptions =
filter.type !== FilterType.DateSelector &&
operatorText &&
typeof operatorText !== 'string';
const operatorOptionsMarkup = showOperatorOptions ? (
<Select
label={filter.label}
labelHidden
options={buildOperatorOptions(operatorText)}
value={filterKey}
onChange={this.handleOperatorOptionChange}
/>
) : null;
const selectedFilterLabel =
typeof operatorText === 'string' ? operatorText : '';
switch (filter.type) {
case FilterType.Select:
return (
<Select
label={selectedFilterLabel}
options={filter.options}
placeholder={intl.translate(
'Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder',
)}
value={value}
onChange={onChange}
/>
<Stack vertical>
{operatorOptionsMarkup}
<Select
label={selectedFilterLabel}
options={filter.options}
placeholder={intl.translate(
'Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder',
)}
value={value}
onChange={onChange}
/>
</Stack>
);
case FilterType.TextField:
return (
<TextField
label={selectedFilterLabel}
value={value}
onChange={onChange}
/>
<Stack vertical>
{operatorOptionsMarkup}
<TextField
label={selectedFilterLabel}
value={value}
type={filter.textFieldType}
onChange={onChange}
/>
</Stack>
);
case FilterType.DateSelector:
return (
@@ -64,6 +106,28 @@ export class FilterValueSelector extends React.PureComponent<CombinedProps> {
return null;
}
}
@autobind
private handleOperatorOptionChange(operatorKey: string) {
const {value, onChange, onFilterKeyChange} = this.props;
onFilterKeyChange(operatorKey);
if (!value) {
return;
}
onChange(value);
}
}
function buildOperatorOptions(operatorText?: string | Operator[]) {
if (!operatorText || typeof operatorText === 'string') {
return [];
}
return operatorText.map(({key, optionLabel}) => {
return {value: key, label: optionLabel};
});
}
export default withAppProvider<Props>()(FilterValueSelector);

86
src/components/ResourceList/components/FilterControl/tests/FilterControl.test.tsx
View File

@@ -554,6 +554,92 @@ describe('<FilterControl />', () => {
);
});
it('renders the correct applied filter string when filter uses operators with filter label', () => {
const appliedFilterValue = '20';
const appliedFilterKey = 'times_used';
const appliedFilterLabel = 'is';
const filter: FilterTextField = {
key: 'filterKey1',
label: 'Times used',
operatorText: [
{
optionLabel: 'equal to',
filterLabel: appliedFilterLabel,
key: appliedFilterKey,
},
{
optionLabel: 'not equal to',
filterLabel: 'is not',
key: 'times_used_not',
},
],
type: FilterType.TextField,
};
const appliedFilters = {
key: appliedFilterKey,
value: appliedFilterValue,
};
const wrapper = mountWithAppProvider(
<FilterControl
{...mockDefaultProps}
filters={[filter]}
appliedFilters={[appliedFilters]}
/>,
{
context: mockDefaultContext,
},
);
const firstTag = wrapper.find(Tag).at(0);
expect(firstTag.text()).toBe(
`${filter.label} ${appliedFilterLabel} ${appliedFilterValue}`,
);
});
it('renders the correct applied filter string when filter uses operators without filter label', () => {
const appliedFilterValue = '20';
const appliedFilterKey = 'times_used';
const appliedOperatorOptionLabel = 'equal to';
const filter: FilterTextField = {
key: 'filterKey1',
label: 'Times used',
operatorText: [
{
optionLabel: appliedOperatorOptionLabel,
key: appliedFilterKey,
},
{
optionLabel: 'not equal to',
key: 'times_used_not',
},
],
type: FilterType.TextField,
};
const appliedFilters = {
key: appliedFilterKey,
value: appliedFilterValue,
};
const wrapper = mountWithAppProvider(
<FilterControl
{...mockDefaultProps}
filters={[filter]}
appliedFilters={[appliedFilters]}
/>,
{
context: mockDefaultContext,
},
);
const firstTag = wrapper.find(Tag).at(0);
expect(firstTag.text()).toBe(
`${filter.label} ${appliedOperatorOptionLabel} ${appliedFilterValue}`,
);
});
it('renders the correct applied filter string when filter key cannot be found', () => {
const appliedFilterValue = 'new Bundle';
const appliedFilters = {

45
src/components/ResourceList/components/FilterControl/tests/FilterCreator.test.tsx
View File

@@ -38,6 +38,21 @@ describe('<FilterCreator />', () => {
label: 'Tagged with',
type: FilterType.TextField,
},
{
key: 'filterKey3',
label: 'Times used',
operatorText: [
{
optionLabel: 'less than',
key: 'times_used_max',
},
{
optionLabel: 'greater than',
key: 'times_used_min',
},
],
type: FilterType.TextField,
},
],
resourceName: {
singular: 'Item',
@@ -149,6 +164,10 @@ describe('<FilterCreator />', () => {
value: mockDefaultProps.filters[1].key,
label: mockDefaultProps.filters[1].label,
},
{
value: mockDefaultProps.filters[2].key,
label: mockDefaultProps.filters[2].label,
},
]);
});
});
@@ -164,7 +183,7 @@ describe('<FilterCreator />', () => {
expect(wrapper.find(FilterValueSelector).exists()).toBe(false);
});
it('updates FilterValueSelector when user select a filter key', () => {
it('updates FilterValueSelector when user selects a filter key', () => {
const wrapper = mountWithAppProvider(
<FilterCreator {...mockDefaultProps} />,
);
@@ -178,7 +197,7 @@ describe('<FilterCreator />', () => {
expect(wrapper.find(FilterValueSelector).prop('value')).toBeUndefined();
});
it('updates value correctly when user select a filter value', () => {
it('updates value correctly when user selects a filter value', () => {
const wrapper = mountWithAppProvider(
<FilterCreator {...mockDefaultProps} />,
);
@@ -189,6 +208,28 @@ describe('<FilterCreator />', () => {
expect(wrapper.find(FilterValueSelector).prop('value')).toBe('Bundle');
});
it('updates FilterValueSelector when filter key is updated to existing operator key', () => {
const wrapper = mountWithAppProvider(
<FilterCreator {...mockDefaultProps} />,
);
const newOperatorKey = 'times_used_max';
activatePopover(wrapper);
selectFilterKey(wrapper, mockDefaultProps.filters[2].key);
selectFilterValue(wrapper, 'Bundle');
trigger(
wrapper.find(FilterValueSelector),
'onFilterKeyChange',
newOperatorKey,
);
expect(wrapper.find(FilterValueSelector).prop('filterKey')).toBe(
newOperatorKey,
);
});
});
describe('filter add button', () => {

191
src/components/ResourceList/components/FilterControl/tests/FilterValueSelector.test.tsx
View File

@@ -7,10 +7,33 @@ import {
import FilterValueSelector from '../FilterValueSelector';
import DateSelector from '../DateSelector';
import {Filter, FilterType} from '../types';
import {Filter, FilterType, Operator} from '../types';
import {Select, TextField} from '../../../..';
describe('<FilterValueSelector />', () => {
const operators = [
{
optionLabel: 'equal to',
filterLabel: 'is',
key: 'times_used',
},
{
optionLabel: 'not equal to',
filterLabel: 'is not',
key: 'times_used_not',
},
{
optionLabel: 'less than',
filterLabel: 'is less than',
key: 'times_used_max',
},
{
optionLabel: 'greater than',
filterLabel: 'is greater than',
key: 'times_used_min',
},
];
describe('filter.type', () => {
describe('FilterType.Select', () => {
const filter: Filter = {
@@ -42,10 +65,10 @@ describe('<FilterValueSelector />', () => {
);
const select = wrapper.find(Select);
expect(select.exists()).toEqual(true);
expect(select.exists()).toBe(true);
});
it('renders label using the operatorText', () => {
it('renders label using operatorText when it is a string', () => {
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={filter}
@@ -58,6 +81,21 @@ describe('<FilterValueSelector />', () => {
expect(select.prop('label')).toBe(filter.operatorText);
});
it('renders a Select with options using operatorText when it is a list of operators', () => {
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={noop}
onFilterKeyChange={noop}
/>,
);
const expectedOptions = getOptionsListForOperators(operators);
const operatorsSelect = wrapper.find(Select).first();
expect(operatorsSelect.prop('options')).toEqual(expectedOptions);
});
it('renders value using the value prop', () => {
const value = 'test';
const wrapper = shallowWithAppProvider(
@@ -86,6 +124,45 @@ describe('<FilterValueSelector />', () => {
trigger(wrapper.find(Select), 'onChange');
expect(onChange).toHaveBeenCalled();
});
it('calls onFilterKeyChange when operator is changed', () => {
const onFilterKeyChangeSpy = jest.fn();
const newOperator = operators[1].key;
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={noop}
onFilterKeyChange={onFilterKeyChangeSpy}
/>,
);
const operatorsSelect = wrapper.find(Select).first();
trigger(operatorsSelect, 'onChange', newOperator);
expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(newOperator);
});
it('calls onChange with filter value when operator is changed and filter value is set', () => {
const onChangeSpy = jest.fn();
const newFilterValue = 'foo';
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={onChangeSpy}
onFilterKeyChange={noop}
/>,
);
const filterValueSelect = wrapper.find(Select).at(1);
trigger(filterValueSelect, 'onChange', newFilterValue);
const operatorsSelect = wrapper.find(Select).first();
trigger(operatorsSelect, 'onChange', operators[1].key);
expect(onChangeSpy).toHaveBeenCalledWith(newFilterValue);
});
});
describe('FilterType.TextField', () => {
@@ -105,7 +182,7 @@ describe('<FilterValueSelector />', () => {
);
const textField = wrapper.find(TextField);
expect(textField.exists()).toEqual(true);
expect(textField.exists()).toBe(true);
});
it('renders label as empty string if operatorText does not exist', () => {
@@ -121,6 +198,21 @@ describe('<FilterValueSelector />', () => {
expect(textField.prop('label')).toBe('');
});
it('renders a Select with options using operatorText when it is a list of operators', () => {
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={noop}
onFilterKeyChange={noop}
/>,
);
const expectedOptions = getOptionsListForOperators(operators);
const operatorsSelect = wrapper.find(Select).first();
expect(operatorsSelect.prop('options')).toEqual(expectedOptions);
});
it('renders value using the value prop', () => {
const value = 'test';
const wrapper = shallowWithAppProvider(
@@ -136,6 +228,37 @@ describe('<FilterValueSelector />', () => {
expect(textField.prop('value')).toBe(value);
});
it('renders type using the textFieldType prop', () => {
const textFieldType = 'number';
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{
...filter,
textFieldType,
}}
onChange={noop}
onFilterKeyChange={noop}
/>,
);
const textField = wrapper.find(TextField);
expect(textField.prop('type')).toBe(textFieldType);
});
it('renders undefined type when the textFieldType prop is not passed', () => {
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={filter}
onChange={noop}
onFilterKeyChange={noop}
/>,
);
const textField = wrapper.find(TextField);
expect(textField.prop('type')).toBeUndefined();
});
it('calls onChange when the text field was changed', () => {
const onChange = jest.fn();
const wrapper = shallowWithAppProvider(
@@ -149,6 +272,45 @@ describe('<FilterValueSelector />', () => {
trigger(wrapper.find(TextField), 'onChange');
expect(onChange).toHaveBeenCalled();
});
it('calls onFilterKeyChange when operator is changed', () => {
const onFilterKeyChangeSpy = jest.fn();
const newOperator = operators[1].key;
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={noop}
onFilterKeyChange={onFilterKeyChangeSpy}
/>,
);
const operatorsSelect = wrapper.find(Select).first();
trigger(operatorsSelect, 'onChange', newOperator);
expect(onFilterKeyChangeSpy).toHaveBeenCalledWith(newOperator);
});
it('calls onChange with filter value when operator is changed and filter value is set', () => {
const onChangeSpy = jest.fn();
const newFilterValue = 'foo';
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={onChangeSpy}
onFilterKeyChange={noop}
/>,
);
const filterValueTextField = wrapper.find(TextField);
trigger(filterValueTextField, 'onChange', newFilterValue);
const operatorsSelect = wrapper.find(Select).first();
trigger(operatorsSelect, 'onChange', operators[1].key);
expect(onChangeSpy).toHaveBeenCalledWith(newFilterValue);
});
});
describe('FilterType.DateSelector', () => {
@@ -171,7 +333,7 @@ describe('<FilterValueSelector />', () => {
);
const dateSelector = wrapper.find(DateSelector);
expect(dateSelector.exists()).toEqual(true);
expect(dateSelector.exists()).toBe(true);
});
it('renders filterValue using the value prop', () => {
@@ -236,6 +398,19 @@ describe('<FilterValueSelector />', () => {
expect(dateSelector.prop('filterMaxKey')).toBe(filterMaxKey);
});
it('does not render Select with operator options', () => {
const wrapper = shallowWithAppProvider(
<FilterValueSelector
filter={{...filter, operatorText: operators}}
onChange={noop}
onFilterKeyChange={noop}
/>,
);
const operatorsSelect = wrapper.find(Select);
expect(operatorsSelect.exists()).toBe(false);
});
it('calls onFilterKeyChange when the filter key was changed', () => {
const onChange = jest.fn();
const wrapper = shallowWithAppProvider(
@@ -265,4 +440,10 @@ describe('<FilterValueSelector />', () => {
});
});
});
function getOptionsListForOperators(operators: Operator[]) {
return operators.map(({key, optionLabel}) => {
return {value: key, label: optionLabel};
});
}
});

10
src/components/ResourceList/components/FilterControl/types.ts
View File

@@ -1,4 +1,11 @@
import {Option} from '../../../Select';
import {Type} from '../../../TextField';
export interface Operator {
key: string;
optionLabel: string;
filterLabel?: string;
}
export interface AppliedFilter {
key: string;
@@ -15,7 +22,7 @@ export enum FilterType {
export interface FilterBase<FilterKeys = {}> {
label: string;
key: keyof FilterKeys | string;
operatorText?: string;
operatorText?: string | Operator[];
type: FilterType;
}
@@ -27,6 +34,7 @@ export interface FilterSelect<FilterKeys = {}> extends FilterBase<FilterKeys> {
export interface FilterTextField<FilterKeys = {}>
extends FilterBase<FilterKeys> {
type: FilterType.TextField;
textFieldType?: Type;
}
export interface FilterDateSelector<FilterKeys = {}>

28
src/components/Scrollable/README.md
View File

@@ -86,6 +86,8 @@ Body content should be:
- Clear: use the verb “need” to help merchants understand when they’re
required to do something.
---
## Examples
### Default scrollable container
@@ -229,13 +231,13 @@ Use when you need to programmatically scroll a child component into view in the
<a href="https://www.shopify.com/legal/apple-pay">
https://www.shopify.com/legal/apple-pay
</a>
. Such amendments to the Apple Pay Platform Web Merchant Terms are
effective as of the date of posting. Your continued use of Apple Pay on
your store after the amended Apple Pay Platform Web Merchant Terms are
posted constitutes your agreement to, and acceptance of, the amended Apple
Pay Platform Web Merchant Terms. If you do not agree to any changes to the
Apple Pay Platform Web Merchant Terms, de-activate your Apple Pay account
and do not continue to use Apple Pay on your store.
. Such amendments to the Apple Pay Platform Web Merchant Terms are effective
as of the date of posting. Your continued use of Apple Pay on your store after
the amended Apple Pay Platform Web Merchant Terms are posted constitutes your
agreement to, and acceptance of, the amended Apple Pay Platform Web Merchant
Terms. If you do not agree to any changes to the Apple Pay Platform Web Merchant
Terms, de-activate your Apple Pay account and do not continue to use Apple
Pay on your store.
</p>
<p>2.4 Google Payment</p>
@@ -263,12 +265,12 @@ Use when you need to programmatically scroll a child component into view in the
https://payments.developers.google.com/terms/sellertos
</a>
. Such amendments to the Google Payment API Terms of Service are effective
as of the date of posting. Your continued use of Google Payment on your
store after the amended Google Payment API Terms of Service are posted
constitutes your agreement to, and acceptance of, the amended Google
Payment API Terms of Service. If you do not agree to any changes to the
Google Payment API Terms of Service, de-activate your Google Payment
account and do not continue to use Google Payment on your store.
as of the date of posting. Your continued use of Google Payment on your store
after the amended Google Payment API Terms of Service are posted constitutes
your agreement to, and acceptance of, the amended Google Payment API Terms
of Service. If you do not agree to any changes to the Google Payment API Terms
of Service, de-activate your Google Payment account and do not continue to
use Google Payment on your store.
</p>
<p>2.5 Domain Names</p>

103
src/components/SectionHeader/README.md Normal file
View File

@@ -0,0 +1,103 @@
---
name: Section header
category: Lists and tables
platforms:
- android
- ios
keywords:
- SectionHeader
- section header
- sticky header
- section divider
- list group
- list grouping
- lists
- sections
- android
- ios
---
# Section header
Use the section header component to group items in a list. It helps merchants to quickly see what items are related.
---
## Best practices
- List the groups in a clear and obvious way, such as alphabetically or by date.
- Avoid cluttering the list with long section titles that make it hard to scan.
- Avoid using section headers if your list usually has only 1 item in every grouping. The more section headers there are, the harder it is for merchants to scan the list.
---
## Content guidelines
- Keep titles short
<!-- usagelist -->
#### Do
- Created today
- Created Aug 15
#### Don’t
- Discount created today, Aug 15
- Created August 15, 2018
<!-- end -->
Read more about [dates and numbers](/content/grammar-and-mechanics#section-dates-numbers-and-addresses).
- Use a clear sort order
<!-- usagelist -->
#### Do
- Today
- Yesterday
- Monday
#### Don’t
- Recent
- Other
<!-- end -->
---
## Examples
### Default
Use to group related content together, for example orders received on the same day.
<!-- content-for: android -->
![Shipping costs card with multiple sections: domestic, international](components/SectionHeader/android/default.png)
<!-- /content-for -->
<!-- content-for: ios -->
![Shipping costs card with multiple sections: domestic, international](components/SectionHeader/ios/default.png)
<!-- /content-for -->
### Fixed
<!-- example-for: ios -->
Use if your list section could be longer than the height of the screen. For example you may need fixed section headers for a list of orders, because merchants may receive many orders in one day.
![Shipping costs card with multiple sections: domestic, international](components/SectionHeader/ios/fixed.png)
---
## Related components
- Use section headers if you want to organize [resource list items](/components/lists-and-tables/resource-list) into groups.

2
src/components/Select/README.md
View File

@@ -92,6 +92,8 @@ The list of options in a menu should:
The placeholder option should be the text “Select”.
---
## Examples
### Default select

2
src/components/SettingToggle/README.md
View File

@@ -70,6 +70,8 @@ say “Enable” to allow merchants to turn it on.
<!-- end -->
---
## Examples
### Default setting toggle

2
src/components/SkeletonBodyText/README.md
View File

@@ -45,6 +45,8 @@ Use skeleton body text for static content or use placeholder content for dynamic
<!-- end -->
---
## Examples
### Default paragraph

2
src/components/SkeletonDisplayText/README.md
View File

@@ -58,6 +58,8 @@ Show skeleton display text for dynamic page titles.
<!-- end -->
---
## Examples
### Medium and large display text

2
src/components/SkeletonPage/README.md
View File

@@ -54,6 +54,8 @@ Use placeholder content that will change when the page fully loads. This will co
<!-- end -->
---
## Examples
### Page with dynamic content

21
src/components/Spinner/README.md
View File

@@ -2,10 +2,17 @@
name: Spinner
category: Feedback indicators
releasedIn: 1.7.0
platforms:
- android
- ios
- web
keywords:
- spinner
- loader
- loading
- progress indicator
- android
- ios
---
# Spinner
@@ -24,6 +31,18 @@ Use to notify merchants that their requested action is being processed.
<Spinner size="large" color="teal" />
```
<!-- content-for: android -->
![Material design spinner for Android](components/Spinner/android/default.gif)
<!-- /content-for -->
<!-- content-for: ios -->
![Apple’s spinner for iOS](components/Spinner/ios/default.gif)
<!-- /content-for -->
---
## Best practices
@@ -31,9 +50,9 @@ Use to notify merchants that their requested action is being processed.
The spinner component should:
- Notify the merchant that their request has been received and the action will soon complete.
- Be used in conjunction with skeleton loading to represent non-typographic content. For example, line graphs on the Merchant analytics dashboard.
- Not be used to give feedback for an entire page load.
- White can only be used with small spinners on actionable components like buttons.
- On web, be used in conjunction with skeleton loading to represent non-typographic content. For example, line graphs on the Merchant analytics dashboard.
---

2
src/components/Stack/README.md
View File

@@ -41,6 +41,8 @@ Stacks should:
There are no content elements that are specific to stack.
---
## Examples
### Default behavior

2
src/components/Stepper/README.md
View File

@@ -57,6 +57,8 @@ Avoid abbreviating values (10k, 1m), instead, make the text smaller to fit the s
<!-- end -->
---
## Examples
### Default stepper

2
src/components/Subheading/README.md
View File

@@ -56,6 +56,8 @@ Subheadings should be:
<!-- end -->
---
## Examples
### Subheading in a card

2
src/components/Tabs/README.md
View File

@@ -60,6 +60,8 @@ And for the customers section, the tabs are:
Where possible, follow this pattern when writing tabs.
---
## Examples
### Default tabs

2
src/components/Tag/README.md
View File

@@ -29,6 +29,8 @@ Tags should:
Tags are either automatically generated or are created by merchants. There are no specific content guidelines for creating them.
---
## Examples
### Default tag

2
src/components/TextContainer/README.md
View File

@@ -25,6 +25,8 @@ The closer the spacing, the closer the relationship between content topics. The
Use tight spacing to relate content topics to each other
Use loose spacing to separate concepts that are independent of each other
---
## Examples
### Default text container

2
src/components/TextField/README.md
View File

@@ -156,6 +156,8 @@ You didn’t enter a store name.
<!-- end -->
---
## Examples
### Default text field

16
src/components/TextField/TextField.tsx
View File

@@ -7,7 +7,7 @@ import Labelled, {Action, helpTextID, labelID} from '../Labelled';
import Connected from '../Connected';
import {Resizer, Spinner} from './components';
import {Error} from '../../types';
import {Error, Keys} from '../../types';
import * as styles from './TextField.scss';
export type Type =
@@ -253,6 +253,7 @@ export default class TextField extends React.PureComponent<Props, State> {
placeholder,
onFocus,
onBlur,
onKeyPress: this.handleKeyPress,
style,
autoComplete: normalizeAutoComplete(autoComplete),
className: inputClassName,
@@ -345,6 +346,19 @@ export default class TextField extends React.PureComponent<Props, State> {
this.setState({height});
}
@autobind
private handleKeyPress(event: React.KeyboardEvent) {
const {key, which} = event;
const {type} = this.props;
const numbersSpec = /[\d.eE+-]$/;
if (type !== 'number' || which === Keys.ENTER || key.match(numbersSpec)) {
return;
}
event.preventDefault();
}
@autobind
private handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const {onChange} = this.props;

2
src/components/TextField/index.ts
View File

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

2
src/components/TextStyle/README.md
View File

@@ -34,6 +34,8 @@ Text style should be:
- Strong for input fields, or for a row total in a price table
- Paired with symbols, like an arrow or dollar sign, when using positive or negative styles
---
## Examples
### Subdued textstyle

2
src/components/Thumbnail/README.md
View File

@@ -37,6 +37,8 @@ For thumbnails, we recommend using a format that describes what will show in the
- `alt="Photo of {product}"`, e.g. "Photo of black t-shirt with cartoon tiger"
- An empty `alt=""` attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails
---
## Examples
### Default thumbnail

1
src/components/Toast/README.md
View File

@@ -4,7 +4,6 @@ category: Feedback indicators
platforms:
- android
- ios
- web
keywords:
- toast
- flash message

2
src/components/Tooltip/README.md
View File

@@ -58,6 +58,8 @@ To continue using Shopify, this amount must be paid immediately.
<!-- end -->
---
## Examples
### Default tooltip

2
src/components/VisuallyHidden/README.md
View File

@@ -39,6 +39,8 @@ Visually hidden should:
There are no content elements specific to this component. Follow any guidelines appropriate to the element being hidden.
---
## Examples
### Visually hidden heading

2
src/embedded/Page/README.md
View File

@@ -130,6 +130,8 @@ Add a menu item
<!-- end -->
---
## Examples
### Page with all header elements

1
src/icons/circle-information.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19 10c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9z" fill="#FFF"/><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2zm-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z" fill="currentColor"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 439 B

1
src/icons/index.ts
View File

@@ -20,6 +20,7 @@ export {default as circleChevronDown} from './circle-chevron-down.svg';
export {default as circleChevronLeft} from './circle-chevron-left.svg';
export {default as circleChevronRight} from './circle-chevron-right.svg';
export {default as circleChevronUp} from './circle-chevron-up.svg';
export {default as circleInformation} from './circle-information.svg';
export {default as circlePlus} from './circle-plus.svg';
export {default as circlePlusOutline} from './circle-plus-outline.svg';
export {default as conversation} from './conversation.svg';

5
tests/.eslintrc.js
View File

@@ -1,8 +1,5 @@
module.exports = {
extends: [
'plugin:shopify/esnext',
'plugin:shopify/node',
],
extends: ['plugin:shopify/esnext', 'plugin:shopify/node'],
env: {
jest: true,
},

12
tests/build.test.js
View File

@@ -79,7 +79,7 @@ describe('build', () => {
expect(fs.existsSync('./embedded.d.ts')).toBe(true);
});
it('replaces all occurrences of POLARIS_VERSION', async () => {
it('replaces all occurrences of POLARIS_VERSION', () => {
const files = glob.sync('./build/**/*.{js,scss,css}');
const total = files.reduce((acc, file) => {
const contents = fs.readFileSync(file, 'utf-8');
@@ -88,7 +88,7 @@ describe('build', () => {
expect(total).toBe(0);
});
it('features the version of Polaris in all compiled files', async () => {
it('features the version of Polaris in all compiled files', () => {
const files = glob.sync('./build/**/*.{js,scss,css}');
const total = files.reduce((acc, file) => {
const contents = fs.readFileSync(file, 'utf-8');
@@ -97,7 +97,7 @@ describe('build', () => {
expect(total).toBe(6);
});
it('features the version of Polaris in those specific files', async () => {
it('features the version of Polaris in those specific files', () => {
const globFiles = [
'embedded.js',
'polaris.css',
@@ -115,7 +115,7 @@ describe('build', () => {
});
describe('esnext', () => {
const STACK_CLASSNAME_MATCHER = /"Stack":\s*"([^"]*)"/;
const stackClassnameMatcher = /"Stack":\s*"([^"]*)"/;
it('facilitates production builds without typescript', () => {
expect(fs.existsSync('esnext/index.js')).toBe(true);
@@ -151,10 +151,10 @@ describe('build', () => {
it('uses the correct class names in the server and index builds', () => {
const indexStackClassname = fs
.readFileSync('esnext/index.js', 'utf8')
.match(STACK_CLASSNAME_MATCHER);
.match(stackClassnameMatcher);
const serverStackClassname = fs
.readFileSync('esnext/server.js', 'utf8')
.match(STACK_CLASSNAME_MATCHER);
.match(stackClassnameMatcher);
expect(indexStackClassname[1]).toBeTruthy();
expect(indexStackClassname[1]).toBe(serverStackClassname[1]);
expect(

2
tests/setup.ts
View File

@@ -11,7 +11,9 @@ const IGNORE_ERROR_REGEXES = [
/React\.createClass is deprecated and will be removed in version 16/,
];
// eslint-disable-next-line no-console
const originalConsoleError = console.error.bind(console);
// eslint-disable-next-line no-console
console.error = (...args: any[]) => {
const [firstArgument] = args;
if (

2
tophat/parseMarkdown.js
View File

@@ -21,7 +21,7 @@ function stripCodeBlock(block: string) {
function parseCodeExamples(data) {
const matter = grayMatter(data);
const introAndComponentSections = matter.content
.split(/(?=\n---\n|\n## Examples\n)/)
.split(/(\n---\n)/)
.map((content) => content.replace('---\n', '').trim())
.filter((content) => content !== '');
const [, ...componentSections] = introAndComponentSections;

14
tophat/tsconfig.json
View File

@@ -15,22 +15,12 @@
"noEmitHelpers": true,
"importHelpers": true,
"sourceMap": false,
"lib": [
"dom",
"es2015",
"es2016",
"es2017",
"dom.iterable",
"scripthost"
],
"lib": ["dom", "es2015", "es2016", "es2017", "dom.iterable", "scripthost"],
"resolveJsonModule": true,
"declaration": true,
"declarationDir": "types",
"paths": {
"@shopify/polaris": [
"../config/typescript",
"../src"
]
"@shopify/polaris": ["../config/typescript", "../src"]
}
}
}

15
tsconfig.json
View File

@@ -17,18 +17,7 @@
"noUnusedLocals": true,
"noEmitHelpers": true,
"importHelpers": true,
"lib": [
"dom",
"es2015",
"es2016",
"es2017",
"dom.iterable",
"scripthost"
]
"lib": ["dom", "es2015", "es2016", "es2017", "dom.iterable", "scripthost"]
},
"include": [
"./config/typescript/**/*",
"./src/**/*",
"./package.json"
]
"include": ["./config/typescript/**/*", "./src/**/*", "./package.json"]
}