diff --git a/.changeset/chilly-grapes-enjoy.md b/.changeset/chilly-grapes-enjoy.md deleted file mode 100644 index 294680b7d0e..00000000000 --- a/.changeset/chilly-grapes-enjoy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed `shape` prop on `Avatar` component diff --git a/.changeset/config.json b/.changeset/config.json index 50cac073a99..804fde4ac82 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -7,11 +7,7 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": [ - "@shopify/polaris-migrator", - "polaris.shopify.com", - "polaris-for-vscode" - ], + "ignore": [], "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { "updateInternalDependents": "always" } diff --git a/.changeset/dirty-monkeys-hug.md b/.changeset/dirty-monkeys-hug.md new file mode 100644 index 00000000000..cf81c7d37fd --- /dev/null +++ b/.changeset/dirty-monkeys-hug.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated Design resources links to the UI Kit community kits on the Getting started page diff --git a/.changeset/dirty-pugs-retire.md b/.changeset/dirty-pugs-retire.md deleted file mode 100644 index f8f4936cd95..00000000000 --- a/.changeset/dirty-pugs-retire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -- Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. diff --git a/.changeset/dry-dancers-brush.md b/.changeset/dry-dancers-brush.md deleted file mode 100644 index 839fca834ec..00000000000 --- a/.changeset/dry-dancers-brush.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Migrated `shadow` custom properties from v11 to v12 diff --git a/.changeset/dull-pans-give.md b/.changeset/dull-pans-give.md deleted file mode 100644 index 3a8d9b98dfe..00000000000 --- a/.changeset/dull-pans-give.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -Removed unused disabled states in `FilterPill` diff --git a/.changeset/empty-baboons-rule.md b/.changeset/empty-baboons-rule.md deleted file mode 100644 index eb7c2328ea0..00000000000 --- a/.changeset/empty-baboons-rule.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Migrated `font` custom properties from v11 to v12 diff --git a/.changeset/fair-rocks-occur.md b/.changeset/fair-rocks-occur.md deleted file mode 100644 index f9ec8d60f0c..00000000000 --- a/.changeset/fair-rocks-occur.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris-tokens': major ---- - -Updated `shadow` token values diff --git a/.changeset/fair-walls-sparkle.md b/.changeset/fair-walls-sparkle.md deleted file mode 100644 index c03aea0b53d..00000000000 --- a/.changeset/fair-walls-sparkle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -Executing `useBreakpoints` isormophically no longer triggers a Hydration mismatch error or rendering bugs. diff --git a/.changeset/fast-suits-jog.md b/.changeset/fast-suits-jog.md deleted file mode 100644 index debf20efd5f..00000000000 --- a/.changeset/fast-suits-jog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Changed `spacing` prop to `gap` on `List` and `DescriptionList` diff --git a/.changeset/few-starfishes-notice.md b/.changeset/few-starfishes-notice.md deleted file mode 100644 index 2e0ae954f55..00000000000 --- a/.changeset/few-starfishes-notice.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@shopify/polaris': major ---- - -- Migrated `border` custom properties from v11 to v12 -- Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type -- Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components diff --git a/.changeset/fifty-wombats-battle.md b/.changeset/fifty-wombats-battle.md deleted file mode 100644 index 99be678537f..00000000000 --- a/.changeset/fifty-wombats-battle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed deprecated `disable1Password` prop from `TextField`. diff --git a/.changeset/five-cooks-fly.md b/.changeset/five-cooks-fly.md deleted file mode 100644 index 81cf0e9d70f..00000000000 --- a/.changeset/five-cooks-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': minor ---- - -Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens diff --git a/.changeset/fuzzy-coats-study.md b/.changeset/fuzzy-coats-study.md deleted file mode 100644 index 9972090ddb6..00000000000 --- a/.changeset/fuzzy-coats-study.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Replaced `segmented` prop with `variant` in `ButtonGroup`. -Replaced `spacing` prop with `gap` in `ButtonGroup`. diff --git a/.changeset/fuzzy-pears-jog.md b/.changeset/fuzzy-pears-jog.md deleted file mode 100644 index 3679430773a..00000000000 --- a/.changeset/fuzzy-pears-jog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Updated `borderRadius` props on `Box` to match logical property naming conventions. diff --git a/.changeset/gentle-suns-relax.md b/.changeset/gentle-suns-relax.md deleted file mode 100644 index 8feb0399b49..00000000000 --- a/.changeset/gentle-suns-relax.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris-tokens': major ---- - -Deprecated a collection of types, utils, and JSON exports diff --git a/.changeset/healthy-boxes-wave.md b/.changeset/healthy-boxes-wave.md deleted file mode 100644 index 804d5c3a2ba..00000000000 --- a/.changeset/healthy-boxes-wave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Renamed `color` prop to `tone` for `ProgressBar` component diff --git a/.changeset/honest-stingrays-act.md b/.changeset/honest-stingrays-act.md deleted file mode 100644 index 1299fa49fe0..00000000000 --- a/.changeset/honest-stingrays-act.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed `connectedDisclosure` prop from `Button` diff --git a/.changeset/hot-apples-press.md b/.changeset/hot-apples-press.md deleted file mode 100644 index 007c10678de..00000000000 --- a/.changeset/hot-apples-press.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Renamed `size` prop values for the `Avatar` component. See the following table for the new prop mappings. - -| Before | After | -| ------------------------- | ----------- | -| `size="extraSmall"` | `size="xs"` | -| `size="small"` | `size="sm"` | -| `size="medium"` | `size="md"` | -| `size="large"` | `size="lg"` | -| `size="xl-experimental"` | `size="xl"` | -| `size="2xl-experimental"` | `size="xl"` | diff --git a/.changeset/kind-phones-yell.md b/.changeset/kind-phones-yell.md deleted file mode 100644 index d8847def355..00000000000 --- a/.changeset/kind-phones-yell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed `divider` prop from `Page` component diff --git a/.changeset/lemon-bees-confess.md b/.changeset/lemon-bees-confess.md deleted file mode 100644 index fd5c1e5dd56..00000000000 --- a/.changeset/lemon-bees-confess.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Migrated `space` custom properties from v11 to v12 -Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type -Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component diff --git a/.changeset/light-gorillas-smell.md b/.changeset/light-gorillas-smell.md deleted file mode 100644 index e1f35db6dab..00000000000 --- a/.changeset/light-gorillas-smell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed deprecated `additionalNavigation` prop on Page Header diff --git a/.changeset/light-seahorses-sit.md b/.changeset/light-seahorses-sit.md deleted file mode 100644 index 7921fa33dd7..00000000000 --- a/.changeset/light-seahorses-sit.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -Fixed broken focus ring styles on `ResourceItem` component diff --git a/.changeset/loud-hounds-fetch.md b/.changeset/loud-hounds-fetch.md deleted file mode 100644 index 4c01e5aaa66..00000000000 --- a/.changeset/loud-hounds-fetch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Renamed `destructive` prop to `tone` for `Button` component diff --git a/.changeset/mean-bananas-warn.md b/.changeset/mean-bananas-warn.md deleted file mode 100644 index 296c0568bff..00000000000 --- a/.changeset/mean-bananas-warn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -Disabled `calt` font ligatures to prevent unwanted stylizing of letters into symbols diff --git a/.changeset/moody-terms-provide.md b/.changeset/moody-terms-provide.md deleted file mode 100644 index c7e199dedcf..00000000000 --- a/.changeset/moody-terms-provide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Replaced `small`, `large`, and `fullScreen` props with `size` prop diff --git a/.changeset/nasty-chicken-occur.md b/.changeset/nasty-chicken-occur.md new file mode 100644 index 00000000000..7ca93d9de34 --- /dev/null +++ b/.changeset/nasty-chicken-occur.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated the v12 what's new post to include Figma UI kits diff --git a/.changeset/nice-zoos-vanish.md b/.changeset/nice-zoos-vanish.md deleted file mode 100644 index e44e0014228..00000000000 --- a/.changeset/nice-zoos-vanish.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Enabled the Summer Editions 2023 feature flag by default diff --git a/.changeset/olive-clouds-pretend.md b/.changeset/olive-clouds-pretend.md deleted file mode 100644 index f5ad710f668..00000000000 --- a/.changeset/olive-clouds-pretend.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Changed `status` prop on `Banner` to `tone` diff --git a/.changeset/poor-llamas-taste.md b/.changeset/poor-llamas-taste.md new file mode 100644 index 00000000000..639c688bb13 --- /dev/null +++ b/.changeset/poor-llamas-taste.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Updated the CLI to accept a file list via `stdin` diff --git a/.changeset/popular-pumas-sin.md b/.changeset/popular-pumas-sin.md deleted file mode 100644 index 2de262df8dd..00000000000 --- a/.changeset/popular-pumas-sin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -Ensure `Avatar` has no background color if an source prop is passed in to allow for transparent images diff --git a/.changeset/pre.json b/.changeset/pre.json deleted file mode 100644 index d009ebff40f..00000000000 --- a/.changeset/pre.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "mode": "pre", - "tag": "beta", - "initialVersions": { - "@shopify/polaris-cli": "0.2.25", - "@shopify/polaris-codemods": "0.1.11", - "polaris-for-vscode": "0.7.0", - "@shopify/polaris-icons": "7.7.0", - "@shopify/polaris-migrator": "0.19.8", - "@shopify/polaris": "11.9.1", - "@shopify/polaris-tokens": "7.5.2", - "polaris.shopify.com": "0.56.3", - "@shopify/stylelint-polaris": "13.0.8" - }, - "changesets": [ - "chilly-grapes-enjoy", - "dirty-pugs-retire", - "dry-dancers-brush", - "dull-pans-give", - "empty-baboons-rule", - "fair-rocks-occur", - "fast-suits-jog", - "few-starfishes-notice", - "fifty-wombats-battle", - "five-cooks-fly", - "fresh-ravens-jam", - "fuzzy-coats-study", - "fuzzy-pears-jog", - "gentle-suns-relax", - "healthy-boxes-wave", - "honest-stingrays-act", - "hot-apples-press", - "hungry-bikes-impress", - "kind-phones-yell", - "large-hats-vanish", - "lemon-bees-confess", - "light-gorillas-smell", - "light-seahorses-sit", - "loud-hounds-fetch", - "moody-terms-provide", - "nice-zoos-vanish", - "olive-clouds-pretend", - "popular-pumas-sin", - "proud-parrots-yawn", - "quick-icons-joke", - "rotten-comics-think", - "shiny-feet-marry", - "short-kids-buy", - "short-llamas-hope", - "short-schools-run", - "silent-brooms-confess", - "silent-guests-occur", - "silly-ligers-heal", - "slow-experts-flash", - "spicy-pugs-begin", - "tall-chicken-repeat", - "tiny-avocados-enjoy", - "twenty-bags-mate", - "wild-dodos-refuse", - "wise-pianos-unite" - ] -} diff --git a/.changeset/proud-parrots-yawn.md b/.changeset/proud-parrots-yawn.md deleted file mode 100644 index afeb2a042aa..00000000000 --- a/.changeset/proud-parrots-yawn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Changed `color` prop on `Icon` to `tone` diff --git a/.changeset/quick-icons-joke.md b/.changeset/quick-icons-joke.md deleted file mode 100644 index 9e2f4658e8a..00000000000 --- a/.changeset/quick-icons-joke.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/polaris': major -'@shopify/polaris-tokens': minor ---- - -Added `border-radius` semantic layer diff --git a/.changeset/rotten-comics-think.md b/.changeset/rotten-comics-think.md deleted file mode 100644 index 29e216b87a8..00000000000 --- a/.changeset/rotten-comics-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Replaced `borderless` prop with `variant` on `TextField` diff --git a/.changeset/short-kids-buy.md b/.changeset/short-kids-buy.md deleted file mode 100644 index 49e447128ff..00000000000 --- a/.changeset/short-kids-buy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed `polarisSummerEditions2023` feature flag from `AppProvider` context diff --git a/.changeset/short-schools-run.md b/.changeset/short-schools-run.md deleted file mode 100644 index 666f27f512c..00000000000 --- a/.changeset/short-schools-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris-tokens': minor ---- - -Renamed `ThemeVariant` to `Theme` and exposed `Theme` type diff --git a/.changeset/silent-brooms-confess.md b/.changeset/silent-brooms-confess.md deleted file mode 100644 index 063bf8f1e1d..00000000000 --- a/.changeset/silent-brooms-confess.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Consolidated boolean `Button` props into `variant` prop diff --git a/.changeset/silly-ligers-heal.md b/.changeset/silly-ligers-heal.md deleted file mode 100644 index 0436fd5230d..00000000000 --- a/.changeset/silly-ligers-heal.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant` diff --git a/.changeset/slow-experts-flash.md b/.changeset/slow-experts-flash.md deleted file mode 100644 index b88224d44f0..00000000000 --- a/.changeset/slow-experts-flash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Renamed `color` prop on Text to `tone` diff --git a/.changeset/spicy-pugs-begin.md b/.changeset/spicy-pugs-begin.md deleted file mode 100644 index 17bfdc6da76..00000000000 --- a/.changeset/spicy-pugs-begin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -[IndexFilters] Remove IndexFiltersManager in AppProvider diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md deleted file mode 100644 index 256cfd2f21a..00000000000 --- a/.changeset/tall-chicken-repeat.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed Summer Editions experimental styles and code for the following components: `AppProvider`, `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Badge`, `Banner`, `Breadcrumbs`, `BulkActions`, `Button`, `ButtonGroup`, `CalloutCard`, `Card`, `CheckableButton`, `Checkbox`, `Choice`, `Connected`, `DataTable`, `DatePicker`, `DropZone`, `EmptyState`, `Filters`, `FormLayout`, `Frame`, `FullscreenBar`, `IndexFilters`, `IndexTable`, `InlineError`, `KeyboardKey`, `Labelled`, `Layout`, `LegacyCard`, `LegacyFilters`, `LegacyTabs`, `Link`, `List`, `Listbox`, `MediaCard`, `Modal`, `Navigation`, `OptionList`, `Page`, `PageActions`, `Pagination`, `Popover`, `ProgressBar`, `RadioButton`, `ResourceItem`, `ResourceList`, `Select`, `SettingAction`, `ShadowBevel`, `SkeletonPage`, `SkeletonThumbnail`, `Spinner`, `Tabs`, `Tag`, `Text`, `TextField`, `Thumbnail`, `TooltipOverlay`, `TopBar`, and `VideoThumbnail` diff --git a/.changeset/tiny-avocados-enjoy.md b/.changeset/tiny-avocados-enjoy.md deleted file mode 100644 index bc757712840..00000000000 --- a/.changeset/tiny-avocados-enjoy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` diff --git a/.changeset/twenty-bags-mate.md b/.changeset/twenty-bags-mate.md deleted file mode 100644 index e81f7c1408b..00000000000 --- a/.changeset/twenty-bags-mate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris-tokens': major ---- - -Updated `font-size` and `font-weight` token values diff --git a/.changeset/wild-dodos-refuse.md b/.changeset/wild-dodos-refuse.md deleted file mode 100644 index c8c67c5ece6..00000000000 --- a/.changeset/wild-dodos-refuse.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': patch ---- - -`IndexFilter` remove custom `FilterButton` in favor of directly invoking the Polaris `Button` component. diff --git a/.changeset/wise-pianos-unite.md b/.changeset/wise-pianos-unite.md deleted file mode 100644 index 9ea81b0c004..00000000000 --- a/.changeset/wise-pianos-unite.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/polaris': major ---- - -Removed `optionRole` prop from `OptionList` component diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 670666d4c8b..cbbdb83ebfd 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,7 +4,6 @@ on: push: branches: - main - - next concurrency: ${{ github.workflow }}-${{ github.ref }} diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json index 806efc5b774..96cdb8027eb 100644 --- a/polaris-for-vscode/package.json +++ b/polaris-for-vscode/package.json @@ -43,7 +43,7 @@ "vscode-languageserver-textdocument": "^1.0.4" }, "devDependencies": { - "@shopify/polaris-tokens": "^8.0.0-beta.1", + "@shopify/polaris-tokens": "^8.0.0", "@types/node": "14.x", "@types/vscode": "^1.64.0", "@vscode/test-electron": "^2.1.2", diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json index 2233ebde136..5902f4012f0 100644 --- a/polaris-migrator/package.json +++ b/polaris-migrator/package.json @@ -36,8 +36,8 @@ "generate": "plop" }, "dependencies": { - "@shopify/polaris-tokens": "^8.0.0-beta.1", - "@shopify/stylelint-polaris": "^14.1.2-beta.1", + "@shopify/polaris-tokens": "^8.0.0", + "@shopify/stylelint-polaris": "^15.0.0", "chalk": "^4.1.0", "globby": "11.0.1", "is-git-clean": "^1.1.0", @@ -55,7 +55,7 @@ "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.3.0", - "@shopify/polaris": "^12.0.0-beta.2", + "@shopify/polaris": "^12.0.0", "plop": "^3.1.1", "plop-dir": "^0.0.5", "prettier": "^2.7.1", diff --git a/polaris-migrator/src/cli.ts b/polaris-migrator/src/cli.ts index fb113eb1627..e6554478807 100644 --- a/polaris-migrator/src/cli.ts +++ b/polaris-migrator/src/cli.ts @@ -57,6 +57,11 @@ export const cliConfig = createCLIConfig({ description: 'Bypass Git safety checks and forcibly run migrations', type: 'boolean', }, + stdin: { + alias: 's', + type: 'boolean', + description: 'If true, each line of the standard input is used as a path', + }, }, }); @@ -89,5 +94,23 @@ const {input, flags} = meow({ }); export async function run() { - await migrate(input[0], input[1], flags); + let files: string | string[]; + + if (flags.stdin) { + let buffer = ''; + + for await (const chunk of process.stdin) { + buffer += chunk.toString(); + } + + files = buffer.split('\n').filter(Boolean); + + if (files.length === 0) { + throw new Error('No files provided via stdin'); + } + } else { + files = input[1]; + } + + await migrate(input[0], files, flags); } diff --git a/polaris-migrator/src/migrate.ts b/polaris-migrator/src/migrate.ts index b52629311de..1970433bfd1 100644 --- a/polaris-migrator/src/migrate.ts +++ b/polaris-migrator/src/migrate.ts @@ -11,11 +11,12 @@ export interface MigrateOptions { dry?: boolean; print?: boolean; force?: boolean; + stdin?: boolean; } export async function migrate( migration: string, - files: string, + files: string | string[], options: MigrateOptions = {}, ) { const migrationFile = path.join( @@ -28,7 +29,9 @@ export async function migrate( throw new Error(`No migration found for ${migration}`); } - if (!files) throw new Error(`No path provided for migration`); + if (!options.stdin && !files) { + throw new Error(`No path provided for migration`); + } if (!options.dry) { checkGitStatus(options.force); diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md index a739c3e530f..d2fcced3789 100644 --- a/polaris-react/CHANGELOG.md +++ b/polaris-react/CHANGELOG.md @@ -1,5 +1,104 @@ # Changelog +## 12.0.0 + +### Major Changes + +- [#10122](https://github.com/Shopify/polaris/pull/10122) [`43b42aefed`](https://github.com/Shopify/polaris/commit/43b42aefedcfcfa1375c182ac541fd58822ecd01) Thanks [@aveline](https://github.com/aveline)! - Removed `shape` prop on `Avatar` component + +* [#10705](https://github.com/Shopify/polaris/pull/10705) [`c7c2312f7`](https://github.com/Shopify/polaris/commit/c7c2312f731b624ff6a50beda7b00c9b971091d2) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. + +- [#10778](https://github.com/Shopify/polaris/pull/10778) [`b126f64e6`](https://github.com/Shopify/polaris/commit/b126f64e6380064ea828837ea0903b5ee4c2f6c4) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 + +* [#10762](https://github.com/Shopify/polaris/pull/10762) [`1ef71164c`](https://github.com/Shopify/polaris/commit/1ef71164c2ad77f05fb7608c6e86bd79308602fa) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 + +- [#10270](https://github.com/Shopify/polaris/pull/10270) [`b9bcaef414`](https://github.com/Shopify/polaris/commit/b9bcaef414eb841241655f49d93f38cf51bd3f78) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `spacing` prop to `gap` on `List` and `DescriptionList` + +* [#10741](https://github.com/Shopify/polaris/pull/10741) [`2c2bb0e09`](https://github.com/Shopify/polaris/commit/2c2bb0e092cbb41a2844e24006ff2460b189cc01) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 + - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type + - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components + +- [#10744](https://github.com/Shopify/polaris/pull/10744) [`a4f5e7df3`](https://github.com/Shopify/polaris/commit/a4f5e7df3f71fdcbb9f27a34c6e8302bd762ff53) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. + +* [#9997](https://github.com/Shopify/polaris/pull/9997) [`b59fc9e272`](https://github.com/Shopify/polaris/commit/b59fc9e272963fcc35f98b02f3c658b51a5ec4a5) Thanks [@yurm04](https://github.com/yurm04)! - Replaced `segmented` prop with `variant` in `ButtonGroup`. + Replaced `spacing` prop with `gap` in `ButtonGroup`. + +- [#10100](https://github.com/Shopify/polaris/pull/10100) [`4c7b2d4858`](https://github.com/Shopify/polaris/commit/4c7b2d48585782abb7d20e5f01809102141037e5) Thanks [@kyledurand](https://github.com/kyledurand)! - Updated `borderRadius` props on `Box` to match logical property naming conventions. + +* [#10051](https://github.com/Shopify/polaris/pull/10051) [`69edd97ceb`](https://github.com/Shopify/polaris/commit/69edd97cebdd3de3769dadb9ab41e465ca071739) Thanks [@aveline](https://github.com/aveline)! - Renamed `color` prop to `tone` for `ProgressBar` component + +- [#10182](https://github.com/Shopify/polaris/pull/10182) [`e814c0ee1a`](https://github.com/Shopify/polaris/commit/e814c0ee1aec24a30048d1aefb47b38fd45d0692) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `connectedDisclosure` prop from `Button` + +* [#10283](https://github.com/Shopify/polaris/pull/10283) [`42ee9f407d`](https://github.com/Shopify/polaris/commit/42ee9f407d9f75ab444bd1c45669bc91e8bbe3ca) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Renamed `size` prop values for the `Avatar` component. See the following table for the new prop mappings. + + | Before | After | + | ------------------------- | ----------- | + | `size="extraSmall"` | `size="xs"` | + | `size="small"` | `size="sm"` | + | `size="medium"` | `size="md"` | + | `size="large"` | `size="lg"` | + | `size="xl-experimental"` | `size="xl"` | + | `size="2xl-experimental"` | `size="xl"` | + +- [#10232](https://github.com/Shopify/polaris/pull/10232) [`eb2c2035ca`](https://github.com/Shopify/polaris/commit/eb2c2035cabd6ccbd0fd773f98701633eff618a7) Thanks [@laurkim](https://github.com/laurkim)! - Removed `divider` prop from `Page` component + +* [#10727](https://github.com/Shopify/polaris/pull/10727) [`179b481d7`](https://github.com/Shopify/polaris/commit/179b481d745c9e69880bd31cca409071ddf1845d) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 + Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type + Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component + +- [#10271](https://github.com/Shopify/polaris/pull/10271) [`1125087b59`](https://github.com/Shopify/polaris/commit/1125087b5987df30e5b1d6962cf32c01fc2f2bf8) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed deprecated `additionalNavigation` prop on Page Header + +* [#10164](https://github.com/Shopify/polaris/pull/10164) [`af9f264b9a`](https://github.com/Shopify/polaris/commit/af9f264b9a15a91901e42f6ff2e8e8490e755e03) Thanks [@aveline](https://github.com/aveline)! - Renamed `destructive` prop to `tone` for `Button` component + +- [#10261](https://github.com/Shopify/polaris/pull/10261) [`abeef7ad05`](https://github.com/Shopify/polaris/commit/abeef7ad0563878da797fdbcc1ee1262d4fe4c7e) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced `small`, `large`, and `fullScreen` props with `size` prop + +* [#10060](https://github.com/Shopify/polaris/pull/10060) [`84e66a3ec4`](https://github.com/Shopify/polaris/commit/84e66a3ec484e335afb6d4f3e9ae5b9772244ecd) Thanks [@sophschneider](https://github.com/sophschneider)! - Enabled the Summer Editions 2023 feature flag by default + +- [#10206](https://github.com/Shopify/polaris/pull/10206) [`dad09bde96`](https://github.com/Shopify/polaris/commit/dad09bde960bcb8a00a5ed5916201dbb1974bf7f) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `status` prop on `Banner` to `tone` + +* [#10220](https://github.com/Shopify/polaris/pull/10220) [`2b0cdb2fbf`](https://github.com/Shopify/polaris/commit/2b0cdb2fbff2d3f6c8e9b31526799085617301db) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `color` prop on `Icon` to `tone` + +- [#10669](https://github.com/Shopify/polaris/pull/10669) [`794d1f5e4`](https://github.com/Shopify/polaris/commit/794d1f5e4b79a2721594979d31972cd7534d6174) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer + +* [#10036](https://github.com/Shopify/polaris/pull/10036) [`359614cf83`](https://github.com/Shopify/polaris/commit/359614cf835973ae742082ff6fdc17ff37c27fc6) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced `borderless` prop with `variant` on `TextField` + +- [#10635](https://github.com/Shopify/polaris/pull/10635) [`340e36e7d`](https://github.com/Shopify/polaris/commit/340e36e7dfe4bcfdafce1c169c896242832dec3f) Thanks [@laurkim](https://github.com/laurkim)! - Removed `polarisSummerEditions2023` feature flag from `AppProvider` context + +* [#10090](https://github.com/Shopify/polaris/pull/10090) [`4caed28a77`](https://github.com/Shopify/polaris/commit/4caed28a77c7c5b4cf78dc8071631e7054173740) Thanks [@aveline](https://github.com/aveline)! - Consolidated boolean `Button` props into `variant` prop + +- [#10041](https://github.com/Shopify/polaris/pull/10041) [`8f927f7622`](https://github.com/Shopify/polaris/commit/8f927f7622d15554c1ec3c02cdb1b381be636655) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant` + +* [#10266](https://github.com/Shopify/polaris/pull/10266) [`22a51eae2b`](https://github.com/Shopify/polaris/commit/22a51eae2bf375cecf6442ba2759ccf9d73b0bf6) Thanks [@kyledurand](https://github.com/kyledurand)! - Renamed `color` prop on Text to `tone` + +- [#10745](https://github.com/Shopify/polaris/pull/10745) [`a4205eee1`](https://github.com/Shopify/polaris/commit/a4205eee13ca9a4658f58a2c643ddcbb49956893) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider + +* [#10060](https://github.com/Shopify/polaris/pull/10060) [`66f5c8df3e`](https://github.com/Shopify/polaris/commit/66f5c8df3e068c5cdc60a559e615f9375dbe537d) Thanks [@sophschneider](https://github.com/sophschneider)! - Removed Summer Editions experimental styles and code for the following components: `AppProvider`, `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Badge`, `Banner`, `Breadcrumbs`, `BulkActions`, `Button`, `ButtonGroup`, `CalloutCard`, `Card`, `CheckableButton`, `Checkbox`, `Choice`, `Connected`, `DataTable`, `DatePicker`, `DropZone`, `EmptyState`, `Filters`, `FormLayout`, `Frame`, `FullscreenBar`, `IndexFilters`, `IndexTable`, `InlineError`, `KeyboardKey`, `Labelled`, `Layout`, `LegacyCard`, `LegacyFilters`, `LegacyTabs`, `Link`, `List`, `Listbox`, `MediaCard`, `Modal`, `Navigation`, `OptionList`, `Page`, `PageActions`, `Pagination`, `Popover`, `ProgressBar`, `RadioButton`, `ResourceItem`, `ResourceList`, `Select`, `SettingAction`, `ShadowBevel`, `SkeletonPage`, `SkeletonThumbnail`, `Spinner`, `Tabs`, `Tag`, `Text`, `TextField`, `Thumbnail`, `TooltipOverlay`, `TopBar`, and `VideoThumbnail` + +- [#10773](https://github.com/Shopify/polaris/pull/10773) [`f6bc29ade`](https://github.com/Shopify/polaris/commit/f6bc29ade47b11f4bd21aa4b6b604b6ae7391044) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` + +* [#10232](https://github.com/Shopify/polaris/pull/10232) [`eb2c2035ca`](https://github.com/Shopify/polaris/commit/eb2c2035cabd6ccbd0fd773f98701633eff618a7) Thanks [@laurkim](https://github.com/laurkim)! - Removed `optionRole` prop from `OptionList` component + +### Minor Changes + +- [#10722](https://github.com/Shopify/polaris/pull/10722) [`14a94967d`](https://github.com/Shopify/polaris/commit/14a94967da24697830780a4978def80f98823f8c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens + +### Patch Changes + +- [#10228](https://github.com/Shopify/polaris/pull/10228) [`e18ca907ec`](https://github.com/Shopify/polaris/commit/e18ca907ec059916550b22b84ff76c4ae84d0e0c) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Removed unused disabled states in `FilterPill` + +* [#10918](https://github.com/Shopify/polaris/pull/10918) [`aaf61fe6a`](https://github.com/Shopify/polaris/commit/aaf61fe6a9bf48e284285c3320edf213d95b2263) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Executing `useBreakpoints` isormophically no longer triggers a Hydration mismatch error or rendering bugs. + +- [#10268](https://github.com/Shopify/polaris/pull/10268) [`dbe3d9ecee`](https://github.com/Shopify/polaris/commit/dbe3d9ecee181d0e03d0efe0ce4f0b0012fd95c3) Thanks [@laurkim](https://github.com/laurkim)! - Fixed broken focus ring styles on `ResourceItem` component + +* [#10871](https://github.com/Shopify/polaris/pull/10871) [`77744cbf0`](https://github.com/Shopify/polaris/commit/77744cbf0f6e44f99425bd395ef2c7fb5e7b917b) Thanks [@chloerice](https://github.com/chloerice)! - Disabled `calt` font ligatures to prevent unwanted stylizing of letters into symbols + +- [#10238](https://github.com/Shopify/polaris/pull/10238) [`b17d23d69d`](https://github.com/Shopify/polaris/commit/b17d23d69d6a77326fb6e43019691384ddf8663f) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Ensure `Avatar` has no background color if an source prop is passed in to allow for transparent images + +* [#10230](https://github.com/Shopify/polaris/pull/10230) [`a573e55d04`](https://github.com/Shopify/polaris/commit/a573e55d0492f28547ea1d964aa6c0cfb76488b5) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - `IndexFilter` remove custom `FilterButton` in favor of directly invoking the Polaris `Button` component. + +* Updated dependencies [[`2a467249f`](https://github.com/Shopify/polaris/commit/2a467249f3a198dc252eba53df9fecc7bf6572dd), [`2cdc59f88`](https://github.com/Shopify/polaris/commit/2cdc59f8823a6529ebb6150c316934633f86b28c), [`794d1f5e4`](https://github.com/Shopify/polaris/commit/794d1f5e4b79a2721594979d31972cd7534d6174), [`86d4040c05`](https://github.com/Shopify/polaris/commit/86d4040c052a0dba0cb6f0d6e0f6fb8faf14c532), [`08aaf11ec`](https://github.com/Shopify/polaris/commit/08aaf11ec59680155476a20036a672795c2bad47)]: + - @shopify/polaris-tokens@8.0.0 + ## 12.0.0-beta.2 ### Major Changes @@ -108,6 +207,7 @@ * Updated dependencies [[`86d4040c0`](https://github.com/Shopify/polaris/commit/86d4040c052a0dba0cb6f0d6e0f6fb8faf14c532)]: - @shopify/polaris-tokens@7.13.0-beta.0 + ## 11.26.0 ### Minor Changes diff --git a/polaris-react/README.md b/polaris-react/README.md index 43ae5720547..024f6e16711 100644 --- a/polaris-react/README.md +++ b/polaris-react/README.md @@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into ```html ``` @@ -84,7 +84,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi ```html ``` diff --git a/polaris-react/package.json b/polaris-react/package.json index 7415352e8da..8476087e46f 100644 --- a/polaris-react/package.json +++ b/polaris-react/package.json @@ -1,7 +1,7 @@ { "name": "@shopify/polaris", "description": "Shopify’s admin product component library", - "version": "12.0.0-beta.2", + "version": "12.0.0", "private": false, "license": "SEE LICENSE IN LICENSE.md", "author": "Shopify ", @@ -57,7 +57,7 @@ }, "dependencies": { "@shopify/polaris-icons": "^7.9.0", - "@shopify/polaris-tokens": "^8.0.0-beta.1", + "@shopify/polaris-tokens": "^8.0.0", "@types/react": "*", "@types/react-dom": "*", "@types/react-transition-group": "^4.4.2", diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.tsx index 8545824b47c..107e5dc60d2 100644 --- a/polaris-react/src/components/SettingToggle/SettingToggle.tsx +++ b/polaris-react/src/components/SettingToggle/SettingToggle.tsx @@ -16,7 +16,7 @@ export interface SettingToggleProps { } /** - * @deprecated The SettingToggle component will be removed in v12.0.0. + * @deprecated The SettingToggle component will be removed in v12 * See the "With primitive components" example to learn how to compose * setting toggles with layout and typography primitives. * https://polaris.shopify.com/components/deprecated/setting-toggle diff --git a/polaris-tokens/CHANGELOG.md b/polaris-tokens/CHANGELOG.md index e91d2b6f217..a3d778fd393 100644 --- a/polaris-tokens/CHANGELOG.md +++ b/polaris-tokens/CHANGELOG.md @@ -1,5 +1,21 @@ # Changelog +## 8.0.0 + +### Major Changes + +- [#10760](https://github.com/Shopify/polaris/pull/10760) [`2a467249f`](https://github.com/Shopify/polaris/commit/2a467249f3a198dc252eba53df9fecc7bf6572dd) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values + +* [#10801](https://github.com/Shopify/polaris/pull/10801) [`2cdc59f88`](https://github.com/Shopify/polaris/commit/2cdc59f8823a6529ebb6150c316934633f86b28c) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports + +- [#10673](https://github.com/Shopify/polaris/pull/10673) [`08aaf11ec`](https://github.com/Shopify/polaris/commit/08aaf11ec59680155476a20036a672795c2bad47) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values + +### Minor Changes + +- [#10669](https://github.com/Shopify/polaris/pull/10669) [`794d1f5e4`](https://github.com/Shopify/polaris/commit/794d1f5e4b79a2721594979d31972cd7534d6174) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer + +* [#10382](https://github.com/Shopify/polaris/pull/10382) [`86d4040c05`](https://github.com/Shopify/polaris/commit/86d4040c052a0dba0cb6f0d6e0f6fb8faf14c532) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `ThemeVariant` to `Theme` and exposed `Theme` type + ## 8.0.0-beta.1 ### Major Changes diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json index eb444f5ddc4..82412d5d2ba 100644 --- a/polaris-tokens/package.json +++ b/polaris-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@shopify/polaris-tokens", - "version": "8.0.0-beta.1", + "version": "8.0.0", "description": "", "main": "dist/cjs/build/index.js", "module": "dist/esm/build/index.mjs", diff --git a/polaris.shopify.com/content/design/colors/index.md b/polaris.shopify.com/content/design/colors/index.md index 2cb2d89aed3..22bce317159 100644 --- a/polaris.shopify.com/content/design/colors/index.md +++ b/polaris.shopify.com/content/design/colors/index.md @@ -20,179 +20,128 @@ status: New - + - + + + ## Color has purpose - + The purpose of using color has to be clear. Color needs to support a message or status that needs to be easily identifiable by merchants. - + - + - ## Color has purpose + ![A display of Polaris components like badges, menus and banners with different color roles](/images/design/colors/color-overview-purpose@2x.png) - The purpose of using color has to be clear. Color needs to support a message or status that needs to be easily identifiable by merchants. + - + + + Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration. - + This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin. - + - ![A display of Polaris components like badges, menus and banners with different color roles](/images/design/colors/color-overview-purpose@2x.png) + - + ![A list of badges that display paid, fulfilled, in progress, partially paid and unfulfilled states](/images/design/colors/color-overview-states-do@2x.png) - + Use color to support different states merchants need to be informed about. - + - Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration. + - This deliberate color coding facilitates merchants in identifying which parts of the user interface require focus and distinguishes them from the default features provided by the Shopify admin. - + ![A Mdxcard with a pink border and a pink $99 trying to entice the merchant](/images/design/colors/color-overview-decorate-dont@2x.png) - + Use color to decorate or to distract merchants from performing tasks. - + - - ![A list of badges that display paid, fulfilled, in progress, partially paid and unfulfilled states](/images/design/colors/color-overview-states-do@2x.png) + - Use color to support different states merchants need to be informed about. - + - + - + ## Color has impact - - ![A card with a pink border and a pink $99 trying to entice the merchant](/images/design/colors/color-overview-decorate-dont@2x.png) + The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence. - Use color to decorate or to distract merchants from performing tasks. - + - + - + ![MdxCards in a grayscale interface with colorful badges that serve as headings](/images/design/colors/color-overview-impact@2x.png) - + - + - + The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues. - + Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants. - + - ## Color has impact + - The Shopify admin interface adopts a black and white color scheme, intentionally creating a neutral backdrop. By employing this monochromatic design, elements that incorporate color gain heightened visual impact and prominence. + ![A modal with a bright red header and bright red button that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-vivid-do@2x.png) - + Use strong, vivid colors to grab attention to things that matter most. - + - + - ![Cards in a grayscale interface with colorful badges that serve as headings](/images/design/colors/color-overview-impact@2x.png) + ![A modal with a gray header and white button with red text that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-diminish-dont@2x.png) - + Contradict or diminish messaging by using subdued colors or grayscale. - + - + - The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues. + - Create impact when using color by using appropriate shades to convey the importance of what is being communicated to merchants. + - + ## Color is accessible - + Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette. - + These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds. - - ![A modal with a bright red header and bright red button that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-vivid-do@2x.png) + - Use strong, vivid colors to grab attention to things that matter most. - + - + ![A dialog box with various elements highlighted where color combinations used for these elements passes AA and AAA accessibility standards for contrast](/images/design/colors/color-overview-accessible@2x.png) - + + - - ![A modal with a gray header and white button with red text that stops the user from navigating away from a page with unsaved changes](/images/design/colors/color-overview-diminish-dont@2x.png) + Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify, and interact with. - Contradict or diminish messaging by using subdued colors or grayscale. - + + + + ![An orange badge with an alert icon and text label in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-conjunction-do@2x.png) - + Use color in conjunction with other discernible elements to amplify the message. - + - + - + ![A text label in orange in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-alone-dont@2x.png) - + Use color alone to convey meaning - + - - - ## Color is accessible - - Polaris offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette. - - These color relationships ensure that color contrasts remain consistent across every application of color and ensure proper legibility and understanding when it comes to combining texts with color and interactive shapes with various backgrounds. - - - - - - - - ![A dialog box with various elements highlighted where color combinations used for these elements passes AA and AAA accessibility standards for contrast](/images/design/colors/color-overview-accessible@2x.png) - - - - - - - - Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify, and interact with. - - - - - - - - ![An orange badge with an alert icon and text label in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-conjunction-do@2x.png) - - Use color in conjunction with other discernible elements to amplify the message. - - - - - - - ![A text label in orange in a table column that indicates that an item is almost out of stock](/images/design/colors/color-overview-alone-dont@2x.png) - - Use color alone to convey meaning - - - - - - - - - + diff --git a/polaris.shopify.com/content/design/index.md b/polaris.shopify.com/content/design/index.md index 36d44ce2293..d213b43f4f6 100644 --- a/polaris.shopify.com/content/design/index.md +++ b/polaris.shopify.com/content/design/index.md @@ -2,6 +2,7 @@ title: Design description: Design principles serve as guiding notions that shape the design of the Shopify admin, with Polaris providing support in implementing these principles effectively. order: 3 +status: New icon: PaintBrushMajor --- diff --git a/polaris.shopify.com/content/design/layout/layout-tokens.md b/polaris.shopify.com/content/design/layout/layout-tokens.md index 3987a926184..2fb88d41396 100644 --- a/polaris.shopify.com/content/design/layout/layout-tokens.md +++ b/polaris.shopify.com/content/design/layout/layout-tokens.md @@ -83,12 +83,14 @@ description: Apply consistent and harmonious space within and between ui element ![](/images/design/layout/tokens/layout-tokens-card-gap@2x.png) + Always use semantic tokens over primitive ones when possible. ![](/images/design/layout/tokens/layout-tokens-button-gap@2x.png) + Only use semantic tokens for the type of space as specified. diff --git a/polaris.shopify.com/content/getting-started/index.md b/polaris.shopify.com/content/getting-started/index.md index e76c2fb9888..398cd8bd91a 100644 --- a/polaris.shopify.com/content/getting-started/index.md +++ b/polaris.shopify.com/content/getting-started/index.md @@ -27,9 +27,9 @@ icon: HintMajor Shopify provides [Figma community resources](https://www.figma.com/@Shopify) for Polaris components, styles, and icons. If you are new to Figma, check out our [onboarding guide](https://www.figma.com/community/file/994263185745279952), or open Figma and start designing with the Polaris: -- [Component UI kit](https://www.figma.com/community/file/1111360433678236702) -- [Style Library](https://www.figma.com/community/file/1111359207966840858) -- [Icon Library](https://www.figma.com/file/mMHFt3kEDNjLMZWowi6gnt/Polaris-Icons?node-id=753%3A2) +- [Component UI kit](https://www.figma.com/community/file/1293611962331823010/polaris-components) +- [Style Library](https://www.figma.com/community/file/1293614121185734569/polaris-styles) +- [Icon Library](https://www.figma.com/community/file/1293614863849914283/polaris-icons) ## Development resources diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md index 7cd37938b89..956ec026d59 100644 --- a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md +++ b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md @@ -15,7 +15,7 @@ order: 1 Upgrading to Polaris v12 from v11 requires several automated and manual migrations of token, component, and component prop names that have been removed, replaced, or renamed. The bulk of migrations are automated using the [@shopify/polaris-migrator](/tools/polaris-migrator) CLI tool, with the edge cases handled by find and replace in your code editor using provided RegExp searches. You can reference the [recommended migration workflow](#migration-workflow) or [glossary](#glossary) sections for additional migration support. -Not on v11 yet either? Check out our other [migration guides](https://github.com/Shopify/polaris/tree/main/documentation/guides) to get up to date. +Not on v11 yet? You'll need to follow the [migration guides](https://github.com/Shopify/polaris/tree/main/documentation/guides) for previous major versions before upgrading to v12. - + | Package | Version | | ---------------------------- | ---------------- | @@ -45,15 +45,24 @@ Not on v11 yet either? Check out our other [migration guides](https://github.com When running token and component migrations, we recommend the following workflow: -### 1️⃣ Automated migrations using Polaris Migrator +### 1️⃣ Automate migrations using Polaris Migrator -Follow the migration guide sections below where we have the [@shopify/polaris-migrator](/tools/polaris-migrator) commands scaffolded for you to paste into your terminal. We've defaulted the glob path in the commands to run on all `ts`/`tsx`/`scss`/`css` files, but feel free to update them to your own app's relevant path, e.g., `{app,packages}/**/*.{css,scss}`. The file extensions can be adjusted depending on what migrations you are running. For example, component migrations can be run on `*.{ts,tsx}` files while token migrations can be run on `*.{css,scss}` files. +The [polaris-migrator](/tools/polaris-migrator) CLI commands are scaffolded for you to paste into your terminal: + +- Tailor the directories in the command glob paths to those relevant to your app's file structure. For example, this generic monorepo glob `**/*.{css,scss}` might need to be changed to explicitly target stylesheets in `{src}/**/*.{css,scss}` in your app. +- Adjust the file extensions for the migrations you are running. For example, React component migrations in a TypeScript app should target `*.{ts,tsx}` files, while token migrations should target `*.{css,scss}` files. ```bash # Example migration npx @shopify/polaris-migrator ... -# Stash files with "polaris-migrator:" comments -git stash push $(grep -r -l "polaris-migrator:" $(git ls-files -m)) +# Find modified files containing "polaris-migrator:" manual migration comments +matching_files=$(grep -r -l "polaris-migrator:" $(git ls-files -m)) +# Stash the files needing manual migrations if there are any +if [[ -n "$matching_files" ]]; then + git stash push $matching_files +else + echo "No modified files contain 'polaris-migrator:'" +fi # Stage all migrated files without "polaris-migrator:" comments git add . # Format staged files only @@ -64,9 +73,9 @@ git add . git commit -m "[Automated] Migrate X from Polaris v11 to v12" ``` -The polaris migrator could insert comments or skip instances that are unsafe to automatically migrate. You will need to resolve those issues in the next manual migration step. +The `polaris-migrator` could insert comments or skip instances that are unsafe to automatically migrate. You will need to resolve those issues in the next manual migration step. -### 2️⃣ Manual migrations using migrator comments and RegExp code search +### 2️⃣ Manually migrate using migrator comments and RegExp code search Now, you need to validate the automatic migration and manually update any outstanding issues. The migration guide sections may have additional resources to help you resolve the migrations manually, such as `💡 Migration example`, `➡️ Replacement mappings` tables, and descriptions of what the automated migrations are doing. @@ -90,7 +99,7 @@ git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Optional: run stylelint if using stylelint-polaris and running migrations on stylesheets -npx stylelint "./**/*..{css,scss}" +npx stylelint "**/*.{css,scss}" # Commit manual migrations git commit -m "[Manual] Migrate X from Polaris v11 to v12" ``` @@ -120,7 +129,7 @@ git commit -m "[Manual] Migrate X from Polaris v11 to v12" code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-react-avatar-component "./**/*.{ts,tsx}"`, + code: String.raw`npx @shopify/polaris-migrator v12-react-avatar-component "**/*.{ts,tsx}"`, }} /> @@ -128,6 +137,7 @@ git commit -m "[Manual] Migrate X from Polaris v11 to v12" prop`, code: String.raw`\w](?:[^>]|\n)*?size`, }} @@ -167,6 +177,25 @@ git commit -m "[Manual] Migrate X from Polaris v11 to v12" +#### Remove `shape` prop + +The `Avatar` `shape` prop was deprecated because circular shapes are no longer part of the admin design language. Remove the `shape` prop from `Avatar`. + + prop`, + code: String.raw`\w](?:[^>]|\n)*?shape`, + }} +/> + +```diff +- +- ++ ++ +``` + ### Badge #### Replace `status` prop with `tone` @@ -175,7 +204,7 @@ git commit -m "[Manual] Migrate X from Polaris v11 to v12" code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Badge" --from="status" --to="tone"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Badge --fromProp status --toProp tone "**/*.{ts,tsx}"`, }} /> @@ -185,6 +214,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?status`, }} @@ -207,7 +237,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Badge" --from="statusAndProgressLabelOverride" --to="toneAndProgressLabelOverride"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Badge --fromProp statusAndProgressLabelOverride --toProp toneAndProgressLabelOverride "**/*.{ts,tsx}"`, }} /> @@ -215,6 +245,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?statusAndProgressLabelOverride`, }} @@ -233,15 +264,13 @@ You will also need to update `Badge.pip` `status` -> `tone` ### IndexTable.Row -**🔔 Stepped migration**: You must run the `color` -> `tone` migration before running the tone rename migrations. - -#### Step 1: Replace `status` prop with `tone` +#### Replace `status` prop with `tone` @@ -249,6 +278,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?status`, }} @@ -265,13 +295,13 @@ You will also need to update `Badge.pip` `status` -> `tone` -#### Step 2: Replace `subdued` prop with `tone` +#### Replace `subdued` prop with `tone` @@ -279,6 +309,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?subdued`, }} @@ -303,7 +334,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Layout.Section" --from="oneThird" --to="variant" --toValue="oneThird"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Layout.Section --fromPropType boolean --fromProp oneThird --toProp variant --toValue oneThird "**/*.{ts,tsx}"`, }} /> @@ -311,6 +342,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?oneThird`, }} @@ -333,7 +365,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Layout.Section" --from="oneHalf" --to="variant" --toValue="oneHalf"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Layout.Section --fromPropType boolean --fromProp oneHalf --toProp variant --toValue oneHalf "**/*.{ts,tsx}"`, }} /> @@ -341,6 +373,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?oneHalf`, }} @@ -363,7 +396,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Layout.Section" --from="fullWidth" --to="variant" --toValue="fullWidth"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Layout.Section --fromPropType boolean --fromProp fullWidth --toProp variant --toValue fullWidth "**/*.{ts,tsx}"`, }} /> @@ -371,6 +404,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?fullWidth`, }} @@ -393,7 +427,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Layout.Section" --from="secondary" --to="variant" --toValue="oneThird"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Layout.Section --fromPropType boolean --fromProp secondary --toProp variant --toValue oneThird "**/*.{ts,tsx}"`, }} /> @@ -401,6 +435,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?secondary`, }} @@ -425,7 +460,7 @@ You will also need to update `Badge.pip` `status` -> `tone` code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="TextField" --from="borderless" --to="variant" --toValue="borderless"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName TextField --fromPropType boolean --fromProp borderless --toProp variant --toValue borderless "**/*.{ts,tsx}"`, }} /> @@ -433,6 +468,7 @@ You will also need to update `Badge.pip` `status` -> `tone` prop`, code: String.raw`\w](?:[^>]|\n)*?borderless`, }} @@ -459,7 +495,7 @@ This border radius property rename aligns with [CSS border radius constituent pr code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Box" --from="borderRadiusEndStart" --to="borderEndStartRadius"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Box --fromProp borderRadiusEndStart --toProp borderEndStartRadius "**/*.{ts,tsx}"`, }} /> @@ -467,7 +503,7 @@ This border radius property rename aligns with [CSS border radius constituent pr code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Box" --from="borderRadiusEndEnd" --to="borderEndEndRadius"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Box --fromProp borderRadiusEndEnd --toProp borderEndEndRadius "**/*.{ts,tsx}"`, }} /> @@ -475,7 +511,7 @@ This border radius property rename aligns with [CSS border radius constituent pr code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Box" --from="borderRadiusStartStart" --to="borderStartStartRadius"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Box --fromProp borderRadiusStartStart --toProp borderStartStartRadius "**/*.{ts,tsx}"`, }} /> @@ -483,7 +519,7 @@ This border radius property rename aligns with [CSS border radius constituent pr code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Box" --from="borderRadiusStartEnd" --to="borderStartEndRadius"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Box --fromProp borderRadiusStartEnd --toProp borderStartEndRadius "**/*.{ts,tsx}"`, }} /> @@ -491,6 +527,7 @@ This border radius property rename aligns with [CSS border radius constituent pr prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadiusEndStart`, }} @@ -498,6 +535,7 @@ This border radius property rename aligns with [CSS border radius constituent pr prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadiusEndEnd`, }} @@ -505,6 +543,7 @@ This border radius property rename aligns with [CSS border radius constituent pr prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadiusStartStart`, }} @@ -512,6 +551,7 @@ This border radius property rename aligns with [CSS border radius constituent pr prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadiusStartEnd`, }} @@ -538,7 +578,7 @@ Directional components now use `Inline` and `Block` naming conventions which are code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component "./**/*.{ts,tsx}" --renameFrom="HorizontalStack" --renameTo="InlineStack" --renamePropsFrom="HorizontalStackProps" --renamePropsTo="InlineStackProps"`, + code: String.raw`npx @shopify/polaris-migrator react-rename-component --renameFrom HorizontalStack --renameTo InlineStack --renamePropsFrom HorizontalStackProps --renamePropsTo InlineStackProps "**/*.{ts,tsx}"`, }} /> @@ -546,6 +586,7 @@ Directional components now use `Inline` and `Block` naming conventions which are component`, code: String.raw`HorizontalStack`, }} @@ -572,7 +613,7 @@ Directional components now use `Inline` and `Block` naming conventions which are code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component "./**/*.{ts,tsx}" --renameFrom="VerticalStack" --renameTo="BlockStack" --renamePropsFrom="VerticalStackProps" --renamePropsTo="BlockStackProps"`, + code: String.raw`npx @shopify/polaris-migrator react-rename-component --renameFrom VerticalStack --renameTo BlockStack --renamePropsFrom VerticalStackProps --renamePropsTo BlockStackProps "**/*.{ts,tsx}"`, }} /> @@ -580,6 +621,7 @@ Directional components now use `Inline` and `Block` naming conventions which are component`, code: String.raw`VerticalStack`, }} @@ -606,7 +648,7 @@ Directional components now use `Inline` and `Block` naming conventions which are code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component "./**/*.{ts,tsx}" --renameFrom="HorizontalGrid" --renameTo="InlineGrid" --renamePropsFrom="HorizontalGridProps" --renamePropsTo="InlineGridProps"`, + code: String.raw`npx @shopify/polaris-migrator react-rename-component --renameFrom HorizontalGrid --renameTo InlineGrid --renamePropsFrom HorizontalGridProps --renamePropsTo InlineGridProps "**/*.{ts,tsx}"`, }} /> @@ -614,6 +656,7 @@ Directional components now use `Inline` and `Block` naming conventions which are component`, code: String.raw`HorizontalGrid`, }} @@ -640,7 +683,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-react-update-button-component "./**/*.{ts,tsx}"`, + code: String.raw`npx @shopify/polaris-migrator v12-react-update-button-component "**/*.{ts,tsx}"`, }} /> @@ -648,6 +691,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?connectedDisclosure`, }} @@ -655,6 +699,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?destructive`, }} @@ -662,6 +707,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?outline`, }} @@ -669,6 +715,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?monochrome`, }} @@ -676,6 +723,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?plain`, }} @@ -683,6 +731,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?primary`, }} @@ -690,6 +739,7 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu prop`, code: String.raw`\w](?:[^>]|\n)*?primarySuccess`, }} @@ -753,10 +803,16 @@ The `Button` component has been updated to replace deprecated `connectedDisclosu The [updated split example](/components/actions/button) can also be referenced as an example for this manual migration. ```diff -- + -+ ++ }/> + ``` @@ -770,7 +826,7 @@ The [updated split example](/components/actions/button) can also be referenced a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="ButtonGroup" --from="spacing" --to="gap"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName ButtonGroup --fromProp spacing --toProp gap "**/*.{ts,tsx}"`, }} /> @@ -778,6 +834,7 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, code: String.raw`\w](?:[^>]|\n)*?spacing`, }} @@ -800,7 +857,7 @@ The [updated split example](/components/actions/button) can also be referenced a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="ButtonGroup" --from="segmented" --to="variant" --toValue="segmented"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName ButtonGroup --fromPropType boolean --fromProp segmented --toProp variant --toValue segmented "**/*.{ts,tsx}"`, }} /> @@ -808,6 +865,7 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, code: String.raw`\w](?:[^>]|\n)*?segmented`, }} @@ -832,7 +890,7 @@ The [updated split example](/components/actions/button) can also be referenced a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Banner" --from="status" --to="tone"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Banner --fromProp status --toProp tone "**/*.{ts,tsx}"`, }} /> @@ -840,6 +898,7 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, code: String.raw`\w](?:[^>]|\n)*?status`, }} @@ -858,15 +917,15 @@ The [updated split example](/components/actions/button) can also be referenced a ### Icon -**🔔 Stepped migration**: You must run the `color` -> `tone` migration before running the tone rename migrations. +**🔔 Stepped migration**: You must run the `color` -> `tone` migration after running the tone rename migrations. -#### Step 1: Replace `color` prop with `tone` +#### Step 1: Replace `color="warning"` with `tone="caution"` @@ -874,8 +933,17 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, - code: String.raw`\w](?:[^>]|\n)*?color`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?color="warning"`, + }} +/> + + prop`, + code: String.raw`\w](?:[^>]|\n)*?tone="warning"`, }} /> @@ -884,19 +952,20 @@ The [updated split example](/components/actions/button) can also be referenced a ```diff -- -+ +- +- ++ ``` -#### Step 2: Replace `warning` tone with `caution` +#### Step 2: Replace `color="highlight"` with `tone="info"` @@ -904,15 +973,17 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, - code: String.raw`\w](?:[^>]|\n)*?color="warning"`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?color="highlight"`, }} /> prop`, - code: String.raw`\w](?:[^>]|\n)*?tone="warning"`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?tone="highlight"`, }} /> @@ -921,20 +992,20 @@ The [updated split example](/components/actions/button) can also be referenced a ```diff -- -- -+ +- +- ++ ``` -#### Step 3: Replace `highlight` tone with `info` +#### Step 3: Replace `color` prop with `tone` @@ -942,15 +1013,9 @@ The [updated split example](/components/actions/button) can also be referenced a prop`, - code: String.raw`\w](?:[^>]|\n)*?color="highlight"`, - }} -/> - - prop`, - code: String.raw`\w](?:[^>]|\n)*?tone="highlight"`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?color`, }} /> @@ -959,9 +1024,8 @@ The [updated split example](/components/actions/button) can also be referenced a ```diff -- -- -+ +- ++ ``` @@ -974,6 +1038,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?backdrop`, }} @@ -994,15 +1059,15 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a ### Text -**🔔 Stepped migration**: You must run the `color` -> `tone` migration before running the tone rename migrations. +**🔔 Stepped migration**: You must run the `color` -> `tone` migration after running the tone rename migrations. -#### Step 1: Replace `color` prop with `tone` +#### Step 1: Replace `color="warning"` with `tone="caution"` @@ -1010,8 +1075,17 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, - code: String.raw`\w](?:[^>]|\n)*?color`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?color="warning"`, + }} +/> + + prop`, + code: String.raw`\w](?:[^>]|\n)*?tone="warning"`, }} /> @@ -1020,19 +1094,20 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a ```diff -- -+ +- +- ++ ``` -#### Step 2: Replace `warning` tone with `caution` +#### Step 2: Replace `color` prop with `tone` @@ -1040,15 +1115,9 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, - code: String.raw`\w](?:[^>]|\n)*?color="warning"`, - }} -/> - - prop`, - code: String.raw`\w](?:[^>]|\n)*?tone="warning"`, + className: 'language-regex', + title: `Check RegExp for outdated prop`, + code: String.raw`\w](?:[^>]|\n)*?color`, }} /> @@ -1057,20 +1126,19 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a ```diff -- -- -+ +- ++ ``` -#### Replace `headingXs` prop with `headingSm` +#### Replace `variant="headingXs"` prop with `variant="headingSm"` @@ -1078,6 +1146,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?variant="headingXs"`, }} @@ -1094,13 +1163,13 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a -#### Replace `heading4xl` with `heading3xl` +#### Replace `variant="heading4xl"` with `variant="heading3xl"` @@ -1108,6 +1177,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?variant="heading4xl"`, }} @@ -1132,7 +1202,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Modal" --from="small" --to="size" --toValue="small"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Modal --fromPropType boolean --fromProp small --toProp size --toValue small "**/*.{ts,tsx}"`, }} /> @@ -1140,6 +1210,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?small`, }} @@ -1162,7 +1233,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Modal" --from="large" --to="size" --toValue="large"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Modal --fromPropType boolean --fromProp large --toProp size --toValue large "**/*.{ts,tsx}"`, }} /> @@ -1170,6 +1241,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?large`, }} @@ -1192,7 +1264,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="Modal" --from="fullScreen" --to="size" --toValue="fullScreen"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName Modal --fromPropType boolean --fromProp fullScreen --toProp size --toValue fullScreen "**/*.{ts,tsx}"`, }} /> @@ -1200,6 +1272,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?fullScreen`, }} @@ -1224,7 +1297,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="List" --from="spacing" --to="gap"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName List --fromProp spacing --toProp gap "**/*.{ts,tsx}"`, }} /> @@ -1232,6 +1305,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?spacing`, }} @@ -1256,7 +1330,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator react-rename-component-prop "./**/*.{ts,tsx}" --componentName="DescriptionList" --from="spacing" --to="gap"`, + code: String.raw`npx @shopify/polaris-migrator react-update-component-prop --componentName DescriptionList --fromProp spacing --toProp gap "**/*.{ts,tsx}"`, }} /> @@ -1264,6 +1338,7 @@ Backdrop is not a pattern in the new Polaris design language. If you must use a prop`, code: String.raw`\w](?:[^>]|\n)*?spacing`, }} @@ -1290,6 +1365,7 @@ Page dividers are no longer a pattern in the new Polaris design language. If you prop`, code: String.raw`\w](?:[^>]|\n)*?divider`, }} @@ -1300,10 +1376,41 @@ Page dividers are no longer a pattern in the new Polaris design language. If you ```diff -- -+ -+ -+ +- ++ +``` + + + +### ProgressBar + +#### Replace `color` prop with `tone` + + + + + + prop`, + code: String.raw`\w](?:[^>]|\n)*?color`, + }} +/> + + + + + +```diff +- ++ ``` @@ -1316,6 +1423,7 @@ The `AppProvider` `features` prop no longer accepts the keys `polarisSummerEditi prop`, code: String.raw`\w](?:[^>]|\n)*?features`, }} @@ -1358,7 +1466,7 @@ To replace deprecated `border` custom properties, you can run the [v12-styles-re code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-border "./**/*..{css,scss}"`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-border "**/*.{css,scss}"`, }} /> @@ -1376,84 +1484,98 @@ To replace deprecated `border` custom properties, you can run the [v12-styles-re /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderEndStartRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderEndEndRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderStartStartRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderStartEndRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderBlockStartWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderBlockEndWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderInlineStartWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderInlineEndWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?outlineWidth`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderRadius`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderWidth`, }} @@ -1504,7 +1626,7 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep code={{ title: 'Polaris Migrator codemod for step 1', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-color "./**/*..{css,scss}" --step=1`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-color "**/*.{css,scss}" --step=1`, }} /> @@ -1526,42 +1648,49 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?outlineColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?textColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?color`, }} @@ -1713,7 +1842,7 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep code={{ title: 'Polaris Migrator codemod for step 2', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-color "./**/*..{css,scss}" --step=2`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-color "**/*.{css,scss}" --step=2`, }} /> @@ -1724,6 +1853,7 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?outlineColor`, }} @@ -1740,42 +1870,49 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?outlineColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?textColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?color`, }} @@ -1815,42 +1952,49 @@ Manually migrate the following tokens to their hardcoded values:

prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?outlineColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?textColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?color`, }} @@ -1884,42 +2028,49 @@ If you want to unblock your migration quickly you can manually hardcode the valu

prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?background`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?outlineColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?borderColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?textColor`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?color`, }} @@ -1968,7 +2119,7 @@ To replace deprecated `font` custom properties, you can run the [v12-styles-repl code={{ title: 'Polaris Migrator codemod for step 1', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "./**/*..{css,scss}" --step=1`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "**/*.{css,scss}" --step=1`, }} /> @@ -2009,7 +2160,7 @@ To replace deprecated `font` custom properties, you can run the [v12-styles-repl code={{ title: 'Polaris Migrator codemod for step 2', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "./**/*..{css,scss}" --step=2`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "**/*.{css,scss}" --step=2`, }} /> @@ -2040,7 +2191,7 @@ To replace deprecated `font` custom properties, you can run the [v12-styles-repl code={{ title: 'Polaris Migrator codemod for step 3', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "./**/*..{css,scss}" --step=3`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "**/*.{css,scss}" --step=3`, }} /> @@ -2071,7 +2222,7 @@ To replace deprecated `font` custom properties, you can run the [v12-styles-repl code={{ title: 'Polaris Migrator codemod for step 4', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "./**/*..{css,scss}" --step=4`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-font "**/*.{css,scss}" --step=4`, }} /> @@ -2109,7 +2260,7 @@ To replace deprecated `shadow` custom properties, you can run the [v12-styles-re -**🔔 Stepped migration**: The font migration needs to be run in **2** sequential steps due to context dependent manual migrations. +**🔔 Stepped migration**: The shadow migration needs to be run in **2** sequential steps due to context dependent manual migrations. #### Shadow migration step 1 @@ -2117,7 +2268,7 @@ To replace deprecated `shadow` custom properties, you can run the [v12-styles-re code={{ title: 'Polaris Migrator codemod for step 1', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-shadow "./**/*..{css,scss}"`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-shadow "**/*.{css,scss}"`, }} /> @@ -2137,16 +2288,11 @@ To replace deprecated `shadow` custom properties, you can run the [v12-styles-re

prop`, code: String.raw`\w](?:[^>]|\n)*?shadow`, }} /> - prop`, - code: String.raw`\w](?:[^>]|\n)*?boxShadow`, - }} - /> @@ -2203,12 +2349,14 @@ The following tokens need to be manually migrated because their values are conte

prop`, code: String.raw`\w](?:[^>]|\n)*?shadow`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?boxShadow`, }} @@ -2232,7 +2380,7 @@ To replace deprecated `space` custom properties, you can run the [v12-styles-rep code={{ title: 'polaris-migrator codemod', className: 'language-bash', - code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-space "./**/*..{css,scss}"`, + code: String.raw`npx @shopify/polaris-migrator v12-styles-replace-custom-property-space "**/*.{css,scss}"`, }} /> @@ -2248,6 +2396,7 @@ To replace deprecated `space` custom properties, you can run the [v12-styles-rep /> prop`, code: String.raw`\w](?:[^>]|\n)*?padding`, }} @@ -2259,66 +2408,77 @@ To replace deprecated `space` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?padding`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?paddingBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?paddingBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?paddingInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?paddingInlineEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?insetBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?insetBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?insetInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?insetInlineEnd`, }} @@ -2330,12 +2490,14 @@ To replace deprecated `space` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} @@ -2347,168 +2509,196 @@ To replace deprecated `space` custom properties, you can run the [v12-styles-rep

prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleed`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleed`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleed`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?bleedInlineEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gap`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gapX`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?gapY`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?padding`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginInline`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginBlock`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginBlockStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginBlockEnd`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginInlineStart`, }} /> prop`, code: String.raw`\w](?:[^>]|\n)*?marginInlineEnd`, }} diff --git a/polaris.shopify.com/content/whats-new/version-12.md b/polaris.shopify.com/content/whats-new/version-12.md index aaec5af5999..1d910a2b7fc 100644 --- a/polaris.shopify.com/content/whats-new/version-12.md +++ b/polaris.shopify.com/content/whats-new/version-12.md @@ -1,6 +1,6 @@ --- title: Version 12 -description: This version introduces Shopify's new admin design language, refined tokens, and aligned component APIs. +description: This version introduces Shopify's new admin design language, refined tokens, aligned component APIs, and an updated Figma UI kit. previewImg: /images/updates/uplift-beta@2x.png keywords: - new design language @@ -77,6 +77,14 @@ The version 12 breaking component changes aim to simplify inconsistent and compl - Renaming various color control props to `tone` and space control props to `gap`. This creates more consistent APIs across components - Consolidating boolean props to a single `variant` prop on various components to make logical combinations more intentional +### Figma UI Kit + +The Polaris [components](https://www.figma.com/community/file/1293611962331823010/polaris-components), [styles](https://www.figma.com/community/file/1293614121185734569/polaris-styles), and [icons](https://www.figma.com/community/file/1293614863849914283/polaris-icons) libraries have been updated to reflect the new design language, updated tokens, and component API changes. + +#### Figma variables + +The kits have been updated to use Figma variables for color, space, and size. Color variables are accessible via fill, stroke, and text color menus in the right panel. Space variables are accessible via auto layout's gap and padding. + ## Resources - [v11 to v12 migration guide](/version-guides/migrating-from-v11-to-v12) @@ -84,3 +92,6 @@ The version 12 breaking component changes aim to simplify inconsistent and compl - [Design principles](/design/design-principles) - [Uplifted components](/components) - [Updated token lists](/tokens) +- [Figma component library](https://www.figma.com/community/file/1293611962331823010/polaris-components) +- [Figma styles library](https://www.figma.com/community/file/1293614121185734569/polaris-styles) +- [Figma icons library](https://www.figma.com/community/file/1293614863849914283/polaris-icons) diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json index 330cbf1ee73..40ea2f7d5c9 100644 --- a/polaris.shopify.com/package.json +++ b/polaris.shopify.com/package.json @@ -27,9 +27,9 @@ "@floating-ui/react-dom-interactions": "^0.10.1", "@headlessui/react": "^1.6.5", "@radix-ui/react-polymorphic": "^0.0.14", - "@shopify/polaris": "^12.0.0-beta.2", + "@shopify/polaris": "^12.0.0", "@shopify/polaris-icons": "^7.9.0", - "@shopify/polaris-tokens": "^8.0.0-beta.1", + "@shopify/polaris-tokens": "^8.0.0", "@types/react-syntax-highlighter": "^15.5.6", "base-64": "^1.0.0", "codesandbox": "^2.2.3", diff --git a/polaris.shopify.com/src/components/Frame/Frame.module.scss b/polaris.shopify.com/src/components/Frame/Frame.module.scss index 18f672567fb..cc5bc632e01 100644 --- a/polaris.shopify.com/src/components/Frame/Frame.module.scss +++ b/polaris.shopify.com/src/components/Frame/Frame.module.scss @@ -255,7 +255,7 @@ $breakpointNav: $breakpointTablet; transform: scale(0.8); @include dark-mode { - filter: invert(1); + fill: white; } } @@ -287,7 +287,7 @@ $breakpointNav: $breakpointTablet; } @include dark-mode { - filter: invert(1); + fill: white; } } diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.module.scss b/polaris.shopify.com/src/components/Markdown/Markdown.module.scss index 1e211a146d5..dd5201a5387 100644 --- a/polaris.shopify.com/src/components/Markdown/Markdown.module.scss +++ b/polaris.shopify.com/src/components/Markdown/Markdown.module.scss @@ -6,6 +6,7 @@ border-radius: var(--p-border-radius-200); width: 100%; height: auto; + border: 1px solid var(--p-color-border); } .List { diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx index 248755ffc23..95c04552ee5 100644 --- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx +++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx @@ -14,6 +14,7 @@ import {Grid, InlineGrid} from '@shopify/polaris'; import styles from './Markdown.module.scss'; import Code, {InlineCode} from '../../components/Code'; import {DirectiveCard} from './components/DirectiveCard'; +import {MdxCard, MdxColumn} from './components/Mdx'; import {Box, type WithAsProp} from '../../components/Box'; import {Stack} from '../../components/Stack'; import StatusBanner from '../../components/StatusBanner'; @@ -236,6 +237,8 @@ function Markdown< SideBySide, Grid, Card, + MdxCard, + MdxColumn, DirectiveCard, FeaturedCardGrid, YoutubeVideo, diff --git a/polaris.shopify.com/src/components/Markdown/components/Mdx/Mdx.module.css b/polaris.shopify.com/src/components/Markdown/components/Mdx/Mdx.module.css new file mode 100644 index 00000000000..24bde2c61c0 --- /dev/null +++ b/polaris.shopify.com/src/components/Markdown/components/Mdx/Mdx.module.css @@ -0,0 +1,3 @@ +.MdxCard { + margin-bottom: var(--p-space-800); +} diff --git a/polaris.shopify.com/src/components/Markdown/components/Mdx/index.tsx b/polaris.shopify.com/src/components/Markdown/components/Mdx/index.tsx new file mode 100644 index 00000000000..0704b6580fb --- /dev/null +++ b/polaris.shopify.com/src/components/Markdown/components/Mdx/index.tsx @@ -0,0 +1,60 @@ +import {Grid, GridCellProps} from '@shopify/polaris'; +import {SpaceScale} from '@shopify/polaris-tokens'; + +import {Card} from '../../../Card'; + +import styles from './Mdx.module.css'; +import {DirectiveCard, DirectiveStatusName} from '../DirectiveCard'; + +interface MdxCardProps { + children: React.ReactNode; + gap?: SpaceScale; +} + +export const MdxCard = ({children, gap = '400'}: MdxCardProps) => ( +
+ + {children} + +
+); + +interface MdxColumnProps { + children: React.ReactNode; + span?: '1/3' | '2/3' | '1/2' | 'full'; + variant?: 'do' | 'dont' | 'caution' | 'tip'; +} + +export const MdxColumn = ({ + children, + span = 'full', + variant, +}: MdxColumnProps) => { + const columnSpan: { + [key in NonNullable]: GridCellProps['columnSpan']; + } = { + '1/3': {xs: 6, lg: 4}, + '2/3': {xs: 6, lg: 8}, + '1/2': {xs: 6, lg: 6}, + full: {xs: 6, lg: 12}, + }; + + const content = variant ? ( + + {children} + + ) : ( + children + ); + + return {content}; +}; + +const statusMap: { + [key in NonNullable]: DirectiveStatusName; +} = { + do: DirectiveStatusName.Do, + dont: DirectiveStatusName.Dont, + caution: DirectiveStatusName.Caution, + tip: DirectiveStatusName.Tip, +}; diff --git a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss index 83611f76a62..a22c062e97e 100644 --- a/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss +++ b/polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss @@ -4,4 +4,5 @@ overflow: hidden; background: var(--p-color-bg-surface-secondary-hover); position: relative; + border: 1px solid var(--p-color-border); } diff --git a/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx b/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx index 25d9eaa2fd2..b1283bfc1f3 100644 --- a/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx +++ b/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx @@ -41,8 +41,8 @@ const Preview = ({ {...(aspectRatio && aspectRatios[aspectRatio])} style={{ objectFit: aspectRatio ? 'contain' : 'cover', - maxHeight: '100%', - maxWidth: '100%', + width: '100%', + height: '100%', }} /> ) : null} diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss index 52744bc06f9..e81d353d054 100644 --- a/polaris.shopify.com/src/styles/globals.scss +++ b/polaris.shopify.com/src/styles/globals.scss @@ -137,6 +137,8 @@ html { code, pre { + .token { + } .keyword { color: var(--code-keyword); } @@ -178,6 +180,32 @@ html { .prefix { font-weight: 900; } + + .quantifier { + color: var(--code-quantifier); + } + .escape, + .special-escape { + color: var(--code-escape); + } + .char-class, + .charset-punctuation { + color: var(--code-charset-punctuation); + } + .anchor { + color: var(--code-anchor); + } + .group { + color: var(--code-group); + } + .backreference, + .alternation { + color: var(--code-alternation); + } + .regex-delimiter, + .regex-flags { + color: var(--p-text); + } } } @@ -243,6 +271,12 @@ body, --code-deleted: var(--code-boolean); --code-inserted-highlight: #e5ffef; --code-deleted-highlight: #fff3f8; + --code-quantifier: #5588ff; + --code-escape: #cc00cc; + --code-charset-punctuation: #dd7700; + --code-anchor: #884400; + --code-group: #ccaa00; + --code-alternation: #00aa00; } .dark-mode { @@ -282,6 +316,12 @@ body, --code-deleted: #ffb7d1; --code-inserted-highlight: var(--surface-information); --code-deleted-highlight: var(--surface-warning); + --code-quantifier: #5588ff; + --code-escape: #cc00cc; + --code-charset-punctuation: #dd7700; + --code-anchor: #884400; + --code-group: #ccaa00; + --code-alternation: #00aa00; } video { diff --git a/stylelint-polaris/CHANGELOG.md b/stylelint-polaris/CHANGELOG.md index 80588583450..5d5ac0df54c 100644 --- a/stylelint-polaris/CHANGELOG.md +++ b/stylelint-polaris/CHANGELOG.md @@ -1,5 +1,19 @@ # Changelog +## 15.0.0 + +### Major Changes + +- [#10941](https://github.com/Shopify/polaris/pull/10941) [`ec1efca1b`](https://github.com/Shopify/polaris/commit/ec1efca1b012e393e6248556dc123e5f827f4a5e) Thanks [@sophschneider](https://github.com/sophschneider)! - - Updated dependencies \[[`2a467249f`](https://github.com/Shopify/polaris/commit/2a467249f3a198dc252eba53df9fecc7bf6572dd), [`2cdc59f88`](https://github.com/Shopify/polaris/commit/2cdc59f8823a6529ebb6150c316934633f86b28c), [`794d1f5e4`](https://github.com/Shopify/polaris/commit/794d1f5e4b79a2721594979d31972cd7534d6174), [`86d4040c05`](https://github.com/Shopify/polaris/commit/86d4040c052a0dba0cb6f0d6e0f6fb8faf14c532), [`08aaf11ec`](https://github.com/Shopify/polaris/commit/08aaf11ec59680155476a20036a672795c2bad47), [`a2aefd0`](https://github.com/Shopify/polaris/commit/a2aefd0608b854b376c1f8de8bd33195074dc7e3), [`2ce6c37`](https://github.com/Shopify/polaris/commit/2ce6c375d9a180609c087764d963bb20868e03bf)]: + - @shopify/polaris-tokens@8.0.0 + +## 14.1.2 + +### Patch Changes + +- Updated dependencies [[`2a467249f`](https://github.com/Shopify/polaris/commit/2a467249f3a198dc252eba53df9fecc7bf6572dd), [`2cdc59f88`](https://github.com/Shopify/polaris/commit/2cdc59f8823a6529ebb6150c316934633f86b28c), [`794d1f5e4`](https://github.com/Shopify/polaris/commit/794d1f5e4b79a2721594979d31972cd7534d6174), [`86d4040c05`](https://github.com/Shopify/polaris/commit/86d4040c052a0dba0cb6f0d6e0f6fb8faf14c532), [`08aaf11ec`](https://github.com/Shopify/polaris/commit/08aaf11ec59680155476a20036a672795c2bad47)]: + - @shopify/polaris-tokens@8.0.0 + ## 14.1.2-beta.1 ### Patch Changes diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json index 9c525fe2aae..79b6b684a1d 100644 --- a/stylelint-polaris/package.json +++ b/stylelint-polaris/package.json @@ -1,7 +1,7 @@ { "name": "@shopify/stylelint-polaris", "description": "Polaris Design System Stylelint tooling", - "version": "14.1.2-beta.1", + "version": "15.0.0", "private": false, "license": "MIT", "author": "Shopify ", @@ -37,7 +37,7 @@ "dependencies": { "postcss-value-parser": "^4.2.0", "postcss-media-query-parser": "^0.2.3", - "@shopify/polaris-tokens": "^8.0.0-beta.1" + "@shopify/polaris-tokens": "^8.0.0" }, "peerDependencies": { "stylelint": "^14.15.0 || ^15.0.0" diff --git a/yarn.lock b/yarn.lock index 354215995fe..99aad790aeb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22351,9 +22351,9 @@ zip-stream@^4.1.0: readable-stream "^3.6.0" zod@^3.17.3: - version "3.19.1" - resolved "https://registry.yarnpkg.com/zod/-/zod-3.19.1.tgz#112f074a97b50bfc4772d4ad1576814bd8ac4473" - integrity sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA== + version "3.22.3" + resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.3.tgz#2fbc96118b174290d94e8896371c95629e87a060" + integrity sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug== zwitch@^1.0.0: version "1.0.5"