EDSC-4329: Fixes icon alignment (#1856)

nasa · Feb 10, 2025 · e4598d2 · e4598d2
1 parent 549296d
commit e4598d2
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -177,7 +177,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-highlight-words": "^0.20.0",
-    "react-icons": "^4.3.1",
+    "react-icons": "^5.4.0",
     "react-input-range": "^1.3.0",
     "react-joyride": "^2.8.2",
     "react-leaflet": "^4.2.1",

diff --git a/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx b/static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsIcons.jsx
@@ -46,6 +46,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white globe icon"
           icon={FaGlobe}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }
@@ -56,6 +57,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white clock icon"
           icon={FaClock}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }
@@ -66,6 +68,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white tags icon"
           icon={FaTags}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }
@@ -76,6 +79,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white horizontal sliders icon"
           icon={Filter}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }
@@ -86,6 +90,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white file icon"
           icon={FileGeneric}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }
@@ -96,6 +101,7 @@ export const AvailableCustomizationsIcons = ({
           title="A white cubes icon"
           icon={FaCubes}
           size="0.675rem"
+          inlineFlex={false}
         />
       )
     }

diff --git a/...ic/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx b/...ic/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx
@@ -50,6 +50,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white globe icon"
               size="0.725rem"
               icon={FaGlobe}
+              inlineFlex={false}
             />
             Spatial subset
           </li>
@@ -63,6 +64,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white clock icon"
               size="0.725rem"
               icon={FaClock}
+              inlineFlex={false}
             />
             Temporal subset
           </li>
@@ -76,6 +78,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white tags icon"
               size="0.725rem"
               icon={FaTags}
+              inlineFlex={false}
             />
             Variable subset
           </li>
@@ -89,6 +92,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white horizontal sliders icon"
               size="0.725rem"
               icon={Filter}
+              inlineFlex={false}
             />
             Transform
           </li>
@@ -102,6 +106,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white file icon"
               size="0.725rem"
               icon={FileGeneric}
+              inlineFlex={false}
             />
             Reformat
           </li>
@@ -115,6 +120,7 @@ export const AvailableCustomizationsTooltipIcons = ({
               title="A white cubes icon"
               size="0.725rem"
               icon={FaCubes}
+              inlineFlex={false}
             />
             Combine
           </li>

diff --git a/static/src/js/components/EDSCAlert/EDSCAlert.scss b/static/src/js/components/EDSCAlert/EDSCAlert.scss
@@ -10,7 +10,7 @@
 
   &__icon {
     font-size: 0.825rem;
-    margin-right: 1.5rem;
+    margin-right: 0.75rem;
     flex-shrink: 0;
   }
 }
diff --git a/static/src/js/components/EDSCIcon/EDSCIcon.jsx b/static/src/js/components/EDSCIcon/EDSCIcon.jsx
@@ -6,24 +6,26 @@ import './EDSCIcon.scss'
 
 /**
  * Renders an icon wrapped with EDSCIcon.
- * @param {String|Function} icon - The `react-icon` or 'edsc-*' icon name to render
+ * @param {Object} ariaLabel - Optional string used as the `aria-label` attribute
  * @param {Node} children - React children to display with the icon.
  * @param {String} className - An optional classname.
  * @param {Object} context - Optional object to pass to `react-icons/IconContext.Provider`
- * @param {String} title - Optional string used as the `title` attribute
+ * @param {String|Function} icon - The `react-icon` or 'edsc-*' icon name to render
+ * @param {Boolean} inlineFlex - Optional boolean used to determine if the icon should be displayed as an inline-flex element
  * @param {String} size - Optional string used as the `size` attribute
+ * @param {String} title - Optional string used as the `title` attribute
  * @param {String} variant - Optional string that determines the icon's wrapper element and styling.
- * @param {Object} ariaLabel - Optional string used as the `aria-label` attribute
  */
 export const EDSCIcon = forwardRef(({
-  icon,
-  className,
+  ariaLabel,
   children,
+  className,
   context,
+  icon,
+  inlineFlex,
   size,
   title,
   variant,
-  ariaLabel,
   ...props
 }, ref) => {
   if (!icon) return null
@@ -32,6 +34,7 @@ export const EDSCIcon = forwardRef(({
 
   if (variant) iconClassNames = `${iconClassNames} edsc-icon--${variant}`
   if (className) iconClassNames = `${iconClassNames} ${className}`
+  if (inlineFlex) iconClassNames = `${iconClassNames} d-inline-flex`
 
   if (typeof icon === 'string') {
     iconClassNames = `${iconClassNames} edsc-icon--simple`
@@ -111,10 +114,10 @@ export const EDSCIcon = forwardRef(({
   return (
     <span
       ref={ref}
-      className="d-inline-flex"
+      className={iconClassNames}
+      data-testid="edsc-icon-wrapper"
     >
       <Icon
-        className={iconClassNames}
         title={title}
         size={size}
         aria-label={ariaLabel}
@@ -126,28 +129,30 @@ export const EDSCIcon = forwardRef(({
   )
 })
 
-EDSCIcon.displayName = 'Button'
+EDSCIcon.displayName = 'EDSCIcon'
 
 EDSCIcon.defaultProps = {
-  icon: null,
+  ariaLabel: null,
   children: '',
   className: null,
   context: null,
+  icon: null,
+  inlineFlex: true,
   size: '1rem',
   title: null,
-  variant: null,
-  ariaLabel: null
+  variant: null
 }
 
 EDSCIcon.propTypes = {
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   context: PropTypes.shape({}),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  inlineFlex: PropTypes.bool,
   size: PropTypes.string,
   title: PropTypes.string,
-  variant: PropTypes.string,
-  ariaLabel: PropTypes.string
+  variant: PropTypes.string
 }
 
 export default EDSCIcon
diff --git a/static/src/js/components/EDSCIcon/__tests__/EDSCIcon.test.jsx b/static/src/js/components/EDSCIcon/__tests__/EDSCIcon.test.jsx
@@ -26,7 +26,7 @@ describe('EDSCIcon component', () => {
     test('should add the class name', async () => {
       render(<EDSCIcon className="test-class" icon={FaQuestionCircle} />)
 
-      const icon = await screen.findByTestId('edsc-icon')
+      const icon = await screen.findByTestId('edsc-icon-wrapper')
 
       expect(icon.classList.contains('test-class')).toBeTruthy()
     })
@@ -36,7 +36,7 @@ describe('EDSCIcon component', () => {
     test('should add the variant', async () => {
       render(<EDSCIcon variant="test-variant" icon={FaQuestionCircle} />)
 
-      const icon = await screen.findByTestId('edsc-icon')
+      const icon = await screen.findByTestId('edsc-icon-wrapper')
 
       expect(icon.classList.contains('edsc-icon--test-variant')).toBeTruthy()
     })
@@ -46,9 +46,7 @@ describe('EDSCIcon component', () => {
     test('should add the aria-label', async () => {
       render(<EDSCIcon ariaLabel="test-aria-label" icon={FaQuestionCircle} />)
 
-      const icon = await screen.findByTestId('edsc-icon')
-
-      expect(icon.getAttribute('aria-label')).toEqual('test-aria-label')
+      expect(await screen.findByLabelText('test-aria-label')).toBeInTheDocument()
     })
   })
 

diff --git a/static/src/js/components/GranuleResultsHighlights/GranuleResultsHighlights.jsx b/static/src/js/components/GranuleResultsHighlights/GranuleResultsHighlights.jsx
@@ -130,7 +130,7 @@ export const GranuleResultsHighlights = ({
               }
             }
           >
-            <EDSCIcon icon={FaMap} />
+            <EDSCIcon icon={FaMap} inlineFlex={false} />
             {' View Granules'}
           </PortalLinkContainer>
         </div>

diff --git a/static/src/js/components/MetaIcon/MetaIcon.scss b/static/src/js/components/MetaIcon/MetaIcon.scss
@@ -21,11 +21,12 @@
 
   &__metadata {
     margin-left: 0.25rem;
-    padding: 0.075rem 0.5rem;
+    padding: 0.25rem 0.5rem;
     border-radius: 1rem;
     background-color: utils.$color__carbon--10;
     color: utils.$color__carbon--80;
     font-size: 0.625rem;
     font-weight: 700;
+    display: flex;
   }
 }