Time interactive & RichTooltip - Increase dotted underline offset (HDS-4618) (#2745)

Author: KristinLBradley

.changeset/eight-fishes-sin.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Time` - Increase spacing above the dotted text decoration underline, that appears on the interactive variant, to 2px from the default.
+
+`RichTooltip` - Increase spacing above the dotted text decoration underline to 2px from the default.

packages/components/src/styles/components/rich-tooltip.scss

@@ -68,6 +68,7 @@
   // decoration style is specified separately to fix a bug in Safari causing it not to render
   text-decoration: underline;
   text-decoration-style: dotted;
+  text-underline-offset: 2px;
 }
 
 // icon

packages/components/src/styles/components/time.scss

@@ -17,4 +17,5 @@
   // decoration style is specified separately to fix a bug in Safari causing it not to render
   text-decoration: underline;
   text-decoration-style: dotted;
+  text-underline-offset: 2px;
 }

showcase/app/templates/components/time.hbs

@@ -12,20 +12,24 @@
 <section>
   <Shw::Text::H2>Has tooltip</Shw::Text::H2>
 
-  <Shw::Flex @gap="2rem" as |SF|>
+  <Shw::Flex @gap="2rem" {{style flexWrap="wrap"}} as |SF|>
     <SF.Item @label="With tooltip (default)">
       <Hds::Time @date="05 September 2018 14:48" />
     </SF.Item>
 
     <SF.Item @label="Without tooltip">
       <Hds::Time @date="05 September 2018 14:48" @hasTooltip={{false}} />
     </SF.Item>
+
+    <SF.Item @label="Standard body font with tooltip" {{style width="100%"}}>
+      <Hds::Text::Body @tag="p">
+        <Hds::Time @date="05 September 2018 14:48" />
+      </Hds::Text::Body>
+    </SF.Item>
   </Shw::Flex>
 
   <Shw::Text::H2>Display</Shw::Text::H2>
 
-  <p>Note: “examples” are temporary</p>
-
   <Shw::Flex @gap="4rem 9rem" as |SF|>
     <SF.Item @label="Default with display unset">
       <Hds::Time @date="05 September 2018 14:07:32" @isOpen={{true}} />