Added missing left and right placement positions

[bfintal]

What?

Added left and right position definitions.

Why?

I noticed that when I used tooltipPosition="right" and tooltipPosition="left" in a Button component, it didn't work. However, "top" and "bottom" both work. To make right and left work, you'll need to add middle y axis value to it: "middle right" and "middle left".

How?

It looked like it didn't work because the definition for "right" and "left" were not defined in the list of shorthand positions. Since "top" and "bottom" values worked, I think it should be that "right" and "left" values should be added in as well.

Testing Instructions

Add a Button that uses "right" or "left" tooltipPositions:

// This now works:
<Button label="Tooltip" tooltipPosition="right">Hover me</Button>
// The above is identical to:
<Button label="Tooltip" tooltipPosition="middle right">Hover me</Button>

// And this now works:
<Button label="Tooltip" tooltipPosition="left">Hover me</Button>
// Which is identical to:
<Button label="Tooltip" tooltipPosition="middle left">Hover me</Button>

Testing Instructions for Keyboard

Screenshots or screencast

[jorgefilipecosta]

It looks like we have some typescript errors related to this update. I guess we need to update the records in other places?

cc: @ciampo In case he has some thoughts on supporting left and right shorthand placements.

[ciampo]

Thank you for the pint, @jorgefilipecosta !

Hey @bfintal , unfortunately the left and right values are not supported by the component — that is because these are the same values supported by the position prop of the Popover component, which was originally determined by the underlying third-party library that was used when the component was created originally. You can see the list of supported values for the tooltipPosition prop on the Storybook docs page.

Furthermore, we are slowly migrating away from the position prop in our components — in fact, we are just in the process of marking it as deprecated on the Tooltip component, and other components like Button will follow. The position prop will be replaced by a new placement prop, which better aligns with how the latest version of Popover works.

For the reasons stated above, I'm going to close this PR — the easy fix is to use "middle right" and "middle left" as mentioned in the PR description.

Thank you!