fix/cv2-5791 tab wrapper wraps based on wrapContent prop (#2226)

* added wrapping that is conditional based on wrapContent prop, break if larger than 2 rows * use tabs on sandbox for testings, remove stray comment in variables file, tweak some tabs spacing * remove testing console log --------- Co-authored-by: Brian Fleming <[email protected]>
meedan · Dec 9, 2024 · c5219a1 · c5219a1
1 parent fd72162
commit c5219a1
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 90 deletions.
diff --git a/src/app/components/cds/Sandbox.js b/src/app/components/cds/Sandbox.js
@@ -36,11 +36,6 @@ import ParsedText from '../ParsedText';
 import ClusterCard from '../search/SearchResultsCards/ClusterCard';
 import CheckFeedDataPoints from '../../CheckFeedDataPoints';
 import { FlashMessageSetterContext } from '../FlashMessage';
-import {
-  getQueryStringValue,
-  pushQueryStringValue,
-  deleteQueryStringValue,
-} from '../../urlHelpers';
 import styles from './sandbox.module.css';
 
 const SandboxComponent = ({ admin }) => {
@@ -49,10 +44,6 @@ const SandboxComponent = ({ admin }) => {
     return null;
   }
 
-  let category = null;
-  category = getQueryStringValue('category');
-  const [selectedCategory, setSelectedTab] = React.useState(category);
-
   const [tags, setTags] = React.useState([
     'first',
     'second',
@@ -327,6 +318,11 @@ const SandboxComponent = ({ admin }) => {
     setReorderTheme(event.target.value);
   };
 
+  const [categoryTab, setCategoryTab] = React.useState('all');
+  const onChangeCategoryTab = (event) => {
+    setCategoryTab(event);
+  };
+
   const [sampleDataSet, setSampleDataSet] = React.useState('design');
   const [stackedBarChartEmptySection, setStackedBarChartEmptySection] = React.useState(true);
 
@@ -421,65 +417,72 @@ const SandboxComponent = ({ admin }) => {
     }
   };
 
-  const handleClick = (newCategory) => {
-    if (category !== newCategory) {
-      if (newCategory === 'all') {
-        setSelectedTab(null);
-        deleteQueryStringValue('category');
-      } else {
-        setSelectedTab(newCategory);
-        pushQueryStringValue('category', newCategory);
-      }
-    }
-  };
-
   return (
     <div className={styles.sandbox}>
       <h5>
         UI Sandbox&nbsp;<span aria-label="Beach" role="img">🏖️</span>
       </h5>
-      <ul className={styles.sandboxNav}>
-        <li>
-          <ButtonMain label="All" size="small" theme={!selectedCategory ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('all')} />
-        </li>
-        <li>
-          <ButtonMain label="Cards" size="small" theme={selectedCategory === 'cards' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('cards')} />
-        </li>
-        <li>
-          <ButtonMain label="Buttons" size="small" theme={selectedCategory === 'buttons' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('buttons')} />
-        </li>
-        <li>
-          <ButtonMain label="Inputs" size="small" theme={selectedCategory === 'inputs' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('inputs')} />
-        </li>
-        <li>
-          <ButtonMain label="Chips" size="small" theme={selectedCategory === 'chips' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('chips')} />
-        </li>
-        <li>
-          <ButtonMain label="Tags" size="small" theme={selectedCategory === 'tags' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('tags')} />
-        </li>
-        <li>
-          <ButtonMain label="Alerts &amp; Prompts" size="small" theme={selectedCategory === 'alerts' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('alerts')} />
-        </li>
-        <li>
-          <ButtonMain label="Text Display" size="small" theme={selectedCategory === 'text' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('text')} />
-        </li>
-        <li>
-          <ButtonMain label="Loading Animations" size="small" theme={selectedCategory === 'loaders' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('loaders')} />
-        </li>
-        <li>
-          <ButtonMain label="Slideout" size="small" theme={selectedCategory === 'slideout' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('slideout')} />
-        </li>
-        <li>
-          <ButtonMain label="Errors" size="small" theme={selectedCategory === 'errors' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('errors')} />
-        </li>
-        <li>
-          <ButtonMain label="Charts" size="small" theme={selectedCategory === 'charts' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('charts')} />
-        </li>
-        <li>
-          <ButtonMain label="Tabs" size="small" theme={selectedCategory === 'tabs' ? 'info' : 'lightText'} variant="contained" onClick={() => handleClick('tabs')} />
-        </li>
-      </ul>
-      { (!selectedCategory || selectedCategory === 'cards') &&
+      <TabWrapper
+        className={styles.sandboxNav}
+        tabs={[
+          {
+            label: 'All',
+            value: 'all',
+          },
+          {
+            label: 'Cards',
+            value: 'cards',
+          },
+          {
+            label: 'Buttons',
+            value: 'buttons',
+          },
+          {
+            label: 'Inputs',
+            value: 'inputs',
+          },
+          {
+            label: 'Chips',
+            value: 'chips',
+          },
+          {
+            label: 'Tags',
+            value: 'tags',
+          },
+          {
+            label: 'Alerts & Prompts',
+            value: 'alerts',
+          },
+          {
+            label: 'Text Display',
+            value: 'text',
+          },
+          {
+            label: 'Loading Animations',
+            value: 'loaders',
+          },
+          {
+            label: 'Slideout',
+            value: 'slideout',
+          },
+          {
+            label: 'Errors',
+            value: 'errors',
+          },
+          {
+            label: 'Charts',
+            value: 'charts',
+          },
+          {
+            label: 'Tabs',
+            value: 'tabs',
+          },
+        ]}
+        value={categoryTab}
+        wrapContent
+        onChange={onChangeCategoryTab}
+      />
+      { (categoryTab === 'all' || categoryTab === 'cards') &&
         <section>
           <h6>Item Cards</h6>
           <div className={styles.componentWrapper}>
@@ -708,7 +711,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'buttons') &&
+      { (categoryTab === 'all' || categoryTab === 'buttons') &&
         <section>
           <h6>Buttons</h6>
           <div className={styles.componentWrapper}>
@@ -971,7 +974,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'inputs') &&
+      { (categoryTab === 'all' || categoryTab === 'inputs') &&
         <section>
           <h6>Inputs</h6>
           <div className={styles.componentWrapper}>
@@ -1559,7 +1562,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'chips') &&
+      { (categoryTab === 'all' || categoryTab === 'chips') &&
         <section>
           <h6>Chips</h6>
           <div className={styles.componentWrapper}>
@@ -1596,7 +1599,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'tags') &&
+      { (categoryTab === 'all' || categoryTab === 'tags') &&
         <section>
           <h6>Tags</h6>
           <div className={styles.componentWrapper}>
@@ -1657,7 +1660,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'alerts') &&
+      { (categoryTab === 'all' || categoryTab === 'alerts') &&
         <section>
           <h6>Alerts &amp; Prompts</h6>
           <div className={styles.componentWrapper}>
@@ -1789,7 +1792,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'text') &&
+      { (categoryTab === 'all' || categoryTab === 'text') &&
         <section>
           <h6>Parsed Text</h6>
           <div className={styles.componentWrapper}>
@@ -1801,7 +1804,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'loaders') &&
+      { (categoryTab === 'all' || categoryTab === 'loaders') &&
         <section>
           <h6>Loading Animations</h6>
           <div className={styles.componentWrapper}>
@@ -1865,7 +1868,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'slideout') &&
+      { (categoryTab === 'all' || categoryTab === 'slideout') &&
         <section id="sandbox-slideout">
           <h6>Slideout</h6>
           <div className={styles.componentWrapper}>
@@ -1972,7 +1975,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'errors') &&
+      { (categoryTab === 'all' || categoryTab === 'errors') &&
         <section>
           <h6>Errors</h6>
           <div className={styles.componentWrapper}>
@@ -1986,7 +1989,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'charts') &&
+      { (categoryTab === 'all' || categoryTab === 'charts') &&
         <section>
           <h6>Charts</h6>
           <div className={styles.componentWrapper}>
@@ -2231,7 +2234,7 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (!selectedCategory || selectedCategory === 'tabs') &&
+      { (categoryTab === 'all' || categoryTab === 'tabs') &&
         <section>
           <h6>Tabs</h6>
           <div className={styles.componentWrapper}>

diff --git a/src/app/components/cds/menus-lists-dialogs/TabWrapper.js b/src/app/components/cds/menus-lists-dialogs/TabWrapper.js
@@ -13,11 +13,13 @@ const TabWrapper = ({
   tabs,
   value,
   variant,
+  wrapContent,
 }) => {
   const [activeTab, setActiveTab] = React.useState(getQueryStringValue('tab') || value || tabs.find(tab => tab.show !== false).value);
   const wrapperRef = React.useRef(null);
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const [fullTabWidth, setFullTabWidth] = React.useState(0);
+  const wrapperHeightMax = size === 'large' ? 130 : 95;
 
   useLayoutEffect(() => {
     if (wrapperRef.current) {
@@ -31,11 +33,16 @@ const TabWrapper = ({
     const checkOverflow = (tabWidth) => {
       if (wrapperRef.current) {
         const containerWidth = wrapperRef.current.clientWidth;
-        if (tabWidth > containerWidth && !isOverflowing) {
+        const containerHeight = wrapperRef.current.clientHeight;
+        if (tabWidth > containerWidth && !isOverflowing && !wrapContent) {
           setIsOverflowing(true);
         } else if (tabWidth <= containerWidth && isOverflowing) {
           setIsOverflowing(false);
         }
+
+        if (containerHeight > wrapperHeightMax && wrapContent) {
+          setIsOverflowing(true);
+        }
       }
     };
 
@@ -60,11 +67,16 @@ const TabWrapper = ({
     const handleResize = () => {
       if (wrapperRef.current) {
         const containerWidth = wrapperRef.current.clientWidth;
-        if (fullTabWidth > containerWidth) {
+        const containerHeight = wrapperRef.current.clientHeight;
+        if (fullTabWidth > containerWidth && !wrapContent) {
           setIsOverflowing(true);
         } else {
           setIsOverflowing(false);
         }
+
+        if (containerHeight > wrapperHeightMax && !isOverflowing && wrapContent) {
+          setIsOverflowing(true);
+        }
       }
     };
 
@@ -98,6 +110,7 @@ const TabWrapper = ({
           [styles.sizeDefault]: size === 'default',
           [styles.sizeLarge]: size === 'large' || isOverflowing,
           [styles.variantBanner]: variant === 'banner',
+          [styles.wrapContent]: wrapContent,
         },
       )}
       ref={wrapperRef}
@@ -139,6 +152,7 @@ TabWrapper.defaultProps = {
   size: 'default',
   value: null,
   variant: 'default',
+  wrapContent: false,
 };
 
 TabWrapper.propTypes = {
@@ -147,6 +161,7 @@ TabWrapper.propTypes = {
   tabs: PropTypes.array.isRequired,
   value: PropTypes.string,
   variant: PropTypes.oneOf(['default', 'banner']),
+  wrapContent: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

diff --git a/src/app/components/cds/menus-lists-dialogs/TabWrapper.module.css b/src/app/components/cds/menus-lists-dialogs/TabWrapper.module.css
@@ -3,20 +3,20 @@
   background: var(--color-beige-93);
   border-radius: var(--border-radius-default, 8px);
   display: flex;
-  gap: 16px;
+  gap: 3px;
   margin: 8px;
   min-width: 350px;
-  padding: 8px 10px;
-
-  &.sizeLarge {
-    height: 62px;
-  }
+  padding: 8px;
 
   &.variantBanner {
     border-radius: var(--border-radius-zero, 0);
     margin: 0;
   }
 
+  &.wrapContent {
+    flex-wrap: wrap;
+  }
+
   .select {
     min-width: 200px;
     width: 100%;

diff --git a/src/app/components/cds/sandbox.module.css b/src/app/components/cds/sandbox.module.css
@@ -4,13 +4,8 @@
   padding: 16px 32px;
 
   .sandboxNav {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 16px;
-    list-style: none;
-    margin: 20px 0 40px;
-    min-width: 300px;
-    padding: 0;
+    background-color: var(--color-beige-86);
+    margin: 20px 0;
   }
 
   h6 {

diff --git a/src/app/components/media/MediaComponentRightPanel.js b/src/app/components/media/MediaComponentRightPanel.js
@@ -99,6 +99,7 @@ const MediaComponentRightPanel = ({
             },
           ]}
           value={showTab}
+          wrapContent
           onChange={setShowTab}
         />
       </div>

diff --git a/src/app/styles/css/mixins/variables.css b/src/app/styles/css/mixins/variables.css
@@ -154,7 +154,7 @@
 
   --z-index-max: 1000; /* Nothing will ever be higher, for example tooltips and toasts */
   --z-index-10: 10; /* Highest main UI elements, such as slideouts */
-  --z-index-9: 9; /* Highest main UI elements, such as slideouts */
+  --z-index-9: 9;
   --z-index-8: 8;
   --z-index-7: 7;
   --z-index-6: 6;
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,6 +99,7 @@ const MediaComponentRightPanel = ({ @@
                 },
               ]}
               value={showTab}
+              wrapContent
               onChange={setShowTab}
             />
           </div>
@@ Expand Down @@