diff --git a/.changeset/popular-hairs-own.md b/.changeset/popular-hairs-own.md new file mode 100644 index 00000000000..a5918fb24fb --- /dev/null +++ b/.changeset/popular-hairs-own.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Tooltip2: Fix the anchor position mapping to reflect the directions correctly diff --git a/src/drafts/Tooltip/Tooltip.playground.stories.tsx b/src/drafts/Tooltip/Tooltip.playground.stories.tsx index 5f13fcbba2e..b67bc535ef9 100644 --- a/src/drafts/Tooltip/Tooltip.playground.stories.tsx +++ b/src/drafts/Tooltip/Tooltip.playground.stories.tsx @@ -12,6 +12,16 @@ export default { direction: 's', type: 'description', }, + argTypes: { + text: {control: {type: 'text'}}, + direction: { + control: {type: 'radio'}, + options: ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'], + }, + type: { + control: false, + }, + }, } as Meta // Description type, north direction by default diff --git a/src/drafts/Tooltip/Tooltip.tsx b/src/drafts/Tooltip/Tooltip.tsx index 969e9f6a195..949ea46c34b 100644 --- a/src/drafts/Tooltip/Tooltip.tsx +++ b/src/drafts/Tooltip/Tooltip.tsx @@ -144,25 +144,25 @@ export type TriggerPropsType = { // map tooltip direction to anchoredPosition props const directionToPosition: Record = { - nw: {side: 'outside-top', align: 'start'}, + nw: {side: 'outside-top', align: 'end'}, n: {side: 'outside-top', align: 'center'}, - ne: {side: 'outside-top', align: 'end'}, + ne: {side: 'outside-top', align: 'start'}, e: {side: 'outside-right', align: 'center'}, - se: {side: 'outside-bottom', align: 'end'}, + se: {side: 'outside-bottom', align: 'start'}, s: {side: 'outside-bottom', align: 'center'}, - sw: {side: 'outside-bottom', align: 'start'}, + sw: {side: 'outside-bottom', align: 'end'}, w: {side: 'outside-left', align: 'center'}, } // map anchoredPosition props to tooltip direction const positionToDirection: Record = { - 'outside-top-start': 'nw', + 'outside-top-end': 'nw', 'outside-top-center': 'n', - 'outside-top-end': 'ne', + 'outside-top-start': 'ne', 'outside-right-center': 'e', - 'outside-bottom-end': 'se', + 'outside-bottom-start': 'se', 'outside-bottom-center': 's', - 'outside-bottom-start': 'sw', + 'outside-bottom-end': 'sw', 'outside-left-center': 'w', }