fix(tooltips): renders correct arrow dimensions based on tooltip size

[ze-flo]

Description

This PR refines the arrowStyles logic to output deterministic arrow dimensions.

Detail

• Simplifies Tooltip styles to avoid relying on arrow inset
• Ensures the rendered height of the arrow matches with the size argument

For this example, ArrowStylesStory was modified to display a box-shadow matching the arrow size input.

box-shadow: ${p => p.hasBoxShadow && `0 0 0 ${p.size}px lavender`};

This preview shows the impact of changing the size and inset inputs. The arrow was recolored to better show its dimensions.

Notice that the tip of the arrow ends where the drop shadow ends.

As a result, tooltip arrow rendered sizes match with V8:

Arrows checklist

• Renders Tooltips correctly
• Renders `ArrowStyles correctly
• Renders Legacy Menu correctly
• Renders Menu correctly

Checklist

• 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
• 🌐 demo is up-to-date (npm start)
• ⬅️ renders as expected with reversed (RTL) direction
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
• ♿ tested for WCAG 2.1 AA accessibility compliance
• 📝 Thoroughly tested in Chrome, Firefox, Safari, and Edge on retina and non-retina displays

[jzempel]

Arrows for both Menu and legacy Menu are appearing too large compared to v8.

[jzempel]

Remove console.log. Please check eslint config – no-console should be getting flagged for spec files.

[ze-flo]

Arrows for both Menu and legacy Menu are appearing too large compared to v8.

@jzempel Fixed in 29f8680.

[geotrev]

From what I can tell everything looks right when comparing to V8 Storybook (Menus + Modals + Tooltips). 💯

I also like how consistent the stroke of the arrow is. If I'm not mistaken it's changed only slightly enough to be nearly perfectly on the same width as the box border. 😁

V8

V9

[jzempel]

🙌