From f380911713d1887918e5e7d50ac6553c39e7cb5a Mon Sep 17 00:00:00 2001 From: Nobel Date: Wed, 3 Sep 2025 14:16:45 +0800 Subject: [PATCH 1/3] [BOOKINGSG-7949][NT] Upgrade styled components to v6 --- package-lock.json | 129 ++++++++++-------- package.json | 4 +- src/button/button.style.tsx | 6 +- src/date-navigator/date-navigator.style.tsx | 8 +- src/design-token/types.ts | 4 +- src/divider/divider.style.tsx | 6 +- src/drawer/drawer.styles.tsx | 4 +- src/error-display/error-display.style.tsx | 6 +- .../file-list-card/file-list-card.styles.tsx | 6 +- src/file-upload/file-item-edit.styles.tsx | 6 +- .../file-list-item-thumbnail.tsx | 2 +- .../file-list-item/file-list-item.styles.tsx | 6 +- src/file-upload/file-list.styles.tsx | 4 +- src/footer/footer.style.tsx | 8 +- src/form/form-label.style.tsx | 6 +- .../fullscreen-image-carousel.style.tsx | 2 +- src/image-button/image-button.style.tsx | 6 +- src/input-group/input-group.style.tsx | 12 +- .../input-range-slider.styles.ts | 6 +- src/input-textarea/textarea.style.tsx | 20 +-- src/input/input.style.tsx | 8 +- src/link-list/link-list.styles.tsx | 6 +- src/masked-input/masked-input.style.tsx | 6 +- src/modal/modal-box.styles.tsx | 2 +- src/navbar/drawer.styles.tsx | 4 +- src/navbar/menu.styles.tsx | 14 +- src/navbar/navbar-action-buttons.styles.tsx | 6 +- src/navbar/navbar-items.styles.tsx | 10 +- .../notification-banner.styles.tsx | 8 +- src/pagination/pagination.styles.tsx | 22 +-- .../expandable-element.styles.tsx | 2 +- .../dropdown-list/dropdown-list.styles.tsx | 14 +- .../dropdown-wrapper.styles.tsx | 14 +- src/shared/html-content/html-content.ts | 8 +- src/shared/input-wrapper/input-wrapper.tsx | 26 ++-- .../calendar-manager.style.tsx | 2 +- .../standard-calendar-day-view.style.tsx | 4 +- src/shared/progress-bar/progress-bar.tsx | 2 +- .../timepicker-dropdown.styles.tsx | 6 +- src/sidenav/sidenav-drawer-item.styles.tsx | 4 +- src/sidenav/sidenav-drawer-subitem.styles.tsx | 4 +- src/sidenav/sidenav-item.styles.tsx | 4 +- src/tab/tab-link-chain.style.tsx | 2 +- src/text/text.tsx | 6 +- .../time-slot-bar-week-days.style.tsx | 4 +- src/timeline/timeline.style.tsx | 2 +- src/timetable/timetable.style.tsx | 6 +- src/toast/toast.styles.tsx | 2 +- src/toggle/toggle.styles.tsx | 12 +- src/tooltip/tooltip.styles.tsx | 16 +-- .../uneditable-section.styles.tsx | 2 +- src/unit-number/unit-number-input.style.tsx | 2 +- stories/accordion/doc-elements.tsx | 2 +- stories/button/doc-elements.tsx | 2 +- stories/popover/doc-elements.tsx | 4 +- stories/radio-button/doc-elements.tsx | 2 +- .../api-table/api-table-components.tsx | 10 +- stories/storybook-common/tabs.tsx | 4 +- stories/storybook-common/text.style.tsx | 10 +- stories/text-list/doc-elements.tsx | 2 +- stories/text/collection-doc-elements.tsx | 8 +- stories/text/doc-elements.tsx | 6 +- stories/toggle/doc-elements.tsx | 2 +- stories/tooltip/doc-elements.tsx | 4 +- 64 files changed, 272 insertions(+), 265 deletions(-) diff --git a/package-lock.json b/package-lock.json index fa3960e8e..b7dc67828 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "@lifesg/react-design-system", "version": "2.13.3", - "hasInstallScript": true, "license": "ISC", "dependencies": { "fabric": "^6.7.0", @@ -102,7 +101,7 @@ "rollup-plugin-typescript2": "^0.36.0", "storybook": "^8.6.12", "style-loader": "^2.0.0", - "styled-components": "^5.3.5", + "styled-components": "^6.1.19", "typescript": "^4.8.2" }, "peerDependencies": { @@ -111,7 +110,7 @@ "@lifesg/react-icons": "^1.5.0", "react": "^17.0.2 || ^18.0.0", "react-dom": "^17.0.2 || ^18.0.0", - "styled-components": "^5.3.5" + "styled-components": "^6.1.19" } }, "node_modules/@adobe/css-tools": { @@ -2068,33 +2067,26 @@ } }, "node_modules/@emotion/is-prop-valid": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz", - "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "dev": true, "license": "MIT", "dependencies": { - "@emotion/memoize": "^0.9.0" + "@emotion/memoize": "^0.8.1" } }, "node_modules/@emotion/memoize": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", - "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", - "dev": true, - "license": "MIT" - }, - "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==", + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", "dev": true, "license": "MIT" }, "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==", + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", "dev": true, "license": "MIT" }, @@ -5851,6 +5843,13 @@ "csstype": "^3.0.2" } }, + "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, + "license": "MIT" + }, "node_modules/@types/supports-color": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.3.tgz", @@ -22056,14 +22055,6 @@ } } }, - "node_modules/react-is": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz", - "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==", - "dev": true, - "license": "MIT", - "peer": true - }, "node_modules/react-property": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz", @@ -25491,25 +25482,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.19", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz", + "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==", "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.49", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=10" + "node": ">= 16" }, "funding": { "type": "opencollective", @@ -25517,33 +25507,45 @@ }, "peerDependencies": { "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" + "react-dom": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "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": { - "has-flag": "^3.0.0" + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { - "node": ">=4" + "node": "^10 || ^12 || >=14" } }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true, + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -25575,6 +25577,13 @@ "node": ">=4" } }, + "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/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index c23407848..d4b5f945c 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "rollup-plugin-typescript2": "^0.36.0", "storybook": "^8.6.12", "style-loader": "^2.0.0", - "styled-components": "^5.3.5", + "styled-components": "^6.1.19", "typescript": "^4.8.2" }, "peerDependencies": { @@ -135,7 +135,7 @@ "@lifesg/react-icons": "^1.5.0", "react": "^17.0.2 || ^18.0.0", "react-dom": "^17.0.2 || ^18.0.0", - "styled-components": "^5.3.5" + "styled-components": "^6.1.19" }, "lint-staged": { "*.{tsx,ts}": [ diff --git a/src/button/button.style.tsx b/src/button/button.style.tsx index 0efcff4b7..81c054fe1 100644 --- a/src/button/button.style.tsx +++ b/src/button/button.style.tsx @@ -73,9 +73,9 @@ export const Main = styled.button` color: ${props.$buttonIsDanger ? DesignToken.Button.Danger.Primary : Color.Primary}; - :hover, - :active, - :focus { + &:hover, + &:active, + &:focus { color: ${props.$buttonIsDanger ? DesignToken.Button.Danger.Hover : Color.Secondary}; diff --git a/src/date-navigator/date-navigator.style.tsx b/src/date-navigator/date-navigator.style.tsx index 947902fa1..6dcee55c5 100644 --- a/src/date-navigator/date-navigator.style.tsx +++ b/src/date-navigator/date-navigator.style.tsx @@ -15,10 +15,10 @@ export const HeaderArrowButton = styled(ClickableIcon)` border-radius: 0.25rem; border: 1px solid ${Color.Neutral[5]}; background-color: ${Color.Neutral[8]}; - :hover { + &:hover { background-color: ${Color.Neutral[7]}; } - :disabled { + &:disabled { cursor: not-allowed; background-color: ${Color.Neutral[6]}; } @@ -45,7 +45,7 @@ export const StyledDateTextButton = styled(Button.Default)` ${(props) => { if (props.$enableDateClick) { return css` - :hover { + &:hover { cursor: pointer; text-decoration: underline; text-underline-position: under; @@ -54,7 +54,7 @@ export const StyledDateTextButton = styled(Button.Default)` } return css` background-color: ${Color.Neutral[7]}; - :hover { + &:hover { cursor: default; } `; diff --git a/src/design-token/types.ts b/src/design-token/types.ts index c0b02be67..35ce6a1bf 100644 --- a/src/design-token/types.ts +++ b/src/design-token/types.ts @@ -1,6 +1,6 @@ -import { SimpleInterpolation, css } from "styled-components"; +import { CSSObject, css } from "styled-components"; -export type CssValue = SimpleInterpolation | ReturnType; +export type CssValue = CSSObject | string | number | ReturnType; export interface DesignTokenSet { InputBoxShadow: CssValue; diff --git a/src/divider/divider.style.tsx b/src/divider/divider.style.tsx index 59dcfe3d4..b6f548836 100644 --- a/src/divider/divider.style.tsx +++ b/src/divider/divider.style.tsx @@ -14,7 +14,7 @@ interface StyleProps { // ============================================================================= // STYLING // ============================================================================= -const dashedLineStyle = () => (props: StyleProps) => { +const dashedLineStyle = (props: StyleProps) => { let color; if (props.$color && typeof props.$color === "function") { @@ -42,9 +42,7 @@ export const Line = styled.hr` ${(props) => { switch (props.$lineStyle) { case "dashed": - return css` - ${dashedLineStyle} - `; + return dashedLineStyle(props); case "solid": return css` height: ${props.$thickness}px; diff --git a/src/drawer/drawer.styles.tsx b/src/drawer/drawer.styles.tsx index e2952260d..dd3f301ee 100644 --- a/src/drawer/drawer.styles.tsx +++ b/src/drawer/drawer.styles.tsx @@ -87,8 +87,8 @@ export const CloseButton = styled(ClickableIcon)` padding: 0; order: -1; // show button on the left of the header - :active, - :focus { + &:active, + &:focus { color: ${Color.Primary}; } diff --git a/src/error-display/error-display.style.tsx b/src/error-display/error-display.style.tsx index 0c01b6fb2..dd8fbddd3 100644 --- a/src/error-display/error-display.style.tsx +++ b/src/error-display/error-display.style.tsx @@ -60,9 +60,9 @@ export const DescriptionContainer = styled.div` ${TextStyleHelper.getTextStyle("Body", "semibold")} color: ${Color.Primary}; - :hover, - :active, - :focus { + &:hover, + &:active, + &:focus { color: ${Color.Secondary}; } } diff --git a/src/file-download/file-list-card/file-list-card.styles.tsx b/src/file-download/file-list-card/file-list-card.styles.tsx index efa8e9259..2cb19e2c9 100644 --- a/src/file-download/file-list-card/file-list-card.styles.tsx +++ b/src/file-download/file-list-card/file-list-card.styles.tsx @@ -24,7 +24,7 @@ export const Item = styled.li` width: 100%; border: none; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 1rem; } `; @@ -41,7 +41,7 @@ export const Box = styled.div` ${MediaQuery.MaxWidth.mobileL} { padding: 1rem; } - :hover { + &:hover { background: ${Color.Accent.Light[5]}; } `; @@ -184,7 +184,7 @@ export const ActionContainer = styled.div` export const IconButton = styled(DSIconButton)` min-width: unset; - :not(:last-child) { + &:not(:last-child) { margin-right: 1rem; } `; diff --git a/src/file-upload/file-item-edit.styles.tsx b/src/file-upload/file-item-edit.styles.tsx index 68b37db5f..d4301d56c 100644 --- a/src/file-upload/file-item-edit.styles.tsx +++ b/src/file-upload/file-item-edit.styles.tsx @@ -20,7 +20,7 @@ export const Item = styled.li` padding: 2rem 0; background: transparent; - :not(:last-child) { + &:not(:last-child) { border-bottom: 1px solid ${Color.Neutral[5]}; } `; @@ -84,13 +84,13 @@ export const ActionButtonsSection = styled.div` export const ActionButton = styled(Button.Small)` width: 7.5rem; - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 1rem; } ${MediaQuery.MaxWidth.mobileL} { width: 100%; - :not(:last-of-type) { + &:not(:last-of-type) { margin-bottom: 1rem; } } diff --git a/src/file-upload/file-list-item/file-list-item-thumbnail.tsx b/src/file-upload/file-list-item/file-list-item-thumbnail.tsx index f559e7f66..edf40b494 100644 --- a/src/file-upload/file-list-item/file-list-item-thumbnail.tsx +++ b/src/file-upload/file-list-item/file-list-item-thumbnail.tsx @@ -73,7 +73,7 @@ export const ReplaceButton = styled.button` cursor: pointer; ${TextStyleHelper.getTextStyle("BodySmall", "semibold")}; color: ${Color.Primary}; - :hover { + &:hover { color: ${Color.PrimaryDark}; } `; diff --git a/src/file-upload/file-list-item/file-list-item.styles.tsx b/src/file-upload/file-list-item/file-list-item.styles.tsx index 0ec483756..eeb35e776 100644 --- a/src/file-upload/file-list-item/file-list-item.styles.tsx +++ b/src/file-upload/file-list-item/file-list-item.styles.tsx @@ -51,7 +51,7 @@ export const Item = styled.li` width: 100%; border: none; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 1rem; } @@ -70,7 +70,7 @@ export const Item = styled.li` `; } else if (props.$sortable) { return css` - :hover { + &:hover { cursor: grab; } // Following recommendation by the library for touch events @@ -267,7 +267,7 @@ export const ActionContainer = styled.div` export const IconButton = styled(DSIconButton)` min-width: unset; - :not(:last-child) { + &:not(:last-child) { margin-right: 1rem; } `; diff --git a/src/file-upload/file-list.styles.tsx b/src/file-upload/file-list.styles.tsx index bc5dec8c4..998378666 100644 --- a/src/file-upload/file-list.styles.tsx +++ b/src/file-upload/file-list.styles.tsx @@ -20,11 +20,11 @@ export const EditableItemsContainer = styled.li` border-top: 1px solid ${Color.Neutral[5]}; border-bottom: 1px solid ${Color.Neutral[5]}; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 2rem; } - :not(:first-child) { + &:not(:first-child) { margin-top: 2rem; } diff --git a/src/footer/footer.style.tsx b/src/footer/footer.style.tsx index 7489258f5..2b6f9eace 100644 --- a/src/footer/footer.style.tsx +++ b/src/footer/footer.style.tsx @@ -54,13 +54,13 @@ export const LinkSection = styled.ul` grid-column: 3 / span 2; list-style-type: none; - :nth-of-type(2) { + &:nth-of-type(2) { // 2nd col grid-column: 5 / span 2; } li { - :not(:last-child) { + &:not(:last-child) { margin-bottom: 0.5rem; } @@ -75,7 +75,7 @@ export const LinkSection = styled.ul` // first col grid-column: 1 / span 4; - :nth-of-type(2) { + &:nth-of-type(2) { // 2nd col grid-column: 5 / span 4; } @@ -85,7 +85,7 @@ export const LinkSection = styled.ul` // first col grid-column: 1 / span 2; - :nth-of-type(2) { + &:nth-of-type(2) { // 2nd col grid-column: 3 / span 2; } diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index c7cb9b908..b5f4d6067 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -21,9 +21,9 @@ export const Label = styled.label` color: ${Color.Primary}; text-decoration: none; - :hover, - :active, - :focus { + &:hover, + &:active, + &focus { color: ${Color.Secondary}; svg { diff --git a/src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx b/src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx index fe52549be..2f1d5650b 100644 --- a/src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx +++ b/src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx @@ -233,7 +233,7 @@ export const ThumbnailItem = styled.div` } ` : css` - :hover { + &:hover { border: 1px solid ${Color.Neutral[5]}; } `}; diff --git a/src/image-button/image-button.style.tsx b/src/image-button/image-button.style.tsx index f5641fe92..5055ddac6 100644 --- a/src/image-button/image-button.style.tsx +++ b/src/image-button/image-button.style.tsx @@ -43,7 +43,7 @@ export const Main = styled.button<{ background: ${Color.Neutral[8]}; border: 1px solid ${Color.Validation.Red.Border}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Red}; } `; @@ -52,7 +52,7 @@ export const Main = styled.button<{ background: ${Color.Accent.Light[5]}; border: 1px solid ${Color.Primary}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Accent}; } `; @@ -66,7 +66,7 @@ export const Main = styled.button<{ } }} - :disabled { + &:disabled { &:hover { border: 1px solid transparent; } diff --git a/src/input-group/input-group.style.tsx b/src/input-group/input-group.style.tsx index 1ebfb9687..5a7808731 100644 --- a/src/input-group/input-group.style.tsx +++ b/src/input-group/input-group.style.tsx @@ -33,7 +33,7 @@ export const Container = styled.div` flex-direction: ${(props) => props.$position === "right" ? "row-reverse" : "row"}; - :focus-within { + &:focus-within { border: 1px solid ${Color.Accent.Light[1]}; box-shadow: ${DesignToken.InputBoxShadow}; } @@ -45,7 +45,7 @@ export const Container = styled.div` padding: 0; background: transparent !important; - :focus-within { + &:focus-within { border: none; box-shadow: none; } @@ -53,11 +53,11 @@ export const Container = styled.div` } else if (props.disabled) { return css` background: ${Color.Neutral[6](props)}; - :hover { + &:hover { cursor: not-allowed; } - :focus-within { + &:focus-within { border: 1px solid ${Color.Neutral[5](props)}; box-shadow: none; } @@ -66,7 +66,7 @@ export const Container = styled.div` return css` border: 1px solid ${Color.Validation.Red.Border(props)}; - :focus-within { + &:focus-within { border: 1px solid ${Color.Validation.Red.Border(props)}; box-shadow: ${DesignToken.InputErrorBoxShadow}; } @@ -82,7 +82,7 @@ export const MainInput = styled(Input)` border: none; padding: 0; - :focus-within { + &:focus-within { outline: none; border: none; box-shadow: none; diff --git a/src/input-range-slider/input-range-slider.styles.ts b/src/input-range-slider/input-range-slider.styles.ts index 3ef68de78..ae6d3ae7e 100644 --- a/src/input-range-slider/input-range-slider.styles.ts +++ b/src/input-range-slider/input-range-slider.styles.ts @@ -58,14 +58,14 @@ export const Knob = styled.div` if (!props.$readOnly) { return css` cursor: grab; - :active { + &:active { cursor: grabbing; } `; } }} - :after { + &:after { content: ""; display: block; height: 0.875rem; @@ -88,7 +88,7 @@ export const SliderThumb = styled.div` position: relative; outline: none; - :focus-visible ${Knob}:after { + &:focus-visible ${Knob}:after { border: 1px solid ${Color.Primary}; } `; diff --git a/src/input-textarea/textarea.style.tsx b/src/input-textarea/textarea.style.tsx index 73e2abe24..793f8c021 100644 --- a/src/input-textarea/textarea.style.tsx +++ b/src/input-textarea/textarea.style.tsx @@ -32,15 +32,15 @@ export const Element = styled.textarea` color: ${Color.Neutral[1]}; background: ${Color.Neutral[8]}; - :focus, - :active { + &:focus, + &:active { outline: none; border: 1px solid ${Color.Accent.Light[1]}; box-shadow: ${DesignToken.InputBoxShadow}; } - ::placeholder, - ::-webkit-input-placeholder { + &::placeholder, + &::-webkit-input-placeholder { color: ${Color.Neutral[3]}; } @@ -51,8 +51,8 @@ export const Element = styled.textarea` padding: 0.75rem 0; background: transparent !important; - :focus, - :active { + &:focus, + &:active { border: none; box-shadow: none; } @@ -62,8 +62,8 @@ export const Element = styled.textarea` background: ${Color.Neutral[6](props)}; cursor: not-allowed; - :focus, - :active { + &:focus, + &:active { outline: none; border: 1px solid ${Color.Neutral[5](props)}; box-shadow: none; @@ -73,8 +73,8 @@ export const Element = styled.textarea` return css` border: 1px solid ${Color.Validation.Red.Border(props)}; - :focus, - :active { + &:focus, + &:active { border: 1px solid ${Color.Validation.Red.Border(props)}; box-shadow: ${DesignToken.InputErrorBoxShadow}; } diff --git a/src/input/input.style.tsx b/src/input/input.style.tsx index 90289d714..687a67f2f 100644 --- a/src/input/input.style.tsx +++ b/src/input/input.style.tsx @@ -24,15 +24,15 @@ export const InputElement = styled.input` width: 100%; padding: 0; - :focus, - :active { + &:focus, + &:active { outline: none; border: none; box-shadow: none; } - ::placeholder, - ::-webkit-input-placeholder { + &::placeholder, + &::-webkit-input-placeholder { color: ${Color.Neutral[3]}; } diff --git a/src/link-list/link-list.styles.tsx b/src/link-list/link-list.styles.tsx index 99fed5339..38815e098 100644 --- a/src/link-list/link-list.styles.tsx +++ b/src/link-list/link-list.styles.tsx @@ -47,11 +47,11 @@ export const Item = styled.a` align-items: center; min-height: 4rem; - :not(:last-of-type) { + &:not(:last-of-type) { border-bottom: 1px solid ${Color.Neutral[5]}; } - :hover { + &:hover { ${ItemTitleDefault}, ${ItemTitleSmall}, ${ItemIcon} { @@ -103,7 +103,7 @@ export const ToggleButton = styled.button` transition: border-width 300ms linear; border-top: 1px solid ${Color.Neutral[5]}; - :hover { + &:hover { ${ToggleButtonLabel}, ${ViewMoreIcon}, ${ViewLessIcon} { diff --git a/src/masked-input/masked-input.style.tsx b/src/masked-input/masked-input.style.tsx index 64001f7f8..95ae5560e 100644 --- a/src/masked-input/masked-input.style.tsx +++ b/src/masked-input/masked-input.style.tsx @@ -102,9 +102,9 @@ export const ClickableErrorWrapper = styled.button` background: transparent; cursor: pointer; - :hover, - :active, - :focus { + &:hover, + &:active, + &:focus { ${TryAgainLabel} { color: ${Color.Secondary}; } diff --git a/src/modal/modal-box.styles.tsx b/src/modal/modal-box.styles.tsx index f6aa803c5..0b7ed0f0f 100644 --- a/src/modal/modal-box.styles.tsx +++ b/src/modal/modal-box.styles.tsx @@ -27,7 +27,7 @@ export const CloseButton = styled(ClickableIcon)` padding: 0; color: ${Color.Neutral[3]}; - :focus-visible { + &:focus-visible { outline: 4px solid ${Color.Accent.Light[1]}; } diff --git a/src/navbar/drawer.styles.tsx b/src/navbar/drawer.styles.tsx index e0277cba1..152b9435c 100644 --- a/src/navbar/drawer.styles.tsx +++ b/src/navbar/drawer.styles.tsx @@ -97,8 +97,8 @@ export const CloseButton = styled(ClickableIcon)` bottom: 0.65rem; color: ${Color.Neutral[1]}; - :active, - :focus { + &:active, + &:focus { color: ${Color.Primary}; } `; diff --git a/src/navbar/menu.styles.tsx b/src/navbar/menu.styles.tsx index 1fe0066fc..9c858f427 100644 --- a/src/navbar/menu.styles.tsx +++ b/src/navbar/menu.styles.tsx @@ -61,11 +61,11 @@ export const Link = styled(Text.Hyperlink.Small)` -webkit-line-clamp: 2; white-space: pre-wrap; - :active, - :focus { + &:active, + &:focus { color: ${Color.Primary}; } - :hover { + &:hover { color: ${Color.Accent.Light[1]}; } @@ -88,22 +88,22 @@ export const MenuItem = styled.li` align-items: flex-start; padding: 0.5rem 0; - :first-child { + &:first-child { padding-top: 1rem; } - :last-child { + &:last-child { padding-bottom: 1rem; } ${MediaQuery.MaxWidth.tablet} { padding: 0.625rem 0; - :first-child { + &:first-child { padding-top: 0.25rem; } - :last-child { + &:last-child { padding-bottom: 0.625rem; } } diff --git a/src/navbar/navbar-action-buttons.styles.tsx b/src/navbar/navbar-action-buttons.styles.tsx index 3f7cbd615..96a6c5a4c 100644 --- a/src/navbar/navbar-action-buttons.styles.tsx +++ b/src/navbar/navbar-action-buttons.styles.tsx @@ -56,7 +56,7 @@ export const ButtonItem = styled.li<{ $mobile?: boolean }>` display: flex; align-items: center; - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 1rem; } @@ -65,7 +65,7 @@ export const ButtonItem = styled.li<{ $mobile?: boolean }>` padding: 0 0 0 1rem; justify-content: center; - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 0; margin-bottom: ${(props) => (props.$mobile ? "1rem" : "0")}; } @@ -111,7 +111,7 @@ export const DownloadAppImageLinkWrapper = styled.div` `; export const DownloadAppImageLink = styled.a` - :not(:last-child) { + &:not(:last-child) { margin-right: 1rem; } diff --git a/src/navbar/navbar-items.styles.tsx b/src/navbar/navbar-items.styles.tsx index ceed3db9e..43696fb3b 100644 --- a/src/navbar/navbar-items.styles.tsx +++ b/src/navbar/navbar-items.styles.tsx @@ -55,7 +55,7 @@ export const LinkItem = styled.li` display: flex; margin-left: 1rem; - :first-child { + &:first-child { // negative margin to preserve touch target size for link margin-left: ${(props) => (props.$hiddenBranding ? "-0.5rem" : "0")}; } @@ -77,8 +77,8 @@ export const Link = styled(Text.Hyperlink.Small)` height: 100%; padding: 0 0.5rem; - :active, - :focus { + &:active, + &:focus { color: ${Color.Neutral[1]}; } @@ -88,7 +88,7 @@ export const Link = styled(Text.Hyperlink.Small)` padding: 0.5rem 1rem; text-align: left; align-items: flex-start; - :hover { + &:hover { color: ${Color.Neutral[1]}; } } @@ -140,7 +140,7 @@ export const ChevronIcon = styled(ChevronUpIcon)` height: 1.25rem; width: 1.25rem; color: ${Color.Neutral[3]}; - :hover { + &:hover { color: ${Color.Neutral[1]}; } `; diff --git a/src/notification-banner/notification-banner.styles.tsx b/src/notification-banner/notification-banner.styles.tsx index 932355fd7..6d780f5aa 100644 --- a/src/notification-banner/notification-banner.styles.tsx +++ b/src/notification-banner/notification-banner.styles.tsx @@ -29,10 +29,10 @@ const commonLinkStyle = css` color: ${Color.Validation.Orange.Icon}; } - :hover, - :active, - :visited, - :focus { + &:hover, + &:active, + &:visited, + &:focus { color: ${Color.Validation.Orange.Icon}; svg { color: ${Color.Validation.Orange.Icon}; diff --git a/src/pagination/pagination.styles.tsx b/src/pagination/pagination.styles.tsx index 12daff994..40da115f5 100644 --- a/src/pagination/pagination.styles.tsx +++ b/src/pagination/pagination.styles.tsx @@ -58,8 +58,8 @@ export const NavigationItem = styled(ClickableIcon)` color: ${Color.Neutral[4]}; cursor: not-allowed; } - :active, - :focus { + &:active, + &:focus { outline: none; box-shadow: inset 0px 0px 4px 1px ${Color.Accent.Light[1]}; } @@ -82,8 +82,8 @@ export const NavigationButton = styled(ClickableIcon)` color: ${Color.Neutral[4]}; cursor: not-allowed; } - :active, - :focus { + &:active, + &:focus { outline: none; box-shadow: inset 0px 0px 4px 1px ${Color.Accent.Light[1]}; } @@ -138,7 +138,7 @@ export const PageItem = styled(Button.Default)` } }} } - :hover { + &:hover { box-shadow: none; background: ${(props) => @@ -163,8 +163,8 @@ export const PageItem = styled(Button.Default)` } } - :active, - :focus { + &:active, + &:focus { background: ${(props) => props.$selected ? Color.Primary : Color.Neutral[8]}; outline: none; @@ -202,14 +202,14 @@ export const EllipsisItem = styled(ClickableIcon)` width: 1.25rem; } - :hover { + &:hover { svg { color: ${Color.Neutral[3]}; } } - :active, - :focus { + &:active, + &:focus { outline: none; box-shadow: inset 0px 0px 4px 1px ${Color.Accent.Light[1]}; } @@ -258,7 +258,7 @@ export const InputView = styled(Input)` input { text-align: center; - ::placeholder { + &::placeholder { ${TextStyleHelper.getTextStyle("XSmall", 400)}; } } diff --git a/src/shared/dropdown-list-v2/expandable-element.styles.tsx b/src/shared/dropdown-list-v2/expandable-element.styles.tsx index 2bd16d3bb..6b007787f 100644 --- a/src/shared/dropdown-list-v2/expandable-element.styles.tsx +++ b/src/shared/dropdown-list-v2/expandable-element.styles.tsx @@ -30,7 +30,7 @@ export const Selector = styled(BasicButton)` "regular" )} - :disabled { + &:disabled { cursor: not-allowed; } `; diff --git a/src/shared/dropdown-list/dropdown-list.styles.tsx b/src/shared/dropdown-list/dropdown-list.styles.tsx index e72e6551d..29385f49a 100644 --- a/src/shared/dropdown-list/dropdown-list.styles.tsx +++ b/src/shared/dropdown-list/dropdown-list.styles.tsx @@ -84,9 +84,9 @@ export const List = styled.ul` `; export const ListItem = styled.li` - :hover, - :focus, - :active { + &:hover, + &:focus, + &:active { background: ${Color.Accent.Light[5]}; } ${(props) => { @@ -132,10 +132,10 @@ export const ListItemSelector = styled.button` width: 100%; cursor: pointer; - :hover, - :visited, - :focus, - :active { + &:hover, + &:visited, + &:focus, + &:active { outline-color: ${Color.Accent.Light[3]}; } diff --git a/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx b/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx index 1be01d2ff..b5e3d2bae 100644 --- a/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx +++ b/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx @@ -63,12 +63,12 @@ export const baseSelectorCSS = css` border: none; background: transparent; - :focus, - :active { + &:focus, + &:active { outline: none; } - :focus-visible { + &:focus-visible { outline: 2px solid ${Color.Accent.Light[3]}; } `; @@ -105,7 +105,7 @@ export const ElementBoundary = styled.div` border-radius: ${BORDER_RADIUS}; background: ${Color.Neutral[8]}; - :focus-within { + &:focus-within { border: 1px solid ${Color.Accent.Light[1]}; box-shadow: ${DesignToken.InputBoxShadow}; } @@ -135,7 +135,7 @@ export const ElementBoundary = styled.div` cursor: not-allowed; } - :focus-within { + &:focus-within { border: 1px solid ${Color.Neutral[5](props)}; box-shadow: none; } @@ -149,7 +149,7 @@ export const ElementBoundary = styled.div` padding: 0; } - :focus-within { + &:focus-within { border: none; box-shadow: none; } @@ -158,7 +158,7 @@ export const ElementBoundary = styled.div` return css` border: 1px solid ${Color.Validation.Red.Border(props)}; - :focus-within { + &:focus-within { border: 1px solid ${Color.Validation.Red.Border(props)}; box-shadow: ${DesignToken.InputErrorBoxShadow}; } diff --git a/src/shared/html-content/html-content.ts b/src/shared/html-content/html-content.ts index c819b643d..10b1a4da6 100644 --- a/src/shared/html-content/html-content.ts +++ b/src/shared/html-content/html-content.ts @@ -38,10 +38,10 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => { vertical-align: baseline; } - :hover, - :active, - :visited, - :focus { + &:hover, + &:active, + &:visited, + &:focus { color: ${Color.Secondary}; svg { diff --git a/src/shared/input-wrapper/input-wrapper.tsx b/src/shared/input-wrapper/input-wrapper.tsx index f9ba85652..c1e668cd3 100644 --- a/src/shared/input-wrapper/input-wrapper.tsx +++ b/src/shared/input-wrapper/input-wrapper.tsx @@ -52,7 +52,7 @@ export const InputBox = styled.div` border-radius: 4px; background: ${Color.Neutral[8]}; - :focus-within { + &:focus-within { ${defaultFocusCss} } ${(props) => props.$focused && defaultFocusCss} @@ -64,7 +64,7 @@ export const InputBox = styled.div` padding: 0; background: transparent !important; - :focus-within { + &:focus-within { ${readOnlyFocusCss} } ${props.$focused && readOnlyFocusCss} @@ -74,7 +74,7 @@ export const InputBox = styled.div` background: ${Color.Neutral[6]}; cursor: not-allowed; - :focus-within { + &:focus-within { ${disabledFocusCss} } ${props.$focused && disabledFocusCss} @@ -83,7 +83,7 @@ export const InputBox = styled.div` return css` border: 1px solid ${Color.Validation.Red.Border}; - :focus-within { + &:focus-within { ${errorFocusCss} } ${props.$focused && errorFocusCss} @@ -122,20 +122,20 @@ export const BasicInput = styled.input` padding: 0; margin: 0; - :disabled { - :hover { + &:disabled { + &:hover { cursor: not-allowed; } } - ::placeholder, - ::-webkit-input-placeholder { + &::placeholder, + &::-webkit-input-placeholder { color: ${Color.Neutral[3]}; } // Chrome, Safari, Edge, Opera - ::-webkit-outer-spin-button, - ::-webkit-inner-spin-button { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @@ -155,12 +155,12 @@ export const BasicButton = styled.button` border: none; outline: none; - :focus, - :active { + &:focus, + &:active { outline: none; } - :focus-visible { + &:focus-visible { outline: 2px auto ${Color.Primary}; } `; diff --git a/src/shared/internal-calendar/calendar-manager.style.tsx b/src/shared/internal-calendar/calendar-manager.style.tsx index 96be66b5d..5c0798cb1 100644 --- a/src/shared/internal-calendar/calendar-manager.style.tsx +++ b/src/shared/internal-calendar/calendar-manager.style.tsx @@ -133,7 +133,7 @@ export const HeaderArrowButton = styled(ClickableIcon)` margin: auto 0; padding: 0.75rem; - :disabled { + &:disabled { cursor: not-allowed; } `; diff --git a/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx b/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx index e17194e11..2254d5dad 100644 --- a/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx +++ b/src/shared/internal-calendar/standard/standard-calendar-day-view.style.tsx @@ -190,7 +190,7 @@ export const InteractiveCircle = styled(BaseInteractiveCircle)` if ($interactive) { return css` cursor: pointer; - :hover { + &:hover { box-shadow: 0px 0px 4px 1px ${Color.Shadow.Accent}; border: 1px solid ${Color.Accent.Light[1]}; background-color: ${Color.Neutral[8]}; @@ -211,7 +211,7 @@ export const InteractiveCircle = styled(BaseInteractiveCircle)` border: 1px solid ${Color.Accent.Light[1]}; background: ${Color.Accent.Light[4]}; - :hover { + &:hover { background: ${Color.Accent.Light[4]}; } `; diff --git a/src/shared/progress-bar/progress-bar.tsx b/src/shared/progress-bar/progress-bar.tsx index 650ae8357..76e4931b3 100644 --- a/src/shared/progress-bar/progress-bar.tsx +++ b/src/shared/progress-bar/progress-bar.tsx @@ -68,7 +68,7 @@ const Bar = styled.div` border: 1px solid ${colorToUse}; border-radius: 4px; - :after { + &:after { content: ""; position: absolute; top: 0; diff --git a/src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx b/src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx index 6ba2b70bc..e8e23c543 100644 --- a/src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx +++ b/src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx @@ -138,13 +138,13 @@ export const TimeInput = styled(BasicInput)` border: 1px solid ${Color.Neutral[5]}; background: ${Color.Neutral[8]}; - :focus, - :active { + &:focus, + &:active { border: 1px solid ${Color.Accent.Light[1]}; box-shadow: inset 0 0 5px 1px ${Color.Shadow.Accent}; } - :focus::placeholder { + &:focus::placeholder { color: transparent; } diff --git a/src/sidenav/sidenav-drawer-item.styles.tsx b/src/sidenav/sidenav-drawer-item.styles.tsx index 19fdb3255..6d6e573c2 100644 --- a/src/sidenav/sidenav-drawer-item.styles.tsx +++ b/src/sidenav/sidenav-drawer-item.styles.tsx @@ -39,8 +39,8 @@ export const LinkButton = styled(Button.Default)` color: ${Color.Neutral[1]} !important; } - :hover, - :focus { + &:hover, + &:focus { background-color: ${Color.Accent.Light[4]}; span { diff --git a/src/sidenav/sidenav-drawer-subitem.styles.tsx b/src/sidenav/sidenav-drawer-subitem.styles.tsx index b61342244..b3a1bba3b 100644 --- a/src/sidenav/sidenav-drawer-subitem.styles.tsx +++ b/src/sidenav/sidenav-drawer-subitem.styles.tsx @@ -26,8 +26,8 @@ export const LinkButton = styled(Button.Default)` text-align: initial; } - :hover, - :focus { + &:hover, + &:focus { background-color: ${Color.Accent.Light[5]}; span { ${TextStyleHelper.getFontFamily("H5", "semibold")} diff --git a/src/sidenav/sidenav-item.styles.tsx b/src/sidenav/sidenav-item.styles.tsx index a43685f90..549dfed31 100644 --- a/src/sidenav/sidenav-item.styles.tsx +++ b/src/sidenav/sidenav-item.styles.tsx @@ -42,8 +42,8 @@ export const DefaultButton = styled(Button.Default)` } } - :hover, - :focus { + &:hover, + &:focus { span { div { background-color: ${Color.Accent.Light[5]}; diff --git a/src/tab/tab-link-chain.style.tsx b/src/tab/tab-link-chain.style.tsx index 1572a11c9..c24da4b0e 100644 --- a/src/tab/tab-link-chain.style.tsx +++ b/src/tab/tab-link-chain.style.tsx @@ -31,7 +31,7 @@ export const Chain = styled.ul` ${(props) => { if (props.$fullWidthIndicatorLine) { return css` - ::after { + &::after { content: ""; height: inherit; flex-grow: 1; diff --git a/src/text/text.tsx b/src/text/text.tsx index 4ed9a0978..2a8534012 100644 --- a/src/text/text.tsx +++ b/src/text/text.tsx @@ -276,9 +276,9 @@ const HyperlinkBase = styled.a` color: ${Color.Primary}; text-decoration: none; - :hover, - :active, - :focus { + &:hover, + &:active, + &:focus { color: ${Color.Secondary}; svg { diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx index 9aff50031..5d38c73d0 100644 --- a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx +++ b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx @@ -84,7 +84,7 @@ export const TimeColumn = styled.div` export const TimeColumnWrapper = styled.div` min-height: 3.75rem; - :last-child { + &:last-child { min-height: 0; } `; @@ -95,7 +95,7 @@ export const TimeColumnText = styled.div` font-size: 0.625rem !important; line-height: 0.75rem !important; text-align: center; - :first-line { + &:first-line { font-size: 0.875rem !important; } `; diff --git a/src/timeline/timeline.style.tsx b/src/timeline/timeline.style.tsx index 7afd431e7..eb8905665 100644 --- a/src/timeline/timeline.style.tsx +++ b/src/timeline/timeline.style.tsx @@ -140,7 +140,7 @@ export const TimelineItemTitle = styled(Text.H4)` export const TimelineItem = styled.div` display: flex; - :last-of-type ${LineIndicator} { + &:last-of-type ${LineIndicator} { margin-bottom: 0; } `; diff --git a/src/timetable/timetable.style.tsx b/src/timetable/timetable.style.tsx index 0e8617eac..5c4399765 100644 --- a/src/timetable/timetable.style.tsx +++ b/src/timetable/timetable.style.tsx @@ -64,7 +64,7 @@ export const TimeTableContainer = styled.div` ${(props) => { if (props.$loading) { return css` - :hover { + &:hover { cursor: not-allowed; padding-bottom: 0; } @@ -186,7 +186,7 @@ export const ClickableRowHeaderTitle = styled(Text.H5)<{ width: 100%; white-space: nowrap; color: ${Color.Primary}; - :hover { + &:hover { cursor: ${(props) => (props.$isClickable ? "pointer" : "default")}; } `; @@ -257,7 +257,7 @@ export const LoadingBar = styled.div` export const StyledPopoverTrigger = styled(PopoverTrigger)` max-width: 24rem !important; - :hover { + &:hover { cursor: default; } `; diff --git a/src/toast/toast.styles.tsx b/src/toast/toast.styles.tsx index 6d4656526..3fffe2b13 100644 --- a/src/toast/toast.styles.tsx +++ b/src/toast/toast.styles.tsx @@ -147,7 +147,7 @@ export const DismissButton = styled(ClickableIcon)` height: 1.5rem; color: ${getValidationColorAttributes(props).Text}; } - :hover { + &:hover { background: transparent; } ${MediaQuery.MaxWidth.mobileL} { diff --git a/src/toggle/toggle.styles.tsx b/src/toggle/toggle.styles.tsx index 99b15af23..4e64da798 100644 --- a/src/toggle/toggle.styles.tsx +++ b/src/toggle/toggle.styles.tsx @@ -79,7 +79,7 @@ export const Container = styled.div` return css` border-color: ${Color.Validation.Red.Icon}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Red}; } `; @@ -87,7 +87,7 @@ export const Container = styled.div` return css` border-color: transparent; - :hover { + &:hover { background: ${Color.Accent.Light[6]}; } `; @@ -111,7 +111,7 @@ export const Container = styled.div` return css` border-color: ${Color.Validation.Red.Border}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Red}; } `; @@ -119,7 +119,7 @@ export const Container = styled.div` return css` border-color: ${Color.Primary}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Accent}; } `; @@ -128,7 +128,7 @@ export const Container = styled.div` background: ${Color.Neutral[8]}; border-color: ${Color.Neutral[5]}; - :hover { + &:hover { box-shadow: 0 0 4px 1px ${Color.Shadow.Accent}; border-color: ${Color.Accent.Light[1]}; } @@ -248,7 +248,7 @@ export const HeaderContainer = styled.div` `; } else if (!props.$disabled) { return css` - :hover { + &:hover { background: ${Color.Accent.Light[6]}; } `; diff --git a/src/tooltip/tooltip.styles.tsx b/src/tooltip/tooltip.styles.tsx index 61679d98d..4264f4c66 100644 --- a/src/tooltip/tooltip.styles.tsx +++ b/src/tooltip/tooltip.styles.tsx @@ -124,7 +124,7 @@ export const Arrow = styled.div` top: 100%; left: 25%; - ::before { + &::before { content: ""; position: absolute; background: transparent; @@ -134,7 +134,7 @@ export const Arrow = styled.div` box-shadow: 3px 2px 14px 3px rgba(91, 91, 91, 0.5); } - ::after { + &::after { content: ""; position: absolute; width: 0; @@ -154,7 +154,7 @@ export const Arrow = styled.div` top: 0; left: -30px; - ::before { + &::before { content: ""; position: absolute; background: red; @@ -165,7 +165,7 @@ export const Arrow = styled.div` box-shadow: 2px 3px 11px 3px rgba(91, 91, 91, 0.5); } - ::after { + &::after { content: ""; position: absolute; width: 0; @@ -185,7 +185,7 @@ export const Arrow = styled.div` top: 0; right: -30px; - ::before { + &::before { content: ""; position: absolute; background: red; @@ -196,7 +196,7 @@ export const Arrow = styled.div` box-shadow: 4px 0px 11px 3px rgba(91, 91, 91, 0.5); } - ::after { + &::after { content: ""; position: absolute; width: 0; @@ -216,7 +216,7 @@ export const Arrow = styled.div` bottom: 100%; left: 25%; - ::before { + &::before { content: ""; position: absolute; background: transparent; @@ -227,7 +227,7 @@ export const Arrow = styled.div` box-shadow: 3px -9px 14px 3px rgba(91, 91, 91, 0.5); } - ::after { + &::after { content: ""; position: absolute; width: 0; diff --git a/src/uneditable-section/uneditable-section.styles.tsx b/src/uneditable-section/uneditable-section.styles.tsx index fdc1c51b9..6fac7caaf 100644 --- a/src/uneditable-section/uneditable-section.styles.tsx +++ b/src/uneditable-section/uneditable-section.styles.tsx @@ -63,7 +63,7 @@ export const GridUl = styled.ul` grid-template-columns: repeat(4, minmax(0, 1fr)); } - :not(:last-child) { + &:not(:last-child) { margin-bottom: 2rem; } `; diff --git a/src/unit-number/unit-number-input.style.tsx b/src/unit-number/unit-number-input.style.tsx index 4b73b014c..e6b46fedd 100644 --- a/src/unit-number/unit-number-input.style.tsx +++ b/src/unit-number/unit-number-input.style.tsx @@ -27,7 +27,7 @@ export const FloorInput = styled(Input)` padding: 0; width: 2.5rem; - :focus-within { + &:focus-within { outline: none; border: none; box-shadow: none; diff --git a/stories/accordion/doc-elements.tsx b/stories/accordion/doc-elements.tsx index c873a06e6..9cf34296c 100644 --- a/stories/accordion/doc-elements.tsx +++ b/stories/accordion/doc-elements.tsx @@ -7,7 +7,7 @@ export const Container = styled.div` display: flex; button { - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 1.5rem; } } diff --git a/stories/button/doc-elements.tsx b/stories/button/doc-elements.tsx index d18d5b1ef..98c876df6 100644 --- a/stories/button/doc-elements.tsx +++ b/stories/button/doc-elements.tsx @@ -8,7 +8,7 @@ export const Container = styled.div` flex-wrap: wrap; gap: 1.5rem; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 1.5rem; } diff --git a/stories/popover/doc-elements.tsx b/stories/popover/doc-elements.tsx index 854acbf36..5857e766f 100644 --- a/stories/popover/doc-elements.tsx +++ b/stories/popover/doc-elements.tsx @@ -23,12 +23,12 @@ export const Container = styled.div` export const Item = styled.div` position: relative; - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 2.5rem; } ${MediaQuery.MaxWidth.mobileL} { - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 0; margin-bottom: 2.5rem; } diff --git a/stories/radio-button/doc-elements.tsx b/stories/radio-button/doc-elements.tsx index a2279dab6..a57ac1e86 100644 --- a/stories/radio-button/doc-elements.tsx +++ b/stories/radio-button/doc-elements.tsx @@ -11,7 +11,7 @@ export const Container = styled.div` export const OptionContainer = styled.div` display: flex; - :not(:last-of-type) { + &:not(:last-of-type) { margin-bottom: 1rem; } `; diff --git a/stories/storybook-common/api-table/api-table-components.tsx b/stories/storybook-common/api-table/api-table-components.tsx index bc0f3e756..c7792e553 100644 --- a/stories/storybook-common/api-table/api-table-components.tsx +++ b/stories/storybook-common/api-table/api-table-components.tsx @@ -65,11 +65,11 @@ const StyledTable = styled.table` } td { - :first-child { + &:first-child { width: 20%; } - :last-child { + &:last-child { width: 20%; } } @@ -78,7 +78,7 @@ const StyledTable = styled.table` tr { border: none; border-bottom: 1px solid ${Color.Neutral[6]}; - :nth-child(even) { + &:nth-child(even) { background: ${Color.Neutral[7]}; } } @@ -151,7 +151,7 @@ const Label = styled.td` const Mandatory = styled.td` font-weight: bold; - :after { + &:after { content: " *"; color: ${Color.Validation.Red.Text}; } @@ -205,7 +205,7 @@ const PropsContainer = styled.div` display: flex; flex-wrap: wrap; code { - :not(:last-child) { + &:not(:last-child) { margin-right: 0.25rem; } } diff --git a/stories/storybook-common/tabs.tsx b/stories/storybook-common/tabs.tsx index ba4a622a1..a8425a9b7 100644 --- a/stories/storybook-common/tabs.tsx +++ b/stories/storybook-common/tabs.tsx @@ -83,7 +83,7 @@ const Button = styled.button` ${(props) => { if (props.$selected) { return css` - :after { + &:after { content: ""; position: absolute; bottom: -0.5rem; @@ -96,7 +96,7 @@ const Button = styled.button` } }} - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 1rem; } `; diff --git a/stories/storybook-common/text.style.tsx b/stories/storybook-common/text.style.tsx index e8ee7a179..4b56bb41b 100644 --- a/stories/storybook-common/text.style.tsx +++ b/stories/storybook-common/text.style.tsx @@ -46,7 +46,7 @@ const Link = styled.a` padding-right: 0.5rem; color: ${Color.Neutral[4]}; - :hover { + &:hover { color: ${Color.Neutral[4]}; } `; @@ -65,7 +65,7 @@ const StyledTitle = styled(Text.D1)` margin: 0 0 3rem; font-weight: bold; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -74,7 +74,7 @@ const StyledTitle = styled(Text.D1)` const StyledSecondary = styled(Text.H1)` margin: 1rem 0 1.5rem; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -84,7 +84,7 @@ const StyledSecondary = styled(Text.H1)` const StyledTertiary = styled(Text.H2)` ${TextStyleHelper.getFontFamily("H2", "semibold")} margin: 1rem 0 1.5rem; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -93,7 +93,7 @@ const StyledTertiary = styled(Text.H2)` const StyledQuaternary = styled(Text.H4)` margin: 1.5rem 0; - :hover { + &:hover { ${Link} { opacity: 1; } diff --git a/stories/text-list/doc-elements.tsx b/stories/text-list/doc-elements.tsx index 6b26f811c..d4048ac67 100644 --- a/stories/text-list/doc-elements.tsx +++ b/stories/text-list/doc-elements.tsx @@ -10,7 +10,7 @@ export const Container = styled.div` ul, ol { - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 1.5rem; } } diff --git a/stories/text/collection-doc-elements.tsx b/stories/text/collection-doc-elements.tsx index 31e0c7682..53ebcc048 100644 --- a/stories/text/collection-doc-elements.tsx +++ b/stories/text/collection-doc-elements.tsx @@ -18,7 +18,7 @@ const FontDisplayContainer = styled.div` margin: 1rem 0 4rem; h2 { - :not(:last-child) { + &:not(:last-child) { margin-right: 1rem; } } @@ -128,17 +128,17 @@ const FontSizeList = styled.ul` const FontSizeItem = styled.li` display: flex; width: 50%; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 1rem; } - :nth-child(odd) { + &:nth-child(odd) { padding-right: 0.5rem; } ${MediaQuery.MaxWidth.tablet} { width: 100%; - :not(:last-child) { + &:not(:last-child) { margin-bottom: 2rem; } } diff --git a/stories/text/doc-elements.tsx b/stories/text/doc-elements.tsx index a3bfcb69a..9e846860f 100644 --- a/stories/text/doc-elements.tsx +++ b/stories/text/doc-elements.tsx @@ -71,7 +71,7 @@ interface LabelContainerStyleProps { // ============================================================================= export const DisplayContainer = styled.table` tr { - :not(:last-child) { + &:not(:last-child) { border-bottom: 1px solid ${Color.Neutral[5]}; } } @@ -80,7 +80,7 @@ export const DisplayContainer = styled.table` padding: 1rem 0; vertical-align: middle; - :first-child { + &:first-child { vertical-align: top; } } @@ -134,7 +134,7 @@ export const LinkDiv = styled.div` display: flex; flex-direction: column; a { - :not(:last-child) { + &:not(:last-child) { margin-bottom: 1rem; } } diff --git a/stories/toggle/doc-elements.tsx b/stories/toggle/doc-elements.tsx index dad2da84d..488b55379 100644 --- a/stories/toggle/doc-elements.tsx +++ b/stories/toggle/doc-elements.tsx @@ -76,7 +76,7 @@ export const SimpleContainer = styled.ul` list-style: none; li { - :not(:last-child) { + &:not(:last-child) { margin-right: 1.5rem; } } diff --git a/stories/tooltip/doc-elements.tsx b/stories/tooltip/doc-elements.tsx index a92526933..ad659e099 100644 --- a/stories/tooltip/doc-elements.tsx +++ b/stories/tooltip/doc-elements.tsx @@ -22,12 +22,12 @@ export const Container = styled.div` export const Item = styled.div` position: relative; - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 2.5rem; } ${MediaQuery.MaxWidth.mobileL} { - :not(:last-of-type) { + &:not(:last-of-type) { margin-right: 0; margin-bottom: 2.5rem; } From a63843f5f0237342e341af131ec239991f360e81 Mon Sep 17 00:00:00 2001 From: Nobel Date: Wed, 3 Sep 2025 14:50:08 +0800 Subject: [PATCH 2/3] [BOOKINGSG-7949][NT] Resolved test failures --- src/design-token/types.ts | 9 ++- tests/e-signature/e-signature.spec.tsx | 28 +++++--- tests/footer/footer.spec.tsx | 41 +++++++----- .../input-multi-select.spec.tsx | 30 +++++---- .../input-nested-multi-select.spec.tsx | 33 ++++++---- .../input-nested-select.spec.tsx | 27 ++++---- tests/input-select/input-select.spec.tsx | 37 +++++++---- tests/navbar/navbar.spec.tsx | 22 ++++--- .../nested-dropdown-list.spec.tsx | 64 +++++++++++-------- .../time-range-picker.spec.tsx | 58 ++++++++++------- tests/timetable/timetable.spec.tsx | 22 ++++--- 11 files changed, 226 insertions(+), 145 deletions(-) diff --git a/src/design-token/types.ts b/src/design-token/types.ts index 35ce6a1bf..c91ca65ea 100644 --- a/src/design-token/types.ts +++ b/src/design-token/types.ts @@ -1,6 +1,11 @@ -import { CSSObject, css } from "styled-components"; +import { CSSKeyframes, CSSObject, css } from "styled-components"; -export type CssValue = CSSObject | string | number | ReturnType; +export type CssValue = + | CSSObject + | string + | number + | CSSKeyframes + | ReturnType; export interface DesignTokenSet { InputBoxShadow: CssValue; diff --git a/tests/e-signature/e-signature.spec.tsx b/tests/e-signature/e-signature.spec.tsx index 06daa9f6d..43f6a4b23 100644 --- a/tests/e-signature/e-signature.spec.tsx +++ b/tests/e-signature/e-signature.spec.tsx @@ -1,18 +1,24 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { ESignature } from "../../src/e-signature"; +import { ThemeProvider } from "styled-components"; +import { BaseTheme } from "../../src"; // ============================================================================= // UNIT TESTS // ============================================================================= describe("ESignature", () => { + const renderWithTheme = (node: React.ReactNode) => { + return render({node}); + }; + it("should render the default component", () => { - render(); + renderWithTheme(); expect(getAddSignatureButton()).toBeInTheDocument(); }); it("should render the component with value", () => { - render(); + renderWithTheme(); expect(screen.getByAltText("Signature preview")).toHaveAttribute( "src", @@ -21,7 +27,7 @@ describe("ESignature", () => { }); it("should show the progress indicator if loadingProgress is specified", () => { - render(); + renderWithTheme(); expect( screen.getByTestId("e-signature-progress-bar") @@ -31,27 +37,29 @@ describe("ESignature", () => { }); it("should render the loading text according to the loadingLabel", () => { - render(); + renderWithTheme( + + ); expect(screen.getByText("Loading")).toBeInTheDocument(); }); it("should show edit button instead of add signature button if field has a value", () => { - render(); + renderWithTheme(); expect(getAddSignatureButton(true)).not.toBeInTheDocument(); expect(getEditSignatureButton()).toBeInTheDocument(); }); it("should show signature modal on clicking add signature button", () => { - render(); + renderWithTheme(); fireEvent.click(getAddSignatureButton()); expect(getSignatureModal()).toBeVisible(); }); it("should show signature modal on clicking edit button", () => { - render(); + renderWithTheme(); fireEvent.click(getEditSignatureButton()); expect(getSignatureModal()).toBeVisible(); @@ -59,7 +67,7 @@ describe("ESignature", () => { it("should dismiss the signature modal, call onChange callback and show the signature preview on clicking save button", () => { const changeFn = jest.fn(); - render(); + renderWithTheme(); fireEvent.click(getAddSignatureButton()); drawSignature(); @@ -73,7 +81,7 @@ describe("ESignature", () => { }); it("should dismiss the signature modal and discard unsaved changes on clicking cross button in modal", () => { - render(); + renderWithTheme(); fireEvent.click(getEditSignatureButton()); drawSignature(); @@ -86,7 +94,7 @@ describe("ESignature", () => { }); it("should clear the field value on clicking clear button and save button subsequently", () => { - render(); + renderWithTheme(); fireEvent.click(getAddSignatureButton()); drawSignature(); diff --git a/tests/footer/footer.spec.tsx b/tests/footer/footer.spec.tsx index 8513a3f86..4a0394e8f 100644 --- a/tests/footer/footer.spec.tsx +++ b/tests/footer/footer.spec.tsx @@ -1,6 +1,7 @@ import { act, fireEvent, render, screen } from "@testing-library/react"; -import { DisclaimerLinks, Footer, FooterLinkProps } from "../../src"; +import { BaseTheme, DisclaimerLinks, Footer, FooterLinkProps } from "../../src"; import { FooterHelper } from "../../src/footer/footer-helper"; +import { ThemeProvider } from "styled-components"; // ============================================================================= // UNIT TESTS @@ -16,8 +17,12 @@ describe("Footer", () => { jest.useRealTimers(); }); + const renderWithTheme = (node: React.ReactNode) => { + return render({node}); + }; + it("should be able to render the component", () => { - render(