review changes

Author: dreamwasp

packages/gamut/src/Tip/shared/styles.tsx

@@ -14,6 +14,7 @@ import {
 export const tooltipBackgroundColor = `background-contrast`;
 export const tooltipArrowHeight = `1rem`;
 const containerOffsetVertical = 12;
+const borderColor = 'border-primary';
 
 export const narrowWidth = 64;
 export const centerWidths = { minWidth: 64, maxWidth: 128 } as const;
@@ -31,16 +32,26 @@ export const topStyles = {
   pb: containerOffsetVertical,
 } as const;
 
-const beforeStyles = {
+const beforeStylesVert = {
   content: '""',
   position: 'absolute',
   width: '100%',
 };
 
-export const topStylesBefore = { ...beforeStyles, height: 16, bottom: '-4px' };
+const beforeStylesHorizontal = {
+  content: '""',
+  position: 'absolute',
+  height: '100%',
+};
+
+export const topStylesBefore = {
+  ...beforeStylesVert,
+  height: 16,
+  bottom: '-4px',
+};
 
 export const topStylesAfter = {
-  borderColor: 'border-primary',
+  borderColor,
   borderWidth: '0 1px 1px 0',
   bottom: '0.25rem',
 } as const;
@@ -51,13 +62,31 @@ export const bottomStyles = {
 } as const;
 
 export const bottomStylesBefore = {
-  ...beforeStyles,
+  ...beforeStylesVert,
   height: 24,
   top: '-8px',
 };
 
 export const bottomStylesAfter = {
-  borderColor: 'border-primary',
+  borderColor,
+  borderWidth: '1px 0 0 1px',
+  top: '0.25rem',
+} as const;
+
+export const rightAlignStyles = {
+  top: 'calc(100% + 4px)',
+  pt: containerOffsetVertical,
+} as const;
+
+export const rightAlignStylesBefore = {
+  ...beforeStylesHorizontal,
+  height: 24,
+  left: '-8px',
+  bg: 'red',
+};
+
+export const rightAlignStylesAfter = {
+  borderColor,
   borderWidth: '1px 0 0 1px',
   top: '0.25rem',
 } as const;
@@ -84,6 +113,10 @@ export const verticalCenterStylesAfter = {
   left: 'calc(50% - 0.5rem)',
 } as const;
 
+export const horizontalCenterStylesAfter = {
+  left: 'calc(50% - 0.5rem)',
+} as const;
+
 // This halfway fills the square we use to create the 'beak' of the tip so it does not overlap the tip text on the 'center' alignments
 export const topCenterStylesAfter = {
   backgroundImage: `linear-gradient(to top left, ${theme.colors[tooltipBackgroundColor]} 55%, rgba(0,0,0,0) 20%)`,

packages/gamut/src/Tip/shared/types.tsx

@@ -14,8 +14,6 @@ const tipCenterAlignmentArray = [
   'left-center',
   'right-center',
   'top-center',
-  'center-right',
-  'center-left',
 ] as const;
 
 export const tipAlignmentArray = [

packages/gamut/src/Tip/shared/utils.tsx

@@ -11,10 +11,14 @@ import {
   bottomStylesAfter,
   bottomStylesBefore,
   horizontalCenterStyles,
+  horizontalCenterStylesAfter,
   horizontalLeftStyles,
   horizontalRightStyles,
   leftStyles,
   leftStylesAfter,
+  rightAlignStyles,
+  rightAlignStylesAfter,
+  rightAlignStylesBefore,
   rightStyles,
   rightStylesAfter,
   topCenterStylesAfter,
@@ -96,17 +100,23 @@ export const createToolTipVariantFromAlignment = (alignment: string) => {
     styleObject = { ...topStyles };
     styleObjectAfter = { ...topStylesAfter };
     styleObjectBefore = { ...topStylesBefore };
-  } else {
+  } else if (alignment.includes('bottom')) {
     styleObject = { ...bottomStyles };
     styleObjectAfter = { ...bottomStylesAfter };
     styleObjectBefore = { ...bottomStylesBefore };
+  } else if (alignment.startsWith('right')) {
+    styleObject = { ...rightAlignStyles };
+    styleObjectAfter = { ...rightAlignStylesAfter };
+    styleObjectBefore = { ...rightAlignStylesBefore };
+  } else {
   }
 
-  const isHorizontallyAligned =
-    alignment.includes('left-') || alignment.includes('right-');
+  const isLRAligned =
+    alignment.startsWith('right') || alignment.startsWith('left');
+
   const isRightAligned = alignment.includes('right');
 
-  if (alignment.includes('center') && !isHorizontallyAligned) {
+  if (alignment.includes('center') && !isLRAligned) {
     styleObject = { ...styleObject, ...verticalCenterStyles };
     styleObjectAfter = { ...styleObjectAfter, ...verticalCenterStylesAfter };
     if (alignment.includes('top')) {
@@ -122,9 +132,9 @@ export const createToolTipVariantFromAlignment = (alignment: string) => {
     styleObjectAfter = { ...styleObjectAfter, ...leftStylesAfter };
   }
 
-  if (alignment.includes('center') && isHorizontallyAligned) {
+  if (isLRAligned) {
     styleObject = { ...styleObject, ...horizontalCenterStyles };
-    styleObjectAfter = { ...styleObjectAfter, ...verticalCenterStylesAfter };
+    styleObjectAfter = { ...styleObjectAfter, ...horizontalCenterStylesAfter };
     if (isRightAligned) {
       styleObject = { ...styleObject, ...horizontalRightStyles };
     } else {