fix(Tag): hover & improve docs decorators/disable/delete

lumada-design · Sep 26, 2023 · 9f3b225 · 9f3b225
1 parent 6d9eaf9
commit 9f3b225
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 56 deletions.
diff --git a/packages/core/src/components/Tag/Tag.stories.tsx b/packages/core/src/components/Tag/Tag.stories.tsx
@@ -31,6 +31,9 @@ const StyledListItem = styled(HvListItem)({
 const meta: Meta<typeof HvTag> = {
   title: "Components/Tag/Tag",
   component: HvTag,
+  decorators: [
+    (Story) => <div style={{ display: "flex", gap: 20 }}>{Story()}</div>,
+  ],
 };
 export default meta;
 
@@ -59,43 +62,31 @@ export const LongLabelText: StoryObj<HvTagProps> = {
     const longText = "This is an example of a very long tag";
 
     return (
-      <div style={{ display: "flex", gap: 20 }}>
+      <>
         <HvTag label={<HvOverflowTooltip data={longText} />} />
         <HvTag label={`${longText} with default overflow`} />
-      </div>
+      </>
     );
   },
 };
 
 export const Semantical: StoryObj<HvTagProps> = {
   render: () => {
     return (
-      <div
-        style={{
-          width: "600px",
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
+      <>
         <HvTag label="Informational" />
         <HvTag color="positive_20" label="Success" />
         <HvTag color="negative_20" label="Warning" />
         <HvTag color="warning_20" label="Error" />
-      </div>
+      </>
     );
   },
 };
 
-export const Categorial: StoryObj<HvTagProps> = {
+export const Categorical: StoryObj<HvTagProps> = {
   render: () => {
     return (
-      <div
-        style={{
-          width: "600px",
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
+      <>
         <HvTag label="Feat" onClick={() => alert("Hello")} type="categorical" />
         <HvTag
           label="Docs"
@@ -122,49 +113,32 @@ export const Categorial: StoryObj<HvTagProps> = {
           color="cat5"
         />
         <HvTag label="No Click" type="categorical" color="#22FF45" />
-      </div>
+      </>
     );
   },
 };
 
 export const DisabledTags: StoryObj<HvTagProps> = {
   render: () => {
     return (
-      <div
-        style={{
-          width: "350px",
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <HvTag
-          label="Informational"
-          disabled
-          deleteButtonProps={{ "aria-label": "Disabled tag" }}
-        />
+      <>
+        <HvTag label="Informational" disabled />
         <HvTag
           label="Success"
           disabled
           onDelete={() => {
             alert("On Delete Action");
           }}
-          deleteButtonProps={{ "aria-label": "Disabled tag" }}
         />
-      </div>
+      </>
     );
   },
 };
 
 export const WithDeleteAction: StoryObj<HvTagProps> = {
   render: () => {
     return (
-      <div
-        style={{
-          width: "600px",
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
+      <>
         <HvTag
           label="Informational"
           onDelete={() => {
@@ -177,19 +151,13 @@ export const WithDeleteAction: StoryObj<HvTagProps> = {
           onDelete={() => {
             alert("On Delete Action");
           }}
-          deleteButtonProps={{
-            tabIndex: -1, // tab navigation should skip this tag
-          }}
         />
         <HvTag
           label="Warning"
           color="negative_20"
           onDelete={() => {
             alert("On Delete Action");
           }}
-          deleteButtonProps={{
-            tabIndex: -1, // tab navigation should skip this tag
-          }}
         />
         <HvTag
           label="Error"
@@ -198,21 +166,15 @@ export const WithDeleteAction: StoryObj<HvTagProps> = {
             alert("On Delete Action");
           }}
         />
-      </div>
+      </>
     );
   },
 };
 
 export const CategoricalTagsDisabled: StoryObj<HvTagProps> = {
   render: () => {
     return (
-      <div
-        style={{
-          width: "350px",
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
+      <>
         <HvTag
           label="Feat"
           onClick={() => alert("Hello")}
@@ -247,7 +209,7 @@ export const CategoricalTagsDisabled: StoryObj<HvTagProps> = {
           color="cat5"
           disabled
         />
-      </div>
+      </>
     );
   },
 };

diff --git a/packages/core/src/components/Tag/Tag.tsx b/packages/core/src/components/Tag/Tag.tsx
@@ -94,7 +94,7 @@ export const HvTag = (props: HvTagProps) => {
     (type === "categorical" && `${categoricalBackgroundColor}30`) ||
     undefined;
 
-  const isClickable = !!onClick && !disabled;
+  const isClickable = !!(onClick || onDelete) && !disabled;
 
   const clickableClass = css({
     "&:hover": {