fix(paragraph): fix inline prop

glrodasz · Jul 16, 2021 · c39e7e5 · c39e7e5
1 parent 20468ec
commit c39e7e5
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 8 deletions.
diff --git a/atoms/Link/Link.js b/atoms/Link/Link.js
@@ -10,7 +10,7 @@ import Paragraph from '../Paragraph'
 export const Link = ({ children, color, getStyles }) => {
   return (
     <a className={getStyles('link', ['color'])}>
-      <Paragraph color={color} weight="medium">
+      <Paragraph color={color} weight="medium" isInline>
         {children}
       </Paragraph>
     </a>

diff --git a/atoms/Link/Link.module.css b/atoms/Link/Link.module.css
@@ -1,5 +1,6 @@
 .link {
-  display: flex;
+  display: inline;
+  max-width: max-content;
   border-bottom: 1px solid currentColor;
   cursor: pointer;
 }

diff --git a/atoms/Link/__snapshots__/Link.stories.js.snap b/atoms/Link/__snapshots__/Link.stories.js.snap
@@ -19,7 +19,7 @@ exports[`Storyshots Atoms/Link Colors 1`] = `
     className="link color-primary"
   >
     <div
-      className="paragraph color-primary size-md weight-medium"
+      className="paragraph color-primary size-md weight-medium is-inline"
     >
       Mouths Muil
     </div>
@@ -28,7 +28,7 @@ exports[`Storyshots Atoms/Link Colors 1`] = `
     className="link color-tertiary"
   >
     <div
-      className="paragraph color-tertiary size-md weight-medium"
+      className="paragraph color-tertiary size-md weight-medium is-inline"
     >
       Mouths Muil
     </div>
@@ -55,7 +55,7 @@ exports[`Storyshots Atoms/Link Default 1`] = `
     className="link color-primary"
   >
     <div
-      className="paragraph color-primary size-md weight-medium"
+      className="paragraph color-primary size-md weight-medium is-inline"
     >
       Mouths Muil
     </div>

diff --git a/atoms/Paragraph/Paragraph.module.css b/atoms/Paragraph/Paragraph.module.css
@@ -47,5 +47,6 @@
 }
 
 .is-inline {
-  width: auto;
+  display: inline-block;
+  max-width: max-content;
 }
diff --git a/atoms/Paragraph/Paragraph.stories.js b/atoms/Paragraph/Paragraph.stories.js
@@ -30,7 +30,7 @@ export const Striked = Template.bind({})
 Striked.args = { isStriked: true }
 
 export const Inline = Template.bind({})
-Inline.args = { isInline: true }
+Inline.args = { isInline: true, children: 'Swords are no more.' }
 
 export const Colors = ListTemplate.bind({})
 Colors.args = { items: options.colors.map((color) => ({ color })) }

diff --git a/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap b/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap
@@ -84,7 +84,7 @@ exports[`Storyshots Atoms/Paragraph Inline 1`] = `
   <div
     className="paragraph color-base size-md weight-normal is-inline"
   >
-    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+    Swords are no more.
   </div>
 </div>
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,7 @@ exports[`Storyshots Atoms/Paragraph Inline 1`] = ` @@
       <div
         className="paragraph color-base size-md weight-normal is-inline"
       >
-        Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+        Swords are no more.
       </div>
     </div>
     `;
@@ Expand Down @@