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 Heading and Text components #510

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Add Heading and Text components #510

wants to merge 21 commits into from

Conversation

mkernohanbc
Copy link
Contributor

This PR implements the RAC Heading and Text utility components into the B.C. Design System:

Screenshot 2024-12-12 at 10 49 01

These components are intended to be used internally within other components, and to provide a straightforward way for users to compose sections of content within their interfaces using the BCDS typescale.

Both components are styled. The color prop enables the user to set text colour, from the design system's colour palette. Content is populated via the children slot.

The user can override styling using these props:

  • className: replaces BCDS CSS class
  • isUnstyled: removes CSS classes entirely, allowing components to inherit their styling from parent elements

Heading

Heading also accepts these props:

  • level: used to set the heading type, from h1 to h6

Text

Text also accepts these props:

  • elementType: sets the type of HTML element rendered (defaults to span)
  • size: sets the text size (defaults to medium, also includes large and small)

mkernohanbc and others added 17 commits December 4, 2024 17:35
* staging Accordion and AccordionGroup file structure

* bump RAC to 1.4.0

* basic shape of Accordion component

* tweak props import

* add story wireframe for Accordion

* styling accordion

* styling

* additional styling and alternative icon implementation

* refining button styling

* scaffolding AccordionGroup

* add title prop and styling to AccordionGroup

* continuing work on Accordion and AccordionGroup styling

* fix focus state for accordions inside accordiongroup

* fleshing out argTypes

* scaffolding accordion docs

* add examples to vite kitchen sink

* fleshing out examples on vite

* expanding stories and docs

* stories and docs

* typo

* renaming CSS classes to bcds-react-aria-* to match convention

* typo

* add comments to accordion group props

* remove unused CSS class

* bump RAC to 1.5.0

* update RAC imports
* bump RAC to 1.5.0

* replace Section with ListBoxSection

* Revert "bump RAC to 1.5.0"

This reverts commit 75e05e7.

* Reapply "bump RAC to 1.5.0"

This reverts commit 0edc443.
@mkernohanbc mkernohanbc added the enhancement New feature or request label Dec 12, 2024
@mkernohanbc mkernohanbc added this to the Components v0.5.0 milestone Dec 12, 2024
@mkernohanbc mkernohanbc self-assigned this Dec 12, 2024
@mkernohanbc mkernohanbc marked this pull request as ready for review December 12, 2024 19:06
Copy link
Contributor

@Supriya-Arora Supriya-Arora left a comment

Choose a reason for hiding this comment

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

For Text component, it will be great if we can handle error scenario when elementType is blank/null.
image

@mkernohanbc
Copy link
Contributor Author

For Text component, it will be great if we can handle error scenario when elementType is blank/null.

Fixed in 5504f6f!

@Supriya-Arora Supriya-Arora self-requested a review January 31, 2025 00:42
Copy link
Contributor

@Supriya-Arora Supriya-Arora 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! 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants