From b5793072ef4c32fa7272f2638586cf0960e9092e Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Tue, 12 Nov 2024 11:07:48 -1000 Subject: [PATCH 01/11] deps: upgrade to styled-component v6 --- package-lock.json | 216 ++++++++++++++++++++++++++++++++++++++-------- package.json | 4 +- 2 files changed, 181 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7d3c5cb142..c73668b8eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,6 @@ "@types/prop-types": "15.7.13", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", - "@types/styled-components": "5.1.34", "@zendeskgarden/css-bedrock": "10.0.0", "@zendeskgarden/eslint-config": "44.0.1", "@zendeskgarden/scripts": "2.4.2", @@ -82,9 +81,10 @@ "rollup-plugin-delete": "2.1.0", "rollup-plugin-typescript2": "0.36.0", "storybook": "7.6.20", - "styled-components": "5.3.11", + "styled-components": "6.1.13", "stylelint": "16.10.0", "stylelint-order": "6.0.4", + "stylis": "4.3.4", "temp": "0.9.4", "typescript": "5.6.3", "webpack": "5.95.0" @@ -2420,17 +2420,12 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", "dev": true }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true - }, "node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "dev": true, + "license": "MIT" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.1.0", @@ -11953,16 +11948,12 @@ "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==", "dev": true }, - "node_modules/@types/styled-components": { - "version": "5.1.34", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", - "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", "dev": true, - "dependencies": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } + "license": "MIT" }, "node_modules/@types/tough-cookie": { "version": "4.0.5", @@ -15023,6 +15014,7 @@ "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", "dev": true, + "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-module-imports": "^7.22.5", @@ -24646,6 +24638,7 @@ "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-7.2.0.tgz", "integrity": "sha512-gwyyveNjvuRA0pyhbQoydXZllLZESs2VuL5fXCabzh0buHPAOUfANtW7n5YMPmdC0sH3VB7h2eUGZ23+tjvaBA==", "dev": true, + "license": "MIT", "dependencies": { "@adobe/css-tools": "^4.0.1" }, @@ -32771,6 +32764,48 @@ "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/body-parser": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", + "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==", + "extraneous": true, + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/connect": { + "version": "3.4.35", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", + "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==", + "extraneous": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express": { + "version": "4.17.13", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz", + "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==", + "extraneous": true, + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.18", + "@types/qs": "*", + "@types/serve-static": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express-serve-static-core": { + "version": "4.17.28", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz", + "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==", + "extraneous": true, + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/http-cache-semantics": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz", @@ -32810,6 +32845,12 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/netlify-cli/node_modules/@types/mime": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", + "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/node": { "version": "20.14.8", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz", @@ -32825,12 +32866,34 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", + "extraneous": true + }, + "node_modules/netlify-cli/node_modules/@types/range-parser": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", + "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/retry": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/serve-static": { + "version": "1.13.10", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz", + "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==", + "extraneous": true, + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/yargs-parser": { "version": "20.2.1", "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz", @@ -33211,6 +33274,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/netlify-cli/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "extraneous": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/netlify-cli/node_modules/ajv-formats": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", @@ -36441,6 +36520,12 @@ "node": ">=8.6.0" } }, + "node_modules/netlify-cli/node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/fast-json-stringify": { "version": "5.15.1", "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.15.1.tgz", @@ -38201,6 +38286,15 @@ "ipx": "bin/ipx.mjs" } }, + "node_modules/netlify-cli/node_modules/ipx/node_modules/@netlify/blobs": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@netlify/blobs/-/blobs-6.5.0.tgz", + "integrity": "sha512-wRFlNnL/Qv3WNLZd3OT/YYqF1zb6iPSo8T31sl9ccL1ahBxW1fBqKgF4b1XL7Z+6mRIkatvcsVPkWBcO+oJMNA==", + "extraneous": true, + "engines": { + "node": "^14.16.0 || >=16.0.0" + } + }, "node_modules/netlify-cli/node_modules/ipx/node_modules/lru-cache": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz", @@ -38777,6 +38871,12 @@ "fast-deep-equal": "^3.1.3" } }, + "node_modules/netlify-cli/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/jsonc-parser": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", @@ -50154,24 +50254,24 @@ } }, "node_modules/styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=10" + "node": ">= 16" }, "funding": { "type": "opencollective", @@ -50179,10 +50279,45 @@ }, "peerDependencies": { "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" } }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "dev": true, + "license": "MIT" + }, "node_modules/stylelint": { "version": "16.10.0", "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.10.0.tgz", @@ -50398,6 +50533,13 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/stylis": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz", + "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==", + "dev": true, + "license": "MIT" + }, "node_modules/success-symbol": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/success-symbol/-/success-symbol-0.1.0.tgz", diff --git a/package.json b/package.json index 37c0586ebc..5ad13d5d79 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "@types/prop-types": "15.7.13", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", - "@types/styled-components": "5.1.34", "@zendeskgarden/css-bedrock": "10.0.0", "@zendeskgarden/eslint-config": "44.0.1", "@zendeskgarden/scripts": "2.4.2", @@ -100,9 +99,10 @@ "rollup-plugin-delete": "2.1.0", "rollup-plugin-typescript2": "0.36.0", "storybook": "7.6.20", - "styled-components": "5.3.11", + "styled-components": "6.1.13", "stylelint": "16.10.0", "stylelint-order": "6.0.4", + "stylis": "4.3.4", "temp": "0.9.4", "typescript": "5.6.3", "webpack": "5.95.0" From 60b14bf044f11ed7060029b1069e9583c1d785d9 Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Tue, 12 Nov 2024 11:09:20 -1000 Subject: [PATCH 02/11] test: fix specs --- .../src/elements/StatusIndicator.spec.tsx | 4 +- .../avatars/src/styled/StyledAvatar.spec.tsx | 16 +++--- .../elements/Menu/Items/HeaderIcon.spec.tsx | 4 +- .../src/elements/Menu/Items/Item.spec.tsx | 2 +- .../src/elements/combobox/Option.spec.tsx | 2 +- .../elements/input-group/InputGroup.spec.tsx | 20 +++---- .../src/styled/common/StyledMessage.spec.tsx | 2 +- .../styled/radio/StyledRadioInput.spec.tsx | 8 +-- .../styled/range/StyledRangeInput.spec.tsx | 6 +-- .../styled/toggle/StyledToggleInput.spec.tsx | 4 +- packages/grid/src/styled/StyledCol.spec.tsx | 10 ++-- packages/grid/src/styled/StyledRow.spec.tsx | 6 +-- packages/loaders/src/styled/StyledSkeleton.ts | 11 ++-- .../modals/src/styled/StyledModal.spec.tsx | 4 +- .../tables/src/styled/StyledHead.spec.tsx | 2 +- .../theming/src/utils/arrowStyles.spec.tsx | 24 ++++----- .../theming/src/utils/focusStyles.spec.tsx | 53 +++++++++++++++---- .../theming/src/utils/menuStyles.spec.tsx | 40 +++++++------- .../typography/src/styled/StyledIcon.spec.tsx | 1 + 19 files changed, 127 insertions(+), 92 deletions(-) diff --git a/packages/avatars/src/elements/StatusIndicator.spec.tsx b/packages/avatars/src/elements/StatusIndicator.spec.tsx index 3162a0d0e0..6663e96875 100644 --- a/packages/avatars/src/elements/StatusIndicator.spec.tsx +++ b/packages/avatars/src/elements/StatusIndicator.spec.tsx @@ -44,8 +44,8 @@ describe('StatusIndicator', () => { it('renders in RTL mode', () => { const { getByRole } = renderRtl(Caption); - expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1,1)', { - modifier: "& > svg[data-icon-status='transfers']" + expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1, 1)', { + modifier: "&>svg[data-icon-status='transfers']" }); }); diff --git a/packages/avatars/src/styled/StyledAvatar.spec.tsx b/packages/avatars/src/styled/StyledAvatar.spec.tsx index 9e553d43b2..201c3cd93a 100644 --- a/packages/avatars/src/styled/StyledAvatar.spec.tsx +++ b/packages/avatars/src/styled/StyledAvatar.spec.tsx @@ -83,14 +83,14 @@ describe('StyledAvatar', () => { it('renders foreground color as expected', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '> svg' }); + expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '&>svg' }); }); it('renders foreground color variable as expected', () => { const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900], { - modifier: '> svg' + modifier: '&>svg' }); }); }); @@ -99,37 +99,37 @@ describe('StyledAvatar', () => { it('renders extraextrasmall', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('width', '16px !important'); + expect(container.firstChild).toHaveStyleRule('width', '16px!important'); }); it('renders extrasmall', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('width', '24px !important'); + expect(container.firstChild).toHaveStyleRule('width', '24px!important'); }); it('renders small', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('width', '32px !important'); + expect(container.firstChild).toHaveStyleRule('width', '32px!important'); }); it('renders medium', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('width', '40px !important'); + expect(container.firstChild).toHaveStyleRule('width', '40px!important'); }); it('renders large', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('width', '48px !important'); + expect(container.firstChild).toHaveStyleRule('width', '48px!important'); }); }); describe('badge', () => { const styleRuleOptions = { - modifier: `& > ${StyledStatusIndicator}` + modifier: `&>${StyledStatusIndicator}` }; it('renders the status indicator correctly', () => { diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.spec.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.spec.tsx index beb7be17a2..6c50a02aa8 100644 --- a/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.spec.tsx +++ b/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.spec.tsx @@ -53,7 +53,7 @@ describe('HeaderIcon', () => { ); expect(getByTestId('header-icon')).toHaveStyleRule('width', DEFAULT_THEME.iconSizes.md, { - modifier: '& > *' + modifier: '&>*' }); }); @@ -75,7 +75,7 @@ describe('HeaderIcon', () => { ); expect(getByTestId('header-icon')).toHaveStyleRule('width', DEFAULT_THEME.iconSizes.md, { - modifier: '& > *' + modifier: '&>*' }); }); }); diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/Item.spec.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/Item.spec.tsx index 2a85eefc3b..4624b1d9f2 100644 --- a/packages/dropdowns.legacy/src/elements/Menu/Items/Item.spec.tsx +++ b/packages/dropdowns.legacy/src/elements/Menu/Items/Item.spec.tsx @@ -112,7 +112,7 @@ describe('Item', () => { ); await user.click(getByTestId('trigger')); - expect(getByTestId('item-icon')).toHaveStyleRule('width', '16px', { modifier: '& > *' }); + expect(getByTestId('item-icon')).toHaveStyleRule('width', '16px', { modifier: '&>*' }); }); describe('States', () => { diff --git a/packages/dropdowns/src/elements/combobox/Option.spec.tsx b/packages/dropdowns/src/elements/combobox/Option.spec.tsx index a824898612..8f04baee5e 100644 --- a/packages/dropdowns/src/elements/combobox/Option.spec.tsx +++ b/packages/dropdowns/src/elements/combobox/Option.spec.tsx @@ -73,7 +73,7 @@ describe('Option', () => { expect(option).toHaveAttribute('aria-selected', 'true'); expect(option.firstChild).toHaveStyleRule('opacity', '1', { - modifier: `${StyledOption}[aria-selected='true'] > &` + modifier: `${StyledOption}[aria-selected='true']>&` }); expect(tag).toHaveAttribute('tabindex', '0'); }); diff --git a/packages/forms/src/elements/input-group/InputGroup.spec.tsx b/packages/forms/src/elements/input-group/InputGroup.spec.tsx index 9ed8f02461..e3b0fd6d23 100644 --- a/packages/forms/src/elements/input-group/InputGroup.spec.tsx +++ b/packages/forms/src/elements/input-group/InputGroup.spec.tsx @@ -59,21 +59,21 @@ describe('InputGroup', () => { const inputGroupElement = getByText('A').parentElement!; expect(inputGroupElement).toHaveStyleRule('margin-left', '-1px', { - modifier: '& > *:not(:first-child)' + modifier: '&>*:not(:first-child)' }); expect(inputGroupElement).toHaveStyleRule('border-top-right-radius', '0', { - modifier: '& > *:first-child:not(:last-child)' + modifier: '&>*:first-child:not(:last-child)' }); expect(inputGroupElement).toHaveStyleRule('border-bottom-right-radius', '0', { - modifier: '& > *:first-child:not(:last-child)' + modifier: '&>*:first-child:not(:last-child)' }); expect(inputGroupElement).toHaveStyleRule('border-top-left-radius', '0', { - modifier: '& > *:last-child:not(:first-child)' + modifier: '&>*:last-child:not(:first-child)' }); expect(inputGroupElement).toHaveStyleRule('border-bottom-left-radius', '0', { - modifier: '& > *:last-child:not(:first-child)' + modifier: '&>*:last-child:not(:first-child)' }); }); @@ -92,21 +92,21 @@ describe('InputGroup', () => { const inputGroupElement = getByText('A').parentElement!; expect(inputGroupElement).toHaveStyleRule('margin-right', '-1px', { - modifier: '& > *:not(:first-child)' + modifier: '&>*:not(:first-child)' }); expect(inputGroupElement).toHaveStyleRule('border-top-left-radius', '0', { - modifier: '& > *:first-child:not(:last-child)' + modifier: '&>*:first-child:not(:last-child)' }); expect(inputGroupElement).toHaveStyleRule('border-bottom-left-radius', '0', { - modifier: '& > *:first-child:not(:last-child)' + modifier: '&>*:first-child:not(:last-child)' }); expect(inputGroupElement).toHaveStyleRule('border-top-right-radius', '0', { - modifier: '& > *:last-child:not(:first-child)' + modifier: '&>*:last-child:not(:first-child)' }); expect(inputGroupElement).toHaveStyleRule('border-bottom-right-radius', '0', { - modifier: '& > *:last-child:not(:first-child)' + modifier: '&>*:last-child:not(:first-child)' }); }); }); diff --git a/packages/forms/src/styled/common/StyledMessage.spec.tsx b/packages/forms/src/styled/common/StyledMessage.spec.tsx index 85f355c039..fa3c213d35 100644 --- a/packages/forms/src/styled/common/StyledMessage.spec.tsx +++ b/packages/forms/src/styled/common/StyledMessage.spec.tsx @@ -53,7 +53,7 @@ describe('StyledMessage', () => { const message = getByTestId('message'); expect(message).toHaveStyleRule('margin-top', '4px', { - modifier: `${StyledLabel}:not([hidden]) + &` + modifier: `${StyledLabel}:not([hidden])+&` }); }); }); diff --git a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx index 32cb7fe24a..76d3cd5961 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx +++ b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx @@ -34,7 +34,7 @@ describe('StyledRadioInput', () => { const { container } = render(); expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.blue[700], { - modifier: `:checked ~ ${StyledRadioLabel}::before` + modifier: `:checked~${StyledRadioLabel}::before` }); }); @@ -42,7 +42,7 @@ describe('StyledRadioInput', () => { const { container } = render(); expect(container.firstChild).toHaveStyleRule('margin-top', '4px', { - modifier: `&& ~ ${StyledRadioLabel} ~ ${StyledMessage}` + modifier: `&&~${StyledRadioLabel}~${StyledMessage}` }); }); @@ -53,7 +53,7 @@ describe('StyledRadioInput', () => { 'background-color', rgba(PALETTE.grey[700], 0.24), { - modifier: `&:disabled ~ ${StyledRadioLabel}::before` + modifier: `&:disabled~${StyledRadioLabel}::before` } ); }); @@ -62,7 +62,7 @@ describe('StyledRadioInput', () => { const { container } = renderRtl(); expect(container.firstChild).toHaveStyleRule('right', '0', { - modifier: `& ~ ${StyledRadioLabel}::before` + modifier: `&~${StyledRadioLabel}::before` }); }); }); diff --git a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx index 5f37a27cb7..9c171cc80c 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx +++ b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx @@ -52,7 +52,7 @@ describe('StyledRangeInput', () => { const range = getByTestId('range'); expect(range).toHaveStyleRule('margin-top', '8px', { - modifier: `${StyledLabel}:not([hidden]) + &` + modifier: `${StyledLabel}:not([hidden])+&` }); }); @@ -66,7 +66,7 @@ describe('StyledRangeInput', () => { const range = getByTestId('range'); expect(range).toHaveStyleRule('margin-top', '8px', { - modifier: `${StyledLabel}:not([hidden]) + &` + modifier: `${StyledLabel}:not([hidden])+&` }); }); @@ -80,7 +80,7 @@ describe('StyledRangeInput', () => { const range = getByTestId('range'); expect(range).toHaveStyleRule('margin-top', '8px', { - modifier: `${StyledLabel}:not([hidden]) + &` + modifier: `${StyledLabel}:not([hidden])+&` }); }); }); diff --git a/packages/forms/src/styled/toggle/StyledToggleInput.spec.tsx b/packages/forms/src/styled/toggle/StyledToggleInput.spec.tsx index 118dce59f8..bf2315e054 100644 --- a/packages/forms/src/styled/toggle/StyledToggleInput.spec.tsx +++ b/packages/forms/src/styled/toggle/StyledToggleInput.spec.tsx @@ -16,7 +16,7 @@ describe('StyledToggleInput', () => { expect(container.firstChild!.nodeName).toBe('INPUT'); expect(container.firstChild).toHaveStyleRule('border-radius', '100px', { - modifier: `& ~ ${StyledToggleLabel}::before` + modifier: `&~${StyledToggleLabel}::before` }); }); @@ -24,7 +24,7 @@ describe('StyledToggleInput', () => { const { container } = renderRtl(); expect(container.firstChild).toHaveStyleRule('right', expect.any(String), { - modifier: `& ~ ${StyledToggleLabel} > svg` + modifier: `&~${StyledToggleLabel}>svg` }); }); }); diff --git a/packages/grid/src/styled/StyledCol.spec.tsx b/packages/grid/src/styled/StyledCol.spec.tsx index e5004528ce..bb352b6068 100644 --- a/packages/grid/src/styled/StyledCol.spec.tsx +++ b/packages/grid/src/styled/StyledCol.spec.tsx @@ -92,7 +92,7 @@ describe('StyledCol', () => { const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint]; expect(container.firstChild).toHaveStyleRule('max-width', `${(size / 12) * 100}%`, { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` }); }); }); @@ -125,7 +125,7 @@ describe('StyledCol', () => { 'align-self', expect.stringContaining(alignSelf), { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` } ); }); @@ -166,7 +166,7 @@ describe('StyledCol', () => { const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint]; expect(container.firstChild).toHaveStyleRule('text-align', alignments[textAlign], { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` }); }); }); @@ -215,7 +215,7 @@ describe('StyledCol', () => { const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint]; expect(container.firstChild).toHaveStyleRule('margin-left', `${(offset / 12) * 100}%`, { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` }); }); }); @@ -248,7 +248,7 @@ describe('StyledCol', () => { 'order', expect.stringContaining(order.toString()), { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` } ); }); diff --git a/packages/grid/src/styled/StyledRow.spec.tsx b/packages/grid/src/styled/StyledRow.spec.tsx index 6afb869faa..794f7d76aa 100644 --- a/packages/grid/src/styled/StyledRow.spec.tsx +++ b/packages/grid/src/styled/StyledRow.spec.tsx @@ -72,7 +72,7 @@ describe('StyledRow', () => { 'align-items', expect.stringContaining(alignItems), { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` } ); }); @@ -105,7 +105,7 @@ describe('StyledRow', () => { 'justify-content', expect.stringContaining(justifyContent), { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` } ); }); @@ -133,7 +133,7 @@ describe('Wrap', () => { const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint]; expect(container.firstChild).toHaveStyleRule('flex-wrap', expect.stringContaining(wrap), { - media: `(min-width: ${minWidth})` + media: `(min-width: ${minWidth})` }); }); }); diff --git a/packages/loaders/src/styled/StyledSkeleton.ts b/packages/loaders/src/styled/StyledSkeleton.ts index 5194752c0e..df17d88e35 100644 --- a/packages/loaders/src/styled/StyledSkeleton.ts +++ b/packages/loaders/src/styled/StyledSkeleton.ts @@ -82,12 +82,13 @@ const animationStyles = ({ theme }: ThemeProps) => { const gradientStyles = (props: IStyledSkeletonProps & ThemeProps) => { return css` + /* prettier-ignore */ background-image: linear-gradient( - ${props.theme.rtl ? '-45deg' : '45deg'}, - transparent, - ${getBackgroundColor}, - transparent - ); +${props.theme.rtl ? '-45deg' : '45deg'}, +transparent, +${getBackgroundColor}, +transparent +); `; }; diff --git a/packages/modals/src/styled/StyledModal.spec.tsx b/packages/modals/src/styled/StyledModal.spec.tsx index 9d0d1f1905..4fd644df05 100644 --- a/packages/modals/src/styled/StyledModal.spec.tsx +++ b/packages/modals/src/styled/StyledModal.spec.tsx @@ -16,7 +16,7 @@ describe('StyledModal', () => { expect(container.firstChild).not.toHaveStyleRule('width'); expect(container.firstChild).toHaveStyleRule('width', DEFAULT_THEME.breakpoints.sm, { - media: `(min-width: ${DEFAULT_THEME.breakpoints.sm})` + media: `(min-width: ${DEFAULT_THEME.breakpoints.sm})` }); expect(container.firstChild).toHaveStyleRule('margin', '48px'); expect(container.firstChild).not.toHaveStyleRule('direction'); @@ -34,7 +34,7 @@ describe('StyledModal', () => { const { container } = render(); expect(container.firstChild).toHaveStyleRule('width', DEFAULT_THEME.breakpoints.md, { - media: `(min-width: ${DEFAULT_THEME.breakpoints.md})` + media: `(min-width: ${DEFAULT_THEME.breakpoints.md})` }); }); diff --git a/packages/tables/src/styled/StyledHead.spec.tsx b/packages/tables/src/styled/StyledHead.spec.tsx index 4f1f21edfc..fe3d860305 100644 --- a/packages/tables/src/styled/StyledHead.spec.tsx +++ b/packages/tables/src/styled/StyledHead.spec.tsx @@ -33,7 +33,7 @@ describe('StyledHead', () => { expect(getByTestId('head')).toHaveStyleRule('position', 'sticky'); expect(getByTestId('head')).toHaveStyleRule('border-bottom-color', 'transparent', { - modifier: `& > ${StyledHeaderRow}:last-child` + modifier: `&>${StyledHeaderRow}:last-child` }); }); }); diff --git a/packages/theming/src/utils/arrowStyles.spec.tsx b/packages/theming/src/utils/arrowStyles.spec.tsx index b52a83bb00..70e9c9e50e 100644 --- a/packages/theming/src/utils/arrowStyles.spec.tsx +++ b/packages/theming/src/utils/arrowStyles.spec.tsx @@ -13,18 +13,18 @@ import arrowStyles from './arrowStyles'; import { ArrowPosition } from '../types'; interface IStyledDivProps extends ThemeProps { - arrowPosition: ArrowPosition; - arrowSize?: string; - arrowInset?: string; - arrowAnimationModifier?: string; + $arrowPosition: ArrowPosition; + $arrowSize?: string; + $arrowInset?: string; + $arrowAnimationModifier?: string; } const StyledDiv = styled.div` ${props => - arrowStyles(props.arrowPosition, { - size: props.arrowSize, - inset: props.arrowInset, - animationModifier: props.arrowAnimationModifier + arrowStyles(props.$arrowPosition, { + size: props.$arrowSize, + inset: props.$arrowInset, + animationModifier: props.$arrowAnimationModifier })} `; @@ -48,7 +48,7 @@ const getArrowInset = (inset: string, size?: string) => { describe('arrowStyles', () => { it('renders with animation', () => { const { container } = render( - + ); expect(container.firstChild).toHaveStyleRule( @@ -63,7 +63,7 @@ describe('arrowStyles', () => { const POSITION: ArrowPosition[] = ['top', 'right', 'bottom', 'left']; POSITION.forEach(position => { - const { container } = render(); + const { container } = render(); const value = getArrowInset('0'); expect(container.firstChild).toHaveStyleRule(position, value, { modifier: '::before' }); @@ -76,7 +76,7 @@ describe('arrowStyles', () => { const SIZE = ['2px', '4px', '6px', '8px', '10px', '1em']; SIZE.forEach(size => { - const { container } = render(); + const { container } = render(); const value = getArrowSize(size); expect(container.firstChild).toHaveStyleRule('width', value, { modifier: '::before' }); @@ -90,7 +90,7 @@ describe('arrowStyles', () => { const INSET = ['-1px', '0', '1px', '2px', '4px']; INSET.forEach(inset => { - const { container } = render(); + const { container } = render(); const value = getArrowInset(inset); expect(container.firstChild).toHaveStyleRule('top', value, { modifier: '::before' }); diff --git a/packages/theming/src/utils/focusStyles.spec.tsx b/packages/theming/src/utils/focusStyles.spec.tsx index c709a8a150..e8182db490 100644 --- a/packages/theming/src/utils/focusStyles.spec.tsx +++ b/packages/theming/src/utils/focusStyles.spec.tsx @@ -7,18 +7,50 @@ import React from 'react'; import { render, renderDark } from 'garden-test-utils'; -import styled, { DefaultTheme, ThemeProps } from 'styled-components'; +import styled from 'styled-components'; import { focusStyles } from './focusStyles'; import { FocusStylesParameters } from '../types'; import DEFAULT_THEME from '../elements/theme'; import PALETTE from '../elements/palette'; -interface IStyledDivProps extends ThemeProps, FocusStylesParameters { +interface IStyledDivProps { + $boxShadow?: FocusStylesParameters['boxShadow']; $color?: FocusStylesParameters['color']; + $condition?: FocusStylesParameters['condition']; + $inset?: FocusStylesParameters['inset']; + $selector?: FocusStylesParameters['selector']; + $shadowWidth?: FocusStylesParameters['shadowWidth']; + $spacerColor?: FocusStylesParameters['spacerColor']; + $spacerWidth?: FocusStylesParameters['spacerWidth']; + $styles?: FocusStylesParameters['styles']; + theme: FocusStylesParameters['theme']; } const StyledDiv = styled.div` - ${({ $color, ...props }) => focusStyles({ color: $color, ...props })} + ${({ + $boxShadow, + $color, + $condition, + $inset, + $selector, + $shadowWidth, + $spacerColor, + $spacerWidth, + $styles, + theme + }) => + focusStyles({ + color: $color, + condition: $condition, + inset: $inset, + selector: $selector, + shadowWidth: $shadowWidth, + spacerColor: $spacerColor, + spacerWidth: $spacerWidth, + styles: $styles, + theme, + ...($boxShadow && { boxShadow: $boxShadow }) // prevent an undefined boxShadow from overriding styles.boxShadow + })} `; describe('focusStyles', () => { @@ -56,7 +88,7 @@ describe('focusStyles', () => { }); it('renders inset as expected', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('box-shadow', expect.stringContaining('inset'), { modifier: '&:focus-visible' @@ -76,7 +108,7 @@ describe('focusStyles', () => { }); it('renders spacer color as expected', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'box-shadow', @@ -88,7 +120,7 @@ describe('focusStyles', () => { }); it('renders selector as expected', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'box-shadow', @@ -100,7 +132,7 @@ describe('focusStyles', () => { }); it('renders size as expected', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'box-shadow', @@ -119,7 +151,7 @@ describe('focusStyles', () => { }); it('conditionally renders without `box-shadow`', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).not.toHaveStyleRule('box-shadow', undefined, { modifier: '&:focus-visible' @@ -127,7 +159,7 @@ describe('focusStyles', () => { }); it('knocks out spacer as expected', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).not.toHaveStyleRule('outline-offset', undefined, { modifier: '&:focus-visible' @@ -137,7 +169,7 @@ describe('focusStyles', () => { it('renders user provided styles', () => { const dropShadow = DEFAULT_THEME.shadows.lg('4px', '8px', PALETTE.black); const { container } = render( - + ); expect(container.firstChild).toHaveStyleRule('background-color', 'black', { @@ -146,6 +178,7 @@ describe('focusStyles', () => { expect(container.firstChild).toHaveStyleRule('color', 'white', { modifier: '&:focus-visible' }); + expect(container.firstChild).toHaveStyleRule( 'box-shadow', expect.stringContaining(dropShadow), diff --git a/packages/theming/src/utils/menuStyles.spec.tsx b/packages/theming/src/utils/menuStyles.spec.tsx index e99f597a6e..62505db00d 100644 --- a/packages/theming/src/utils/menuStyles.spec.tsx +++ b/packages/theming/src/utils/menuStyles.spec.tsx @@ -12,22 +12,22 @@ import menuStyles from './menuStyles'; import { MenuPosition, MENU_POSITION } from '../types'; interface IStyledMenuProps extends ThemeProps { - menuPosition?: MenuPosition; - menuHidden?: boolean; - menuMargin?: string; - menuZIndex?: number; - menuAnimationModifier?: string; - menuChildSelector?: string; + $menuPosition?: MenuPosition; + $menuHidden?: boolean; + $menuMargin?: string; + $menuZIndex?: number; + $menuAnimationModifier?: string; + $menuChildSelector?: string; } const StyledMenu = styled.div` ${props => - menuStyles(props.menuPosition || 'top', { - hidden: props.menuHidden, - margin: props.menuMargin, - zIndex: props.menuZIndex, - childSelector: props.menuChildSelector, - animationModifier: props.menuAnimationModifier, + menuStyles(props.$menuPosition || 'top', { + hidden: props.$menuHidden, + margin: props.$menuMargin, + zIndex: props.$menuZIndex, + childSelector: props.$menuChildSelector, + animationModifier: props.$menuAnimationModifier, ...props })} `; @@ -52,22 +52,22 @@ describe('menuStyles', () => { it('renders expected RTL styling', () => { const { container } = renderRtl(); - expect(container.firstChild).toHaveStyleRule('direction', 'rtl', { modifier: '& > *' }); + expect(container.firstChild).toHaveStyleRule('direction', 'rtl', { modifier: '&>*' }); }); it('renders with animation', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'animation', expect.stringContaining('cubic-bezier'), - { modifier: '&.animate > *' } + { modifier: '&.animate>*' } ); }); it('renders with the expected child selector', () => { const StyledChild = styled.div``; - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('display', 'inline-block', { modifier: `& ${StyledChild}` @@ -78,7 +78,7 @@ describe('menuStyles', () => { it('renders with the expected positions', () => { MENU_POSITION.forEach(position => { const { container } = render( - + ); const marginProperty = getMarginProperty(position); @@ -95,7 +95,7 @@ describe('menuStyles', () => { }); it('renders expected hidden styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('visibility', 'hidden'); }); @@ -104,7 +104,7 @@ describe('menuStyles', () => { describe('margin', () => { it('renders wit the expected margins', () => { ['4px', '8px'].forEach(margin => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('margin-bottom', margin); }); @@ -119,7 +119,7 @@ describe('menuStyles', () => { }); it('renders expected z-index', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('z-index', '100'); }); diff --git a/packages/typography/src/styled/StyledIcon.spec.tsx b/packages/typography/src/styled/StyledIcon.spec.tsx index db0bfc427d..4ea3d22b26 100644 --- a/packages/typography/src/styled/StyledIcon.spec.tsx +++ b/packages/typography/src/styled/StyledIcon.spec.tsx @@ -64,6 +64,7 @@ describe('StyledIcon', () => { it('throws if rendered with no child', () => { expect(() => { + // @ts-expect-error Testing with no children render(); }).toThrow(); }); From 7d57f43a344a6ae3644c48a94cdc0131fdd926fe Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Fri, 15 Nov 2024 12:00:39 -1000 Subject: [PATCH 03/11] chore: fix type errors --- .../src/styled/accordion/StyledRotateIcon.ts | 4 ++-- .../src/styled/timeline/StyledItemIcon.ts | 4 ++-- .../breadcrumbs/src/styled/StyledChevronIcon.tsx | 12 +++++++----- packages/buttons/src/styled/StyledIcon.ts | 6 +++--- .../chrome/src/elements/header/HeaderItem.tsx | 4 ++-- packages/chrome/src/elements/nav/Nav.tsx | 4 ++-- .../src/styled/header/StyledHeaderItemIcon.ts | 4 ++-- .../styled/ColorSwatch/StyledColorSwatchLabel.ts | 2 +- .../src/styled/ColorSwatch/StyledIcon.ts | 4 ++-- .../datepickers/src/styled/StyledMenuWrapper.ts | 2 +- .../src/styled/menu/StyledMenu.ts | 2 +- .../src/styled/menu/StyledMenuWrapper.ts | 2 +- .../src/views/combobox/StyledInputIcon.ts | 4 ++-- .../dropdowns/src/views/combobox/StyledListbox.ts | 2 +- .../src/views/combobox/StyledOptionIcon.ts | 4 ++-- .../src/views/combobox/StyledOptionTypeIcon.ts | 4 ++-- packages/forms/src/elements/Textarea.tsx | 4 ++-- .../forms/src/elements/common/MessageIcon.tsx | 2 +- .../forms/src/styled/common/StyledMessageIcon.ts | 4 ++-- .../forms/src/styled/file-list/StyledFileIcon.ts | 6 +++--- .../forms/src/styled/range/StyledRangeInput.ts | 2 +- .../src/styled/text/StyledTextMediaFigure.ts | 6 +++--- packages/loaders/demo/spinner.stories.mdx | 2 +- packages/loaders/src/styled/StyledDots.ts | 4 ++-- packages/modals/src/styled/StyledTooltipDialog.ts | 2 +- .../modals/src/styled/StyledTooltipWrapper.ts | 2 +- .../src/elements/global-alert/GlobalAlert.tsx | 2 +- packages/notifications/src/styled/StyledIcon.ts | 4 ++-- .../global-alert/StyledGlobalAlertButton.ts | 2 +- .../styled/global-alert/StyledGlobalAlertIcon.ts | 6 +++--- .../styled/CursorPagination/StyledIcon.spec.tsx | 8 ++++---- .../src/styled/CursorPagination/StyledIcon.ts | 2 +- packages/tags/src/styled/StyledAvatar.ts | 4 ++-- packages/tags/src/styled/StyledClose.ts | 2 +- packages/theming/src/elements/ThemeProvider.tsx | 6 ++++-- packages/theming/src/utils/StyledBaseIcon.ts | 9 +++++---- .../typography/src/styled/StyledIcon.spec.tsx | 1 - packages/typography/src/styled/StyledIcon.ts | 4 ++-- tsconfig.json | 1 + utils/build/react.d.ts | 15 +++++++++++++++ utils/build/styled.d.ts | 10 ++++++++++ 41 files changed, 102 insertions(+), 72 deletions(-) create mode 100644 utils/build/react.d.ts diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts index 5babffcf83..cbf5a40642 100644 --- a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts +++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; +import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'accordions.rotate_icon'; @@ -38,7 +38,7 @@ const colorStyles = ({ `; }; -export const StyledRotateIcon = styled(StyledBaseIcon).attrs({ +export const StyledRotateIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/accordions/src/styled/timeline/StyledItemIcon.ts b/packages/accordions/src/styled/timeline/StyledItemIcon.ts index 9bba6d1172..423ae904e8 100644 --- a/packages/accordions/src/styled/timeline/StyledItemIcon.ts +++ b/packages/accordions/src/styled/timeline/StyledItemIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; +import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; @@ -36,7 +36,7 @@ const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx index 5aa0aefe44..b46408f600 100644 --- a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx +++ b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import styled from 'styled-components'; +import styled, { ExecutionProps } from 'styled-components'; import { em } from 'polished'; import { getColor } from '@zendeskgarden/react-theming'; import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg'; @@ -14,10 +14,12 @@ import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-righ /** * Accepts all `` props */ -/* eslint-disable-next-line @typescript-eslint/no-unused-vars */ -export const StyledChevronIcon = styled(({ children, theme, ...props }) => ( - -)).attrs({ +export const StyledChevronIcon = styled( + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + ({ children, theme, ...props }: React.SVGProps & ExecutionProps) => ( + + ) +).attrs({ role: 'presentation', 'aria-hidden': 'true' })` diff --git a/packages/buttons/src/styled/StyledIcon.ts b/packages/buttons/src/styled/StyledIcon.ts index aa437f31b2..e5c4b46b85 100644 --- a/packages/buttons/src/styled/StyledIcon.ts +++ b/packages/buttons/src/styled/StyledIcon.ts @@ -5,13 +5,13 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; +import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'buttons.icon'; interface IStyledIconProps { - $isRotated: boolean; + $isRotated?: boolean; $position?: 'start' | 'end'; } @@ -32,7 +32,7 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps) => { ); }; -export const StyledIcon = styled(StyledBaseIcon).attrs({ +export const StyledIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/chrome/src/elements/header/HeaderItem.tsx b/packages/chrome/src/elements/header/HeaderItem.tsx index 2cfa47539e..c02980ee83 100644 --- a/packages/chrome/src/elements/header/HeaderItem.tsx +++ b/packages/chrome/src/elements/header/HeaderItem.tsx @@ -20,12 +20,12 @@ export const HeaderItem = React.forwardRef( if (hasLogo) { return ( } $isRound={isRound} $maxX={maxX} $maxY={maxY} $product={product} - {...other} + {...(other as React.HTMLAttributes)} /> ); } diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx index 909c85a708..61a2f9a5c4 100644 --- a/packages/chrome/src/elements/nav/Nav.tsx +++ b/packages/chrome/src/elements/nav/Nav.tsx @@ -25,8 +25,8 @@ export const NavComponent = React.forwardRef( return ( ({ - ...parentTheme, - colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' } + ...parentTheme!, + colors: { ...parentTheme!.colors, base: isLight ? 'light' : 'dark' } })} > diff --git a/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts b/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts index e5488dbcdf..b1889ce398 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; +import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.header_item_icon'; @@ -22,7 +22,7 @@ const sizeStyles = ({ theme }: ThemeProps) => { `; }; -export const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({ +export const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts index 5462971247..29e87f8886 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts @@ -44,7 +44,7 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({ as: 'label', 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` position: relative; top: 0; border-radius: ${props => props.theme.borderRadii.md}; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts index 649205952d..9e74f1fb5b 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts @@ -5,14 +5,14 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled from 'styled-components'; +import styled, { DataAttributes } from 'styled-components'; import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg'; import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { StyledColorSwatchInput } from './StyledColorSwatchInput'; const COMPONENT_ID = 'colorpickers.colorswatch_check'; -export const StyledIcon = styled(CheckIcon as 'svg').attrs({ +export const StyledIcon = styled(CheckIcon as 'svg').attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/datepickers/src/styled/StyledMenuWrapper.ts b/packages/datepickers/src/styled/StyledMenuWrapper.ts index f5066d3e29..0a39ca68fd 100644 --- a/packages/datepickers/src/styled/StyledMenuWrapper.ts +++ b/packages/datepickers/src/styled/StyledMenuWrapper.ts @@ -24,7 +24,7 @@ interface IStyledMenuWrapperProps { export const StyledMenuWrapper = styled.div.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - className: props.$isAnimated && 'is-animated' + className: props.$isAnimated ? 'is-animated' : undefined }))` top: 0; /* [1] */ left: 0; /* [1] */ diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts index ce952ce08e..67c73aec49 100644 --- a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts +++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts @@ -27,7 +27,7 @@ interface IStyledMenuProps { export const StyledMenu = styled.ul.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - className: props.$isAnimated && 'is-animated' + className: props.$isAnimated ? 'is-animated' : undefined }))` /* stylelint-disable-next-line declaration-no-important */ position: static !important; /* [1] */ diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts index e07c27d185..ea2201e5ce 100644 --- a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts +++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts @@ -23,7 +23,7 @@ interface IStyledMenuWrapperProps { export const StyledMenuWrapper = styled.div.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - className: props.$isAnimated && 'is-animated' + className: props.$isAnimated ? 'is-animated' : undefined }))` ${props => menuStyles(getMenuPosition(props.$placement), { diff --git a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts index 575079208c..cb38bdf7a5 100644 --- a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; +import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { getHeight as getInputHeight } from './StyledInput'; @@ -62,7 +62,7 @@ const sizeStyles = (props: IStyledInputIconProps) => { `; }; -export const StyledInputIcon = styled(StyledBaseIcon).attrs({ +export const StyledInputIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/dropdowns/src/views/combobox/StyledListbox.ts b/packages/dropdowns/src/views/combobox/StyledListbox.ts index 6d7af4a99b..6860b4cb03 100644 --- a/packages/dropdowns/src/views/combobox/StyledListbox.ts +++ b/packages/dropdowns/src/views/combobox/StyledListbox.ts @@ -41,7 +41,7 @@ const sizeStyles = (props: IStyledListboxProps) => { export const StyledListbox = styled.ul.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` overflow-y: auto; list-style-type: none; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts index c852cb28cc..2870384b44 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; +import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { OptionType } from '../../types'; @@ -50,7 +50,7 @@ const sizeStyles = (props: ThemeProps) => { `; }; -export const StyledOptionIcon = styled(StyledBaseIcon).attrs({ +export const StyledOptionIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts index 10991e2b35..55dca3ada1 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; +import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { StyledOption, getMinHeight as getOptionMinHeight } from './StyledOption'; @@ -64,7 +64,7 @@ const sizeStyles = (props: IStyledOptionTypeIconProps) => { `; }; -export const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({ +export const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/forms/src/elements/Textarea.tsx b/packages/forms/src/elements/Textarea.tsx index 09a0c97c2a..21438ffffd 100644 --- a/packages/forms/src/elements/Textarea.tsx +++ b/packages/forms/src/elements/Textarea.tsx @@ -39,7 +39,7 @@ export const Textarea = React.forwardRef( ) => { const fieldContext = useFieldContext(); const textAreaRef = useRef(); - const shadowTextAreaRef = useRef(null); + const shadowTextAreaRef = useRef(null); const [state, setState] = useState<{ overflow: boolean; height: number }>({ overflow: false, height: 0 @@ -127,7 +127,7 @@ export const Textarea = React.forwardRef( } const onSelectHandler = other.readOnly - ? composeEventHandlers(onSelect, (event: React.SyntheticEvent) => { + ? composeEventHandlers(onSelect, (event: React.SyntheticEvent) => { event.currentTarget.select(); }) : onSelect; diff --git a/packages/forms/src/elements/common/MessageIcon.tsx b/packages/forms/src/elements/common/MessageIcon.tsx index 4743f56820..76cced3504 100644 --- a/packages/forms/src/elements/common/MessageIcon.tsx +++ b/packages/forms/src/elements/common/MessageIcon.tsx @@ -19,7 +19,7 @@ export const MessageIcon: FC> = ({ ...props }) => ( /* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */ - + {validation ? { error: , diff --git a/packages/forms/src/styled/common/StyledMessageIcon.ts b/packages/forms/src/styled/common/StyledMessageIcon.ts index 642738bb6f..9e908a1ef0 100644 --- a/packages/forms/src/styled/common/StyledMessageIcon.ts +++ b/packages/forms/src/styled/common/StyledMessageIcon.ts @@ -5,12 +5,12 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled from 'styled-components'; +import styled, { DataAttributes } from 'styled-components'; import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.input_message_icon'; -export const StyledMessageIcon = styled(StyledBaseIcon).attrs({ +export const StyledMessageIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/forms/src/styled/file-list/StyledFileIcon.ts b/packages/forms/src/styled/file-list/StyledFileIcon.ts index be848b8620..6f2a5d1415 100644 --- a/packages/forms/src/styled/file-list/StyledFileIcon.ts +++ b/packages/forms/src/styled/file-list/StyledFileIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; +import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; import { StyledBaseIcon, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { FileValidation } from '../../types'; @@ -34,10 +34,10 @@ const sizeStyles = ({ $isCompact, theme }: IStyledFileIconProps & ThemeProps({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` flex-shrink: 0; ${sizeStyles}; diff --git a/packages/forms/src/styled/range/StyledRangeInput.ts b/packages/forms/src/styled/range/StyledRangeInput.ts index bf7e8f8e4b..d542fc9a1f 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.ts +++ b/packages/forms/src/styled/range/StyledRangeInput.ts @@ -232,7 +232,7 @@ export const StyledRangeInput = styled.input.attrs(props 'data-garden-version': PACKAGE_VERSION, type: 'range', style: { - backgroundSize: props.$hasLowerTrack && props.$backgroundSize + backgroundSize: props.$hasLowerTrack ? props.$backgroundSize : undefined } }))` appearance: none; diff --git a/packages/forms/src/styled/text/StyledTextMediaFigure.ts b/packages/forms/src/styled/text/StyledTextMediaFigure.ts index 946fb5b26c..f990ed3935 100644 --- a/packages/forms/src/styled/text/StyledTextMediaFigure.ts +++ b/packages/forms/src/styled/text/StyledTextMediaFigure.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; +import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.media_figure'; @@ -15,7 +15,7 @@ interface IStyledTextMediaFigureProps { $isHovered?: boolean; $isFocused?: boolean; $isDisabled?: boolean; - $position: 'start' | 'end'; + $position?: 'start' | 'end'; } const colorStyles = ({ @@ -62,7 +62,7 @@ const sizeStyles = (props: IStyledTextMediaFigureProps & ThemeProps({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/loaders/demo/spinner.stories.mdx b/packages/loaders/demo/spinner.stories.mdx index 3a3cff3a13..1f38efd938 100644 --- a/packages/loaders/demo/spinner.stories.mdx +++ b/packages/loaders/demo/spinner.stories.mdx @@ -13,7 +13,7 @@ import README from '../README.md'; { +const animationStyles = (animationName: ReturnType, props: IStyledDotProps) => { return css` animation: ${animationName} ${props.$duration}ms linear infinite; `; diff --git a/packages/modals/src/styled/StyledTooltipDialog.ts b/packages/modals/src/styled/StyledTooltipDialog.ts index ee0d08557f..8a8c4f4f5a 100644 --- a/packages/modals/src/styled/StyledTooltipDialog.ts +++ b/packages/modals/src/styled/StyledTooltipDialog.ts @@ -36,7 +36,7 @@ const sizeStyles = (props: ThemeProps) => ` export const StyledTooltipDialog = styled.div.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - className: props.$isAnimated && 'is-animated' + className: props.$isAnimated ? 'is-animated' : undefined }))` ${props => { const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.$placement), { diff --git a/packages/modals/src/styled/StyledTooltipWrapper.ts b/packages/modals/src/styled/StyledTooltipWrapper.ts index 530b46c5d3..4d26017f5b 100644 --- a/packages/modals/src/styled/StyledTooltipWrapper.ts +++ b/packages/modals/src/styled/StyledTooltipWrapper.ts @@ -19,7 +19,7 @@ interface IStyledTooltipWrapperProps { * 1. Expected to use https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning */ export const StyledTooltipWrapper = styled.div.attrs(props => ({ - className: props.$isAnimated && 'is-animated' + className: props.$isAnimated ? 'is-animated' : undefined }))` top: 0; /* [1] */ left: 0; /* [1] */ diff --git a/packages/notifications/src/elements/global-alert/GlobalAlert.tsx b/packages/notifications/src/elements/global-alert/GlobalAlert.tsx index 93d1e077bf..f7e6f9d0a7 100644 --- a/packages/notifications/src/elements/global-alert/GlobalAlert.tsx +++ b/packages/notifications/src/elements/global-alert/GlobalAlert.tsx @@ -38,7 +38,7 @@ const GlobalAlertComponent = forwardRef( return ( /* [1] */ - ({ ...theme, colors: { ...theme.colors, base: 'light' } })}> + ({ ...theme!, colors: { ...theme!.colors, base: 'light' } })}> ({ type }), [type])}> {/* [2] */} {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */} diff --git a/packages/notifications/src/styled/StyledIcon.ts b/packages/notifications/src/styled/StyledIcon.ts index 9b41583e78..f54f652112 100644 --- a/packages/notifications/src/styled/StyledIcon.ts +++ b/packages/notifications/src/styled/StyledIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; +import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; import { getColor, StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { Type } from '../types'; import { validationTypes } from '../utils/icons'; @@ -52,7 +52,7 @@ const colorStyles = ({ theme, $type }: IStyledIconProps) => { `; }; -export const StyledIcon = styled(StyledBaseIcon).attrs({ +export const StyledIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts index b155a58efc..9a9a67a030 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts @@ -118,7 +118,7 @@ function sizeStyles(props: ThemeProps) { export const StyledGlobalAlertButton = styled(Button).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` flex-shrink: 0; ${sizeStyles}; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts index 5c1d43ed42..21530d2ba6 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; +import styled, { css, DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; import { getColor, retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { Type } from '../../types'; @@ -58,10 +58,10 @@ const colorStyles = ({ `; }; -export const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({ +export const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` flex-shrink: 0; ${sizeStyles}; diff --git a/packages/pagination/src/styled/CursorPagination/StyledIcon.spec.tsx b/packages/pagination/src/styled/CursorPagination/StyledIcon.spec.tsx index 073c8a75d7..cb21ddc58b 100644 --- a/packages/pagination/src/styled/CursorPagination/StyledIcon.spec.tsx +++ b/packages/pagination/src/styled/CursorPagination/StyledIcon.spec.tsx @@ -13,7 +13,7 @@ import { StyledIcon } from './StyledIcon'; describe('StyledIcon', () => { it('does not render styling to rotate icon', () => { const { container } = render( - + ); @@ -23,7 +23,7 @@ describe('StyledIcon', () => { it('render styling to rotate icon in RTL', () => { const { container } = renderRtl( - + ); @@ -32,7 +32,7 @@ describe('StyledIcon', () => { }); it('renders icon types with the correct margin', () => { - const types = ['first', 'previous', 'next', 'last']; + const types = ['first', 'previous', 'next', 'last'] as const; types.forEach(type => { const { container } = render( @@ -52,7 +52,7 @@ describe('StyledIcon', () => { }); it('renders icon types with the correct margin in RTL', () => { - const types = ['first', 'previous', 'next', 'last']; + const types = ['first', 'previous', 'next', 'last'] as const; types.forEach(type => { const { container } = renderRtl( diff --git a/packages/pagination/src/styled/CursorPagination/StyledIcon.ts b/packages/pagination/src/styled/CursorPagination/StyledIcon.ts index 324bc65528..4cafde119f 100644 --- a/packages/pagination/src/styled/CursorPagination/StyledIcon.ts +++ b/packages/pagination/src/styled/CursorPagination/StyledIcon.ts @@ -27,7 +27,7 @@ const marginStyles = (props: IStyledIcon & ThemeProps) => { `; }; -export const StyledIcon = styled(StyledBaseIcon)` +export const StyledIcon = styled(StyledBaseIcon)` ${marginStyles} transform: ${props => props.theme.rtl && 'rotate(180deg)'}; `; diff --git a/packages/tags/src/styled/StyledAvatar.ts b/packages/tags/src/styled/StyledAvatar.ts index 4a674a6f38..a5fe58f062 100644 --- a/packages/tags/src/styled/StyledAvatar.ts +++ b/packages/tags/src/styled/StyledAvatar.ts @@ -5,12 +5,12 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled from 'styled-components'; +import styled, { DataAttributes } from 'styled-components'; import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tags.avatar'; -export const StyledAvatar = styled(StyledBaseIcon).attrs({ +export const StyledAvatar = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/tags/src/styled/StyledClose.ts b/packages/tags/src/styled/StyledClose.ts index 1282ef1754..e8e04b7302 100644 --- a/packages/tags/src/styled/StyledClose.ts +++ b/packages/tags/src/styled/StyledClose.ts @@ -15,7 +15,7 @@ const COMPONENT_ID = 'tags.close'; * 2. text content reset */ -export const StyledClose = styled.button.attrs({ +export const StyledClose = styled.button.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/theming/src/elements/ThemeProvider.tsx b/packages/theming/src/elements/ThemeProvider.tsx index b8986b78b0..f0a13e6394 100644 --- a/packages/theming/src/elements/ThemeProvider.tsx +++ b/packages/theming/src/elements/ThemeProvider.tsx @@ -7,10 +7,12 @@ import React, { PropsWithChildren } from 'react'; import { ThemeProvider as StyledThemeProvider } from 'styled-components'; -import { IThemeProviderProps } from '../types'; +import { IGardenTheme, IThemeProviderProps } from '../types'; import DEFAULT_THEME from './theme'; export const ThemeProvider = ({ theme = DEFAULT_THEME, ...other -}: PropsWithChildren) => ; +}: PropsWithChildren) => ( + +); diff --git a/packages/theming/src/utils/StyledBaseIcon.ts b/packages/theming/src/utils/StyledBaseIcon.ts index 92fb027df3..d222a32317 100644 --- a/packages/theming/src/utils/StyledBaseIcon.ts +++ b/packages/theming/src/utils/StyledBaseIcon.ts @@ -5,12 +5,13 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled from 'styled-components'; +import styled, { ExecutionProps } from 'styled-components'; import React, { Children } from 'react'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export const StyledBaseIcon = styled(({ children, theme, ...props }) => - React.cloneElement(Children.only(children), props) +export const StyledBaseIcon = styled( + // eslint-disable-next-line @typescript-eslint/no-unused-vars + ({ children, theme, ...props }: React.HTMLProps & ExecutionProps) => + React.cloneElement(Children.only(children as React.ReactElement), props) )` /* empty-source */ `; diff --git a/packages/typography/src/styled/StyledIcon.spec.tsx b/packages/typography/src/styled/StyledIcon.spec.tsx index 4ea3d22b26..db0bfc427d 100644 --- a/packages/typography/src/styled/StyledIcon.spec.tsx +++ b/packages/typography/src/styled/StyledIcon.spec.tsx @@ -64,7 +64,6 @@ describe('StyledIcon', () => { it('throws if rendered with no child', () => { expect(() => { - // @ts-expect-error Testing with no children render(); }).toThrow(); }); diff --git a/packages/typography/src/styled/StyledIcon.ts b/packages/typography/src/styled/StyledIcon.ts index 583c5fbd1a..7b2a736fbc 100644 --- a/packages/typography/src/styled/StyledIcon.ts +++ b/packages/typography/src/styled/StyledIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; +import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.icon'; @@ -25,7 +25,7 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps) => { `; }; -export const StyledIcon = styled(StyledBaseIcon).attrs({ +export const StyledIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/tsconfig.json b/tsconfig.json index c4e3d92a7a..b5659f935b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -40,6 +40,7 @@ }, "files": [ "utils/build/declarations.d.ts", + "utils/build/react.d.ts", "utils/build/styled.d.ts", "utils/build/Intl.d.ts", "utils/test/jest.d.ts" diff --git a/utils/build/react.d.ts b/utils/build/react.d.ts new file mode 100644 index 0000000000..b87d167be4 --- /dev/null +++ b/utils/build/react.d.ts @@ -0,0 +1,15 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import 'react'; + +declare module 'react' { + interface HTMLAttributes extends AriaAttributes, DOMAttributes { + 'data-garden-id'?: string; + 'data-garden-version'?: string; + } +} diff --git a/utils/build/styled.d.ts b/utils/build/styled.d.ts index 2bdbdcffb1..87548d08b6 100644 --- a/utils/build/styled.d.ts +++ b/utils/build/styled.d.ts @@ -11,4 +11,14 @@ import type { IGardenTheme } from '../../packages/theming/src/index'; declare module 'styled-components' { // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface DefaultTheme extends IGardenTheme {} + + export interface ThemeProps { + theme: T; + } + + export const ThemeContext: React.Context; + export interface ThemeProviderProps { + children?: React.ReactNode | undefined; + theme: T | ((theme: U) => T); + } } From c3eb8e32509b46b51261eaab904755043da7437b Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Fri, 15 Nov 2024 12:35:36 -1000 Subject: [PATCH 04/11] test: fix specs --- .../src/elements/common/MessageIcon.spec.tsx | 2 +- packages/loaders/src/elements/Dots.spec.tsx | 21 ------------------- .../elements/toaster/ToastProvider.spec.tsx | 2 +- 3 files changed, 2 insertions(+), 23 deletions(-) diff --git a/packages/forms/src/elements/common/MessageIcon.spec.tsx b/packages/forms/src/elements/common/MessageIcon.spec.tsx index 73dad043d2..9a6b5c9120 100644 --- a/packages/forms/src/elements/common/MessageIcon.spec.tsx +++ b/packages/forms/src/elements/common/MessageIcon.spec.tsx @@ -18,7 +18,7 @@ describe('MessageIcon', () => { expect(icon.nodeName).toBe('svg'); expect(icon).toHaveAttribute('role', 'img'); - expect(icon).not.toHaveAttribute('aria-hidden'); + expect(icon).toHaveAttribute('aria-hidden', 'false'); }); }); }); diff --git a/packages/loaders/src/elements/Dots.spec.tsx b/packages/loaders/src/elements/Dots.spec.tsx index 455bf47f04..ebfcaabe98 100644 --- a/packages/loaders/src/elements/Dots.spec.tsx +++ b/packages/loaders/src/elements/Dots.spec.tsx @@ -56,17 +56,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1250ms linear infinite; animation: kVOdef 1250ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1250ms linear infinite; animation: idDvaf 1250ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1250ms linear infinite; animation: bDxIcz 1250ms linear infinite; } @@ -107,17 +104,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1250ms linear infinite; animation: kVOdef 1250ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1250ms linear infinite; animation: idDvaf 1250ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1250ms linear infinite; animation: bDxIcz 1250ms linear infinite; } @@ -156,17 +150,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1250ms linear infinite; animation: kVOdef 1250ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1250ms linear infinite; animation: idDvaf 1250ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1250ms linear infinite; animation: bDxIcz 1250ms linear infinite; } @@ -207,17 +198,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1125ms linear infinite; animation: kVOdef 1125ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1125ms linear infinite; animation: idDvaf 1125ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1125ms linear infinite; animation: bDxIcz 1125ms linear infinite; } @@ -256,17 +244,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1125ms linear infinite; animation: kVOdef 1125ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1125ms linear infinite; animation: idDvaf 1125ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1125ms linear infinite; animation: bDxIcz 1125ms linear infinite; } @@ -307,17 +292,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1375ms linear infinite; animation: kVOdef 1375ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1375ms linear infinite; animation: idDvaf 1375ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1375ms linear infinite; animation: bDxIcz 1375ms linear infinite; } @@ -356,17 +338,14 @@ describe('Dots', () => { expect(container.querySelector('g')).toMatchInlineSnapshot(` .c0 { - -webkit-animation: kVOdef 1375ms linear infinite; animation: kVOdef 1375ms linear infinite; } .c1 { - -webkit-animation: idDvaf 1375ms linear infinite; animation: idDvaf 1375ms linear infinite; } .c2 { - -webkit-animation: bDxIcz 1375ms linear infinite; animation: bDxIcz 1375ms linear infinite; } diff --git a/packages/notifications/src/elements/toaster/ToastProvider.spec.tsx b/packages/notifications/src/elements/toaster/ToastProvider.spec.tsx index c2223b762e..d21fd37204 100644 --- a/packages/notifications/src/elements/toaster/ToastProvider.spec.tsx +++ b/packages/notifications/src/elements/toaster/ToastProvider.spec.tsx @@ -79,7 +79,7 @@ describe('ToastProvider', () => { const notificationElements = getAllByText('notification'); for (let x = 0; x < 6; x++) { - expect(notificationElements[x].parentElement).toHaveStyleRule('opacity', '0 !important'); + expect(notificationElements[x].parentElement).toHaveStyleRule('opacity', '0!important'); } for (let x = 6; x < 10; x++) { From eeee419115f92706a960b2c41cca0ba3dacf6663 Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Mon, 2 Dec 2024 12:42:25 -1000 Subject: [PATCH 05/11] refactor: PR feedback --- package-lock.json | 33 ------------------- package.json | 1 - .../breadcrumbs/src/elements/Breadcrumb.tsx | 5 ++- .../src/styled/StyledChevronIcon.tsx | 19 ++--------- .../chrome/src/elements/header/HeaderItem.tsx | 6 ++-- packages/chrome/src/elements/nav/Nav.tsx | 6 ++-- .../src/styled/nav/StyledNavItemIcon.ts | 4 +-- .../src/elements/ColorSwatch/index.tsx | 5 ++- .../src/styled/ColorSwatch/StyledIcon.ts | 5 ++- .../loaders/src/elements/Skeleton.spec.tsx | 6 ++-- packages/loaders/src/styled/StyledSkeleton.ts | 11 +++---- .../src/elements/global-alert/GlobalAlert.tsx | 4 +-- packages/tags/src/elements/Avatar.tsx | 5 +-- packages/theming/src/index.ts | 2 +- packages/theming/src/utils/StyledBaseIcon.ts | 12 ++++--- utils/build/styled.d.ts | 5 +-- 16 files changed, 45 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6e8592f0ed..86caa7570a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,7 +84,6 @@ "styled-components": "6.1.13", "stylelint": "16.10.0", "stylelint-order": "6.0.4", - "stylis": "4.3.4", "temp": "0.9.4", "typescript": "5.6.3", "webpack": "5.95.0" @@ -11595,16 +11594,6 @@ "@types/node": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", - "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", - "dev": true, - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -21480,21 +21469,6 @@ "node": "*" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dev": true, - "dependencies": { - "react-is": "^16.7.0" - } - }, - "node_modules/hoist-non-react-statics/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true - }, "node_modules/hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", @@ -50574,13 +50548,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/stylis": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz", - "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==", - "dev": true, - "license": "MIT" - }, "node_modules/success-symbol": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/success-symbol/-/success-symbol-0.1.0.tgz", diff --git a/package.json b/package.json index 68d6cd83d4..13490b4787 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "styled-components": "6.1.13", "stylelint": "16.10.0", "stylelint-order": "6.0.4", - "stylis": "4.3.4", "temp": "0.9.4", "typescript": "5.6.3", "webpack": "5.95.0" diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.tsx b/packages/breadcrumbs/src/elements/Breadcrumb.tsx index 691ac5d8f2..121483b684 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.tsx +++ b/packages/breadcrumbs/src/elements/Breadcrumb.tsx @@ -6,6 +6,7 @@ */ import React, { Children, cloneElement, forwardRef, HTMLAttributes } from 'react'; +import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg'; import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb'; import { useText } from '@zendeskgarden/react-theming'; import { @@ -38,7 +39,9 @@ export const Breadcrumb = forwardRef>(( <> {child} - + + + ); diff --git a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx index b46408f600..c6566c7b39 100644 --- a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx +++ b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx @@ -5,24 +5,11 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React from 'react'; -import styled, { ExecutionProps } from 'styled-components'; +import styled from 'styled-components'; import { em } from 'polished'; -import { getColor } from '@zendeskgarden/react-theming'; -import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg'; +import { getColor, StyledBaseIcon } from '@zendeskgarden/react-theming'; -/** - * Accepts all `` props - */ -export const StyledChevronIcon = styled( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - ({ children, theme, ...props }: React.SVGProps & ExecutionProps) => ( - - ) -).attrs({ - role: 'presentation', - 'aria-hidden': 'true' -})` +export const StyledChevronIcon = styled(StyledBaseIcon)` transform: ${p => p.theme.rtl && `rotate(180deg);`}; margin: 0 ${p => em(p.theme.space.base, p.theme.fontSizes.md)}; color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })}; diff --git a/packages/chrome/src/elements/header/HeaderItem.tsx b/packages/chrome/src/elements/header/HeaderItem.tsx index c02980ee83..3f80337550 100644 --- a/packages/chrome/src/elements/header/HeaderItem.tsx +++ b/packages/chrome/src/elements/header/HeaderItem.tsx @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React from 'react'; +import React, { HTMLAttributes, RefObject } from 'react'; import PropTypes from 'prop-types'; import { IHeaderItemProps, PRODUCTS } from '../../types'; import { StyledHeaderItem, StyledLogoHeaderItem } from '../../styled'; @@ -20,12 +20,12 @@ export const HeaderItem = React.forwardRef( if (hasLogo) { return ( } + ref={ref as RefObject} $isRound={isRound} $maxX={maxX} $maxY={maxY} $product={product} - {...(other as React.HTMLAttributes)} + {...(other as HTMLAttributes)} /> ); } diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx index 61a2f9a5c4..77fd61f92c 100644 --- a/packages/chrome/src/elements/nav/Nav.tsx +++ b/packages/chrome/src/elements/nav/Nav.tsx @@ -6,7 +6,7 @@ */ import React, { useMemo } from 'react'; -import { ThemeProvider } from 'styled-components'; +import { ThemeProvider } from '@zendeskgarden/react-theming'; import PropTypes from 'prop-types'; import { INavProps } from '../../types'; import { useChromeContext } from '../../utils/useChromeContext'; @@ -25,8 +25,8 @@ export const NavComponent = React.forwardRef( return ( ({ - ...parentTheme!, - colors: { ...parentTheme!.colors, base: isLight ? 'light' : 'dark' } + ...parentTheme, + colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' } })} > diff --git a/packages/chrome/src/styled/nav/StyledNavItemIcon.ts b/packages/chrome/src/styled/nav/StyledNavItemIcon.ts index 41bdeb1e5d..eed1add6a1 100644 --- a/packages/chrome/src/styled/nav/StyledNavItemIcon.ts +++ b/packages/chrome/src/styled/nav/StyledNavItemIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; +import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.nav_item_icon'; @@ -19,7 +19,7 @@ const sizeStyles = ({ theme }: ThemeProps) => { `; }; -export const StyledNavItemIcon = styled(StyledBaseIcon).attrs({ +export const StyledNavItemIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/colorpickers/src/elements/ColorSwatch/index.tsx b/packages/colorpickers/src/elements/ColorSwatch/index.tsx index 039349cbfd..233678b55f 100644 --- a/packages/colorpickers/src/elements/ColorSwatch/index.tsx +++ b/packages/colorpickers/src/elements/ColorSwatch/index.tsx @@ -14,6 +14,7 @@ import React, { useRef, useState } from 'react'; +import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg'; import PropTypes from 'prop-types'; import { mergeRefs } from 'react-merge-refs'; import { ThemeContext } from 'styled-components'; @@ -150,7 +151,9 @@ export const ColorSwatch = forwardRef( {...(gridCellProps as InputHTMLAttributes)} /> - + + + ); diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts index 9e74f1fb5b..133ce06f45 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts @@ -6,13 +6,12 @@ */ import styled, { DataAttributes } from 'styled-components'; -import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { StyledColorSwatchInput } from './StyledColorSwatchInput'; const COMPONENT_ID = 'colorpickers.colorswatch_check'; -export const StyledIcon = styled(CheckIcon as 'svg').attrs({ +export const StyledIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` diff --git a/packages/loaders/src/elements/Skeleton.spec.tsx b/packages/loaders/src/elements/Skeleton.spec.tsx index 64055f04e2..1e0ad69e03 100644 --- a/packages/loaders/src/elements/Skeleton.spec.tsx +++ b/packages/loaders/src/elements/Skeleton.spec.tsx @@ -23,7 +23,7 @@ describe('Skeleton', () => { expect(container.firstChild).toHaveStyleRule('background-color', color); expect(container.firstChild).toHaveStyleRule( 'background-image', - `linear-gradient( 45deg, transparent, ${color}, transparent )`, + `linear-gradient( 45deg, transparent, ${color}, transparent )`, { modifier: '&::before' } @@ -39,7 +39,7 @@ describe('Skeleton', () => { expect(container.firstChild).toHaveStyleRule('background-color', color); expect(container.firstChild).toHaveStyleRule( 'background-image', - `linear-gradient( 45deg, transparent, ${color}, transparent )`, + `linear-gradient( 45deg, transparent, ${color}, transparent )`, { modifier: '&::before' } @@ -63,7 +63,7 @@ describe('Skeleton', () => { expect(container.firstChild).toHaveStyleRule( 'background-image', - `linear-gradient( -45deg, transparent, ${rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[200])}, transparent )`, + `linear-gradient( -45deg, transparent, ${rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[200])}, transparent )`, { modifier: '&::before' } diff --git a/packages/loaders/src/styled/StyledSkeleton.ts b/packages/loaders/src/styled/StyledSkeleton.ts index df17d88e35..5194752c0e 100644 --- a/packages/loaders/src/styled/StyledSkeleton.ts +++ b/packages/loaders/src/styled/StyledSkeleton.ts @@ -82,13 +82,12 @@ const animationStyles = ({ theme }: ThemeProps) => { const gradientStyles = (props: IStyledSkeletonProps & ThemeProps) => { return css` - /* prettier-ignore */ background-image: linear-gradient( -${props.theme.rtl ? '-45deg' : '45deg'}, -transparent, -${getBackgroundColor}, -transparent -); + ${props.theme.rtl ? '-45deg' : '45deg'}, + transparent, + ${getBackgroundColor}, + transparent + ); `; }; diff --git a/packages/notifications/src/elements/global-alert/GlobalAlert.tsx b/packages/notifications/src/elements/global-alert/GlobalAlert.tsx index f7e6f9d0a7..82f3cfe016 100644 --- a/packages/notifications/src/elements/global-alert/GlobalAlert.tsx +++ b/packages/notifications/src/elements/global-alert/GlobalAlert.tsx @@ -7,7 +7,7 @@ import React, { forwardRef, useMemo } from 'react'; import PropTypes from 'prop-types'; -import { ThemeProvider } from 'styled-components'; +import { ThemeProvider } from '@zendeskgarden/react-theming'; import InfoIcon from '@zendeskgarden/svg-icons/src/16/info-stroke.svg'; import ErrorIcon from '@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg'; import WarningIcon from '@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg'; @@ -38,7 +38,7 @@ const GlobalAlertComponent = forwardRef( return ( /* [1] */ - ({ ...theme!, colors: { ...theme!.colors, base: 'light' } })}> + ({ ...theme, colors: { ...theme.colors, base: 'light' } })}> ({ type }), [type])}> {/* [2] */} {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */} diff --git a/packages/tags/src/elements/Avatar.tsx b/packages/tags/src/elements/Avatar.tsx index 8b02062012..524453d8e9 100644 --- a/packages/tags/src/elements/Avatar.tsx +++ b/packages/tags/src/elements/Avatar.tsx @@ -5,10 +5,11 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import React, { HTMLAttributes } from 'react'; +import React from 'react'; import { StyledAvatar } from '../styled'; +import { IStyledBaseIconProps } from '@zendeskgarden/react-theming'; -const AvatarComponent = (props: HTMLAttributes) => ; +const AvatarComponent = (props: IStyledBaseIconProps) => ; AvatarComponent.displayName = 'Tag.Avatar'; diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts index 0ba47595da..6eb5a3f10f 100644 --- a/packages/theming/src/index.ts +++ b/packages/theming/src/index.ts @@ -24,7 +24,7 @@ export { useWindow } from './utils/useWindow'; export { useText } from './utils/useText'; export { default as menuStyles } from './utils/menuStyles'; export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles'; -export { StyledBaseIcon } from './utils/StyledBaseIcon'; +export { StyledBaseIcon, type IStyledBaseIconProps } from './utils/StyledBaseIcon'; export { ARROW_POSITION, diff --git a/packages/theming/src/utils/StyledBaseIcon.ts b/packages/theming/src/utils/StyledBaseIcon.ts index d222a32317..222715c20f 100644 --- a/packages/theming/src/utils/StyledBaseIcon.ts +++ b/packages/theming/src/utils/StyledBaseIcon.ts @@ -5,13 +5,15 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { ExecutionProps } from 'styled-components'; -import React, { Children } from 'react'; - +import styled, { DefaultTheme } from 'styled-components'; +import { Children, cloneElement, PropsWithChildren, ReactElement, SVGAttributes } from 'react'; +export interface IStyledBaseIconProps extends PropsWithChildren> { + theme?: DefaultTheme; +} export const StyledBaseIcon = styled( // eslint-disable-next-line @typescript-eslint/no-unused-vars - ({ children, theme, ...props }: React.HTMLProps & ExecutionProps) => - React.cloneElement(Children.only(children as React.ReactElement), props) + ({ children, theme, ...props }: IStyledBaseIconProps) => + cloneElement(Children.only(children as ReactElement), props) )` /* empty-source */ `; diff --git a/utils/build/styled.d.ts b/utils/build/styled.d.ts index 87548d08b6..e9b04fe564 100644 --- a/utils/build/styled.d.ts +++ b/utils/build/styled.d.ts @@ -7,6 +7,7 @@ import 'styled-components'; import type { IGardenTheme } from '../../packages/theming/src/index'; +import type { ReactNode, Context } from 'react'; declare module 'styled-components' { // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -16,9 +17,9 @@ declare module 'styled-components' { theme: T; } - export const ThemeContext: React.Context; + export const ThemeContext: Context; export interface ThemeProviderProps { - children?: React.ReactNode | undefined; + children?: ReactNode | undefined; theme: T | ((theme: U) => T); } } From 10dc96ab3a0b57b674eaf2fb6bd63e7f37cc78b8 Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Mon, 2 Dec 2024 13:07:35 -1000 Subject: [PATCH 06/11] chore: fix type error --- .../src/views/combobox/StyledOptionSelectionIcon.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts index c80397d633..4c064e0e88 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; +import styled, { css, DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; import { getColor, retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { getMinHeight as getOptionMinHeight } from './StyledOption'; @@ -38,10 +38,10 @@ const sizeStyles = ({ theme, $isCompact }: IStyledOptionSelectionIconProps) => { `; }; -export const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({ +export const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` position: absolute; ${sizeStyles}; From d49e6f3892f092d57233b456dfdcaaa7fb4e478a Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Tue, 3 Dec 2024 17:35:09 -0500 Subject: [PATCH 07/11] feat(theming): add `componentStyles` utility --- docs/api.md | 9 +++-- packages/theming/src/index.ts | 1 + packages/theming/src/utils/componentStyles.ts | 36 +++++++++++++++++++ .../src/utils/retrieveComponentStyles.ts | 2 +- 4 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 packages/theming/src/utils/componentStyles.ts diff --git a/docs/api.md b/docs/api.md index 4883148775..24b26b1472 100644 --- a/docs/api.md +++ b/docs/api.md @@ -33,7 +33,7 @@ ensuring the details live up to expectations. - Styling should endeavor to support the most canonical HTML form(s) possible. - Components extend the most appropriate semantic HTML element, e.g. - `` const Button = styled.button`...`; ``. + ``const Button = styled.button`...`;``. - Analytics `attrs` are added for `data-garden-id` and `data-garden-version`. - [Concentric](https://github.com/brandon-rhodes/Concentric-CSS) CSS order is maintained with the help of `stylelint`. @@ -43,7 +43,7 @@ ensuring the details live up to expectations. for an ideal example): - "Base" properties: display, position, flex, transition, direction, etc (anything NOT related to size or color) - - `${sizeStyles(props)}`: a function that contains all properties related + - `${sizeStyles}`: a function that contains all properties related to component sizing (usually based on calculated relationships), i.e. margin, padding, width, height, line-height, font-size – all grouped ordering (including pseudos, children, etc) applies within the @@ -52,7 +52,7 @@ ensuring the details live up to expectations. - `:hover` - `:focus` - `:active` - - `${colorStyles(props)}`: a function that contains all properties related + - `${colorStyles}`: a function that contains all properties related to component color, i.e. border-color, background-color, color, box-shadow – including any color modifications based on pseudo-class states, in the order shown above – all grouped ordering (including psuedos, children, @@ -63,8 +63,7 @@ ensuring the details live up to expectations. property groupings – note that children styled components should contain all their CSS properties, when possible - The last declaration in any view component is - `${retrieveComponentStyles(COMPONENT_ID, props)}` which allows an - implementer to leverage the + `${componentStyles}` which allows an implementer to leverage the [`theme`](https://zendeskgarden.github.io/react-components/theming/) "components" object to override specific component styles. - The view component `defaultProps` must contain `theme: DEFAULT_THEME` for diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts index 6eb5a3f10f..ab0692cfaa 100644 --- a/packages/theming/src/index.ts +++ b/packages/theming/src/index.ts @@ -9,6 +9,7 @@ export { ThemeProvider } from './elements/ThemeProvider'; export { default as DEFAULT_THEME } from './elements/theme'; export { default as PALETTE } from './elements/palette'; export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles'; +export { componentStyles } from './utils/componentStyles'; export { getArrowPosition } from './utils/getArrowPosition'; export { getCheckeredBackground } from './utils/getCheckeredBackground'; export { getColor } from './utils/getColor'; diff --git a/packages/theming/src/utils/componentStyles.ts b/packages/theming/src/utils/componentStyles.ts new file mode 100644 index 0000000000..2e37d1a890 --- /dev/null +++ b/packages/theming/src/utils/componentStyles.ts @@ -0,0 +1,36 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import { DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; + +/** + * CSS for component customizations based on `theme.components[componentId]` + * where `componentId` is provided by the `data-garden-id` attribute. + * + * @param {Object} options.theme Provides `components` object use to resolve the given component ID + * @param {String} [options.componentId] Specifies the lookup id for * `theme.components` styles. + * The ID will be inferred from the `'data-garden-id'` attribute if not provided. + * + * @returns component CSS styles + */ +export const componentStyles = (props: ThemeProps & { componentId?: string }) => { + let retVal: string | undefined; + const components = props.theme?.components; + const componentId = props.componentId || (props as unknown as DataAttributes)['data-garden-id']; + + if (components && componentId) { + retVal = components[componentId]; + + if (typeof retVal === 'function') { + const fn = retVal as (p: ThemeProps & unknown) => string; + + retVal = fn(props); + } + } + + return retVal; +}; diff --git a/packages/theming/src/utils/retrieveComponentStyles.ts b/packages/theming/src/utils/retrieveComponentStyles.ts index 9a7b799c54..dda800ffb7 100644 --- a/packages/theming/src/utils/retrieveComponentStyles.ts +++ b/packages/theming/src/utils/retrieveComponentStyles.ts @@ -7,7 +7,7 @@ import { ThemeProps, DefaultTheme } from 'styled-components'; -/** @component */ +/** @deprecated Use `componentStyles` instead. */ export default function retrieveComponentStyles( componentId: string, props: Partial>> From 6021148e3242a3d05dff178bc6584f07683ecaca Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Wed, 4 Dec 2024 11:00:10 -0500 Subject: [PATCH 08/11] Add unit testing --- .../theming/src/utils/componentStyles.spec.ts | 42 +++++++++++++++++++ packages/theming/src/utils/componentStyles.ts | 4 +- 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 packages/theming/src/utils/componentStyles.spec.ts diff --git a/packages/theming/src/utils/componentStyles.spec.ts b/packages/theming/src/utils/componentStyles.spec.ts new file mode 100644 index 0000000000..3757d5ae22 --- /dev/null +++ b/packages/theming/src/utils/componentStyles.spec.ts @@ -0,0 +1,42 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import { componentStyles } from './componentStyles'; + +describe('componentStyles', () => { + const VALUE = 'content: "test";'; + + it('returns component styles from the theme as expected', () => { + const props = { 'data-garden-id': 'test', theme: { components: { test: VALUE } } } as any; + const result = componentStyles(props); + + expect(result).toBe(VALUE); + }); + + it('returns undefined if no component styles are found', () => { + const props = { 'data-garden-id': 'test', theme: {} } as any; + const result = componentStyles(props); + + expect(result).toBeUndefined(); + }); + + it('handles component styles provided as a function', () => { + const fn = jest.fn().mockReturnValue(VALUE); + const props = { 'data-garden-id': 'test', theme: { components: { test: fn } } } as any; + const result = componentStyles(props); + + expect(result).toBe(VALUE); + }); + + it('accepts a custom component ID', () => { + const componentId = 'custom'; + const props = { theme: { components: { [componentId]: VALUE } } } as any; + const result = componentStyles({ ...props, componentId }); + + expect(result).toBe(VALUE); + }); +}); diff --git a/packages/theming/src/utils/componentStyles.ts b/packages/theming/src/utils/componentStyles.ts index 2e37d1a890..919efa7de8 100644 --- a/packages/theming/src/utils/componentStyles.ts +++ b/packages/theming/src/utils/componentStyles.ts @@ -11,8 +11,8 @@ import { DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; * CSS for component customizations based on `theme.components[componentId]` * where `componentId` is provided by the `data-garden-id` attribute. * - * @param {Object} options.theme Provides `components` object use to resolve the given component ID - * @param {String} [options.componentId] Specifies the lookup id for * `theme.components` styles. + * @param {Object} props.theme Provides `components` object use to resolve the given component ID + * @param {String} [props.componentId] Specifies the lookup id for * `theme.components` styles. * The ID will be inferred from the `'data-garden-id'` attribute if not provided. * * @returns component CSS styles From d2640416c49e5c3f1aa9332d74c693dbc6b67e8d Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 6 Dec 2024 10:15:39 -0500 Subject: [PATCH 09/11] Revert API doc formatting --- docs/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api.md b/docs/api.md index 24b26b1472..aeeb5380f4 100644 --- a/docs/api.md +++ b/docs/api.md @@ -33,7 +33,7 @@ ensuring the details live up to expectations. - Styling should endeavor to support the most canonical HTML form(s) possible. - Components extend the most appropriate semantic HTML element, e.g. - ``const Button = styled.button`...`;``. + `` const Button = styled.button`...`; ``. - Analytics `attrs` are added for `data-garden-id` and `data-garden-version`. - [Concentric](https://github.com/brandon-rhodes/Concentric-CSS) CSS order is maintained with the help of `stylelint`. From e06ab51773d3deec878ec447dc5a968db5a6945c Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Fri, 6 Dec 2024 10:22:44 -0500 Subject: [PATCH 10/11] Update JS doc --- packages/theming/src/utils/componentStyles.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/theming/src/utils/componentStyles.ts b/packages/theming/src/utils/componentStyles.ts index 919efa7de8..776eedc2a0 100644 --- a/packages/theming/src/utils/componentStyles.ts +++ b/packages/theming/src/utils/componentStyles.ts @@ -8,8 +8,7 @@ import { DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; /** - * CSS for component customizations based on `theme.components[componentId]` - * where `componentId` is provided by the `data-garden-id` attribute. + * CSS for component customizations based on `theme.components[componentId]`. * * @param {Object} props.theme Provides `components` object use to resolve the given component ID * @param {String} [props.componentId] Specifies the lookup id for * `theme.components` styles. From 2ee9a0ae70c164fb466f57fd8446eac7dcfffcd5 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Thu, 12 Dec 2024 12:50:12 -0500 Subject: [PATCH 11/11] Address TS feedback from @ze-flo --- packages/theming/src/utils/componentStyles.ts | 8 ++++---- packages/theming/src/utils/retrieveComponentStyles.ts | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/theming/src/utils/componentStyles.ts b/packages/theming/src/utils/componentStyles.ts index 776eedc2a0..eb8060b3b6 100644 --- a/packages/theming/src/utils/componentStyles.ts +++ b/packages/theming/src/utils/componentStyles.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import { DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; +import { DataAttributes, DefaultTheme } from 'styled-components'; /** * CSS for component customizations based on `theme.components[componentId]`. @@ -16,16 +16,16 @@ import { DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; * * @returns component CSS styles */ -export const componentStyles = (props: ThemeProps & { componentId?: string }) => { +export const componentStyles = (props: { theme: DefaultTheme; componentId?: string }) => { let retVal: string | undefined; - const components = props.theme?.components; + const components = props.theme.components; const componentId = props.componentId || (props as unknown as DataAttributes)['data-garden-id']; if (components && componentId) { retVal = components[componentId]; if (typeof retVal === 'function') { - const fn = retVal as (p: ThemeProps & unknown) => string; + const fn = retVal as (p: { theme: DefaultTheme } & unknown) => string; retVal = fn(props); } diff --git a/packages/theming/src/utils/retrieveComponentStyles.ts b/packages/theming/src/utils/retrieveComponentStyles.ts index dda800ffb7..d014a0a617 100644 --- a/packages/theming/src/utils/retrieveComponentStyles.ts +++ b/packages/theming/src/utils/retrieveComponentStyles.ts @@ -5,14 +5,14 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import { ThemeProps, DefaultTheme } from 'styled-components'; +import { DefaultTheme } from 'styled-components'; /** @deprecated Use `componentStyles` instead. */ export default function retrieveComponentStyles( componentId: string, - props: Partial>> + props: { theme?: Partial } ) { - const components = props.theme && props.theme.components; + const components = props.theme?.components; if (!components) { return undefined;