fix(TagsInput): ensure input isn't inlined along with label (#4579)

* fix(TagsInput): ensure input isn't inlined along with label
* docs(TagsInput): resizable docs
* update docs to reflect that resizable is opt-in

apps/docs/src/pages/components/tags-input.mdx

@@ -21,6 +21,7 @@ export const getStaticProps = async ({ params }) => {
     label: { defaultValue: "Enter your tags" },
     description: { defaultValue: "This is where you enter your tags" },
     multiline: { defaultValue: false },
+    resizable: { defaultValue: false },
     readOnly: { defaultValue: false },
     disabled: { defaultValue: false },
   }}

packages/core/src/Tag/stories/Tag.stories.tsx

@@ -126,8 +126,8 @@ export const Test: StoryObj = {
       <HvTag label="Informational" disabled />
       <HvTag label="This is a very very very very very very very very long text for a tag" />
       <HvTag color="positive_20" label="Success" />
-      <HvTag color="negative_20" label="Warning" />
-      <HvTag color="warning_20" label="Error" />
+      <HvTag color="warning_20" label="Warning" />
+      <HvTag color="negative_20" label="Error" />
       <HvTag label="Success" color="positive_20" onDelete={() => {}} />
       <HvTag label="Feat" type="categorical" />
       <HvTag label="Feat" type="categorical" disabled />

packages/core/src/TagsInput/TagsInput.stories.tsx

@@ -1,33 +1,18 @@
 import { useState } from "react";
 import { css } from "@emotion/css";
-import styled from "@emotion/styled";
 import { Meta, StoryObj } from "@storybook/react";
 import {
   HvFormStatus,
   HvTagProps,
   HvTagsInput,
   HvTagsInputProps,
   HvTypography,
-  tagsInputClasses,
 } from "@hitachivantara/uikit-react-core";
 
 import countryNamesArray from "./countries";
 import { ControlledTagArray as ControlledTagArrayStory } from "./stories/ControlledTagArray";
 import ControlledTagArrayRaw from "./stories/ControlledTagArray?raw";
 
-const StyledMultilineTagsInput = styled(HvTagsInput)({
-  [`& .${tagsInputClasses.tagsList}`]: {
-    width: 600,
-    height: 100,
-  },
-});
-
-const StyledSuggestionsTagsInput = styled(HvTagsInput)({
-  [`& > .${tagsInputClasses.root}`]: {
-    height: 400,
-  },
-});
-
 const meta: Meta<typeof HvTagsInput> = {
   title: "Components/Tag/Tags Input",
   component: HvTagsInput,
@@ -42,7 +27,6 @@ export const Main: StoryObj<HvTagsInputProps> = {
     label: "Enter your tags",
     description: "This is where you enter your tags",
     placeholder: "Enter value",
-    "aria-label": "The label",
     disabled: false,
     readOnly: false,
     required: false,
@@ -75,14 +59,12 @@ export const Variants: StoryObj<HvTagsInputProps> = {
       <div className={classes.root}>
         <HvTagsInput
           label="Required"
-          aria-label="Required"
           placeholder="Enter value"
           required
           value={[{ label: "tag 1" }, { label: "tag 2" }, { label: "tag 3" }]}
         />
         <HvTagsInput
           label="Disabled"
-          aria-label="Disabled"
           placeholder="Enter value"
           disabled
           value={[
@@ -93,14 +75,12 @@ export const Variants: StoryObj<HvTagsInputProps> = {
         />
         <HvTagsInput
           label="Readonly"
-          aria-label="Readonly"
           placeholder="Enter value"
           readOnly
           value={[{ label: "tag 7" }, { label: "tag 8" }, { label: "tag 9" }]}
         />
         <HvTagsInput
           label="Invalid"
-          aria-label="Invalid"
           placeholder="Enter value"
           status="invalid"
           statusMessage="Oh no!"
@@ -133,7 +113,6 @@ export const ControlledStringArray: StoryObj<HvTagsInputProps> = {
       <>
         <HvTagsInput
           label="Controlled with array of strings"
-          aria-label="Controlled with array of string"
           description="A list of strings will result in semantic tags"
           placeholder="Enter value"
           value={currValueStr}
@@ -182,7 +161,6 @@ export const ControlledWithValidation: StoryObj<HvTagsInputProps> = {
       <>
         <HvTagsInput
           label="Controlled with validation"
-          aria-label="Controlled with validation"
           description="A tag with a dash (-) will be invalid"
           placeholder="Enter value"
           value={currValueStr}
@@ -233,7 +211,6 @@ export const AddTagOnBlur: StoryObj<HvTagsInputProps> = {
     return (
       <HvTagsInput
         label="Adding tags on blur"
-        aria-label="Adding tags on blur"
         placeholder="Enter value"
         value={currValueArr}
         onChange={(event, value) => {
@@ -258,32 +235,32 @@ export const Multiline: StoryObj<HvTagsInputProps> = {
   },
   render: () => {
     return (
-      <StyledMultilineTagsInput
+      <HvTagsInput
+        classes={{ tagsList: "h-100px" }}
         label="MultiLine"
-        aria-label="The label"
         placeholder="Enter value"
         multiline
       />
     );
   },
 };
 
-export const NotResizable: StoryObj<HvTagsInputProps> = {
+export const Resizable: StoryObj<HvTagsInputProps> = {
   parameters: {
     docs: {
       description: {
-        story: "Not resizable.",
+        story: "Tags Input multiline and resizable",
       },
     },
   },
   render: () => {
     return (
       <HvTagsInput
-        label="Fixed size not resizable"
-        aria-label="The label"
+        classes={{ tagsList: "h-100px" }}
+        label="Multiline resizable"
         placeholder="Enter value"
         multiline
-        resizable={false}
+        resizable
       />
     );
   },
@@ -304,7 +281,6 @@ export const TagsCounterValidation: StoryObj<HvTagsInputProps> = {
       <HvTagsInput
         label="Tags"
         description="Maximum 3 tags"
-        aria-label="The label"
         placeholder="Enter value"
         onChange={(event, value) => {
           console.log("in onChange callback. data: ", value);
@@ -337,7 +313,6 @@ export const CustomCommitCharacter: StoryObj<HvTagsInputProps> = {
       <HvTagsInput
         label="Custom commit character"
         description="Will only add a tag when a space or comma is entered or when the user clicks outside the input box and there's text that's not been commited"
-        aria-label="Custom commit character"
         placeholder="Enter value"
         commitTagOn={["Space", "Comma"]}
         commitOnBlur
@@ -373,10 +348,9 @@ export const Suggestions: StoryObj<HvTagsInputProps> = {
     };
 
     return (
-      <StyledSuggestionsTagsInput
+      <HvTagsInput
         label="Suggestions"
         description="A list of suggestions is presented when text is entered."
-        aria-label="Suggestions"
         placeholder="Enter value"
         onChange={(event, value) => {
           setCurrValueStr(value);
@@ -445,10 +419,9 @@ export const UnrestrictedSuggestions: StoryObj<HvTagsInputProps> = {
     };
 
     return (
-      <StyledSuggestionsTagsInput
+      <HvTagsInput
         label="Suggestions"
         description="Enter a tag starting with 'Option'."
-        aria-label="Suggestions"
         placeholder="Enter value"
         onChange={(event, value) => {
           setCurrValueStr(value);

packages/core/src/TagsInput/TagsInput.styles.tsx

@@ -29,7 +29,7 @@ export const { staticClasses, useClasses } = createClasses("HvTagsInput", {
       },
     },
   },
-  resizable: { width: "auto", resize: "both", overflow: "auto" },
+  resizable: { width: "auto", resize: "both", clear: "both", overflow: "auto" },
   invalid: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
   label: {},