Skip to content

Conversation

@georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented May 11, 2025

Description

This PR fixes documentation issues in Typograpgy and ButtonBase README.mdx file. The changes include:

  1. Removing the redundant <Meta> tag that was causing documentation display issues
  2. Repositioning the <Canvas> element to appear after the code example, maintaining a consistent pattern with other component documentation

These changes improve the readability and consistency of the component documentation in Storybook.

Related issues

Fixes: N/A

Manual testing steps

  1. Go to the Storybook documentation for the Typography and ButtonBase docs page
  2. Verify the component documentation renders correctly without errors
  3. Confirm the example code appears before the interactive canvas example

Screenshots/Recordings

Before

Documentation had incorrect placement of Storybook elements causing display issues.

Screenshot 2025-05-11 at 1 02 55 PM Screenshot 2025-05-11 at 12 59 40 PM

After

Documentation follows consistent pattern with properly organized sections and examples.

Screenshot 2025-05-11 at 12 59 49 PM

Typography stories render as expected

Screenshot 2025-05-11 at 1 01 20 PM

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've applied the right labels on the PR

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Comment on lines 4 to +16

<Meta of={ButtonBaseStories} />

# ButtonBase

`ButtonBase` is a labeled element that a user can click or tap to initiate an action.

<Canvas of={ButtonBaseStories.Default} />

```tsx
import { ButtonBase } from '@metamask/design-system-react';

<ButtonBase onClick={() => {}}>Button Base</ButtonBase>;
```

<Canvas of={ButtonBaseStories.Default} />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removes <Meta and rearranging Canvas to show after code example

import { Meta, Canvas, Story } from '@storybook/blocks';
import * as TypographyStories from './Typography.stories';

<Meta of={TypographyStories} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remvoing last remaning <Meta from repo

Screenshot 2025-05-11 at 1 02 10 PM

@georgewrmarshall georgewrmarshall marked this pull request as ready for review May 11, 2025 03:44
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner May 11, 2025 03:44
@georgewrmarshall georgewrmarshall merged commit 7b14a9a into main May 14, 2025
36 checks passed
@georgewrmarshall georgewrmarshall deleted the fix/button-base-readme branch May 14, 2025 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants