From 21481e5ba2a3ef9ebdd913d8ad525e7c6733d696 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Fri, 11 Oct 2024 11:36:38 -0700 Subject: [PATCH] Replace usePortal with renderMode and refactor Popover-consuming components --- packages/chip/README.md | 2 - packages/chip/src/Chip/Chip.spec.tsx | 1 - packages/chip/src/Chip/Chip.styles.ts | 4 + packages/chip/src/Chip/Chip.tsx | 5 +- packages/chip/src/Chip/Chip.types.ts | 5 - packages/code/README.md | 5 - packages/code/src/Code/Code.tsx | 18 -- .../code/src/CopyButton/CopyButton.styles.ts | 7 + packages/code/src/CopyButton/CopyButton.tsx | 14 +- .../src/LanguageSwitcher/LanguageSwitcher.tsx | 27 +- packages/code/src/Panel/Panel.tsx | 17 +- packages/code/src/types.ts | 35 +-- packages/combobox/README.md | 4 +- .../combobox/src/Combobox/Combobox.spec.tsx | 13 +- packages/combobox/src/Combobox/Combobox.tsx | 54 ++-- .../combobox/src/Combobox/Combobox.types.ts | 14 +- .../src/ComboboxChip/ComboboxChip.tsx | 2 - .../src/ComboboxMenu/ComboboxMenu.tsx | 16 +- packages/copyable/README.md | 19 +- packages/copyable/src/Copyable.stories.tsx | 2 - packages/copyable/src/Copyable/Copyable.tsx | 11 +- .../copyable/src/Copyable/Copyable.types.ts | 5 - packages/date-picker/README.md | 2 +- .../src/DatePicker/DatePicker.spec.tsx | 30 +-- .../date-picker/src/DatePicker/DatePicker.tsx | 18 -- .../DatePickerMenu/DatePickerMenu.tsx | 1 - .../DatePickerMenu/DatePickerMenu.types.ts | 10 +- .../components/MenuWrapper/MenuWrapper.tsx | 18 +- packages/date-picker/src/shared/constants.ts | 6 +- .../context/SharedDatePickerContext.utils.ts | 5 - .../shared/types/BaseDatePickerProps.types.ts | 12 +- packages/guide-cue/README.md | 4 - packages/guide-cue/package.json | 9 +- packages/guide-cue/src/GuideCue.spec.tsx | 60 ----- packages/guide-cue/src/GuideCue.stories.tsx | 10 +- packages/guide-cue/src/GuideCue.tsx | 46 +--- packages/guide-cue/src/TooltipContent.tsx | 20 +- packages/guide-cue/src/types.ts | 26 +- packages/info-sprinkle/README.md | 37 ++- .../src/InfoSprinkle/InfoSprinkle.tsx | 7 +- .../src/InfoSprinkle/InfoSprinkle.types.ts | 13 +- .../src/InlineDefinition.spec.tsx | 17 +- .../src/InlineDefinition.tsx | 21 +- .../src/LeafyGreenContext.tsx | 12 +- .../PopoverContext/PopoverContext.types.ts | 147 ++++++++--- .../src/PopoverContext/index.ts | 1 + packages/leafygreen-provider/src/index.ts | 1 + packages/menu/README.md | 35 ++- packages/menu/src/Menu.spec.tsx | 43 +++- packages/menu/src/Menu.stories.tsx | 10 +- packages/menu/src/Menu/Menu.tsx | 37 +-- packages/menu/src/Menu/Menu.types.ts | 3 +- packages/modal/src/Modal/ModalView.tsx | 2 + packages/number-input/README.md | 48 ++-- .../number-input/src/NumberInput.stories.tsx | 11 + .../src/NumberInput/NumberInput.spec.tsx | 65 +---- .../src/NumberInput/NumberInput.tsx | 37 --- .../src/NumberInput/NumberInput.types.ts | 3 - .../src/UnitSelect/UnitSelect.tsx | 24 +- .../src/UnitSelect/UnitSelect.types.ts | 12 +- .../src/UnitSelectButton/UnitSelectButton.tsx | 23 +- .../UnitSelectButton.types.ts | 5 +- .../pagination/src/Pagination/Pagination.tsx | 9 +- packages/pipeline/src/Pipeline.tsx | 11 +- packages/popover/README.md | 19 +- packages/popover/src/Popover.stories.tsx | 53 ++-- .../popover/src/Popover/Popover.hooks.tsx | 8 +- .../popover/src/Popover/Popover.styles.ts | 1 + packages/popover/src/Popover/Popover.tsx | 8 +- packages/popover/src/Popover/Popover.types.ts | 26 +- packages/popover/src/index.ts | 1 + .../utils/getPopoverRenderModeProps.spec.ts | 51 ++++ .../src/utils/getPopoverRenderModeProps.ts | 43 ++++ .../popover/src/utils/getRenderMode.test.ts | 48 ---- packages/popover/src/utils/getRenderMode.ts | 20 -- .../src/SearchInput/SearchInput.spec.tsx | 16 +- .../src/SearchInput/SearchInput.tsx | 18 -- .../src/SearchInput/SearchInput.types.ts | 11 +- .../SearchResultsMenu/SearchResultsMenu.tsx | 17 +- .../SearchResultsMenu.types.ts | 15 +- packages/select/README.md | 58 ++--- .../select/src/ListMenu/ListMenu.stories.tsx | 1 + packages/select/src/ListMenu/ListMenu.tsx | 32 --- .../select/src/ListMenu/ListMenu.types.ts | 5 +- packages/select/src/Select.stories.tsx | 13 +- packages/select/src/Select/Select.spec.tsx | 240 +++++++++--------- packages/select/src/Select/Select.tsx | 67 +++-- packages/select/src/Select/Select.types.ts | 6 +- packages/select/src/Select/index.ts | 2 + packages/select/src/index.ts | 2 + .../utils/getTestUtils/getTestUtils.spec.tsx | 36 +-- .../src/CollapseToggle/CollapseToggle.tsx | 8 +- packages/split-button/README.md | 35 +-- .../src/SplitButton/SplitButton.spec.tsx | 12 +- .../src/SplitButton/SplitButton.tsx | 10 +- .../stepper/src/EllipsesStep/EllipsesStep.tsx | 5 +- packages/tooltip/README.md | 46 ++-- packages/tooltip/src/Tooltip.stories.tsx | 33 +-- packages/tooltip/src/Tooltip/Tooltip.spec.tsx | 47 ++-- .../tooltip/src/Tooltip/Tooltip.styles.ts | 10 +- packages/tooltip/src/Tooltip/Tooltip.tsx | 57 +++-- packages/tooltip/src/Tooltip/Tooltip.types.ts | 11 +- packages/tooltip/src/Tooltip/index.ts | 11 +- packages/tooltip/src/index.ts | 11 +- 104 files changed, 1048 insertions(+), 1256 deletions(-) create mode 100644 packages/popover/src/utils/getPopoverRenderModeProps.spec.ts create mode 100644 packages/popover/src/utils/getPopoverRenderModeProps.ts delete mode 100644 packages/popover/src/utils/getRenderMode.test.ts delete mode 100644 packages/popover/src/utils/getRenderMode.ts diff --git a/packages/chip/README.md b/packages/chip/README.md index e626376e61..eb7cc40d16 100644 --- a/packages/chip/README.md +++ b/packages/chip/README.md @@ -33,7 +33,6 @@ or baseFontSize={13} disabled onDismiss={() => {}} - popoverZIndex={1} chipCharacterLimit={10} chipTruncationLocation="end" dismissButtonAriaLabel="aria-label" @@ -49,7 +48,6 @@ or | `label` | `React.ReactNode` | Label rendered in the chip | | | `chipTruncationLocation` | `'end'` \| `'middle'` \| `'none'` \| `'start'` | Defines where the ellipses will appear in a Chip when the label length exceeds the `chipCharacterLimit`. If `none` is passed, the chip will not truncate. **Note**: If there is any truncation, the full label text will appear inside a tooltip on hover | `none` | | `chipCharacterLimit` | `number` | Defines the character limit of a Chip before they start truncating. **Note**: the three ellipses dots are included in the character limit and the chip will only truncate if the chip length is greater than the `chipCharacterLimit`. | | -| `popoverZIndex` | `number` | Number that controls the z-index of the tooltip containing the full label text. | | | `baseFontSize` | `'13'` \| `'16'` | Determines the base font-size of the chip. | | | `variant` | `'gray'` \| `'blue'` \| `'green'` \| `'purple'` \| `'red'` \| `'yellow'` \| `'blue'` | The color of the chip. | | | `glyph` | `React.ReactElement` | An icon glyph rendered before the text. To use a custom icon, see [Link](https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets) docs | | diff --git a/packages/chip/src/Chip/Chip.spec.tsx b/packages/chip/src/Chip/Chip.spec.tsx index c06de541d9..706db75e12 100644 --- a/packages/chip/src/Chip/Chip.spec.tsx +++ b/packages/chip/src/Chip/Chip.spec.tsx @@ -353,7 +353,6 @@ describe('packages/chip', () => { baseFontSize={13} disabled onDismiss={() => {}} - popoverZIndex={1} chipCharacterLimit={10} chipTruncationLocation="end" dismissButtonAriaLabel="deselect" diff --git a/packages/chip/src/Chip/Chip.styles.ts b/packages/chip/src/Chip/Chip.styles.ts index 99f6f81792..caa4a47248 100644 --- a/packages/chip/src/Chip/Chip.styles.ts +++ b/packages/chip/src/Chip/Chip.styles.ts @@ -329,3 +329,7 @@ export const getTextStyles = ( [textDisabledStyles(theme)]: isDisabled, [textDismissibleStyles]: isDismissible, }); + +export const inlineDefinitionStyles = css` + white-space: normal; +`; diff --git a/packages/chip/src/Chip/Chip.tsx b/packages/chip/src/Chip/Chip.tsx index 858a7513ae..999eb069b8 100644 --- a/packages/chip/src/Chip/Chip.tsx +++ b/packages/chip/src/Chip/Chip.tsx @@ -14,6 +14,7 @@ import { chipTextClassName, getTextStyles, getWrapperStyles, + inlineDefinitionStyles, } from './Chip.styles'; import { ChipProps, TruncationLocation, Variant } from './Chip.types'; @@ -28,7 +29,6 @@ export const Chip = React.forwardRef( darkMode: darkModeProp, label, onDismiss, - popoverZIndex, className, dismissButtonAriaLabel, glyph, @@ -82,8 +82,8 @@ export const Chip = React.forwardRef( darkMode={darkMode} definition={label} align="bottom" - popoverZIndex={popoverZIndex} className={chipInlineDefinitionClassName} + tooltipClassName={inlineDefinitionStyles} > {truncatedName} @@ -111,7 +111,6 @@ Chip.propTypes = { label: PropTypes.string.isRequired, chipCharacterLimit: PropTypes.number, chipTruncationLocation: PropTypes.oneOf(Object.values(TruncationLocation)), - popoverZIndex: PropTypes.number, baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)), variant: PropTypes.oneOf(Object.values(Variant)), onDismiss: PropTypes.func, diff --git a/packages/chip/src/Chip/Chip.types.ts b/packages/chip/src/Chip/Chip.types.ts index 4c60a8315d..a2c903b164 100644 --- a/packages/chip/src/Chip/Chip.types.ts +++ b/packages/chip/src/Chip/Chip.types.ts @@ -43,11 +43,6 @@ export interface ChipProps */ chipCharacterLimit?: number; - /** - * Number that controls the z-index of the tooltip containing the full label text. - */ - popoverZIndex?: number; - /** * Determines the base font-size of the component * diff --git a/packages/code/README.md b/packages/code/README.md index ce67888136..34e0383c74 100644 --- a/packages/code/README.md +++ b/packages/code/README.md @@ -119,11 +119,6 @@ const SomeComponent = () => {codeSnippet}; | `highlightLines` | `Array` | An optional array of lines to highlight. The array can only contain numbers corresponding to the line numbers to highlight, and / or tuples representing a range (e.g. `[6, 10]`); | | | `languageOptions` | `Array` (see below) | An array of language options. When provided, a LanguageSwitcher dropdown is rendered. | | | `onChange` | `(language: LanguageOption) => void` | A change handler triggered when the language is changed. Invalid when no `languageOptions` are provided | | -| `usePortal` | `boolean` | Will position the language switcher dropdown relative to its parent without using a Portal if `usePortal` is set to false. | `true` | -| `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the language switcher's dropdown's portal. | | -| `scrollContainer` | `HTMLElement` \| `null` | If the language switcher's dropdown's portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly. | | -| `portalClassName` | `string` | Passes the given className to the language switcher's dropdown's portal container if the default portal container is being used. | | -| `popoverZIndex` | `number` | Sets the z-index CSS property for the language switcher's dropdown. | | ``` interface LanguageOption { diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx index 062054e4db..a57c262bbe 100644 --- a/packages/code/src/Code/Code.tsx +++ b/packages/code/src/Code/Code.tsx @@ -82,11 +82,6 @@ function Code({ onChange, customActionButtons = [], showCustomActionButtons = false, - usePortal = true, - portalClassName, - portalContainer, - scrollContainer, - popoverZIndex, ...rest }: CodeProps) { const scrollableElementRef = useRef(null); @@ -205,18 +200,6 @@ function Code({ debounceScroll(e); }; - const popoverProps = { - popoverZIndex, - ...(usePortal - ? { - usePortal, - portalClassName, - portalContainer, - scrollContainer, - } - : { usePortal }), - } as const; - const showExpandButton = !!( expandable && numOfLinesOfCode && @@ -286,7 +269,6 @@ function Code({ isMultiline={isMultiline} customActionButtons={filteredCustomActionIconButtons} showCustomActionButtons={showCustomActionsInPanel} - {...popoverProps} /> )} diff --git a/packages/code/src/CopyButton/CopyButton.styles.ts b/packages/code/src/CopyButton/CopyButton.styles.ts index 381fd9d61c..67b845f29c 100644 --- a/packages/code/src/CopyButton/CopyButton.styles.ts +++ b/packages/code/src/CopyButton/CopyButton.styles.ts @@ -2,6 +2,13 @@ import { css } from '@leafygreen-ui/emotion'; import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; +export const tooltipStyles = css` + svg { + width: 26px; + height: 26px; + } +`; + export const copiedThemeStyle: Record = { [Theme.Light]: css` color: ${palette.white}; diff --git a/packages/code/src/CopyButton/CopyButton.tsx b/packages/code/src/CopyButton/CopyButton.tsx index 01a73ea23a..6c4f640e64 100644 --- a/packages/code/src/CopyButton/CopyButton.tsx +++ b/packages/code/src/CopyButton/CopyButton.tsx @@ -12,10 +12,14 @@ import { usePopoverContext, } from '@leafygreen-ui/leafygreen-provider'; import { keyMap } from '@leafygreen-ui/lib'; -import Tooltip, { Align, Justify } from '@leafygreen-ui/tooltip'; +import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip'; import { COPIED_SUCCESS_DURATION, COPIED_TEXT, COPY_TEXT } from './constants'; -import { copiedThemeStyle, copyButtonThemeStyles } from './CopyButton.styles'; +import { + copiedThemeStyle, + copyButtonThemeStyles, + tooltipStyles, +} from './CopyButton.styles'; import { CopyProps } from './CopyButton.types'; function CopyButton({ onCopy, contents }: CopyProps) { @@ -109,11 +113,13 @@ function CopyButton({ onCopy, contents }: CopyProps) { return ( ; onChange: (arg0: LanguageOption) => void; } -function LanguageSwitcher({ - language, - languageOptions, - onChange, - usePortal, - portalClassName, - portalContainer, - scrollContainer, - popoverZIndex, -}: Props) { +function LanguageSwitcher({ language, languageOptions, onChange }: Props) { const { theme, darkMode } = useDarkMode(); const previousLanguage = usePrevious(language); @@ -83,14 +74,6 @@ function LanguageSwitcher({ } } - const popoverProps = { - popoverZIndex, - usePortal, - portalClassName, - portalContainer, - scrollContainer, - } as const; - return (
` | `'none'` | -| `errorMessage` | `string` | Text that shows when the `state` is set to `error`. | `'This input needs your attention'` | -| `successMessage` | `string` | Text that shows when the `state` is set to `valid`. | `'Success'` | -| `baseFontSize` | `'13'`, `'16'` | Determines the base font size if sizeVariant is set to `default` | `'13'` | -| `dropdownWidthBasis` | `'option'` \| `'trigger'` | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option. | `trigger` | +| Prop | Type | Description | Default | +| -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- | -------- | +| `children` | `node` | `