docs(controls): document OR logic workaround for conditional controls

[nielskaspers]

Summary

Documents the duplicate-key workaround for achieving OR logic with conditional controls (if field) in argTypes. The if field only supports a single condition, but users can declare multiple argType keys with the same name and different if conditions to show a control when any one of multiple args is active.

Issue

Fixes #34507

Changes

• Added a callout noting the single-condition limitation of if
• Added a "Multiple conditions (OR logic)" subsection with an inline example showing the duplicate-key pattern
• Documented how to merge the values in the render function and the caveat about independent default values

Testing

• Verified the MDX renders correctly by reviewing the raw markup
• No code changes; documentation only

Summary by CodeRabbit

• Documentation
  • Clarified that conditional controls support only a single condition with no built-in OR/AND combination.
  • Added a practical workaround for implementing multiple conditions using OR logic by defining multiple control entries, each with its own conditional clause.
  • Provided example code and behavior guidance for toggling between independent conditional controls.

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation updated to explain that the if field in conditional controls supports only single conditions. A workaround is introduced using multiple argTypes entries sharing the same name with individual if clauses, merged via the story's render function to achieve OR logic.

Changes

Cohort / File(s)	Summary
Documentation docs/essentials/controls.mdx	Added explanation of conditional control limitations and introduced a workaround pattern for implementing OR logic across multiple conditions using multiple argTypes with shared names and individual if clauses.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/essentials/controls.mdx (1)

455-456: Clarify that this can show duplicate controls when both conditions are true.

The wording says these entries “render as a single control,” but with two independent keys, both controls can appear simultaneously if both if conditions pass. Please rephrase to avoid implying deduplication in the panel.

Suggested doc wording

-If you need to show a control when **any one of multiple args** is active, you can work around the single-condition limitation by declaring multiple argType keys that share the same `name`. Each key has its own `if` condition, but they render as a single control in the panel.
+If you need to show a control when **any one of multiple args** is active, you can work around the single-condition limitation by declaring multiple argType keys that share the same `name`. Each key has its own `if` condition.
+If multiple conditions are true at the same time, multiple controls (with the same label) can be shown.

Also applies to: 488-489

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/essentials/controls.mdx` around lines 455 - 456, The sentence claiming
multiple argType keys "render as a single control" is misleading — change the
wording in the paragraph that describes declaring multiple argType keys that
share the same `name` so it clarifies that while keys share a name and will map
to the same control slot, both controls can appear simultaneously if more than
one `if` condition evaluates to true; update the phrasing (and the similar text
at the other occurrence) to state that duplicates are possible unless you ensure
the `if` conditions are mutually exclusive or otherwise deduplicate on the
consumer side.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/essentials/controls.mdx`:
- Around line 483-484: The example uses `const hasOverline =
args['loading.hasOverline_label'] || args['loading.hasOverline_value']`, which
can yield undefined instead of a boolean; change the merge to explicitly coerce
to boolean (e.g., use double-negation or Boolean()) when computing hasOverline
so the MyComponent prop loading={{ hasOverline }} always receives a true/false
value; update the expression that reads from args (the hasOverline assignment)
accordingly.

---

Nitpick comments:
In `@docs/essentials/controls.mdx`:
- Around line 455-456: The sentence claiming multiple argType keys "render as a
single control" is misleading — change the wording in the paragraph that
describes declaring multiple argType keys that share the same `name` so it
clarifies that while keys share a name and will map to the same control slot,
both controls can appear simultaneously if more than one `if` condition
evaluates to true; update the phrasing (and the similar text at the other
occurrence) to state that duplicates are possible unless you ensure the `if`
conditions are mutually exclusive or otherwise deduplicate on the consumer side.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0a767a1e-3676-4ca2-af08-68827405123b

📥 Commits

Reviewing files that changed from the base of the PR and between 7022915 and f95eefc.

📒 Files selected for processing (1)

• docs/essentials/controls.mdx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Use explicit boolean coercion in the merge example.

a || b may produce undefined when both values are falsy/unset. For a boolean prop example, use explicit coercion.

Suggested example tweak

-render: (args) => {
-  const hasOverline = args['loading.hasOverline_label'] || args['loading.hasOverline_value'];
+render: (args) => {
+  const hasOverline = Boolean(
+    args['loading.hasOverline_label'] || args['loading.hasOverline_value']
+  );
   return <MyComponent loading={{ hasOverline }} />;
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const hasOverline = args['loading.hasOverline_label'] || args['loading.hasOverline_value'];
	return <MyComponent loading={{ hasOverline }} />;
	const hasOverline = Boolean(
	args['loading.hasOverline_label'] || args['loading.hasOverline_value']
	);
	return <MyComponent loading={{ hasOverline }} />;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/essentials/controls.mdx` around lines 483 - 484, The example uses `const
hasOverline = args['loading.hasOverline_label'] ||
args['loading.hasOverline_value']`, which can yield undefined instead of a
boolean; change the merge to explicitly coerce to boolean (e.g., use
double-negation or Boolean()) when computing hasOverline so the MyComponent prop
loading={{ hasOverline }} always receives a true/false value; update the
expression that reads from args (the hasOverline assignment) accordingly.