feat(Tip): L/R center narrow maxWidth

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

@@ -47,6 +47,7 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
 
   const commonPopoverProps = getPopoverAlignmentAndPattern({ alignment, type });
   const dims = getAlignmentStyles({ avatar, alignment, type });
+  const isHorizontalCenter = dims === 'horizontalCenter';
   const [childRef, { width: tipWidth }] = useMeasure<HTMLDivElement>();
 
   const [offset, setOffset] = useState<number | undefined>(undefined);
@@ -169,8 +170,9 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
         widthRestricted={false}
       >
         <FloatingTipTextWrapper
+          horizNarrow={narrow && isHorizontalCenter}
           isHoverType={isHoverType}
-          narrow={narrow}
+          narrow={narrow && !isHorizontalCenter}
           ref={childRef}
         >
           {contents}

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

@@ -38,6 +38,7 @@ export const InlineTip: React.FC<TipWrapperProps> = ({
   const inlineWrapperProps = isHoverType ? {} : { hideTip: isTipHidden };
   const tipWrapperProps = isHoverType ? ({ inheritDims } as const) : {};
   const tipBodyAlignment = getAlignmentStyles({ alignment, avatar, type });
+  const isHorizontalCenter = tipBodyAlignment === 'horizontalCenter';
 
   const target = (
     <TargetContainer
@@ -62,9 +63,10 @@ export const InlineTip: React.FC<TipWrapperProps> = ({
         alignment={tipBodyAlignment}
         aria-hidden={isHoverType}
         color="currentColor"
+        horizNarrow={narrow && isHorizontalCenter}
         id={id}
         role={type === 'tool' ? 'tooltip' : undefined}
-        width={narrow ? narrowWidth : 'max-content'}
+        width={narrow && !isHorizontalCenter ? narrowWidth : 'max-content'}
         zIndex="auto"
       >
         {type === 'preview' ? (

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

@@ -9,6 +9,7 @@ import {
   inlineToolTipBodyAlignments,
   narrowWidth,
   toolTipBodyCss,
+  tooltipCenteredPadding,
   toolTipWidthRestrictions,
 } from './styles/styles';
 
@@ -20,7 +21,12 @@ const tipWrapperStyles = {
 
 const floatingTipTextStates = states({
   isHoverType: { alignItems: 'flexStart' },
-  narrow: { width: narrowWidth },
+  /*
+   * Subtract 2x padding to account for the padding within
+   * the tooltip since this is the inner text wrapper
+   */
+  narrow: { width: narrowWidth - tooltipCenteredPadding * 2 },
+  horizNarrow: { maxWidth: narrowWidth - tooltipCenteredPadding * 2 },
 });
 
 const inlineTipStates = states({
@@ -85,9 +91,18 @@ export const TargetContainer = styled(Box)(
   })
 );
 
+const inlineTipBodyStates = states({
+  hideTip: {
+    opacity: 0,
+    visibility: 'hidden',
+  },
+  horizNarrow: { maxWidth: narrowWidth },
+});
+
 export const TipBody = styled(Box)<
-  StyleProps<typeof inlineToolTipBodyAlignments>
->(css({ ...toolTipBodyCss }), inlineToolTipBodyAlignments);
+  StyleProps<typeof inlineToolTipBodyAlignments> &
+    StyleProps<typeof inlineTipBodyStates>
+>(css({ ...toolTipBodyCss }), inlineToolTipBodyAlignments, inlineTipBodyStates);
 
 export const FloatingTipBody = styled(Popover)<
   StyleProps<typeof toolTipWidthRestrictions>

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

@@ -16,6 +16,7 @@ import { createVariantsFromAlignments } from './createVariantsUtils';
 
 export const tooltipBgColor = `background-contrast`;
 export const tooltipArrowHeight = `1rem`;
+export const tooltipArrowHeightPx = 16;
 const containerOffsetVertical = 12;
 const borderColor = 'border-primary';
 
@@ -140,6 +141,11 @@ export const rightAlignStyles = {
 export const horizontalCenterStyles = {
   ...horizontalCenterWidths,
   ...centerHorizontal,
+  /*
+   * This may seem odd, but since this width includes the beak
+   * we need to add the beak width to the max width to get the correct max width
+   */
+  maxWidth: horizontalCenterWidths.maxWidth + tooltipArrowHeightPx,
 } as const;
 
 export const leftAlignStyles = {
@@ -184,8 +190,10 @@ export const tooltipVariantStyles = createVariantsFromAlignments(
   createToolTipVariantFromAlignment
 );
 
+export const tooltipCenteredPadding = 4;
+
 const centeredBodyStyles = {
-  p: 4,
+  p: tooltipCenteredPadding,
   textAlign: 'center',
   minWidth: 'inherit',
   maxWidth: 'inherit',