@neo4j-ndl/react 4.16.7 → 4.16.9

package/skills/ndl-react/components/selectable-tag.md

@@ -0,0 +1,203 @@
+# SelectableTag
+
+Import: `import { SelectableTag } from '@neo4j-ndl/react'`
+
+## Props
+
+### SelectableTag
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `badgeCount` | `number` |  |  | Number displayed in a badge after the content |
+| `children` | `ReactNode` |  |  | The content of the tag |
+| `isDisabled` | `boolean` |  | `false` | Whether the tag is disabled |
+| `isSelected` | `boolean` | ✅ |  | Whether the tag is selected |
+| `leadingVisual` | `ReactNode` |  |  | Icon to display before the content |
+| `onClick` | `MouseEventHandler<HTMLButtonElement>` | ✅ |  | Callback fired when the tag is clicked |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'medium' \| 'small' \| 'x-small'` |  | `medium` | Size of the tag |
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <SelectableTag
+      isSelected={isSelected}
+      onClick={() => setIsSelected(!isSelected)}
+    >
+      Selectable Tag
+    </SelectableTag>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="n-flex n-gap-token-8 n-items-center">
+      <SelectableTag isSelected={false} isDisabled onClick={() => null}>
+        Disabled unselected tag
+      </SelectableTag>
+      <SelectableTag isSelected={true} isDisabled onClick={() => null}>
+        Disabled selected tag
+      </SelectableTag>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Sizes
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+
+  return (
+    <div className="n-flex n-flex-row n-gap-token-8">
+      <SelectableTag
+        size="x-small"
+        isSelected={selected['x-small'] ?? false}
+        onClick={() =>
+          setSelected((s) => ({ ...s, ['x-small']: !s['x-small'] }))
+        }
+      >
+        X-Small
+      </SelectableTag>
+      <SelectableTag
+        size="small"
+        isSelected={selected['small'] ?? false}
+        onClick={() => setSelected((s) => ({ ...s, ['small']: !s['small'] }))}
+      >
+        Small
+      </SelectableTag>
+      <SelectableTag
+        size="medium"
+        isSelected={selected['medium'] ?? false}
+        onClick={() => setSelected((s) => ({ ...s, ['medium']: !s['medium'] }))}
+      >
+        Medium
+      </SelectableTag>
+      <SelectableTag
+        size="large"
+        isSelected={selected['large'] ?? false}
+        onClick={() => setSelected((s) => ({ ...s, ['large']: !s['large'] }))}
+      >
+        Large
+      </SelectableTag>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Truncation
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag, Tooltip } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const label =
+  'This is a very very very long tag label that should be truncated';
+
+const Component = () => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <div style={{ maxWidth: 200 }}>
+      <Tooltip type="simple">
+        <Tooltip.Trigger hasButtonWrapper>
+          <SelectableTag
+            isSelected={isSelected}
+            onClick={() => setIsSelected(!isSelected)}
+            badgeCount={8}
+          >
+            {label}
+          </SelectableTag>
+        </Tooltip.Trigger>
+        <Tooltip.Content>{label}</Tooltip.Content>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### With Badge
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <SelectableTag
+      badgeCount={8}
+      isSelected={isSelected}
+      onClick={() => setIsSelected(!isSelected)}
+    >
+      Selectable Tag with badge
+    </SelectableTag>
+  );
+};
+
+export default Component;
+```
+
+### With Leading Icon
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { SelectableTag } from '@neo4j-ndl/react';
+import { DatabasePlusIcon } from '@neo4j-ndl/react/icons';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <SelectableTag
+      isSelected={isSelected}
+      leadingVisual={<DatabasePlusIcon />}
+      onClick={() => setIsSelected(!isSelected)}
+    >
+      Selectable Tag with leading icon
+    </SelectableTag>
+  );
+};
+
+export default Component;
+```