Skip to content

Commit

Permalink
Remove justify fit usage in packages using Popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephl3
stephl3 committed Sep 16, 2024
1 parent a22da18 commit d4123a2
Show file tree
Hide file tree
Showing 7 changed files with 8 additions and 56 deletions.
2 changes: 1 addition & 1 deletion packages/info-sprinkle/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { InfoSprinkle } from `@leafygreen-ui/info-sprinkle`;
| `setOpen` | `function` | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<InfoSprinkle />` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean` |
| `shouldClose` | `function` | Callback that should return a boolean that determines whether or not the `<InfoSprinkle />` should close when a user tries to close it. | `() => true` |
| `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<InfoSprinkle />` component relative to the element passed to the `trigger` prop. | `'top'` |
| `justify` | `'start'`, `'middle'`, `'end'`, `'fit'` | Determines the preferred justification of the `<InfoSprinkle />` component (based on the alignment) relative to the element passed to the `trigger` prop. | `'start'` |
| `justify` | `'start'`, `'middle'`, `'end'` | Determines the preferred justification of the `<InfoSprinkle />` component (based on the alignment) relative to the element passed to the `trigger` prop. | `'start'` |
| `darkMode` | `boolean` | Determines if the `<InfoSprinkle />` will appear in dark mode. | `false` |
| `id` | `string` | `id` applied to `<InfoSprinkle />` component | |
| `className` | `string` | Applies a className to Tooltip container | |
Expand Down
2 changes: 1 addition & 1 deletion packages/inline-definition/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,6 @@ npm install @leafygreen-ui/inline-definition
| `children` | `string` | Text that will appear underlined | |
| `className` | `string` | className will be applied to the trigger element | |
| `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the tooltip relative to the component's children. | `'top'` |
| `justify` | `'start'`, `'middle'`, `'end'`, `'fit'` | Determines the preferred justification of the tooltip (based on the alignment) relative to the element passed to the component's children. | `'start'` |
| `justify` | `'start'`, `'middle'`, `'end'` | Determines the preferred justification of the tooltip (based on the alignment) relative to the element passed to the component's children. | `'start'` |
| `darkMode` | `boolean` | Determines if the component will appear in dark mode. | `false` |
| `tooltipClassName` | `string` | className to be applied to the tooltip element | |
4 changes: 0 additions & 4 deletions packages/menu/src/Menu.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,6 @@ export const Generated = {
{
align: [Align.CenterHorizontal, Align.CenterVertical],
},
{
justify: Justify.Fit,
align: [Align.Left, Align.Right],
},
],
decorator: (Instance, ctx) => (
<LeafyGreenProvider darkMode={ctx?.args?.darkMode}>
Expand Down
2 changes: 1 addition & 1 deletion packages/tooltip/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ import Tooltip from '@leafygreen-ui/tooltip';
| `initialOpen` | `boolean` | Passes an initial "open" value to an uncontrolled Tooltip. | `false` |
| `shouldClose` | `function` | Callback that should return a boolean that determines whether or not the `<Tooltip />` should close when a user tries to close it. | `() => true` |
| `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<Tooltip />` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'top'` |
| `justify` | `'start'`, `'middle'`, `'end'`, `'fit'` | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'start'` |
| `justify` | `'start'`, `'middle'`, `'end'` | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'start'` |
| `trigger` | `function`, `React.ReactNode` | A `React.ReactNode` against which the `<Tooltip />` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (<button {...rest}>trigger {children}</button>). When using a function, you must pass `children` as an argument in order for the tooltip to render. | |
| `triggerEvent` | `'hover'`, `'click'` | DOM event that triggers opening/closing of `<Tooltip />` component | `'hover'` |
| `darkMode` | `boolean` | Determines if the `<Tooltip />` will appear in dark mode. | `false` |
Expand Down
19 changes: 0 additions & 19 deletions packages/tooltip/src/Tooltip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,6 @@ const meta: StoryMetaType<typeof Tooltip> = {
justify: Object.values(Justify),
baseFontSize: Object.values(BaseFontSize),
},
excludeCombinations: [
{
justify: Justify.Fit,
children: longText,
},
{
justify: Justify.Fit,
align: [Align.Left, Align.Right],
},
],
args: {
open: true,
},
Expand Down Expand Up @@ -323,15 +313,6 @@ ShortString.args = { children: 'I am a tooltip!' };

export const LongString: StoryFn<typeof Tooltip> = () => <></>;
LongString.args = { children: longText };
LongString.parameters = {
generate: {
excludeCombinations: [
{
justify: Justify.Fit,
},
],
},
};

export const JSXChildren: StoryFn<typeof Tooltip> = () => <></>;
JSXChildren.args = {
Expand Down
14 changes: 5 additions & 9 deletions packages/tooltip/src/Tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,18 +215,14 @@ function Tooltip({
justify={justify}
adjustOnMutation={true}
onClick={stopClickPropagation}
className={cx(transitionDelay, {
[css`
className={cx(
transitionDelay,
css`
// Try to fit all the content on one line (until it hits max-width)
// Overrides default behavior, which is to set width to size of the trigger.
// Except when justify is set to fit because the width should be the size of the trigger.
// Another exception is when justify is set to fit and the alignment is either left or right. In this case only the height should be the size of the trigger so we still want the width to fit the max content.
width: max-content;
`]:
justify !== Justify.Fit ||
(justify === Justify.Fit &&
(align === Align.Left || align === Align.Right)),
})}
`,
)}
{...popoverProps}
>
{({ align, justify, referenceElPos }: PopoverFunctionParameters) => {
Expand Down
21 changes: 0 additions & 21 deletions packages/tooltip/src/Tooltip/tooltipUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,6 @@ export function notchPositionStyles({

break;

case Justify.Fit:
containerStyleObj.left = `${notchOffset}px`;

if (shouldTransformPosition) {
tooltipOffsetTransform = `translateX(-${
notchOffsetLowerBound - notchOffsetActual
}px)`;
}

break;

case Justify.End:
containerStyleObj.right = `${notchOffset}px`;

Expand Down Expand Up @@ -178,16 +167,6 @@ export function notchPositionStyles({
containerStyleObj.bottom = '0px';
break;

case Justify.Fit:
containerStyleObj.top = `${notchOffset}px`;

if (shouldTransformPosition) {
tooltipOffsetTransform = `translateY(-${
notchOffsetLowerBound - notchOffsetActual
}px)`;
}
break;

case Justify.End:
containerStyleObj.bottom = `${notchOffset}px`;

Expand Down

0 comments on commit d4123a2

Please sign in to comment.