HDS-3945 Fix display of time range so it works the same when used wit…

…hout tooltip, add more examples to Showcase
hashicorp · Nov 16, 2024 · 65490d2 · 65490d2
1 parent efa85d2
commit 65490d2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/components/src/styles/components/time.scss b/packages/components/src/styles/components/time.scss
@@ -8,6 +8,6 @@
 //
 
 .hds-time-range {
-  display: flex; // remove excess space between time range elements
+  display: inline-flex; // remove excess space between time range elements
   gap: 2px; // add a bit of space around en dash so it doesn't touch some number characters
 }
diff --git a/showcase/app/templates/components/time.hbs b/showcase/app/templates/components/time.hbs
@@ -75,19 +75,33 @@
 <section>
   <Shw::Text::H2>Used in context</Shw::Text::H2>
 
-  <Shw::Flex @gap="2rem" as |SF|>
-    <SF.Item @label="Single date">
+  <Shw::Flex @gap="2rem" @direction="column" as |SF|>
+    <SF.Item @label="Single date with tooltip">
       <Hds::Text::Body @tag="p">
         HashiConf 2024 ended
         <Hds::Time @date="16 October 2024" @display="relative" />.
       </Hds::Text::Body>
     </SF.Item>
 
-    <SF.Item @label="Date range">
+    <SF.Item @label="Single date without tooltip">
+      <Hds::Text::Body @tag="p">
+        HashiConf 2024 ended
+        <Hds::Time @date="16 October 2024" @display="relative" @hasTooltip={{false}} />.
+      </Hds::Text::Body>
+    </SF.Item>
+
+    <SF.Item @label="Date range with tooltip">
       <Hds::Text::Body @tag="p">
         HashiConf is from
         <Hds::Time @startDate="14 October 2024" @endDate="16 October 2024" />.
       </Hds::Text::Body>
     </SF.Item>
+
+    <SF.Item @label="Date range without tooltip">
+      <Hds::Text::Body @tag="p">
+        HashiConf is from
+        <Hds::Time @startDate="14 October 2024" @endDate="16 October 2024" @hasTooltip={{false}} />.
+      </Hds::Text::Body>
+    </SF.Item>
   </Shw::Flex>
 </section>