feat: tagset modal design review updates (#774)

* feat: tagset modal design review updates * fix: usage within page header * fix: overflow css in wrong place * fix: review comments Co-authored-by: Dave Clark <[email protected]> Co-authored-by: David Menendez <[email protected]>
carbon-design-system · May 25, 2021 · c9fdb06 · c9fdb06
1 parent 7cc756d
commit c9fdb06
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 131 deletions.
diff --git a/...ages/cloud-cognitive/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss b/...ages/cloud-cognitive/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss
@@ -49,13 +49,7 @@
 
     .#{$block-class}__breadcrumb-container--hidden {
       // This breadcrumb container is used to measure the width of all displayable breadcrumbs
-      position: absolute;
-      top: -100vh;
-      left: -100vw;
-      max-width: 0; // do not take up space.
-      overflow: hidden;
-      visibility: hidden;
-      pointer-events: none;
+      @include measuring-container;
     }
 
     .#{$block-class}__displayed-breadcrumb:last-child,

diff --git a/packages/cloud-cognitive/src/components/ButtonSetWithOverflow/_button-set-with-overflow.scss b/packages/cloud-cognitive/src/components/ButtonSetWithOverflow/_button-set-with-overflow.scss
@@ -31,13 +31,7 @@ $block-class: #{$pkg-prefix}--button-set-with-overflow;
 
     .#{$block-class}__button-container--hidden {
       // This button-set container is used to measure the width of all displayable button-sets
-      position: absolute;
-      top: -100vh;
-      // stylelint-disable-next-line carbon/layout-token-use
-      left: calc(-100vw - 100%);
-      overflow: hidden;
-      visibility: hidden;
-      pointer-events: none;
+      @include measuring-container;
     }
 
     .#{$block-class}--right {

diff --git a/packages/cloud-cognitive/src/components/TagSet/TagSet.stories.js b/packages/cloud-cognitive/src/components/TagSet/TagSet.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 
 import { Tag } from 'carbon-components-react';
+import { types as tagTypes } from 'carbon-components-react/es/components/Tag/Tag';
 import styles from './_storybook-styles.scss'; // import index in case more files are added later.
 import { pkg } from '../../settings';
 import { getStorybookPrefix } from '../../../config';
@@ -40,7 +41,6 @@ const ManyTagItems = [
   {
     label: 'Two',
     type: 'red',
-    filter: true,
   },
   {
     label: 'Three',
@@ -61,7 +61,6 @@ const ManyTagItems = [
   {
     label: 'Seven',
     type: 'cyan',
-    filter: true,
   },
   {
     label: 'Eight',
@@ -74,7 +73,6 @@ const ManyTagItems = [
   {
     label: 'Ten',
     type: 'blue',
-    filter: true,
   },
   {
     label: 'Eleven',
@@ -96,12 +94,10 @@ const ManyTagItems = [
   {
     label: 'Fifteen',
     type: 'blue',
-    filter: true,
   },
   {
     label: 'Sixteen',
     type: 'high-contrast',
-    filter: true,
   },
   {
     label: 'Seventeen',
@@ -110,7 +106,6 @@ const ManyTagItems = [
   {
     label: 'Eighteen',
     type: 'cyan',
-    filter: true,
   },
   {
     label: 'Nineteen',
@@ -120,12 +115,24 @@ const ManyTagItems = [
     label: 'Twenty',
     type: 'high-contrast',
   },
-].map(({ label, type, filter, dataSearch }) => (
-  <Tag key={label} data-search={dataSearch} {...{ filter, type }}>
+].map(({ label, type, dataSearch }) => (
+  <Tag key={label} data-search={dataSearch} type={type}>
     {label}
   </Tag>
 ));
 
+const HundredsOfItems = [];
+for (let i = 0; i < 200; i++) {
+  const label = `Label_${i + 1}`;
+  const type = tagTypes[i % tagTypes.length];
+
+  HundredsOfItems.push(
+    <Tag key={label} type={type}>
+      {label}
+    </Tag>
+  );
+}
+
 export default {
   title: `${storybookPrefix}/${TagSet.displayName}`,
   component: TagSet,
@@ -139,7 +146,7 @@ export default {
     (story) => (
       <>
         <style>
-          {`.${blockClass}__show-all-modal { opacity: 0; visibility: hidden; /* prevents glitch storybook modal css load */ }`}
+          {`.${blockClass}__show-all-tags-modal { opacity: 0; visibility: hidden; /* prevents glitch storybook modal css load */ }`}
           ;
         </style>
         <div className={`${blockClass}__story-viewport`}>{story()}</div>
@@ -169,6 +176,12 @@ ManyTags.args = {
   containerWidth: 500,
 };
 
+export const HundredsOfTags = Template.bind({});
+HundredsOfTags.args = {
+  children: HundredsOfItems,
+  containerWidth: 500,
+};
+
 const Template2 = (argsIn) => {
   const { containerWidth, ...args } = { ...argsIn };
   return (

diff --git a/packages/cloud-cognitive/src/components/TagSet/TagSetModal.js b/packages/cloud-cognitive/src/components/TagSet/TagSetModal.js
@@ -8,7 +8,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Modal, Search } from 'carbon-components-react';
+import {
+  ComposedModal,
+  ModalHeader,
+  ModalBody,
+  Search,
+} from 'carbon-components-react';
 
 import { pkg } from '../../settings';
 const componentName = 'TagSetModal';
@@ -53,25 +58,30 @@ export const TagSetModal = ({
   };
 
   return (
-    <Modal
-      className={`${blockClass}__show-all-modal`}
-      open={open}
+    <ComposedModal
+      className={`${blockClass}__show-all-tags-modal`}
       passiveModal
       size="sm"
-      modalHeading={heading}
-      onRequestClose={onClose}>
-      <Search
-        data-modal-primary-focus
-        className={`${blockClass}__show-all-tags-search`}
-        labelText={searchLabel}
-        placeholder={searchPlaceholder}
-        onChange={handleSearch}
-        size="lg"
-      />
-      <div className={`${blockClass}__show-all-tags-content`}>
-        {filteredModalTags}
-      </div>
-    </Modal>
+      {...{ open, onClose }}>
+      <ModalHeader title={heading}>
+        <Search
+          data-modal-primary-focus
+          className={`${blockClass}__show-all-tags-modal-search`}
+          labelText={searchLabel}
+          placeholder={searchPlaceholder}
+          onChange={handleSearch}
+          size="lg"
+        />
+      </ModalHeader>
+      <ModalBody
+        className={`${blockClass}__show-all-tags-modal-body-2`}
+        hasForm>
+        <div className={`${blockClass}__show-all-tags-modal-content`}>
+          {filteredModalTags}
+        </div>
+      </ModalBody>
+      <div className={`${blockClass}__show-all-tags-modal-fade`} />
+    </ComposedModal>
   );
 };
 

diff --git a/packages/cloud-cognitive/src/components/TagSet/TagSetOverflow.js b/packages/cloud-cognitive/src/components/TagSet/TagSetOverflow.js
@@ -63,11 +63,15 @@ export const TagSetOverflow = React.forwardRef(
             ref={overflowTagContent}
             className={`${blockClass}__overflow-content`}>
             <ul className={`${blockClass}__overflow-tag-list`}>
-              {overflowTags.map((tag, index) => (
-                <li className={`${blockClass}__overflow-tag-item`} key={index}>
-                  {React.cloneElement(tag, { filter: false })}
-                </li>
-              ))}
+              {overflowTags
+                .filter((_, index) => index < 10)
+                .map((tag, index) => (
+                  <li
+                    className={`${blockClass}__overflow-tag-item`}
+                    key={index}>
+                    {React.cloneElement(tag, { filter: false })}
+                  </li>
+                ))}
             </ul>
             {overflowTags.length >= 10 && (
               <Link