diff --git a/.gitignore b/.gitignore index 52143c9f0a..c13b5941f7 100644 --- a/.gitignore +++ b/.gitignore @@ -67,3 +67,6 @@ test-results/ playwright-report/ keys + +# Sentry +.sentryclirc diff --git a/.storybook/preview.js b/.storybook/preview.js index fc709e8b7f..378a8637d6 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,7 @@ import { RouterContext } from "next/dist/shared/lib/router-context"; import ResetCSS from '../src/styles/reset.scss'; +import { TooltipProvider } from '@radix-ui/react-tooltip'; import Theme from '../src/styles/theme.scss' import GlobalFonts from '../src/styles/fonts.scss'; import GlobalStyles from '../src/styles/global.scss'; @@ -28,9 +29,11 @@ const themeDecorator = (Story, context) => { padding: '1rem', boxSizing: 'border-box' }}> - - - + + + + + diff --git a/.stylelintrc.json b/.stylelintrc.json index 54f47a51b2..f728f2dfd7 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,4 +1,5 @@ { + "customSyntax": "postcss-scss", "plugins": [ "stylelint-scss", "stylelint-prettier", diff --git a/package.json b/package.json index 556121d287..30256dc8d1 100644 --- a/package.json +++ b/package.json @@ -32,27 +32,28 @@ }, "dependencies": { "@babel/eslint-parser": "^7.17.0", - "@next/bundle-analyzer": "^12.1.5", + "@next/bundle-analyzer": "^12.2.5", "@notionhq/client": "^0.4.13", - "@radix-ui/react-checkbox": "^0.1.5", - "@radix-ui/react-dialog": "^0.1.7", - "@radix-ui/react-dropdown-menu": "^0.1.6", - "@radix-ui/react-hover-card": "^0.1.5", - "@radix-ui/react-id": "^0.1.5", + "@radix-ui/react-checkbox": "^1.0.0", + "@radix-ui/react-dialog": "^1.0.0", + "@radix-ui/react-direction": "^1.0.0", + "@radix-ui/react-dropdown-menu": "^1.0.0", + "@radix-ui/react-hover-card": "^1.0.0", + "@radix-ui/react-id": "^1.0.0", "@radix-ui/react-polymorphic": "^0.0.14", - "@radix-ui/react-popover": "^0.1.6", - "@radix-ui/react-radio-group": "^0.1.5", - "@radix-ui/react-separator": "^0.1.4", - "@radix-ui/react-slider": "^0.1.4", - "@radix-ui/react-tooltip": "^0.1.7", - "@radix-ui/react-visually-hidden": "^0.1.4", - "@reduxjs/toolkit": "^1.8.0", - "@sentry/nextjs": "^6.19.6", + "@radix-ui/react-popover": "^1.0.0", + "@radix-ui/react-radio-group": "^1.0.0", + "@radix-ui/react-separator": "^1.0.0", + "@radix-ui/react-slider": "^1.0.0", + "@radix-ui/react-tooltip": "^1.0.0", + "@radix-ui/react-visually-hidden": "^1.0.0", + "@reduxjs/toolkit": "^1.8.4", + "@sentry/nextjs": "^7.10.0", "classnames": "^2.3.1", "clipboard-copy": "^4.0.1", "cookie": "^0.5.0", - "firebase": "^9.6.9", - "fuse.js": "^6.5.3", + "firebase": "^9.9.2", + "fuse.js": "^6.6.2", "humps": "^2.0.1", "js-cookie": "^3.0.1", "jsonwebtoken": "^8.5.1", @@ -66,38 +67,38 @@ "node-fetch": "2", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-hook-form": "^7.31.3", - "react-hotkeys-hook": "^3.4.4", - "react-redux": "^7.2.8", - "react-toastify": "^8.2.0", - "react-virtuoso": "^2.9.1", + "react-hook-form": "^7.34.1", + "react-hotkeys-hook": "^3.4.7", + "react-redux": "^8.0.2", + "react-toastify": "^9.0.8", + "react-virtuoso": "^2.16.6", "redux-persist": "^6.0.0", "swr": "^1.2.1" }, "devDependencies": { "@babel/core": "^7.17.9", - "@lokalise/node-api": "^7.2.0", + "@lokalise/node-api": "^8.0.0", "@next/eslint-plugin-next": "^12.1.0", - "@playwright/test": "^1.21.0", - "@storybook/addon-a11y": "^6.4.21", - "@storybook/addon-actions": "^6.4.21", - "@storybook/addon-essentials": "^6.4.21", - "@storybook/addon-links": "^6.4.21", - "@storybook/addon-storysource": "^6.4.21", - "@storybook/builder-webpack5": "^6.4.21", - "@storybook/manager-webpack5": "^6.4.21", + "@playwright/test": "^1.25.0", + "@storybook/addon-a11y": "^6.5.10", + "@storybook/addon-actions": "^6.5.10", + "@storybook/addon-essentials": "^6.5.10", + "@storybook/addon-links": "^6.5.10", + "@storybook/addon-storysource": "^6.5.10", + "@storybook/builder-webpack5": "^6.5.10", + "@storybook/manager-webpack5": "^6.5.10", "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^6.4.21", - "@svgr/webpack": "^6.2.1", - "@testing-library/jest-dom": "^5.16.4", + "@storybook/react": "^6.5.10", + "@svgr/webpack": "^6.3.1", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.3.0", "@types/cookie": "^0.5.1", + "@types/jest": "^28.1.6", "@types/js-cookie": "^3.0.2", "@types/jsonwebtoken": "^8.5.8", - "@types/node-fetch": "^2.6.1", - "@testing-library/react": "^12.1.4", - "@types/jest": "^27.4.1", "@types/lodash": "^4.14.180", "@types/node": "^17.0.22", + "@types/node-fetch": "^2.6.2", "@types/qs": "^6.9.7", "@types/react": "^17.0.41", "@types/react-dom": "^17.0.14", @@ -109,41 +110,44 @@ "babel-loader": "^8.2.4", "babel-plugin-polyfill-corejs2": "^0.3.1", "babel-plugin-polyfill-regenerator": "^0.3.1", - "dotenv": "^16.0.0", - "eslint": "^8.9.0", + "dotenv": "^16.0.1", + "eslint": "^8.22.0", "eslint-config-airbnb": "^19.0.4", - "eslint-config-next": "^12.1.0", + "eslint-config-next": "^12.2.5", "eslint-config-prettier": "^8.5.0", "eslint-plugin-i18next": "^5.1.2", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsdoc": "^38.0.6", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.29.4", - "eslint-plugin-react-func": "^0.1.17", - "eslint-plugin-react-hooks": "^4.3.0", - "eslint-plugin-sonarjs": "^0.12.0", - "eslint-plugin-storybook": "^0.5.7", - "eslint-plugin-unicorn": "^41.0.1", - "husky": "^7.0.4", - "jest": "^27.5.1", - "jest-runner-eslint": "^1.0.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-jsdoc": "^39.3.6", + "eslint-plugin-jsx-a11y": "^6.6.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.30.1", + "eslint-plugin-react-func": "^0.1.18", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-sonarjs": "^0.15.0", + "eslint-plugin-storybook": "^0.6.4", + "eslint-plugin-unicorn": "^43.0.2", + "husky": "^8.0.1", + "jest": "^28.1.3", + "jest-environment-jsdom": "^28.1.3", + "jest-runner-eslint": "^1.0.1", "jest-watch-select-projects": "^2.0.0", - "jest-watch-typeahead": "^1.0.0", - "lint-staged": "^12.3.7", - "next-sitemap": "^2.5.20", - "prettier": "^2.5.1", + "jest-watch-typeahead": "^2.0.0", + "lint-staged": "^13.0.3", + "next-sitemap": "^3.1.17", + "postcss": "8", + "postcss-scss": "^4.0.4", + "prettier": "^2.7.1", "react-docgen-typescript-loader": "^3.7.2", - "replace-in-file": "^6.3.2", - "sass": "^1.49.9", - "sass-loader": "^12.6.0", - "storybook-addon-next-router": "^3.1.1", - "stylelint": "13.13.1", + "replace-in-file": "^6.3.5", + "sass": "^1.54.4", + "sass-loader": "^13.0.2", + "storybook-addon-next-router": "^4.0.0", + "stylelint": "14.10.0", "stylelint-prettier": "^2.0.0", - "stylelint-scss": "^4.2.0", - "stylelint-use-logical": "^1.1.0", - "superagent": "^7.1.2", - "ts-jest": "^27.1.4", + "stylelint-scss": "^4.3.0", + "stylelint-use-logical": "^2.0.0", + "superagent": "^8.0.0", + "ts-jest": "^28.0.7", "typescript": "^4.6.2" }, "husky": { diff --git a/sentry.properties b/sentry.properties index 8041abf0c4..2a3459f58f 100644 --- a/sentry.properties +++ b/sentry.properties @@ -1,4 +1,4 @@ defaults.url=https://sentry.io/ defaults.org=qurancom defaults.project=nextjs -cli.executable=../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli \ No newline at end of file +cli.executable=../../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli diff --git a/src/components/AudioPlayer/AudioPlayer.module.scss b/src/components/AudioPlayer/AudioPlayer.module.scss index 7b6437b027..f618dd0c6a 100644 --- a/src/components/AudioPlayer/AudioPlayer.module.scss +++ b/src/components/AudioPlayer/AudioPlayer.module.scss @@ -12,7 +12,7 @@ transition: var(--transition-regular); z-index: var(--z-index-sticky); box-shadow: var(--shadow-large); - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); height: constants.$audio-player-default-height; @include breakpoints.tablet { height: constants.$audio-player-default-desktop-height; diff --git a/src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss b/src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss index 0f95ba7cdb..e2e9fafeac 100644 --- a/src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss +++ b/src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss @@ -22,7 +22,7 @@ $height: calc(9 * var(--spacing-mega)); } .inputContainer { - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); padding-block: var(--spacing-small); display: flex; align-items: center; @@ -31,7 +31,7 @@ $height: calc(9 * var(--spacing-mega)); .voiceFlowContainer { justify-content: flex-end; - border-bottom: 0; + border-block-end: 0; } .input { diff --git a/src/components/Login/login.module.scss b/src/components/Login/login.module.scss index 5b56063236..8a4c5b5ffa 100644 --- a/src/components/Login/login.module.scss +++ b/src/components/Login/login.module.scss @@ -79,7 +79,7 @@ .resendEmailSection { margin-block-start: var(--spacing-medium); padding-block-start: var(--spacing-medium); - border-top: 1px solid var(--color-background-elevated); + border-block-start: 1px solid var(--color-background-elevated); display: flex; flex-direction: column; } diff --git a/src/components/Navbar/Drawer/Drawer.module.scss b/src/components/Navbar/Drawer/Drawer.module.scss index 799b4cab1d..829a317680 100644 --- a/src/components/Navbar/Drawer/Drawer.module.scss +++ b/src/components/Navbar/Drawer/Drawer.module.scss @@ -81,7 +81,7 @@ width: 100%; position: fixed; height: var(--navbar-container-height); - border-bottom: 1px var(--color-borders-hairline) solid; + border-block-end: 1px var(--color-borders-hairline) solid; display: flex; flex-direction: row; justify-content: space-between; @@ -110,7 +110,7 @@ } .hiddenButtonHeader { - border-bottom: 0; + border-block-end: 0; } .hiddenButtonHeaderContentContainer { diff --git a/src/components/Navbar/LanguageSelector.tsx b/src/components/Navbar/LanguageSelector.tsx index d0dddfadf1..e1c4a31c27 100644 --- a/src/components/Navbar/LanguageSelector.tsx +++ b/src/components/Navbar/LanguageSelector.tsx @@ -139,6 +139,7 @@ const LanguageSelector = ({ }`, ); }} + isPortalled={false} > {options.map((option) => ( void; }; -const DATA_POPOVER_PORTALLED = 'data-popover-menu-portalled'; - const ReadingViewWordActionsMenu: React.FC = ({ word, onActionTriggered }) => { - useSetPortalledZIndex(DATA_POPOVER_PORTALLED); return ( -
+
= ({ word, onActionTriggered }
diff --git a/src/components/QuranReader/ReadingView/WordPopover/WordPopover.module.scss b/src/components/QuranReader/ReadingView/WordPopover/WordPopover.module.scss index 6064f4d4bc..406663116a 100644 --- a/src/components/QuranReader/ReadingView/WordPopover/WordPopover.module.scss +++ b/src/components/QuranReader/ReadingView/WordPopover/WordPopover.module.scss @@ -1,14 +1,7 @@ @use "src/styles/breakpoints"; .content { - padding-block-start: var(--spacing-micro); - padding-block-end: var(--spacing-micro); - padding-inline-start: var(--spacing-micro); - padding-inline-end: var(--spacing-micro); - background-color: var(--color-background-elevated); - & > span { - fill: var(--color-background-elevated); - } + z-index: var(--z-index-default); } .trigger { diff --git a/src/components/QuranReader/ReadingView/WordPopover/index.tsx b/src/components/QuranReader/ReadingView/WordPopover/index.tsx index aed0e4f4d2..ee8f792086 100644 --- a/src/components/QuranReader/ReadingView/WordPopover/index.tsx +++ b/src/components/QuranReader/ReadingView/WordPopover/index.tsx @@ -77,11 +77,10 @@ const ReadingViewWordPopover: React.FC = ({ word, children }) => { } tip isModal - portalled - contentStyles={styles.content} open={isTooltipOpened} onOpenChange={onOpenChange} triggerStyles={styles.trigger} + contentStyles={styles.content} defaultStyling={false} > diff --git a/src/components/QuranReader/ReflectionView/ReflectionItem.module.scss b/src/components/QuranReader/ReflectionView/ReflectionItem.module.scss index 89753455d0..af788946ca 100644 --- a/src/components/QuranReader/ReflectionView/ReflectionItem.module.scss +++ b/src/components/QuranReader/ReflectionView/ReflectionItem.module.scss @@ -51,7 +51,7 @@ .clickable { cursor: pointer; - border-bottom: 1px solid var(--color-text-default); + border-block-end: 1px solid var(--color-text-default); } .container { diff --git a/src/components/QuranReader/TafsirView/TafsirView.module.scss b/src/components/QuranReader/TafsirView/TafsirView.module.scss index 9ed6ba80a5..59efe14d06 100644 --- a/src/components/QuranReader/TafsirView/TafsirView.module.scss +++ b/src/components/QuranReader/TafsirView/TafsirView.module.scss @@ -15,7 +15,7 @@ $container-max-width: calc(23 * var(--spacing-mega)); } } .tafsirName { - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); font-size: var(--font-size-xlarge); font-weight: var(--font-weight-bold); padding-block-start: var(--spacing-medium); diff --git a/src/components/QuranReader/TranslationView/TranslationViewCell.tsx b/src/components/QuranReader/TranslationView/TranslationViewCell.tsx index 11e2520c51..e4585c8024 100644 --- a/src/components/QuranReader/TranslationView/TranslationViewCell.tsx +++ b/src/components/QuranReader/TranslationView/TranslationViewCell.tsx @@ -93,12 +93,7 @@ const TranslationViewCell: React.FC = ({
- +
diff --git a/src/components/Search/PreInput/PreInput.module.scss b/src/components/Search/PreInput/PreInput.module.scss index f166f10927..a8f8baeb17 100644 --- a/src/components/Search/PreInput/PreInput.module.scss +++ b/src/components/Search/PreInput/PreInput.module.scss @@ -15,8 +15,8 @@ .popularSearchItem { text-decoration: none; display: block; - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); &:first-child { - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); } } diff --git a/src/components/Search/PreInput/SearchQuerySuggestion/SearchQuerySuggestion.module.scss b/src/components/Search/PreInput/SearchQuerySuggestion/SearchQuerySuggestion.module.scss index ee3f3cd5ed..658bbc0e83 100644 --- a/src/components/Search/PreInput/SearchQuerySuggestion/SearchQuerySuggestion.module.scss +++ b/src/components/Search/PreInput/SearchQuerySuggestion/SearchQuerySuggestion.module.scss @@ -1,6 +1,6 @@ .searchSuggestion { - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); &:last-child { - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); } } diff --git a/src/components/Search/SearchResults/SearchResultItem.module.scss b/src/components/Search/SearchResults/SearchResultItem.module.scss index d3dfe35c61..16a06505c0 100644 --- a/src/components/Search/SearchResults/SearchResultItem.module.scss +++ b/src/components/Search/SearchResults/SearchResultItem.module.scss @@ -15,7 +15,7 @@ .container { text-decoration: none; - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); padding-block: var(--spacing-medium); margin-block-end: var(--spacing-xsmall); } diff --git a/src/components/Verse/OverflowVerseActionsMenu.tsx b/src/components/Verse/OverflowVerseActionsMenu.tsx index fca6658234..c9813736d1 100644 --- a/src/components/Verse/OverflowVerseActionsMenu.tsx +++ b/src/components/Verse/OverflowVerseActionsMenu.tsx @@ -23,8 +23,6 @@ const OverflowVerseActionsMenuBody = dynamic(() => import('./OverflowVerseAction interface Props { verse: Verse; - isModal?: boolean; - isPortalled?: boolean; isTranslationView?: boolean; onActionTriggered?: () => void; bookmarksRangeUrl?: string; @@ -32,8 +30,6 @@ interface Props { const OverflowVerseActionsMenu: React.FC = ({ verse, - isModal = false, - isPortalled = false, isTranslationView = true, onActionTriggered, bookmarksRangeUrl, @@ -58,8 +54,8 @@ const OverflowVerseActionsMenu: React.FC = ({ } - isModal={isModal} - isPortalled={isPortalled} + isModal + isPortalled onOpenChange={(open: boolean) => { logEvent( `${isTranslationView ? 'translation_view' : 'reading_view'}_verse_actions_menu_${ @@ -70,7 +66,6 @@ const OverflowVerseActionsMenu: React.FC = ({ > void; bookmarksRangeUrl: string; } const RESET_ACTION_TEXT_TIMEOUT_MS = 3 * 1000; -const DATA_POPOVER_PORTALLED = 'data-popover-portalled'; const OverflowVerseActionsMenuBody: React.FC = ({ verse, - isPortalled, isTranslationView, onActionTriggered, bookmarksRangeUrl, @@ -62,7 +57,6 @@ const OverflowVerseActionsMenuBody: React.FC = ({ const router = useRouter(); const toast = useToast(); const { cache, mutate: globalMutate } = useSWRConfig(); - useSetPortalledZIndex(DATA_POPOVER_PORTALLED, isPortalled); const mushafId = getMushafId(quranReaderStyles.quranFont, quranReaderStyles.mushafLines).mushaf; @@ -101,25 +95,6 @@ const OverflowVerseActionsMenuBody: React.FC = ({ return false; }, [bookmarkedVerses, isVerseBookmarkedData, verse.verseKey]); - /** - * A hook that will run once to check if the body is portalled or not and if it is, - * will override the zIndex value manually to 1 so that it doesn't stack on top of - * the advanced copy/tafsirs modals since the default behavior of Radix is to set - * a really high value of the zIndex of the container of the portalled component which - * cause it to be on always on top of our custom Modal. - */ - useBrowserLayoutEffect(() => { - // eslint-disable-next-line i18next/no-literal-string - const portalledElement = window.document.querySelector(`[${DATA_POPOVER_PORTALLED}="true"]`); - if (portalledElement) { - // we need to react a few elements up the tree to get to the container that we want to override its zIndex - const radixPortalElement = portalledElement.closest('[data-radix-portal]') as HTMLElement; - if (radixPortalElement) { - radixPortalElement.style.zIndex = '1'; - } - } - }, [isPortalled]); - useEffect(() => { let timeoutId: ReturnType; // if the user has just copied the text, we should change the text back to Copy after 3 seconds. @@ -236,11 +211,7 @@ const OverflowVerseActionsMenuBody: React.FC = ({ } return ( -
+
}> {isCopied ? `${t('copied')}!` : `${t('copy')}`} diff --git a/src/components/chapters/Info/Info.module.scss b/src/components/chapters/Info/Info.module.scss index 55e511b272..f976edd1c3 100644 --- a/src/components/chapters/Info/Info.module.scss +++ b/src/components/chapters/Info/Info.module.scss @@ -98,7 +98,7 @@ margin-inline-start: 0; margin-inline-end: 0; padding-block-end: var(--spacing-xsmall); - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); @include breakpoints.tablet { display: flex; } diff --git a/src/components/dls/Footer/Footer.module.scss b/src/components/dls/Footer/Footer.module.scss index 505dec0a04..456fe6d7f9 100644 --- a/src/components/dls/Footer/Footer.module.scss +++ b/src/components/dls/Footer/Footer.module.scss @@ -4,7 +4,7 @@ .flowItem { @include utility.pageContainer(); - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); padding-block-start: var(--spacing-medium); margin-block-start: 0; margin-block-end: 0; diff --git a/src/components/dls/Modal/Action.module.scss b/src/components/dls/Modal/Action.module.scss index 973b2d6e96..3f62868b4e 100644 --- a/src/components/dls/Modal/Action.module.scss +++ b/src/components/dls/Modal/Action.module.scss @@ -5,7 +5,7 @@ border: none; display: flex; justify-content: center; - border-top: 1px solid var(--color-borders-hairline); + border-block-start: 1px solid var(--color-borders-hairline); font-size: var(--font-size-normal); background-color: inherit; padding-block-start: var(--spacing-large); diff --git a/src/components/dls/Popover/index.tsx b/src/components/dls/Popover/index.tsx index 05e96a5d21..2e9a01a8a6 100644 --- a/src/components/dls/Popover/index.tsx +++ b/src/components/dls/Popover/index.tsx @@ -30,7 +30,7 @@ interface Props { avoidCollisions?: boolean; useTooltipStyles?: boolean; defaultStyling?: boolean; - portalled?: boolean; + isPortalled?: boolean; triggerStyles?: string; contentStyles?: string; contentSideOffset?: number; @@ -48,42 +48,46 @@ const Popover: React.FC = ({ tip = false, useTooltipStyles = false, defaultStyling = true, - portalled = true, + isPortalled = true, contentSideOffset = 2, triggerStyles, contentStyles, -}) => ( -
- { + const content = ( + - - - {trigger} - - - } + + ); + return ( +
+ - {children} - {tip && } - - -
-); + + + {trigger} + + + {isPortalled ? {content} : content} + +
+ ); +}; export default Popover; diff --git a/src/components/dls/PopoverMenu/PopoverMenu.module.scss b/src/components/dls/PopoverMenu/PopoverMenu.module.scss index f80e571461..c191590247 100644 --- a/src/components/dls/PopoverMenu/PopoverMenu.module.scss +++ b/src/components/dls/PopoverMenu/PopoverMenu.module.scss @@ -48,6 +48,7 @@ $separator-size: 1px; } .content { + z-index: var(--z-index-sticky); padding-block-start: var(--spacing-small); padding-block-end: var(--spacing-small); padding-inline-start: 0; diff --git a/src/components/dls/PopoverMenu/PopoverMenu.tsx b/src/components/dls/PopoverMenu/PopoverMenu.tsx index da521a031f..3730330d97 100644 --- a/src/components/dls/PopoverMenu/PopoverMenu.tsx +++ b/src/components/dls/PopoverMenu/PopoverMenu.tsx @@ -34,6 +34,11 @@ const PopoverMenu = ({ expandDirection: side = PopoverMenuExpandDirection.BOTTOM, }: PopoverMenuProps) => { const direction = useDirection(); + const content = ( + + {children} + + ); return ( {trigger} )} - - {children} - + {isPortalled ? ( + {content} + ) : ( + content + )} ); }; diff --git a/src/components/dls/Switch/Switch.module.scss b/src/components/dls/Switch/Switch.module.scss index 65e74e355a..7c03e42063 100644 --- a/src/components/dls/Switch/Switch.module.scss +++ b/src/components/dls/Switch/Switch.module.scss @@ -42,7 +42,7 @@ $separatorOpacity: 0.2; transform: translateY(75%); width: 1px; height: 40%; - border-left: 1px solid var(--color-text-default); + border-inline-start: 1px solid var(--color-text-default); opacity: $separatorOpacity; } } diff --git a/src/components/dls/Tabs/Tabs.module.scss b/src/components/dls/Tabs/Tabs.module.scss index a036601fd0..088969a87b 100644 --- a/src/components/dls/Tabs/Tabs.module.scss +++ b/src/components/dls/Tabs/Tabs.module.scss @@ -1,6 +1,6 @@ .container { display: flex; - border-bottom: 1px solid var(--color-borders-hairline); + border-block-end: 1px solid var(--color-borders-hairline); } .tabItem { @@ -16,5 +16,5 @@ } .tabItemSelected { - border-bottom: 2px solid var(--color-text-default); + border-block-end: 2px solid var(--color-text-default); } diff --git a/src/components/dls/Tooltip/Tooltip.module.scss b/src/components/dls/Tooltip/Tooltip.module.scss index d78fc5f730..2d74651f18 100644 --- a/src/components/dls/Tooltip/Tooltip.module.scss +++ b/src/components/dls/Tooltip/Tooltip.module.scss @@ -4,6 +4,8 @@ } .content { + z-index: var(--z-index-sticky); + font-size: var(--font-size-normal); border-radius: var(--border-radius-default); padding-block-start: var(--spacing-xxsmall); padding-block-end: var(--spacing-xxsmall); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a0776780b6..28dd00ddad 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; -import { IdProvider } from '@radix-ui/react-id'; +import { DirectionProvider } from '@radix-ui/react-direction'; +import { TooltipProvider } from '@radix-ui/react-tooltip'; import { DefaultSeo } from 'next-seo'; import useTranslation from 'next-translate/useTranslation'; import Head from 'next/head'; @@ -74,22 +75,26 @@ function MyApp({ Component, pageProps }): JSX.Element { - - - - - - - - - -