@czi-sds/mcp 0.20.1 → 0.21.0

package/data/component-props/Tag.json

@@ -3,49 +3,70 @@
     "props": {
       "color": {
         "defaultValue": "neutral",
-        "description": "The tag's intent, given either as one of the six names or as CSS colors: [label color, background color]: the icon stays white [label color, background color, icon color]",
+        "description": "One of the seven intents, or CSS colors for a tag the intents do not\ncover: `[label, background]` or `[label, background, icon]`. The icon\ntakes the label color when the third value is left out.",
         "isRequired": false,
-        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\" | \"neutral\" | \"beta\" | [string, string] | [string, string, string]"
+        "type": "\"info\" | \"accent\" | \"negative\" | \"notice\" | \"positive\" | \"beta\" | \"neutral\" | [string, string] | [string, string, string]"
       },
-      "hover": {
-        "defaultValue": true,
-        "description": "Whether the tag responds to the pointer with a darker fill and a pointer cursor. False removes the tag from pointer events altogether, which also keeps a surrounding Tooltip from opening.",
+      "disabled": {
+        "defaultValue": false,
+        "description": "Greys the tag out. On a clickable tag or a link it also takes the tag out\nof the tab order.",
         "isRequired": false,
         "type": "boolean"
       },
+      "href": {
+        "description": "Turns the tag into a link. It renders as an `<a>` unless `component`\nsays otherwise, as with a router's link component.",
+        "isRequired": false,
+        "type": "string"
+      },
       "icon": {
-        "description": "Icon element.",
+        "description": "An icon on the leading edge, usually a Phosphor or `@czi-sds/icons` icon.\nThe tag draws it at its own icon size and color.",
         "isRequired": false,
         "type": "ReactElement"
       },
+      "iconOnly": {
+        "defaultValue": false,
+        "description": "Draws only the icon, in a square tag. The label is hidden from view but\nstays the tag's accessible name. Has no effect without an icon.",
+        "isRequired": false,
+        "type": "boolean"
+      },
       "label": {
         "defaultValue": "- (required)",
-        "description": "The tag's text, and its accessible name. It is cut off with an ellipsis\nrather than wrapped, so keep it to a word or two.",
+        "description": "The tag's text, and its accessible name. It is cut off with an ellipsis\nrather than wrapped, so keep it to a word or two. An icon-only tag still\nneeds it: the text is hidden from view but read by screen readers.",
         "isRequired": true,
         "type": "string"
       },
       "onClick": {
-        "description": "MUI's prop. Makes the tag a button: a tab stop that answers Enter and Space.",
+        "description": "MUI's prop. Makes the tag a button: a tab stop that answers Enter and Space, with hover and pressed states.",
         "isRequired": false,
         "type": "function"
       },
-      "sdsSize": {
-        "defaultValue": "s",
-        "description": "The size of the tag: an 11px label with a 12px icon, or a 13px label with a 24px icon. A large tag has to have an icon.",
+      "sdsStyle": {
+        "defaultValue": "solid",
+        "description": "`solid` fills the tag with the intent color. `outline` tints the fill and\ndraws the label, the icons and a 1px border in the intent color.",
+        "isRequired": false,
+        "type": "\"outline\" | \"solid\""
+      },
+      "showLinkIcon": {
+        "defaultValue": false,
+        "description": "Adds an arrow after the label to say the tag leads somewhere. Usually\npaired with `href`, though a tag can be a link without it.",
         "isRequired": false,
-        "type": "\"s\" | \"l\""
+        "type": "boolean"
       },
-      "sdsStyle": {
-        "defaultValue": "square",
-        "description": "The shape of the tag. The design guidance treats rounded as the default for the system, so it is usually worth passing.",
+      "size": {
+        "defaultValue": "medium",
+        "description": "`medium` is 24px tall with a 13px label and 12px icons, `small` is 20px\ntall with a 10px label and 10px icons.",
         "isRequired": false,
-        "type": "\"square\" | \"rounded\""
+        "type": "\"small\" | \"medium\""
       },
-      "sdsType": {
-        "defaultValue": "primary",
-        "description": "primary fills the tag with the intent color and sets the label white. secondary tints the fill and keeps the label and a 1px border in the intent color.",
+      "target": {
+        "description": "Where the link opens. `_blank` also sets `rel=\"noopener noreferrer\"`.",
         "isRequired": false,
-        "type": "\"primary\" | \"secondary\""
+        "type": "string & {} | \"_self\" | \"_blank\" | \"_parent\" | \"_top\""
+      },
+      "rel": {
+        "description": "The link's relationship to the current page.",
+        "isRequired": false,
+        "type": "string"
       },
       "onDelete": {
         "description": "Callback fired when the delete icon is clicked.\nIf set, the delete icon will be shown.",

package/data/component-props/TagFilter.json

@@ -2,13 +2,11 @@
   "TagFilter": {
     "props": {
       "label": {
-        "defaultValue": "- (required)",
         "description": "The filter's text. Cut off with an ellipsis when there is not room for it.",
         "isRequired": true,
         "type": "string"
       },
       "onDelete": {
-        "defaultValue": "- (required)",
         "description": "Runs when the X is clicked or activated, and when Backspace or Delete is\npressed on the tag. Drop the filter from your state here; the component\ndoes not remove itself.",
         "isRequired": true,
         "type": "(event: any) => void"

package/data/component-props/TagLegacy.json

@@ -0,0 +1,40 @@
+{
+  "TagLegacy": {
+    "props": {
+      "color": {
+        "isRequired": false,
+        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\" | \"beta\" | \"neutral\" | [string, string] | [string, string, string]"
+      },
+      "hover": {
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "icon": {
+        "description": "Icon element.",
+        "isRequired": false,
+        "type": "ReactElement"
+      },
+      "label": {
+        "description": "The tag's text, and its accessible name. It is cut off with an ellipsis\nrather than wrapped, so keep it to a word or two.",
+        "isRequired": true,
+        "type": "string"
+      },
+      "onClick": {
+        "isRequired": false,
+        "type": "function"
+      },
+      "sdsSize": {
+        "isRequired": false,
+        "type": "\"s\" | \"l\""
+      },
+      "sdsStyle": {
+        "isRequired": false,
+        "type": "\"square\" | \"rounded\""
+      },
+      "sdsType": {
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\""
+      }
+    }
+  }
+}

package/data/component-props/Tooltip.json

@@ -17,6 +17,11 @@
         "isRequired": false,
         "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | \"auto\" | \"auto-start\" | \"auto-end\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
       },
+      "subtitle": {
+        "description": "A smaller, dimmer second line under the title, for a detail such as how to use what the tooltip points at.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
       "textAlign": {
         "defaultValue": "center, or left when wide",
         "description": "Overrides the alignment the width would pick.",
@@ -34,11 +39,6 @@
         "isRequired": false,
         "type": "\"default\" | \"wide\""
       },
-      "subtitle": {
-        "description": "A smaller, dimmer second line under the title, for a detail such as how to use what the tooltip points at.",
-        "isRequired": false,
-        "type": "ReactNode"
-      },
       "arrow": {
         "defaultValue": false,
         "description": "If `true`, adds an arrow to the tooltip.",

package/data/component-props/TooltipTable.json

@@ -6,6 +6,11 @@
         "isRequired": false,
         "type": "string | Element"
       },
+      "data": {
+        "description": "The sections, drawn in order and separated by dividers. A section's label heads it, its dataRows fill it, and disabled greys the whole block.",
+        "isRequired": false,
+        "type": "{ label?: string | undefined; dataRows: { label: string; value: string | number; }[]; disabled?: boolean | undefined; }[]"
+      },
       "itemAlign": {
         "defaultValue": "right",
         "description": "Which side of its column each value sits on. Right lines numbers up with each other.",
@@ -17,11 +22,6 @@
         "description": "Whether section labels are drawn. False hides all of them; the dividers between sections stay.",
         "isRequired": false,
         "type": "boolean"
-      },
-      "data": {
-        "description": "The sections, drawn in order and separated by dividers. A section's label heads it, its dataRows fill it, and disabled greys the whole block.",
-        "isRequired": false,
-        "type": "{ label?: string | undefined; dataRows: { label: string; value: string | number; }[]; disabled?: boolean | undefined; }[]"
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@czi-sds/mcp",
   "description": "The official MCP server for SDS",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "main": "dist/stdio.js",
   "files": [
     "dist",
@@ -66,5 +66,5 @@
     "turndown": "^7.2.4",
     "typescript": "^5.9.2"
   },
-  "gitHead": "52f0027db4ead40a4a311a27aefd762ed8823d47"
+  "gitHead": "d38c18e3aca773081cb5c0413dbfefb10da774b8"
 }

package/data/component-docs/TagFilter.md

@@ -1,131 +0,0 @@
-# TagFilter
-
-## Source Code
-
-The component's source code in the SDS codebase can be found [here](https://github.com/chanzuckerberg/sci-components/blob/main/packages/components/src/core/TagFilter/index.tsx).
-
-## Import
-
-**React TypeScript**
-
-```tsx
-import { TagFilter } from "@czi-sds/components";
-```
-
-## Code examples
-
-### Default TagFilter
-
-A row of applied filters, each removing itself from the page's state through `onDelete`. The row is a named group, which gives the identical "Delete Tag" buttons some context.
-
-**Example: DefaultTagFilter**
-
-```tsx
-// TagFilter is the tag that comes off: onDelete is required, and removing the tag
-// from your own state is what makes it disappear. Everything about how it looks is
-// fixed (the accent fill, the square shape, and the small X), so there are no
-// style props to pass.
-//
-// Both the tag and its X are focusable, so each filter is two tab stops: Backspace
-// or Delete on the tag removes it, and so does Enter on the X.
-
-import {
-  TagFilter,
-  fontBodyXs,
-  getSemanticColors,
-  getSpaces,
-  type CommonThemeProps,
-} from "@czi-sds/components";
-import styled from "@emotion/styled";
-import { useState } from "react";
-
-const FILTERS = ["Homo sapiens", "Lung", "10x 3' v3", "Healthy"];
-
-const Row = styled.div<CommonThemeProps>`
-  ${(props) => {
-    const spaces = getSpaces(props);
-
-    return `
-      display: flex;
-      flex-wrap: wrap;
-      gap: ${spaces?.s}px;
-      margin-bottom: ${spaces?.m}px;
-      min-height: 28px;
-    `;
-  }}
-`;
-
-const Readout = styled.p<CommonThemeProps>`
-  ${fontBodyXs}
-
-  ${(props) => {
-    const semanticColors = getSemanticColors(props);
-
-    return `
-      color: ${semanticColors?.base?.textSecondary};
-      margin: 0;
-    `;
-  }}
-`;
-
-function App() {
-  const [filters, setFilters] = useState(FILTERS);
-
-  return (
-    <div className="app">
-      <Row aria-label="Applied filters" role="group">
-        {filters.map((filter) => (
-          <TagFilter
-            key={filter}
-            label={filter}
-            onDelete={() =>
-              setFilters((current) => current.filter((item) => item !== filter))
-            }
-          />
-        ))}
-      </Row>
-
-      <Readout>
-        {filters.length > 0
-          ? `${filters.length} of ${FILTERS.length} filters applied`
-          : "No filters applied"}
-      </Readout>
-    </div>
-  );
-}
-
-export default App;
-```
-
-## SDS vs MUI
-
-TagFilter is built on the SDS Tag, and so on MUI's Chip, but it exists for one job: showing which Filters are applied and letting them be taken off again. It has one appearance and no style props:
-
-- **onDelete is required.** MUI treats it as the switch that decides whether a chip can be deleted; here the delete control is always there, so the handler has to be. Removing the tag from your own state is what makes it disappear.
-
-- **The look is fixed:** the accent fill, the square shape, the small semibold label and the 12px X. Tag's `sdsStyle`, `sdsType`, `sdsSize` and `color` are not part of the type, and MUI's `variant` is not either.
-
-- **The X cannot be swapped:** SDS applies its own `deleteIcon` (an SDS Button holding the XMark icon) after your props, so a `deleteIcon` of your own is ignored without a warning.
-
-## MUI Documentation
-
-Documentation for the underlying MUI component can be found [here](https://mui.com/material-ui/react-chip/).
-
-## Behavior and accessibility
-
-- There are two ways to remove a filter, and both are reachable from the keyboard: the X is a button that answers Enter, and the tag itself answers Backspace and Delete. That also means each filter tag is two tab stops.
-
-- The X button is named "Delete Tag" on every filter tag, and the name cannot be changed. The label beside it is read as plain text rather than as part of the button, so a row of filters is worth wrapping in a group with a name of its own, to say what the buttons are removing. The example below uses `role="group"` with an `aria-label`.
-
-- The tag carries `role="none presentation"`, so it contributes no semantics of its own. Adding an `onClick` does not change that: the tag becomes clickable to the pointer while still announcing nothing, so leave the clicking to the X.
-
-- Like a Tag, a filter tag does not wrap: a long filter value is cut off with an ellipsis. Keep the values short, or shorten them yourself so the part that survives is the part that matters.
-
-## Props
-
-Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
-
-| Name       | Type       | Default      | Description                                                                                                                                                                                                                       |
-| ---------- | ---------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`    | `string`   | - (required) | The filter's text. Cut off with an ellipsis when there is not room for it.                                                                                                                                                        |
-| `onDelete` | `function` | - (required) | Runs when the X is clicked or activated, and when Backspace or Delete is pressed on the tag. Drop the filter from your state here; the component does not remove itself. **Signature:** `function(event: SyntheticEvent) => void` |