Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PageHeader: Add docs to primer.style and features to Storybook #2694

Merged
merged 7 commits into from
Jan 3, 2023

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Dec 15, 2022

Closes #1570

This PR adds mdx documentation for PageHeader and export the component in the draft bundle

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Dec 15, 2022

🦋 Changeset detected

Latest commit: 55cfa00

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@broccolinisoup broccolinisoup added the skip changeset This change does not need a changelog label Dec 15, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Dec 15, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 87.71 KB (+3.27% 🔺)
dist/browser.umd.js 88.37 KB (+3.3% 🔺)

@broccolinisoup broccolinisoup temporarily deployed to github-pages December 15, 2022 10:42 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 15, 2022 10:43 Inactive
import {PageHeader} from '@primer/react'
```

## Examples
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd restructure the sections to follow what we have for the other components (for example, ActionList):

## Examples

### With a title

### With a title and actions

<!-- all other examples -->

## Props

### PageHeader

Optional description of the component

<PropsTable>
<!-- props table content -->
</PropsTable>

### PageHeader.ContextArea

Optional description of the component

<PropsTable>
<!-- props table content -->
</PropsTable>

<!-- all other child elements -->


## Examples

### Anotomy of PageHeader
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of trying to explain the usage details of PageHeader components in the API docs, this should be covered in PageHeader interface guidelines in https://primer.style/design/. Sadly, we don't have these written yet.

When we provide a thorough set of examples, engineers can see how the parts of a PageHeader are meant to be used in live demos.

Copy link
Contributor

Choose a reason for hiding this comment

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

Here's what I'd recommend as a thorough set of examples:

## Examples

### Just has a title

### Title variant="large"

### Title with leading and trailing visuals

### With actions

### With description slot

### With navigation slot

### With a ContextArea with all possible children (only visible on mobile)

### With a ContextArea with all possible children (always visible)

Copy link
Member Author

Choose a reason for hiding this comment

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

Thank you so much @mperrotti! This is great. You are right, the initial structure I was thinking is more of an interface guideline content not so much API docs. I updated the docs accordingly and added storybook features as well. Looking forward to hearing your thoughts 🙌🏼

@broccolinisoup broccolinisoup temporarily deployed to github-pages December 28, 2022 09:21 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 28, 2022 09:22 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 02:24 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 02:24 Inactive
@broccolinisoup broccolinisoup removed the skip changeset This change does not need a changelog label Dec 29, 2022
@broccolinisoup broccolinisoup changed the title PageHeader: Docs structure proposal PageHeader: Add docs to primer.style Dec 29, 2022
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 03:24 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 03:24 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 03:41 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 03:42 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 04:11 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 04:12 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 04:38 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 04:38 Inactive
@broccolinisoup broccolinisoup changed the title PageHeader: Add docs to primer.style PageHeader: Add docs to primer.style and features to Storybook Dec 29, 2022
@broccolinisoup broccolinisoup temporarily deployed to github-pages December 29, 2022 04:54 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 December 29, 2022 04:54 Inactive
@broccolinisoup broccolinisoup marked this pull request as ready for review December 29, 2022 05:20
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 January 3, 2023 06:14 Inactive
@broccolinisoup broccolinisoup temporarily deployed to github-pages January 3, 2023 06:15 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2694 January 3, 2023 06:15 Inactive
@broccolinisoup broccolinisoup merged commit 5a65929 into main Jan 3, 2023
@broccolinisoup broccolinisoup deleted the bs/PageHeader-docs branch January 3, 2023 23:17
@primer-css primer-css mentioned this pull request Jan 3, 2023
colebemis pushed a commit that referenced this pull request Jan 21, 2023
* PageHeader: Docs structure

* Add descriptions to children

* Add features to storybook

* update NavList snapshots

* remove component export from the main bundle

* update snapshots
colebemis pushed a commit that referenced this pull request Jan 21, 2023
* PageHeader: Docs structure

* Add descriptions to children

* Add features to storybook

* update NavList snapshots

* remove component export from the main bundle

* update snapshots
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.

None yet

3 participants