Skip to content

[codex] Expose supported Modal panel styling - #30

Merged
JSv4 merged 1 commit into
mainfrom
fix/modal-panel-api-29
May 28, 2026
Merged

[codex] Expose supported Modal panel styling#30
JSv4 merged 1 commit into
mainfrom
fix/modal-panel-api-29

Conversation

@JSv4

@JSv4 JSv4 commented May 28, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add panelClassName as a public Modal panel styling hook.
  • Make the existing panel-targeted className and style behavior explicit in the Modal props.
  • Add coverage proving panel props land on the dialog panel while overlayClassName stays on the backdrop.
  • Document the supported panel styling pattern and add a Storybook example for custom panel width.

Rationale

Issue #29 correctly identifies that consumers should not have to target the internal .oc-modal selector. The current implementation already forwarded className and style to the panel, so this keeps that existing contract instead of adding a redundant maxWidth prop. The new panelClassName provides a named escape hatch that mirrors overlayClassName and makes the target unambiguous.

Closes #29

Validation

  • npx vitest run src/Modal/Modal.test.tsx
  • npx vitest run src/Modal/Modal.test.tsx src/Dropdown/Dropdown.test.tsx src/Table/Table.test.tsx
  • npx tsc --noEmit
  • npm run build
  • npm run lint (passes with existing warnings, no errors)

@JSv4
JSv4 marked this pull request as ready for review May 28, 2026 05:19
@JSv4
JSv4 merged commit 3a31291 into main May 28, 2026
4 checks passed
@JSv4
JSv4 deleted the fix/modal-panel-api-29 branch May 28, 2026 05:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Modal: no supported API for arbitrary max-width / panel className — consumers reach for internal .oc-modal selector

1 participant