fix(tagset): updates props (#5962)

* fix(tagset): updates props * fix: revert to previous changes * fix: removes prop requirement for 10 tags or more * chore: removes requirement comments --------- Co-authored-by: David Menendez <[email protected]>
carbon-design-system · Sep 4, 2024 · cf7c88c · cf7c88c
1 parent 973091f
commit cf7c88c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 47 deletions.
diff --git a/packages/ibm-products/src/components/TagSet/TagSet.test.js b/packages/ibm-products/src/components/TagSet/TagSet.test.js
@@ -14,11 +14,7 @@ import { TagSetModal } from './TagSetModal';
 
 import { TYPES as tagTypes } from './constants';
 
-import {
-  expectMultipleError,
-  mockHTMLElement,
-  required,
-} from '../../global/js/utils/test-helper';
+import { mockHTMLElement } from '../../global/js/utils/test-helper';
 import uuidv4 from '../../global/js/utils/uuidv4';
 
 const { prefix } = pkg;
@@ -197,22 +193,6 @@ describe(TagSet.displayName, () => {
     expect(modal).not.toHaveClass('is-visible');
   });
 
-  it('it requires strings for overflow and modal when more than ten tags supplied.', async () =>
-    expectMultipleError(
-      [
-        required('allTagsModalSearchLabel', 'TagSet'),
-        required('allTagsModalSearchPlaceholderText', 'TagSet'),
-        required('allTagsModalTitle', 'TagSet'),
-        required('showAllTagsLabel', 'TagSet'),
-      ],
-      () => {
-        const visibleTags = 5;
-        window.innerWidth = tagWidth * (visibleTags + 1) + 1; // + 1 for overflow
-
-        render(<TagSet tags={tags} />);
-      }
-    ));
-
   it('Obeys max visible', async () => {
     window.innerWidth = tagWidth * 10 + 1;
 

diff --git a/packages/ibm-products/src/components/TagSet/TagSet.tsx b/packages/ibm-products/src/components/TagSet/TagSet.tsx
@@ -55,13 +55,6 @@ type OverflowAlign =
   | 'right-top';
 type OverflowType = 'default' | 'tag';
 
-// interface TagType extends TagBaseProps
-// {
-//   label: string;
-//   // we duplicate this prop to improve the DocGen
-//   type?: typeof tagTypes[number];
-// }
-
 type TagType = {
   label: string;
   type?: keyof typeof tagTypes;
@@ -72,19 +65,19 @@ export interface TagSetProps extends PropsWithChildren {
    */
   align?: Align;
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
   allTagsModalSearchLabel?: string;
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * placeholder text for the show all search.
    */
   allTagsModalSearchPlaceholderText?: string;
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget?: ReactNode;
   /**
-   * title for the show all modal. **Note: Required if more than 10 tags**
+   * title for the show all modal.
    */
   allTagsModalTitle?: string;
   /**
@@ -127,10 +120,8 @@ export interface TagSetProps extends PropsWithChildren {
   overflowType?: OverflowType;
   /**
    * label for the overflow show all tags link.
-   *
-   * **Note:** Required if more than 10 tags
    */
-  showAllTagsLabel: string;
+  showAllTagsLabel?: string;
   /**
    * The tags to be shown in the TagSet. Each tag is specified as an object
    * with properties: **label**\* (required) to supply the tag content, and
@@ -155,10 +146,10 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       overflowAlign = 'bottom',
       overflowClassName,
       overflowType = 'default',
-      allTagsModalTitle,
-      allTagsModalSearchLabel,
-      allTagsModalSearchPlaceholderText,
-      showAllTagsLabel,
+      allTagsModalTitle = 'All tags',
+      allTagsModalSearchLabel = 'Search all tags',
+      allTagsModalSearchPlaceholderText = 'Search all tags',
+      showAllTagsLabel = 'View all tags',
       tags,
       containingElementRef,
       measurementOffset = defaults.measurementOffset,
@@ -448,21 +439,21 @@ TagSet.propTypes = {
    */
   align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
-   * label text for the show all search. **Note: Required if more than 10 tags**
+   * label text for the show all search.
    */
-  allTagsModalSearchLabel: string_required_if_more_than_10_tags,
+  allTagsModalSearchLabel: PropTypes.string,
   /**
-   * placeholder text for the show all search. **Note: Required if more than 10 tags**
+   * placeholder text for the show all search.
    */
-  allTagsModalSearchPlaceholderText: string_required_if_more_than_10_tags,
+  allTagsModalSearchPlaceholderText: PropTypes.string,
   /**
    * portal target for the all tags modal
    */
   allTagsModalTarget: PropTypes.node,
   /**
-   * title for the show all modal. **Note: Required if more than 10 tags**
+   * title for the show all modal.
    */
-  allTagsModalTitle: string_required_if_more_than_10_tags,
+  allTagsModalTitle: PropTypes.string,
   /**
    * className
    */
@@ -517,10 +508,8 @@ TagSet.propTypes = {
   overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
-   *
-   * **Note:** Required if more than 10 tags
    */
-  showAllTagsLabel: string_required_if_more_than_10_tags,
+  showAllTagsLabel: PropTypes.string,
   /**
    * The tags to be shown in the TagSet. Each tag is specified as an object
    * with properties: **label**\* (required) to supply the tag content, and