Merge branch 'master' into nm/DE-739

Author: natemoo-re

static/app/components/core/badge/tag.mdx

@@ -0,0 +1,97 @@
+---
+title: Tag
+description: Tags are highlighted text elements that provide quick, at-a-glance contextual information such as status indicators.
+category: status
+source: 'sentry/components/core/badge/tag'
+resources:
+  figma: https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/ChonkUI--App-Components--WIP-?node-id=3574-5336
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/badge/tag.tsx
+  a11y:
+    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
+---
+
+import {useState} from 'react';
+
+import {Tag} from 'sentry/components/core/badge/tag';
+import {IconCheckmark, IconCircle, IconRefresh, IconWarning} from 'sentry/icons';
+import * as Storybook from 'sentry/stories';
+
+The `Tag` component is a generic primitive for displaying status information. Depending on the `variant` prop, it can be used as an error/warning/success indicator and for various other use cases.
+
+## Variants
+
+Tags support multiple variants for different semantic meanings.
+
+<Storybook.Demo>
+  <Tag variant="muted">Default</Tag>
+  <Tag variant="success">Success</Tag>
+  <Tag variant="danger">Error</Tag>
+  <Tag variant="warning">Warning</Tag>
+  <Tag variant="info">Info</Tag>
+  <Tag variant="promotion">Promotion</Tag>
+</Storybook.Demo>
+```jsx
+<Tag variant="muted">Default</Tag>
+<Tag variant="success">Success</Tag>
+<Tag variant="danger">Error</Tag>
+<Tag variant="warning">Warning</Tag>
+<Tag variant="info">Info</Tag>
+<Tag variant="promotion">Promotion</Tag>
+```
+
+## Icons
+
+The `icon` prop accepts an `<Icon />` component to render a custom leading icon.
+
+<Storybook.Demo>
+  <Tag icon={<IconCheckmark />} variant="success">
+    Success
+  </Tag>
+  <Tag icon={<IconWarning />} variant="warning">
+    Warning
+  </Tag>
+  <Tag icon={<IconCircle />} variant="promotion">
+    Promotion
+  </Tag>
+</Storybook.Demo>
+```jsx
+<Tag icon={<IconCheckmark />} variant="success">
+  Success
+</Tag>
+<Tag icon={<IconWarning />} variant="warning">
+  Warning
+</Tag>
+<Tag icon={<IconCircle />} variant="promotion">
+  Promotion
+</Tag>
+```
+
+## Dismissible Tags
+
+Pass a custom `onDismiss` callback to create a dismissible tag with a trailing close icon.
+
+export function DismissibleTag() {
+  const [dismissed, setDismissed] = useState(false);
+
+if (dismissed) {
+return <Tag icon={<IconRefresh />} variant="muted" onClick={() => setDismissed(false)}>Reset Tag</Tag>
+}
+
+return <Tag variant="info" onDismiss={() => setDismissed(true)}>
+Dismiss Tag
+
+  </Tag>
+}
+
+<Storybook.Demo>
+  <DismissibleTag />
+</Storybook.Demo>
+```jsx
+<Tag variant="info" onDismiss={() => setDismissed(true)}>
+  Dismiss Tag
+</Tag>
+```
+
+## See Also
+
+- [Badge](/stories/core/badge/) - Related component for feature badges, alert badges, and deploy badges

static/app/components/core/button/button.mdx

@@ -194,3 +194,8 @@ In scenarios where high information density is critical, buttons may be displaye
 To meet WCAG 2.2 AA compliance, `<Button>` automatically meets the [WCAG 1.4.3](https://www.w3.org/TR/WCAG22/#contrast-minimum), [WCAG 2.1.1](https://www.w3.org/TR/WCAG22/#keyboard), [WCAG 2.4.7](https://www.w3.org/TR/WCAG22/#focus-visible), [WCAG 2.5.8](https://www.w3.org/TR/WCAG22/#target-size-minimum) success criteria.
 
 Developers should take care to ensure that their implementations additionally follow the [WAI-ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and properly handle focus changes when an action is triggered.
+
+## See Also
+
+- [LinkButton](/stories/core/linkbutton/) - Button-styled component for navigation
+- [Link](/stories/core/link/) - Text link component for navigation

static/app/components/core/button/linkButton.mdx

@@ -227,3 +227,8 @@ For optimal accessibility:
 - Always include `aria-label` for icon-only LinkButtons
 - Use descriptive link text that makes sense out of context
 - Consider using `title` prop for additional context when needed
+
+## See Also
+
+- [Button](/stories/core/button/) - Standard button for actions that don't navigate
+- [Link](/stories/core/link/) - Text link component for navigation

static/app/components/core/link/link.mdx

@@ -116,3 +116,8 @@ Both `<Link>` and `<ExternalLink>` components can be used inline in `<Text>` com
   that inherits text styling.
 </Text>
 ```
+
+## See Also
+
+- [Button](/stories/core/button/) - Clickable element for actions that don't navigate
+- [LinkButton](/stories/core/linkbutton/) - Button-styled component for navigation

static/app/stories/view/storyTree.tsx

@@ -114,10 +114,9 @@ type ComponentSubcategory =
   | 'layout'
   | 'buttons'
   | 'forms'
-  | 'pickers'
   | 'navigation'
-  | 'status-feedback'
-  | 'data-display'
+  | 'status'
+  | 'display'
   | 'overlays'
   | 'utilities'
   | 'shared';
@@ -139,7 +138,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
 > = {
   layout: {
     label: 'Layout',
-    components: ['composition', 'container', 'flex', 'grid', 'stack'],
+    components: ['composition', 'container', 'disclosure', 'flex', 'grid', 'stack'],
   },
   typography: {
     label: 'Typography',
@@ -160,11 +159,6 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
       'radio',
       'switch',
       'slider',
-    ],
-  },
-  pickers: {
-    label: 'Pickers',
-    components: [
       'select',
       'multiselect',
       'compactselect',
@@ -174,13 +168,13 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   navigation: {
     label: 'Navigation',
-    components: ['link', 'tabs', 'menulistitem', 'disclosure'],
+    components: ['link', 'tabs', 'menulistitem'],
   },
-  'status-feedback': {
+  status: {
     label: 'Status & Feedback',
-    components: ['alert', 'badge', 'toast'],
+    components: ['alert', 'badge', 'tag', 'toast'],
   },
-  'data-display': {
+  display: {
     label: 'Data Display',
     components: ['avatar', 'image', 'codeblock'],
   },
@@ -211,10 +205,9 @@ const COMPONENT_SUBCATEGORY_ORDER: ComponentSubcategory[] = [
   'typography',
   'buttons',
   'forms',
-  'pickers',
   'navigation',
-  'status-feedback',
-  'data-display',
+  'status',
+  'display',
   'overlays',
   'utilities',
   'shared',