Merge pull request #2229 from vpicone/icon-tooltip

package.json

@@ -71,7 +71,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-live": "^2.2.1"
+    "react-live": "^2.2.1",
+    "use-media": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -111,7 +112,6 @@
     "prismjs": "^1.17.1",
     "react-dom": "^16.12.0",
     "react-ga": "^2.6.0",
-    "use-media": "^1.4.0",
     "use-resize-observer": "^4.0.0"
   },
   "husky": {

src/components/SVGLibraries/IconLibrary/IconCategory.js

@@ -11,15 +11,16 @@ import {
   svgCategory,
 } from '../shared/SvgLibrary.module.scss';
 
-const IconCategory = ({ category, icons }) => {
+const IconCategory = ({ category, icons, columnCount }) => {
   const [subCategoryRef, containerIsVisible] = useIntersectionObserver();
   return (
     <section className={svgCategory}>
       <h2 className={cx(h2, categoryTitle)}>{category}</h2>
       <ul ref={subCategoryRef}>
         <ul className={svgGrid}>
-          {icons.map((icon) => (
+          {icons.map((icon, i) => (
             <SvgCard
+              isLastCard={(i + 1) % columnCount === 0}
               containerIsVisible={containerIsVisible}
               key={icon.name}
               icon={icon}

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -8,6 +8,8 @@ import {
   icons as iconMetaData,
   categories as iconCategoryMetadata,
 } from '@carbon/icons/metadata.json';
+import useColumnCount from '../shared/useColumnCount';
+
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
 
 import FilterRow from '../shared/FilterRow';
@@ -20,6 +22,7 @@ const IconLibrary = () => {
   const [searchInputValue, setSearchInputValue] = useState('');
   const [categoryList, setCategoryList] = useState([]);
   const [categoriesLoaded, setCategoriesLoaded] = useState(false);
+  const columnCount = useColumnCount({ assetType: 'icons' });
 
   const debouncedSetSearchInputValue = debounce(setSearchInputValue, 200);
 
@@ -110,7 +113,12 @@ const IconLibrary = () => {
       ) : (
         <div className={svgLibrary}>
           {filteredCategories.map(([category, icons]) => (
-            <IconCategory key={category} category={category} icons={icons} />
+            <IconCategory
+              columnCount={columnCount}
+              key={category}
+              category={category}
+              icons={icons}
+            />
           ))}
         </div>
       )}

src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js

@@ -14,14 +14,15 @@ import {
   pictograms as pictogramList,
 } from '../shared/SvgLibrary.module.scss';
 
-const IconCategory = ({ category, pictograms }) => {
+const IconCategory = ({ category, pictograms, columnCount }) => {
   const [sectionRef, containerIsVisible] = useIntersectionObserver();
   return (
     <section ref={sectionRef} className={svgCategory}>
       <h2 className={cx(h2, categoryTitle)}>{category}</h2>
       <ul className={cx(svgGrid, pictogramList)}>
-        {pictograms.map((pictogram) => (
+        {pictograms.map((pictogram, i) => (
           <SvgCard
+            isLastCard={(i + 1) % columnCount === 0}
             containerIsVisible={containerIsVisible}
             key={pictogram.name}
             icon={pictogram}

src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js

@@ -8,6 +8,7 @@ import {
   icons as pictogramMetaData,
   categories as pictogramCatagoryMetadata,
 } from '@carbon/pictograms/metadata.json';
+import useColumnCount from '../shared/useColumnCount';
 
 import FilterRow from '../shared/FilterRow';
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
@@ -23,6 +24,7 @@ const IconLibrary = () => {
   const [categoriesLoaded, setCategoriesLoaded] = useState(false);
 
   const debouncedSetSearchInputValue = debounce(setSearchInputValue, 200);
+  const columnCount = useColumnCount({ assetType: 'pictograms' });
 
   useEffect(() => {
     const pictogramArray = pictogramMetaData.reduce(
@@ -111,6 +113,7 @@ const IconLibrary = () => {
         <div className={svgLibrary}>
           {filteredCategories.map(([category, pictograms]) => (
             <PictogramCategory
+              columnCount={columnCount}
               key={category}
               category={category}
               pictograms={pictograms}

src/components/SVGLibraries/shared/ActionBar.js

@@ -14,6 +14,7 @@ const ActionBar = ({
   source,
   setIsActionBarVisible,
   isActionBarVisible,
+  isLastCard,
 }) => {
   const { site, type } = useContext(LibraryContext);
   const component = `<${
@@ -30,6 +31,8 @@ const ActionBar = ({
     setIsActionBarVisible(isStillFocusedWithin);
   };
 
+  const tooltipAlignment = isLastCard ? 'end' : 'center';
+
   const handleDownload = () => {
     const a = document.body.appendChild(document.createElement('a'));
     const blob = new Blob([source], { type: 'image/svg+xml' });
@@ -60,7 +63,7 @@ const ActionBar = ({
         kind="ghost"
         size="small"
         hasIconOnly
-        tooltipAlignment="center"
+        tooltipAlignment={tooltipAlignment}
         tooltipPosition="top"
         iconDescription="Download SVG"
         renderIcon={Download16}
@@ -74,7 +77,7 @@ const ActionBar = ({
           kind="ghost"
           size="small"
           hasIconOnly
-          tooltipAlignment="center"
+          tooltipAlignment={tooltipAlignment}
           tooltipPosition="top"
           iconDescription={copyText}
           renderIcon={Code16}

src/components/SVGLibraries/shared/SvgCard.js

@@ -10,7 +10,7 @@ import {
   triggerText,
 } from './SvgLibrary.module.scss';
 
-const SvgCard = ({ icon, containerIsVisible, ...rest }) => {
+const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => {
   const { name, Component, friendlyName, assets } = icon;
   const [isActionBarVisible, setIsActionBarVisible] = useState(false);
 
@@ -43,6 +43,7 @@ const SvgCard = ({ icon, containerIsVisible, ...rest }) => {
               )}
             </div>
             <ActionBar
+              isLastCard={isLastCard}
               name={name}
               source={source}
               friendlyName={friendlyName}

src/components/SVGLibraries/shared/useColumnCount.js

@@ -0,0 +1,30 @@
+import useMedia from 'use-media';
+import { breakpoints } from '@carbon/elements';
+
+const useColumnCount = ({ assetType }) => {
+  const isTablet = useMedia({
+    minWidth: breakpoints.md.width,
+    maxWidth: breakpoints.lg.width,
+  });
+  const isDesktop = useMedia({
+    minWidth: breakpoints.lg.width,
+  });
+
+  let colCount = 2;
+
+  if (assetType === 'pictograms' && isDesktop) {
+    colCount = 4;
+  }
+
+  if (assetType === 'icons') {
+    if (isTablet) {
+      colCount = 4;
+    } else if (isDesktop) {
+      colCount = 6;
+    }
+  }
+
+  return colCount;
+};
+
+export default useColumnCount;

yarn.lock

@@ -17777,7 +17777,7 @@ url@^0.11.0:
 
 use-media@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
+  resolved "https://registry.npmjs.org/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
   integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==
 
 use-resize-observer@^4.0.0: