Skip to content

Commit

Permalink
Replace usePortal with renderMode and refactor Popover-consuming comp…
Browse files Browse the repository at this point in the history 
…onents
  • Loading branch information
@stephl3
stephl3 committed Oct 11, 2024
1 parent 6c8a4cd commit 21481e5
Show file tree
Hide file tree
Showing 104 changed files with 1,048 additions and 1,256 deletions.
2 changes: 0 additions & 2 deletions packages/chip/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ or
baseFontSize={13}
disabled
onDismiss={() => {}}
popoverZIndex={1}
chipCharacterLimit={10}
chipTruncationLocation="end"
dismissButtonAriaLabel="aria-label"
Expand All @@ -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 | |
Expand Down
1 change: 0 additions & 1 deletion packages/chip/src/Chip/Chip.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,6 @@ describe('packages/chip', () => {
baseFontSize={13}
disabled
onDismiss={() => {}}
popoverZIndex={1}
chipCharacterLimit={10}
chipTruncationLocation="end"
dismissButtonAriaLabel="deselect"
Expand Down
4 changes: 4 additions & 0 deletions packages/chip/src/Chip/Chip.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,3 +329,7 @@ export const getTextStyles = (
[textDisabledStyles(theme)]: isDisabled,
[textDismissibleStyles]: isDismissible,
});

export const inlineDefinitionStyles = css`
white-space: normal;
`;
5 changes: 2 additions & 3 deletions packages/chip/src/Chip/Chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
chipTextClassName,
getTextStyles,
getWrapperStyles,
inlineDefinitionStyles,
} from './Chip.styles';
import { ChipProps, TruncationLocation, Variant } from './Chip.types';

Expand All @@ -28,7 +29,6 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
darkMode: darkModeProp,
label,
onDismiss,
popoverZIndex,
className,
dismissButtonAriaLabel,
glyph,
Expand Down Expand Up @@ -82,8 +82,8 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
darkMode={darkMode}
definition={label}
align="bottom"
popoverZIndex={popoverZIndex}
className={chipInlineDefinitionClassName}
tooltipClassName={inlineDefinitionStyles}
>
{truncatedName}
</InlineDefinition>
Expand Down Expand Up @@ -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,
Expand Down
5 changes: 0 additions & 5 deletions packages/chip/src/Chip/Chip.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down
5 changes: 0 additions & 5 deletions packages/code/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,6 @@ const SomeComponent = () => <Code>{codeSnippet}</Code>;
| `highlightLines` | `Array<number` \| `[number, number]>` | 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<LanguageOption>` (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 {
Expand Down
18 changes: 0 additions & 18 deletions packages/code/src/Code/Code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,6 @@ function Code({
onChange,
customActionButtons = [],
showCustomActionButtons = false,
usePortal = true,
portalClassName,
portalContainer,
scrollContainer,
popoverZIndex,
...rest
}: CodeProps) {
const scrollableElementRef = useRef<HTMLPreElement>(null);
Expand Down Expand Up @@ -205,18 +200,6 @@ function Code({
debounceScroll(e);
};

const popoverProps = {
popoverZIndex,
...(usePortal
? {
usePortal,
portalClassName,
portalContainer,
scrollContainer,
}
: { usePortal }),
} as const;

const showExpandButton = !!(
expandable &&
numOfLinesOfCode &&
Expand Down Expand Up @@ -286,7 +269,6 @@ function Code({
isMultiline={isMultiline}
customActionButtons={filteredCustomActionIconButtons}
showCustomActionButtons={showCustomActionsInPanel}
{...popoverProps}
/>
)}

Expand Down
7 changes: 7 additions & 0 deletions packages/code/src/CopyButton/CopyButton.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, string> = {
[Theme.Light]: css`
color: ${palette.white};
Expand Down
14 changes: 10 additions & 4 deletions packages/code/src/CopyButton/CopyButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -109,11 +113,13 @@ function CopyButton({ onCopy, contents }: CopyProps) {

return (
<Tooltip
align={Align.Top}
className={tooltipStyles}
data-testid="code_copy-button_tooltip"
justify={Justify.Middle}
open={open}
renderMode={RenderMode.TopLayer}
setOpen={setOpen}
align={Align.Top}
justify={Justify.Middle}
trigger={
<IconButton
data-testid="code_copy-button"
Expand Down
27 changes: 5 additions & 22 deletions packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import FileIcon from '@leafygreen-ui/icon/dist/File';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import { isComponentType } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import { Option, Select } from '@leafygreen-ui/select';
import { Option, RenderMode, Select } from '@leafygreen-ui/select';

import { CustomSelectMenuButton } from '../CustomSelectMenuButton';
import { LanguageOption, PopoverProps } from '../types';
import { LanguageOption } from '../types';

import {
buttonModeStyle,
Expand All @@ -28,22 +28,13 @@ function isLeafyGreenIcon(element: React.ReactNode) {
return false;
}

interface Props extends PopoverProps {
interface Props {
language: LanguageOption;
languageOptions: Array<LanguageOption>;
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);

Expand Down Expand Up @@ -83,14 +74,6 @@ function LanguageSwitcher({
}
}

const popoverProps = {
popoverZIndex,
usePortal,
portalClassName,
portalContainer,
scrollContainer,
} as const;

return (
<div className={containerStyle}>
<Select
Expand All @@ -100,7 +83,7 @@ function LanguageSwitcher({
value={language?.displayName}
className={selectStyle}
allowDeselect={false}
{...popoverProps}
renderMode={RenderMode.TopLayer}
__INTERNAL__menuButtonSlot__={CustomSelectMenuButton}
__INTERNAL__menuButtonSlotProps__={{
className: cx(menuButtonStyle, buttonModeStyle[theme]),
Expand Down
17 changes: 1 addition & 16 deletions packages/code/src/Panel/Panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import LanguageSwitcher from '../LanguageSwitcher/LanguageSwitcher';
import {
LanguageOption,
LanguageSwitcher as LanguageSwitcherProps,
PopoverProps,
} from '../types';

import {
Expand All @@ -27,7 +26,7 @@ type PanelProps = Partial<Omit<LanguageSwitcherProps, 'language'>> & {
customActionButtons?: Array<React.ReactElement>;
showCustomActionButtons?: boolean;
className?: string;
} & PopoverProps;
};

function Panel({
language,
Expand All @@ -38,23 +37,10 @@ function Panel({
showCopyButton,
customActionButtons,
showCustomActionButtons,
usePortal,
portalClassName,
portalContainer,
scrollContainer,
popoverZIndex,
className,
}: PanelProps) {
const { theme } = useDarkMode();

const popoverProps = {
popoverZIndex,
usePortal,
portalClassName,
portalContainer,
scrollContainer,
} as const;

return (
<div
className={cx(
Expand All @@ -75,7 +61,6 @@ function Panel({
onChange={onChange}
language={language}
languageOptions={languageOptions}
{...popoverProps}
/>
)}

Expand Down
35 changes: 2 additions & 33 deletions packages/code/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,36 +52,6 @@ export interface SyntaxProps extends HTMLElementProps<'code'> {
highlightLines?: LineHighlightingDefinition;
}

export interface PopoverProps {
/**
* Specifies that the popover content should be rendered at the end of the DOM,
* rather than in the DOM tree.
*
* default: `true`
*/
usePortal?: boolean;

/**
* When usePortal is `true`, specifies a class name to apply to the root element of the portal.
*/
portalClassName?: string;

/**
* When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.
*/
portalContainer?: HTMLElement | null;

/**
* When usePortal is `true`, specifies the scrollable element to position relative to.
*/
scrollContainer?: HTMLElement | null;

/**
* Number that controls the z-index of the popover element directly.
*/
popoverZIndex?: number;
}

export type CodeProps = Omit<
SyntaxProps,
'onCopy' | 'language' | 'onChange'
Expand Down Expand Up @@ -160,16 +130,15 @@ export type CodeProps = Omit<
*/
onChange: (arg0: LanguageOption) => void;
}
) &
PopoverProps;
);

export interface LanguageOption {
displayName: string;
language: Language;
image?: React.ReactElement;
}

export interface LanguageSwitcher extends PopoverProps {
export interface LanguageSwitcher {
onChange: (arg0: LanguageOption) => void;
language: LanguageOption['displayName'];
languageOptions: Array<LanguageOption>;
Expand Down
Loading

0 comments on commit 21481e5

Please sign in to comment.