Skip to content

Shopify/polaris

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

…7846)

### WHY are these changes introduced?

Some "quick wins" from looking at stylelint polaris errors in
polaris-react. I mostly just looked at `Unexpected unit`s and
`Unexpected hex`

### WHAT is this pull request doing?
Deleting some unused styles that were failures, replacing some values
with tokens, condensing some comments into the stylelint ignore context.

The visual changes I introduced are:
* `focus-ring` styles (made ring border radius 1px less)
* `TextField` placeholder text on error (was changing to a custom color
before)

focus ring before:
<img width="154" alt="Screenshot 2022-12-07 at 10 54 07 AM"
src="https://user-images.githubusercontent.com/20652326/206228531-ab341da2-5ab7-4d4a-8512-6c9a029c4224.png">

focus ring after:
<img width="148" alt="Screenshot 2022-12-07 at 10 54 00 AM"
src="https://user-images.githubusercontent.com/20652326/206228613-dfbbd382-eb4c-48c6-81c0-19190e524c1c.png">

`TextField` placeholder error text (fyi it _changed_ to this colour
after an error):
<img width="710" alt="Screenshot 2022-12-07 at 10 21 47 AM"
src="https://user-images.githubusercontent.com/20652326/206228741-d5e13688-7ec7-4e0f-a30d-19cb24c8ea43.png">

### How to 🎩
* `TextField` error state placeholder text shouldn't change colour now
(no story)
* [`focus-ring` should be slightly less round now
(1px)](https://5d559397bae39100201eedc1-jkvudbyehf.chromatic.com/?path=/story/all-components-actionlist--in-a-popover)
* [`DataTable` with sticky header should look the same
](https://5d559397bae39100201eedc1-jkvudbyehf.chromatic.com/?path=/story/all-components-datatable--with-sticky-header-enabled)
* [`IndexTable` with sticky column should look the
same](https://5d559397bae39100201eedc1-jkvudbyehf.chromatic.com/?path=/story/all-components-indextable--with-sticky-last-column)
* [`Scrollable` focus should look the
same](https://5d559397bae39100201eedc1-jkvudbyehf.chromatic.com/?path=/story/all-components-scrollable--default)
* icon only `Button` should look the same (no story)
65131df

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Feb 15, 2022
May 24, 2022

Polaris

Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.

storybook npm version CI PRs Welcome

Status Owner Help
Active @shopify/polaris New issue

About this repo

The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── polaris-for-vscode          # VS Code extension for Polaris
├── polaris-icons               # Icons for Polaris
├── polaris-react               # Components for @shopify/polaris package
├── polaris-tokens              # Design tokens for Polaris
├── polaris.shopify.com         # Documentation website
└── stylelint-polaris           # Rules for custom property usage and mainline coverage

Commands

Install dependencies and build workspaces

yarn && yarn build

Run a command

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

Command Runs
yarn turbo run dev --filter=@shopify/polaris Open the react component storybook
yarn turbo run dev --filter=polaris.shopify.com Open polaris.shopify.com NextJS site

All workspaces

Run commands across all workspaces. This uses turbo run <command>.

Command Runs
yarn changeset Adds a new changelog entry
yarn lint Lints all workspaces
yarn test Tests all workspaces
yarn type-check Build types and check for type errors
yarn clean Remove generated files
yarn format Format files with prettier

Contribute to this repo

Pull requests are welcome. See the contribution guidelines for more information.

Licenses

Source code is under a custom license based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.

All icons and images are licensed under the Polaris Design Guidelines License Agreement