diff --git a/documentation/guides/migrating-from-v10-to-v11.md b/documentation/guides/migrating-from-v10-to-v11.md index e836b40342a..4436cd26920 100644 --- a/documentation/guides/migrating-from-v10-to-v11.md +++ b/documentation/guides/migrating-from-v10-to-v11.md @@ -14,6 +14,14 @@ Polaris v11.0.0 ([full release notes](https://github.com/Shopify/polaris/release NodeJS version 14 is no longer supported. NodeJS 18 is recommended and 16 is the minimum supported version. +## TypeScript + +Built types in `@shopify/polaris` have moved from `build/ts/latest` to `build/ts`. + +**Legacy TypeScript Support** + +Polaris no longer supports multiple versions of TypeScript with downlevel-dts. Polaris only builds one set of types based on the current version of TypeScript in the project. + ## Components ### Removed deprecated Collapsible argument diff --git a/package.json b/package.json index af5605df5b9..0239866c317 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,6 @@ "@types/jest": "^27.5.1", "@types/node": "^18.11.18", "babel-loader": "^9.1.2", - "downlevel-dts": "^0.6.0", "eslint": "^8.3.0", "execa": "^5.0.0", "jest": "^27.5.1", @@ -85,7 +84,7 @@ "stylelint": "^14.15.0", "ts-node": "^10.7.0", "turbo": "^1.2.8", - "typescript": "^4.6.3" + "typescript": "^4.9.3" }, "prettier": "@shopify/prettier-config", "size-limit": [ diff --git a/polaris-cli/package.json b/polaris-cli/package.json index 67671fa1cb9..b7c420659fe 100644 --- a/polaris-cli/package.json +++ b/polaris-cli/package.json @@ -26,9 +26,6 @@ "@oclif/core": "^1.13.10", "@shopify/polaris-migrator": "^0.11.3" }, - "devDependencies": { - "typescript": "^4.7.4" - }, "engine-strict": true, "engines": { "node": "^16.13.0 || >=18.12.0" diff --git a/polaris-react/package.json b/polaris-react/package.json index 5cb60556f00..62f59f3a4bd 100644 --- a/polaris-react/package.json +++ b/polaris-react/package.json @@ -39,18 +39,10 @@ "main": "build/cjs/index.js", "module": "build/esm/index.js", "esnext": "build/esnext/index.esnext", - "types": "build/ts/latest/src/index.d.ts", - "typesVersions": { - "<4.0": { - "build/types/latest/*": [ - "build/ts/3.4/*" - ] - } - }, + "types": "build/ts/src/index.d.ts", "scripts": { - "build": "run-s build:types build:types-downlevel build:js build:validate", + "build": "run-s build:types build:js build:validate", "build:types": "tsc -b", - "build:types-downlevel": "downlevel-dts './build/ts/latest' './build/ts/3.4'", "build:js": "rollup -c", "build:validate": "node scripts/build-validate.js", "dev": "yarn run storybook", diff --git a/polaris-react/scripts/build-validate.js b/polaris-react/scripts/build-validate.js index 8a31617e6c7..c6654c9129b 100644 --- a/polaris-react/scripts/build-validate.js +++ b/polaris-react/scripts/build-validate.js @@ -82,9 +82,7 @@ function validateEsNextBuild() { } function validateAncillaryOutput() { - assert.ok(fs.existsSync('./build/ts/latest/src/index.d.ts')); - // Downleveled for consumers on older TypeScript versions - assert.ok(fs.existsSync('./build/ts/3.4/src/index.d.ts')); + assert.ok(fs.existsSync('./build/ts/src/index.d.ts')); } function validateVersionReplacement() { diff --git a/polaris-react/src/components/OptionList/tests/OptionList.test.tsx b/polaris-react/src/components/OptionList/tests/OptionList.test.tsx index def997b26a7..4986cd77196 100644 --- a/polaris-react/src/components/OptionList/tests/OptionList.test.tsx +++ b/polaris-react/src/components/OptionList/tests/OptionList.test.tsx @@ -539,12 +539,8 @@ function firstOption( options?: OptionDescriptor[], sections?: OptionListProps['sections'], ): string { - const firstOptionsValue = - options == null || options === [] ? '' : options[0].value; - const firstSectionOptionsValue = - sections == null || sections === [] || sections[0].options === [] - ? '' - : sections[0].options[0].value; + const firstOptionsValue = options?.[0]?.value ?? ''; + const firstSectionOptionsValue = sections?.[0]?.options?.[0]?.value ?? ''; return firstOptionsValue || firstSectionOptionsValue; } diff --git a/polaris-react/src/components/ResourceList/ResourceList.tsx b/polaris-react/src/components/ResourceList/ResourceList.tsx index 356e10f2b69..cf657993011 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.tsx +++ b/polaris-react/src/components/ResourceList/ResourceList.tsx @@ -1,5 +1,4 @@ import React, { - ReactElement, useCallback, useEffect, useReducer, @@ -41,7 +40,11 @@ import styles from './ResourceList.scss'; const SMALL_SPINNER_HEIGHT = 28; const LARGE_SPINNER_HEIGHT = 45; -function getAllItemsOnPage( +interface ResourceListItemData { + [data: string]: any; +} + +function getAllItemsOnPage( items: TItemType[], idForItem: (item: TItemType, index: number) => string, ) { @@ -57,16 +60,16 @@ const isBreakpointsXS = () => { parseFloat(toPx(tokens.breakpoints['breakpoints-sm']) ?? ''); }; -function defaultIdForItem( +function defaultIdForItem( item: TItemType, index: number, -) { - return Object.prototype.hasOwnProperty.call(item, 'id') - ? item.id - : index.toString(); +): string { + return 'id' in item ? item.id : index.toString(); } -export interface ResourceListProps { +export interface ResourceListProps< + TItemType extends ResourceListItemData = ResourceListItemData, +> { /** Item data; each item is passed to renderItem */ items: TItemType[]; filterControl?: React.ReactNode; @@ -119,13 +122,7 @@ export interface ResourceListProps { resolveItemId?(item: TItemType): string; } -type ResourceListType = (( - value: ResourceListProps, -) => ReactElement) & { - Item: typeof ResourceItem; -}; - -export const ResourceList: ResourceListType = function ResourceList({ +export function ResourceList({ items, filterControl, emptyState, @@ -767,6 +764,6 @@ export const ResourceList: ResourceListType = function ResourceList({
); -}; +} ResourceList.Item = ResourceItem; diff --git a/polaris-react/src/utilities/merge.ts b/polaris-react/src/utilities/merge.ts index 880dd095279..ac3eb357e8f 100644 --- a/polaris-react/src/utilities/merge.ts +++ b/polaris-react/src/utilities/merge.ts @@ -30,7 +30,7 @@ export function merge( let final = {}; for (const obj of objs) { - final = mergeRecursively(final, obj); + final = mergeRecursively(final, obj as any); } return final; diff --git a/polaris-react/tsconfig.json b/polaris-react/tsconfig.json index 22a351c9979..c317885ab27 100644 --- a/polaris-react/tsconfig.json +++ b/polaris-react/tsconfig.json @@ -4,7 +4,7 @@ "composite": true, "emitDeclarationOnly": true, "importsNotUsedAsValues": "error", - "outDir": "build/ts/latest", + "outDir": "build/ts", "rootDir": "./", "strictFunctionTypes": false, "paths": { diff --git a/polaris.shopify.com/content/design/typography.md b/polaris.shopify.com/content/design/typography.md index 842c4fd6ccb..5e7404ce603 100644 --- a/polaris.shopify.com/content/design/typography.md +++ b/polaris.shopify.com/content/design/typography.md @@ -123,6 +123,10 @@ Small heading styles, `headingXs` - `headingMd`, and body styles will remain the ![An image showing how heading styles change based on breakpoint](/images/foundations/design/typography/type-responsive-styles@2x.png) +### Uppercase styles + +The design language no longer supports uppercase typography. We recommend using the [Text component](/components/text) to apply visual hierarchy. Work with your team to determine a type style that works best for your use case. + --- ## Font stack diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json index 9d65ad6cbdb..93eeaad33c3 100644 --- a/polaris.shopify.com/package.json +++ b/polaris.shopify.com/package.json @@ -70,6 +70,6 @@ "rehype-raw": "^6.1.1", "sass": "^1.49.9", "style-loader": "^3.3.1", - "typescript": "^4.7.4" + "typescript": "^4.9.3" } } diff --git a/yarn.lock b/yarn.lock index 3987e7475a3..a5793c6abc2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9286,14 +9286,6 @@ dotenv@^8.0.0, dotenv@^8.1.0: resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b" integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g== -downlevel-dts@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/downlevel-dts/-/downlevel-dts-0.6.0.tgz#1e52db9fa3ad9e3919a36545412f0b41a44289d1" - integrity sha512-Jy3ZZcXWPzTn5jJRW5WpdEtIq8+UowWWi5TEBgHHvzw320kouV//2KgVhfcuOpP93KS3UAokTxnZKU4L75kRSQ== - dependencies: - shelljs "^0.8.3" - typescript "^4.1.0-dev.20200804" - duplexer2@~0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1" @@ -19915,7 +19907,7 @@ shell-quote@^1.6.1: resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123" integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw== -shelljs@^0.8.3, shelljs@^0.8.5: +shelljs@^0.8.5: version "0.8.5" resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c" integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow== @@ -21687,20 +21679,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.1.0-dev.20200804, typescript@^4.6.3: - version "4.6.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c" - integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw== - -typescript@^4.3.2: - version "4.8.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6" - integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ== - -typescript@^4.7.4: - version "4.7.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" - integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== +typescript@^4.3.2, typescript@^4.9.3: + version "4.9.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db" + integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA== typical@^4.0.0: version "4.0.0"