STCOM-1226: TextLink - underline showing up on nested spans with 'dis…

…play: inline-flex' (#2180)

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Adjusted print styles of panes so that the last pane will print. Refs STCOM-1228, STCOM-1229.
 * Accessibility Issues - stripes components. Refs STCOM-1222.
 * Enable spinner on Datepicker year input. Refs STCOM-1225.
+* TextLink - underline showing up on nested spans with 'display: inline-flex'. Refs STCOM-1226.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

lib/TextLink/TextLink.js

@@ -18,9 +18,11 @@ const TextLink = forwardRef(({ className, element, href, to, children, ...rest }
     ...rest
   };
 
+  // we give possibility to apply root CSS class to child element since it may not be correctly inherited
+  // see details at STCOM-1226, STCOM-1000
   return (
     <Element data-test-text-link {...props} ref={ref}>
-      {children}
+      {typeof children === 'function' ? children({className: css.root}) : children}
     </Element>
   );
 });

lib/TextLink/readme.md

@@ -21,4 +21,17 @@ children | node | The content of the component |
 to | string | The path to a page. This renders the react-router-dom `<Link>`-component internally. |
 href | string | The url for a web page. Renders a native `<a>`. Use the `to`-prop for routing. |
 
-The remaining props are passed onto the root element of the component. This component also supports passing a `ref`.
+The remaining props are passed onto the root element of the component. This component also supports passing a `ref` and 
+the ability to apply a root CSS class to the child element. Now, the TextLink component supports the object parameter 
+`className` and applying a root CSS class to the child element. This change was made to ensure correct inheritance of styles, 
+especially in cases where the children are inline elements with display: inline-flex, and the underline is not inherited.
+```js
+// In the case that direct style application is required, a child function can be used.
+<TextLink to="/users" ref={yourRefCallback}>
+  {({ className }) => (
+    <span className={className}>
+      I'm an internal link with custom styles
+    </span>
+  )}
+</TextLink>
+```

lib/TextLink/stories/BasicUsage.js

@@ -12,20 +12,20 @@ const BasicUsage = () => (
   <HashRouter>
     Lorem ipsum dolor sit amet,{' '}
     <TextLink to="/some-page">consectetur adipiscing elit</TextLink>. Mauris nec elementum quam.
-    <br /><br />
+    <br/><br/>
     <TextLink target="_blank" rel="noopener noreferrer" href="https://folio.org">
       <Icon icon="external-link" iconPosition="end">
         This is an external link
       </Icon>
     </TextLink>
-    <br /><br />
+    <br/><br/>
     <div style={{ width: 300 }}>
       <TextLink href="#some-hash">
         This is a multiline link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec elementum quam.
         Aliquam porta sapien dolor, vel gravida risus condimentum et. Nam eget elit purus.
       </TextLink>
     </div>
-    <br /><br />
+    <br/><br/>
     <Tooltip
       text="Go to link"
       id="link-tooltip"
@@ -40,6 +40,14 @@ const BasicUsage = () => (
         </TextLink>
       )}
     </Tooltip>
+    <br/><br/>
+    <TextLink>
+      {({className})=>(
+        <span className={className} style={{display: 'inline-flex'}}>
+          This child element will have the class from css.root
+        </span>
+      )}
+    </TextLink>
   </HashRouter>
 );