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

feat(component): add description to Panel #1119

Merged
merged 2 commits into from
Feb 3, 2023

Conversation

jorgemoya
Copy link
Contributor

@jorgemoya jorgemoya commented Feb 1, 2023

What?

Add description to Panel component. Resolves #1109.

How?

I opted to allow the description a string or as a ReactNode. This will allow the flexibility to include links in the description. Let me know if we want to showcase the "custom" ReactNode functionality.

Should we include more do's and don'ts for this prop? @bigcommerce/product-design

Screenshots/Screen Recordings

screencapture-localhost-3000-panel-2023-02-01-15_08_10

Without description (remains the same):
Screenshot 2023-02-01 at 4 32 48 PM

Testing/Proof

Unit tests

@jorgemoya jorgemoya requested review from a team as code owners February 1, 2023 21:12
@jorgemoya jorgemoya requested a review from slsriehl February 1, 2023 21:12
Copy link
Contributor

@chanceaclark chanceaclark left a comment

Choose a reason for hiding this comment

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

Looks great!

🍹 Have we checked to see what a Panel with look like with aria-title instead of header + action + description? e.g.

<Panel aria-title="temp" action={...} description="Lorem ipsum..." />

{
name: 'description',
types: ['string', 'React.ReactNode'],
description: 'Appends a description.',
Copy link
Contributor

Choose a reason for hiding this comment

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

🍹

Suggested change
description: 'Appends a description.',
description: 'Appends a description below the header and action.',

Copy link
Contributor

@MariaJose MariaJose left a comment

Choose a reason for hiding this comment

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

👍🏼 !

@jorgemoya
Copy link
Contributor Author

Looks great!

🍹 Have we checked to see what a Panel with look like with aria-title instead of header + action + description? e.g.

<Panel aria-title="temp" action={...} description="Lorem ipsum..." />

Not exactly sure what you mean. 🤔

@chanceaclark
Copy link
Contributor

Nevermind @jorgemoya I was under the impression that we could have a panel with an action but without a header using aria-title instead.

@jorgemoya jorgemoya force-pushed the add-panel-description branch from d4dec53 to cb01b6c Compare February 2, 2023 16:10
@jorgemoya jorgemoya force-pushed the add-panel-description branch from cb01b6c to b48d97b Compare February 2, 2023 17:31
@jorgemoya jorgemoya merged commit 2038194 into bigcommerce:master Feb 3, 2023
@jorgemoya jorgemoya deleted the add-panel-description branch February 3, 2023 18:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Add description/subheader prop to Panel.
4 participants