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(Card)!: remove top-level sub-component(s) #1692

Merged
merged 2 commits into from
Jul 17, 2023

Conversation

booc0mtaco
Copy link
Contributor

Summary:

  • Combine card sub components into one file
  • update docs to reflect this new paradigm

Test Plan:

  • Wrote automated tests
  • CI tests / new tests are not applicable
  • Manually tested my changes, but I want to keep the details secret
  • Manually tested my changes, and here are the details:
    • ensure no snapshots change unexpectedly

@booc0mtaco booc0mtaco requested a review from a team July 17, 2023 18:04
- Combine card sub components into one file
- update docs to reflect this new paradigm
@booc0mtaco booc0mtaco force-pushed the aholloway/EFI-1222 branch from 7989f15 to ffd9806 Compare July 17, 2023 18:07
@jinlee93
Copy link
Contributor

Ugh just realized we have a folder spelling mistake .storybook/components/Docs/Guildelines guildelines

- Compound component children have an associated `.module.css` file, and child component styles will contain styles relevant to the subcomponent element (e.g. `AccordionPanel.module.css` would begin with `.accordion__panel { ... }`).
- Compound components are composed of a parent component (e.g. `<Card>`) and children component (e.g. `<Card.Header>` and `<Card.Footer>`).
- Compound component children names must always begin with the parent name. A parent component `Table` means that all child components related to it must begin with `Table` (such as `Table.Body`, `Table.Row` and `Table.Cell`).
- Compound component children combine their styles in a single `.module.css` file, and child component styles will contain styles relevant to the subcomponent element (e.g. `Accordion.module.css` would define styles `.accordion__panel { ... }`).
- Compound components never have an associated `.stories.tsx` file as they rely on the parent component's stories to render properly.
- Compound components should be re-exported from their parent component file for easier usage. For example, at the bottom of `Card.tsx`, add the lines:
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
- Compound components should be re-exported from their parent component file for easier usage. For example, at the bottom of `Card.tsx`, add the lines:
- Compound components should be exported as subcomponents from their parent component file for easier usage. For example, at the bottom of `Card.tsx`, add the lines:

- Compound component children names must always begin with the parent name. A parent component `Table` means that all child components related to it must begin with `Table` (such as `TableBody`, `TableRow` and `TableCell`).
- Compound component children have an associated `.module.css` file, and child component styles will contain styles relevant to the subcomponent element (e.g. `AccordionPanel.module.css` would begin with `.accordion__panel { ... }`).
- Compound components are composed of a parent component (e.g. `<Card>`) and children component (e.g. `<Card.Header>` and `<Card.Footer>`).
- Compound component children names must always begin with the parent name. A parent component `Table` means that all child components related to it must begin with `Table` (such as `Table.Body`, `Table.Row` and `Table.Cell`).
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
- Compound component children names must always begin with the parent name. A parent component `Table` means that all child components related to it must begin with `Table` (such as `Table.Body`, `Table.Row` and `Table.Cell`).
- Compound component children must be declared within the parent component file.
- Compound component children names must always begin with the parent name. A parent component `Table` means that all child components related to it must begin with `Table` (such as `Table.Body`, `Table.Row` and `Table.Cell`).

@codecov
Copy link

codecov bot commented Jul 17, 2023

Codecov Report

Merging #1692 (194be8f) into feature/EFI-1219 (3c1f8ed) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

@@                 Coverage Diff                  @@
##           feature/EFI-1219    #1692      +/-   ##
====================================================
- Coverage             92.93%   92.92%   -0.01%     
====================================================
  Files                   180      174       -6     
  Lines                  2843     2827      -16     
  Branches                716      716              
====================================================
- Hits                   2642     2627      -15     
  Misses                  184      184              
+ Partials                 17       16       -1     
Impacted Files Coverage Δ
src/index.ts 100.00% <ø> (ø)
src/components/Card/Card.tsx 100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@booc0mtaco
Copy link
Contributor Author

Ugh just realized we have a folder spelling mistake .storybook/components/Docs/Guildelines guildelines

good catch! I will fix this up in this PR

Copy link
Contributor

@jinlee93 jinlee93 left a comment

Choose a reason for hiding this comment

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

Sweet, thanks!

@booc0mtaco booc0mtaco merged commit 3ee6120 into feature/EFI-1219 Jul 17, 2023
@booc0mtaco booc0mtaco deleted the aholloway/EFI-1222 branch July 17, 2023 20:35
booc0mtaco added a commit that referenced this pull request Jul 19, 2023
- Combine card sub components into one file
- update docs to reflect this new paradigm
- rename directory and adjust copy
@booc0mtaco booc0mtaco mentioned this pull request Aug 14, 2023
booc0mtaco added a commit that referenced this pull request Aug 15, 2023
## [13.0.0](v12.4.2...v13.0.0) (2023-08-14)


### ⚠ BREAKING CHANGES

* **link:** remove text-link tokens for link t3 tokens (#1639)
* **colors:** remove old colors and convert to input and show figma token (#1711)
* remove deprecated dropdown (#1657)
* **banner:** remove component (#1702)
* remove legacy tokens and typography mixins (#1709)
* **Grid:** remove top-level sub-component(s) (#1703)
* **dragdrop:** remove top level subcomponents (#1697)
* **Fieldset:** remove top-level sub-component(s) (#1695)
* **HorizontalStepper:** remove top-level sub-component(s) (#1696)
* **Card:** remove top-level sub-component(s) (#1692)
* **checkbox:** remove top level subcomponents (#1693)
* **radio:** remove top level subcomponents (#1690)
* **DataBar:** remove top-level sub-component(s) (#1686)
* **Modal:** remove top-level sub-component(s) (#1689)
* **searchbar:** remove top level subcomponents (#1687)
* **table:** remove top-level sub-components (#1685)
* **toolbar:** remove component (#1683)
* **Breadcrumbs:** remove top-level sub-component (#1680)
* **timelinenav:** remove top-level sub-component (#1681)

### Features

* **Breadcrumbs:** remove top-level sub-component ([#1680](#1680)) ([669081d](669081d))
* **Card:** remove top-level sub-component(s) ([#1692](#1692)) ([7ec01f4](7ec01f4))
* **checkbox:** remove top level subcomponents ([#1693](#1693)) ([87b12e8](87b12e8))
* **DataBar:** remove top-level sub-component(s) ([#1686](#1686)) ([b4b9276](b4b9276))
* **dragdrop:** remove top level subcomponents ([#1697](#1697)) ([b4fd00c](b4fd00c))
* **Fieldset:** remove top-level sub-component(s) ([#1695](#1695)) ([0c8280d](0c8280d))
* **Grid:** remove top-level sub-component(s) ([#1703](#1703)) ([c8925c9](c8925c9))
* **HorizontalStepper:** remove top-level sub-component(s) ([#1696](#1696)) ([188fd99](188fd99))
* **Layout:** mark layout components as deprecated ([#1700](#1700)) ([930a369](930a369))
* **Modal:** remove top-level sub-component(s) ([#1689](#1689)) ([8743e62](8743e62))
* **radio:** remove top level subcomponents ([#1690](#1690)) ([82da617](82da617))
* remove legacy tokens and typography mixins ([#1709](#1709)) ([ec3e819](ec3e819))
* **searchbar:** remove top level subcomponents ([#1687](#1687)) ([d13bb6c](d13bb6c))
* **table:** remove top-level sub-components ([#1685](#1685)) ([742a530](742a530))
* **timelinenav:** remove top-level sub-component ([#1681](#1681)) ([f46eca7](f46eca7))


### Bug Fixes

* **Avatar:** support display names using emoji and multi-byte ([#1716](#1716)) ([1294022](1294022))
* update token exports ([#1722](#1722)) ([982c55f](982c55f))


* **banner:** remove component ([#1702](#1702)) ([356550c](356550c))
* **colors:** remove old colors and convert to input and show figma token ([#1711](#1711)) ([c9a5079](c9a5079))
* **link:** remove text-link tokens for link t3 tokens ([#1639](#1639)) ([d35cfe4](d35cfe4))
* remove deprecated dropdown ([#1657](#1657)) ([26d1694](26d1694))
* **toolbar:** remove component ([#1683](#1683)) ([bd47899](bd47899))
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.

2 participants