website: Tags

apps/website/src/examples/Tag.basic.tsx

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <TagContainer>
+      <Tag variant='basic'>Tag 1</Tag>
+      <Tag variant='basic'>Tag 2</Tag>
+    </TagContainer>
+  );
+};

apps/website/src/examples/Tag.default.tsx

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return <Tag onRemove={() => {}}>Tag 1</Tag>;
+};

apps/website/src/examples/Tag.main.tsx

@@ -8,7 +8,7 @@ import { TagContainer, Tag } from '@itwin/itwinui-react';
 export default () => {
   return (
     <TagContainer>
-      <Tag onRemove={() => {}}>Tag 1</Tag>
+      <Tag>Tag 1</Tag>
       <Tag onRemove={() => {}}>Tag 2</Tag>
       <Tag onRemove={() => {}}>Tag 3</Tag>
     </TagContainer>

apps/website/src/examples/TagContainer.main.tsx

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <TagContainer background='filled'>
+      <Tag onRemove={() => {}}>Tag 1</Tag>
+      <Tag onRemove={() => {}}>Tag 2</Tag>
+      <Tag onRemove={() => {}}>Tag 3</Tag>
+      <Tag onRemove={() => {}}>Tag 4</Tag>
+    </TagContainer>
+  );
+};

apps/website/src/examples/TagContainer.scroll.tsx

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <TagContainer overflow='scroll' background='filled' style={{ maxWidth: '70%' }}>
+      <Tag onRemove={() => {}}>Tag 1</Tag>
+      <Tag onRemove={() => {}}>Tag 2</Tag>
+      <Tag onRemove={() => {}}>Tag 3</Tag>
+      <Tag onRemove={() => {}}>Medium tag 4</Tag>
+      <Tag onRemove={() => {}}>Very long tag 5</Tag>
+      <Tag onRemove={() => {}}>Tag 6</Tag>
+      <Tag onRemove={() => {}}>Tag 7</Tag>
+      <Tag onRemove={() => {}}>Long tag 8</Tag>
+      <Tag onRemove={() => {}}>Tag 9</Tag>
+    </TagContainer>
+  );
+};

apps/website/src/examples/TagContainer.truncate.tsx

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <TagContainer overflow='truncate' background='filled' style={{ maxWidth: '70%' }}>
+      <Tag onRemove={() => {}}>Tag 1</Tag>
+      <Tag onRemove={() => {}}>Tag 2</Tag>
+      <Tag onRemove={() => {}}>Tag 3</Tag>
+      <Tag onRemove={() => {}}>Medium tag 4</Tag>
+      <Tag onRemove={() => {}}>Very long tag 5</Tag>
+      <Tag onRemove={() => {}}>Tag 6</Tag>
+      <Tag onRemove={() => {}}>Tag 7</Tag>
+      <Tag onRemove={() => {}}>Long tag 8</Tag>
+      <Tag onRemove={() => {}}>Tag 9</Tag>
+    </TagContainer>
+  );
+};

apps/website/src/examples/TagContainer.wrap.tsx

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { TagContainer, Tag } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <TagContainer background='filled' style={{ maxWidth: '60%' }}>
+      <Tag onRemove={() => {}}>Tag 1</Tag>
+      <Tag onRemove={() => {}}>Tag 2</Tag>
+      <Tag onRemove={() => {}}>Tag 3</Tag>
+      <Tag onRemove={() => {}}>Medium tag 4</Tag>
+      <Tag onRemove={() => {}}>Very long tag 5</Tag>
+      <Tag onRemove={() => {}}>Tag 6</Tag>
+      <Tag onRemove={() => {}}>Tag 7</Tag>
+      <Tag onRemove={() => {}}>Long tag 8</Tag>
+      <Tag onRemove={() => {}}>Tag 9</Tag>
+    </TagContainer>
+  );
+};

apps/website/src/examples/index.tsx

@@ -120,6 +120,13 @@ export { default as TableMainExample } from './Table.main';
 export { default as TabsMainExample } from './Tabs.main';
 
 export { default as TagMainExample } from './Tag.main';
+export { default as TagBasicExample } from './Tag.basic';
+export { default as TagDefaultExample } from './Tag.default';
+
+export { default as TagContainerMainExample } from './TagContainer.main';
+export { default as TagContainerWrapExample } from './TagContainer.wrap';
+export { default as TagContainerTruncateExample } from './TagContainer.truncate';
+export { default as TagContainerScrollExample } from './TagContainer.scroll';
 
 export { default as TextareaMainExample } from './Textarea.main';
 

apps/website/src/pages/docs/tag.mdx

@@ -14,14 +14,73 @@ import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='core-tag' />
-
 <LiveExample src='Tag.main.tsx' truncate={false}>
   <AllExamples.TagMainExample client:load />
 </LiveExample>
 
 Tags are user-generated keywords used to label, categorize, or organize items and files. A group of multiple tags is a standard way of labeling an item to make it easily discoverable by peers who may not know the exact title of said item. A single tag may be mapped to more than one project at once if these projects fit in similar categories. Tags may also be used as a way to filter out content; in that context, the tags are pre-existing, and users select tags that fit their search to narrow down the results.
 
+## Variants
+
+### Default
+
+<LiveExample src='Tag.default.tsx'>
+  <AllExamples.TagDefaultExample client:load />
+</LiveExample>
+
+Default tags can be added and removed by a user. Tags adapt their size to the length of the label inside, making it easier to tell them apart due to their different sizes.
+
+### Basic
+
+<LiveExample src='Tag.basic.tsx'>
+  <AllExamples.TagBasicExample client:load />
+</LiveExample>
+
+Tags in the basic state are static and cannot be removed or edited by the user. No new tags can be added through this state either. This state is commonly seen in [tile](tile) metadata.
+
 ## Props
 
 <PropsTable path={frontmatter.propsPath} />
+
+## Tag container
+
+<LiveExample src='TagContainer.main.tsx'>
+  <AllExamples.TagContainerMainExample client:load />
+</LiveExample>
+
+Tag containers may be used to group tags, depending on the page layout and usage.
+
+### Wrapping
+
+<LiveExample src='TagContainer.wrap.tsx'>
+  <AllExamples.TagContainerWrapExample client:load />
+</LiveExample>
+
+The wrapping container wraps tags around to the following line when the maximum width is reached on the previous line. This allows display of the full tags without label truncation.
+
+### Truncating
+
+<LiveExample src='TagContainer.truncate.tsx'>
+  <AllExamples.TagContainerTruncateExample client:load />
+</LiveExample>
+
+The truncating container has fixed height, so it only displays tags that fit on a single line, and truncates tags that exceeds the maximum width. It uses ellipsis (…) to inform the user that there are hidden extra tags beyond what is currently shown.
+
+### Scrollable
+
+<LiveExample src='TagContainer.scroll.tsx'>
+  <AllExamples.TagContainerScrollExample client:load />
+</LiveExample>
+
+The scrollable container is much like the truncating container, except it allows the user to horizontally scroll to reveal the tags that go beyond the maximum width. The tag that extends past the width is cut off, to hint at the scrolling possibility.
+
+### Props
+
+<PropsTable path={'@itwin/itwinui-react/esm/core/Tag/TagContainer.d.ts'} />
+
+## Usage
+
+- Use [basic](#basic) tags whenever you need to make tags read-only.
+- [Wrapping](#wrapping) tag containers are ideal for layouts with plenty of vertical space, in situations where seeing all the tags is necessary.
+- Use [truncating](#truncating) tag containers when you have limited space, and display of the full tags is not necessary.
+- [Scrollable](#scrollable) tag containers are a good choice when the space in a layout is limited, but viewing all the tags is essential.