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

Add a title slot to the Card component #1638

Merged
merged 7 commits into from
Nov 2, 2023
Merged

Conversation

kjohn1922
Copy link
Contributor

@kjohn1922 kjohn1922 commented Nov 1, 2023

Pull Request

Add a title slot for the nimble-card component.

See #296 and the nimble-card spec for more information.

🤨 Rationale

The title slot in the nimble-card component will make it easy for clients to add a title with the correct styling and to enforce consistency across usages.

The style itself is still a placeholder. We'll apply styles from a visual design in a future PR, before releasing the Routines UI with the card component.

👩‍💻 Implementation

  • Add a slot with name="title" to the nimble-card template
  • Add a style to apply a title font to the title slot (placeholder, may require additional styling from visual design)
  • For accessibility, put a section at the root of the component template
    • Use display: contents to allow the host display settings to apply directly to the slotted content.
  • Add a title to the matrix stories
  • Add a configurable title to the storybook page.
    • Modeled after the nimble-banner with similar description text for the title.

🧪 Testing

Updated storybook and matrix tests:

image
image

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

packages/nimble-components/src/card/styles.ts Outdated Show resolved Hide resolved
packages/nimble-components/src/card/styles.ts Outdated Show resolved Hide resolved
packages/nimble-components/src/card/tests/card.stories.ts Outdated Show resolved Hide resolved
@kjohn1922 kjohn1922 marked this pull request as ready for review November 1, 2023 20:20
@kjohn1922 kjohn1922 merged commit 67a2e37 into main Nov 2, 2023
9 checks passed
@kjohn1922 kjohn1922 deleted the users/kelseyj/card-title branch November 2, 2023 17:02
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.

4 participants