Hide unused helper marks on selection cards and modal section labels until tooltip behavior ships.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/ApplicableScopeField.tsx

@@ -70,7 +70,7 @@ function ApplicableScopeFieldComponent({
 
   return (
     <div className={`flex flex-col gap-2 ${className}`.trim()}>
-      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <InputLabel label={label} size="s" palette="default" />
       <div className="flex flex-wrap items-center gap-2">
         {scopes.map((scope) => {
           const isSelected = selectedScopes.includes(scope);

app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx

@@ -60,7 +60,6 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
               <div key={block.id} className="flex flex-col gap-2">
                 <InputLabel
                   label={block.blockTitle}
-                  helpIcon
                   size="s"
                   palette="default"
                 />
@@ -123,7 +122,6 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
                 <div className="flex flex-col gap-2">
                   <InputLabel
                     label={block.blockTitle}
-                    helpIcon
                     size="s"
                     palette="default"
                   />
@@ -169,6 +167,7 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
           <IncrementerBlock
             key={block.id}
             label={block.blockTitle}
+            helpIcon={false}
             value={block.defaultPercent}
             min={1}
             max={100}

app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardUploadBlockRow.view.tsx

@@ -30,7 +30,6 @@ function CustomMethodCardUploadBlockRowViewComponent({
     <div className="flex flex-col gap-2">
       <InputLabel
         label={block.blockTitle}
-        helpIcon
         size="s"
         palette="default"
       />
@@ -77,6 +76,7 @@ function CustomMethodCardUploadBlockRowViewComponent({
       ) : (
         <Upload
           active={!busy}
+          showHelpIcon={false}
           hintText={busy ? uploadingHint : uploadHint}
           onClick={onUploadClick}
         />

app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx

@@ -51,12 +51,10 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
           value={textBlockTitle}
           onChange={onTextBlockTitleChange}
           maxLength={CUSTOM_METHOD_CARD_WIZARD_MAX_FIELD_CHARS}
-          showHelpIcon
         />
         <div className="flex flex-col gap-2">
           <InputLabel
             label={copy.text.placeholderLabel}
-            helpIcon
             size="s"
             palette="default"
           />
@@ -82,7 +80,6 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
         <div className="flex flex-col gap-2">
           <InputLabel
             label={copy.badges.blockTitleLabel}
-            helpIcon
             helperText={copy.requiredHint}
             size="s"
             palette="default"
@@ -127,7 +124,6 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
           value={uploadBlockTitle}
           onChange={onUploadBlockTitleChange}
           maxLength={CUSTOM_METHOD_CARD_WIZARD_MAX_FIELD_CHARS}
-          showHelpIcon
         />
         {hasUploadPreview ? (
           <div className="relative inline-block max-w-full">
@@ -158,6 +154,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
         ) : (
           <Upload
             active={!uploadPersisting}
+            showHelpIcon={false}
             hintText={
               uploadPersisting && uploadBusyHint
                 ? uploadBusyHint
@@ -188,10 +185,10 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
         value={proportionBlockTitle}
         onChange={onProportionBlockTitleChange}
         maxLength={CUSTOM_METHOD_CARD_WIZARD_MAX_FIELD_CHARS}
-        showHelpIcon
       />
       <IncrementerBlock
         label={copy.proportion.defaultLabel}
+        helpIcon={false}
         value={proportionDefault}
         min={1}
         max={100}

app/(app)/create/components/MethodCardCustomizeModalHeader.tsx

@@ -38,6 +38,7 @@ export default function MethodCardCustomizeModalHeader({
         value={titleValue}
         onChange={(e) => onTitleChange(e.target.value)}
         inputSize="medium"
+        showHelpIcon={false}
       />
       {showDescription ? (
         <ModalTextAreaField

app/(app)/create/components/ModalTextAreaField.tsx

@@ -2,8 +2,9 @@
 
 /**
  * Shared "labelled text area" field used by every create flow modal section.
- * Pairs an `InputLabel` (with help icon) with a `TextArea` set to the embedded
+ * Pairs an `InputLabel` with a `TextArea` set to the embedded appearance —
- * appearance — matching the Figma "Control / Text Area" pattern.
+ * matching the Figma "Control / Text Area" pattern. Section help marks stay
+ * off until tooltip behavior ships.
  */
 
 import { memo, useId } from "react";
@@ -13,7 +14,7 @@ import InputLabel from "../../../components/type/InputLabel";
 export interface ModalTextAreaFieldProps {
   /** Label rendered above the text area. */
   label: string;
-  /** Show the help "?" icon next to the label (default `true`). */
+  /** Show the help "?" icon next to the label. Off until tooltip behavior ships. */
   helpIcon?: boolean;
   /** Current text value. */
   value: string;
@@ -30,7 +31,7 @@ export interface ModalTextAreaFieldProps {
 
 function ModalTextAreaFieldComponent({
   label,
-  helpIcon = true,
+  helpIcon = false,
   value,
   onChange,
   rows = 4,

app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx

@@ -76,6 +76,7 @@ function DecisionApproachEditFieldsComponent({
       />
       <IncrementerBlock
         label={t.sectionHeadings.consensusLevel}
+        helpIcon={false}
         value={value.consensusLevel}
         min={CONSENSUS_LEVEL_MIN}
         max={CONSENSUS_LEVEL_MAX}

app/components/cards/CardStack/CardStack.view.tsx

@@ -148,7 +148,7 @@ export function CardStackView({
               recommended={item.recommended ?? false}
               selected={isSelected(item.id)}
               orientation="vertical"
-              showInfoIcon={true}
+              showInfoIcon={false}
               onClick={() => onCardSelect(item.id)}
             />
           ))}
@@ -457,7 +457,7 @@ export function CardStackView({
                 recommended={item.recommended ?? false}
                 selected={isSelected(item.id)}
                 orientation="vertical"
-                showInfoIcon={true}
+                showInfoIcon={false}
                 onClick={() => onCardSelect(item.id)}
               />
             ))}

app/components/cards/Selection/Selection.container.tsx

@@ -6,7 +6,7 @@ import type { SelectionProps } from "./Selection.types";
 
 /**
  * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
- * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack `singleStack` / right-rail).
+ * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + tag on the right (CardStack `singleStack` / right-rail). Helper `?` stays off until tooltip behavior ships.
  */
 const SelectionContainer = memo<SelectionProps>(
   ({

app/components/cards/Selection/Selection.types.ts

@@ -4,6 +4,7 @@ export interface SelectionProps {
   recommended?: boolean;
   selected?: boolean;
   orientation: "horizontal" | "vertical";
+  /** Off in product until tooltip behavior ships. */
   showInfoIcon?: boolean;
   /** Optional id for the root (e.g. `data-card-id` for focus after modal close). */
   id?: string;

app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx

@@ -291,7 +291,7 @@ function ReadOnlyScopeField({
 }) {
   return (
     <div className="flex flex-col gap-2">
-      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <InputLabel label={label} size="s" palette="default" />
       <div className="flex flex-wrap items-center gap-2">
         {scopes.map((scope) => (
           <Chip
@@ -317,7 +317,7 @@ function ReadOnlyValueField({
 }) {
   return (
     <div className="flex flex-col gap-2">
-      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <InputLabel label={label} size="s" palette="default" />
       <span className="text-medium-label text-[color:var(--color-content-default-primary)]">
         {value}
       </span>

stories/cards/Selection.stories.js

@@ -36,7 +36,8 @@ export default {
     },
     showInfoIcon: {
       control: { type: "boolean" },
-      description: "Show info icon next to label (typically in vertical)",
+      description:
+        "Optional helper ? next to the label. Off in product until tooltip behavior ships.",
     },
     onClick: { action: "clicked" },
   },
@@ -82,7 +83,7 @@ export const VerticalRecommended = {
     recommended: true,
     selected: false,
     orientation: "vertical",
-    showInfoIcon: true,
+    showInfoIcon: false,
   },
 };
 
@@ -93,7 +94,7 @@ export const VerticalSelected = {
     recommended: false,
     selected: true,
     orientation: "vertical",
-    showInfoIcon: true,
+    showInfoIcon: false,
   },
 };
 
@@ -134,7 +135,7 @@ export const AllVariants = {
           recommended={true}
           selected={false}
           orientation="vertical"
-          showInfoIcon={true}
+          showInfoIcon={false}
         />
       </div>
       <div className="space-y-2">
@@ -147,7 +148,7 @@ export const AllVariants = {
           recommended={false}
           selected={true}
           orientation="vertical"
-          showInfoIcon={true}
+          showInfoIcon={false}
         />
       </div>
     </div>

stories/create-flow/ModalTextAreaField.stories.js

@@ -9,7 +9,7 @@ export default {
     docs: {
       description: {
         component:
-          "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` (with help icon) with a `TextArea` set to the `embedded` appearance.",
+          "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` with a `TextArea` set to the `embedded` appearance. Section help marks stay off until tooltip behavior ships.",
       },
     },
   },
@@ -35,7 +35,7 @@ export const Default = {
   },
   args: {
     label: "Description",
-    helpIcon: true,
+    helpIcon: false,
     placeholder: "What does this rule cover?",
     rows: 4,
   },

tests/components/ApplicableScopeField.test.tsx

@@ -119,4 +119,10 @@ describe("ApplicableScopeField behavior", () => {
       screen.queryByRole("textbox", { name: /Add Applicable Scope/i }),
     ).not.toBeInTheDocument();
   });
+
+  it("does not render a section help icon", () => {
+    renderWithProviders(<ApplicableScopeField {...baseProps} />);
+
+    expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
+  });
 });

tests/components/CommunicationMethodsScreenPersistence.test.tsx

@@ -77,6 +77,7 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
     );
 
     const dialog = await screen.findByRole("dialog");
+    expect(within(dialog).queryByAltText("Help")).not.toBeInTheDocument();
     const textboxes = within(dialog).getAllByRole("textbox");
     expect(textboxes.length).toBe(3);
     const corePrincipleField = textboxes[0] as HTMLTextAreaElement;

tests/components/CustomMethodCardFieldBlocksSummary.test.tsx

@@ -45,6 +45,7 @@ describe("CustomMethodCardFieldBlocksSummary", () => {
       }),
     ).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Upload" })).not.toBeInTheDocument();
+    expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
   });
 
   it("after remove, parent can pass cleared blocks and Upload shows again", () => {

tests/components/ModalTextAreaField.test.tsx

@@ -85,4 +85,29 @@ describe("ModalTextAreaField behavior", () => {
 
     expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled();
   });
+
+  it("does not render a section help icon by default", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        value=""
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
+  });
+
+  it("renders a section help icon when helpIcon is true", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        helpIcon
+        value=""
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByAltText("Help")).toBeInTheDocument();
+  });
 });

tests/unit/CardStack.test.jsx

@@ -65,6 +65,21 @@ describe("CardStack Component", () => {
     expect(screen.getAllByText("Option C").length).toBeGreaterThanOrEqual(1);
   });
 
+  test("hides helper icons on compact, expanded, and single-stack cards", () => {
+    const { unmount } = render(
+      <CardStack cards={SAMPLE_CARDS} expanded={false} />,
+    );
+    expect(screen.queryByText("?")).not.toBeInTheDocument();
+    unmount();
+
+    const expanded = render(<CardStack cards={SAMPLE_CARDS} expanded={true} />);
+    expect(screen.queryByText("?")).not.toBeInTheDocument();
+    expanded.unmount();
+
+    render(<CardStack cards={SAMPLE_CARDS} layout="singleStack" />);
+    expect(screen.queryByText("?")).not.toBeInTheDocument();
+  });
+
   test("expanded tiles use the compact 142px CardSelection height", () => {
     render(<CardStack cards={SAMPLE_CARDS} expanded={true} />);
 

tests/unit/Selection.test.jsx

@@ -54,6 +54,24 @@ describe("Selection Component", () => {
     expect(card).toHaveClass("flex-row");
   });
 
+  it("does not render a helper icon by default", () => {
+    render(<Selection {...defaultProps} orientation="vertical" />);
+
+    expect(screen.queryByText("?")).not.toBeInTheDocument();
+  });
+
+  it("renders a helper icon when showInfoIcon is true", () => {
+    render(
+      <Selection
+        {...defaultProps}
+        orientation="vertical"
+        showInfoIcon={true}
+      />,
+    );
+
+    expect(screen.getByText("?")).toBeInTheDocument();
+  });
+
   it("handles click events", () => {
     const handleClick = vi.fn();
     render(<Selection {...defaultProps} onClick={handleClick} />);