-
- {onClose && (
-
+
);
}
);
diff --git a/packages/lab/stories/pill-next/pill-next.qa.stories.tsx b/packages/lab/stories/pill-next/pill-next.qa.stories.tsx
index 97b570165bc..c71a3e37156 100644
--- a/packages/lab/stories/pill-next/pill-next.qa.stories.tsx
+++ b/packages/lab/stories/pill-next/pill-next.qa.stories.tsx
@@ -20,14 +20,8 @@ export const ExamplesGrid: StoryFn
= (props) => {
Disabled Pill
- } onClick={noop}>
- With Icon Pill
-
-
- Closable Pill
-
-
- Extra extra long Pill label example.
+
+ With Icon Pill
);
diff --git a/packages/lab/stories/pill-next/pill-next.stories.tsx b/packages/lab/stories/pill-next/pill-next.stories.tsx
index 97648411424..8712f47926a 100644
--- a/packages/lab/stories/pill-next/pill-next.stories.tsx
+++ b/packages/lab/stories/pill-next/pill-next.stories.tsx
@@ -1,9 +1,9 @@
import { PillNext } from "@salt-ds/lab";
-import { FavoriteIcon } from "@salt-ds/icons";
+import { CloseIcon, FavoriteIcon } from "@salt-ds/icons";
import { Meta, StoryFn } from "@storybook/react";
-import { ChangeEvent, Ref, useEffect, useRef, useState } from "react";
+import { useState } from "react";
import { shortColorData } from "./../assets/exampleData";
-import { Button, FlowLayout, Input, StackLayout, Tooltip } from "@salt-ds/core";
+import { Button, FlowLayout } from "@salt-ds/core";
export default {
title: "Lab/Pill Next",
@@ -48,10 +48,9 @@ export const Closable: StoryFn = () => {
console.log(`Clicked ${color}`)}
- onClose={() => removeColor(color)}
+ onClick={() => removeColor(color)}
>
- {color}
+ {color}
))}
@@ -60,42 +59,8 @@ export const Closable: StoryFn = () => {
export const Icon: StoryFn = () => {
return (
- } onClick={() => console.log("Clicked.")}>
- Pill with Icon
+ console.log("Clicked.")}>
+ Pill with Icon
);
};
-
-export const Truncated: StoryFn = () => {
- const pillRef = useRef(null);
- const [maxWidth, setMaxWidth] = useState("150");
- const [isEllipsisActive, setEllipsisActive] = useState(false);
-
- useEffect(() => {
- const text = pillRef?.current?.firstElementChild as HTMLElement;
- setEllipsisActive(text?.offsetWidth < text?.scrollWidth);
- }, [maxWidth]);
-
- const content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
-
- return (
-
- ) =>
- setMaxWidth(event.target.value)
- }
- />
-
- }
- style={{ maxWidth: `${maxWidth}px` }}
- >
- {content}
-
-
-
- );
-};
diff --git a/site/docs/components/pill/accessibility.mdx b/site/docs/components/pill/accessibility.mdx
index 12fdbc4431b..5a99479b629 100644
--- a/site/docs/components/pill/accessibility.mdx
+++ b/site/docs/components/pill/accessibility.mdx
@@ -12,18 +12,15 @@ data:
- When focus is on the pill, this action activates it.
- - When focus is on the close button, this action closes the pill.
- Tab sets focus on the entire pill.
- When the pill has focus, Tab moves focus out of the pill to next component in tab order.
- - When a closable pill has focus, Tab moves focus into the close button.
- When the pill has focus, this action moves focus out of the pill to the previous component in the tab
order.
- - When the close button has focus, this action moves focus back to the pill.
diff --git a/site/docs/components/pill/examples.mdx b/site/docs/components/pill/examples.mdx
index 397bb61f2f7..f006e25ec0f 100644
--- a/site/docs/components/pill/examples.mdx
+++ b/site/docs/components/pill/examples.mdx
@@ -35,12 +35,5 @@ data:
The closable pill represents a value selected via another mechanism, and which the user can remove within the pill. It can appear on its own, such as alongside a complex filter panel, or within an input control such as [`ComboBox`](../combo-box).
-
-
-
- ### Closable
-
- The closable pill represents a value selected via another mechanism, and which the user can remove within the pill. It can appear on its own, such as alongside a complex filter panel, or within an input control such as [`ComboBox`](../combo-box).
-
diff --git a/site/docs/components/pill/index.mdx b/site/docs/components/pill/index.mdx
index ad7ed03194b..6edb0422b7d 100644
--- a/site/docs/components/pill/index.mdx
+++ b/site/docs/components/pill/index.mdx
@@ -10,7 +10,6 @@ data:
[
{ name: "Button", relationship: "similarTo" },
{ name: "Toggle button", relationship: "similarTo" },
- { name: "Icon", relationship: "contains" },
]
stickerSheet: ""
layout: DetailComponent
diff --git a/site/src/examples/pill/Closable.tsx b/site/src/examples/pill/Closable.tsx
index f58eda816ee..29fd4967234 100644
--- a/site/src/examples/pill/Closable.tsx
+++ b/site/src/examples/pill/Closable.tsx
@@ -1,10 +1,13 @@
import { ReactElement } from "react";
import { PillNext } from "@salt-ds/lab";
+import { CloseIcon } from "@salt-ds/icons";
const handleClose = () => {
console.log("closed");
};
export const Closable = (): ReactElement => (
- Closable Pill
+
+ Closable Pill
+
);
diff --git a/site/src/examples/pill/Icon.tsx b/site/src/examples/pill/Icon.tsx
index 264e7c769ae..9363de9e554 100644
--- a/site/src/examples/pill/Icon.tsx
+++ b/site/src/examples/pill/Icon.tsx
@@ -7,7 +7,7 @@ const handleClick = () => {
};
export const Icon = (): ReactElement => (
- } onClick={handleClick}>
- Pill with Icon
+
+ Pill with Icon
);