feat(Timeline): Convert Timeline to CSS modules behind team feature flag by francinelucca · Pull Request #5329 · primer/react

francinelucca · 2024-11-22T18:51:00Z

Closeshttps://github.com/github/primer/issues/4366

Changelog

New

Timeline dev story to test sx and style props with VRT
Timeline module css
Snapshots for new dev story
Tests for Timeline.Break and Timeline.Body
className support tests for all Timeline components

Changed

Refactor Timeline e2e tests and add new dev story
Refactor Timeline to use CSS modules when team feature flag is turned on
Deprecate TimelineItemsProps in favor of TimelineItemProps

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

github-actions · 2024-11-22T18:51:33Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2024-11-22T18:55:12Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	102.74 KB (+0.21% 🔺)
packages/react/dist/browser.umd.js	103.02 KB (+0.19% 🔺)

francinelucca · 2024-11-22T18:53:29Z

+ /* TODOl not quite sure if this is the correct migration for this line */
+ background-color: var(--timelineBadge-bgColor);


Can I get a check on this line? I wasn't quite sure what the correct mapping was here. i pulled the --timelineBadge-bgColor from the computer styles in production

francinelucca · 2024-11-22T18:54:59Z

+ it('should support `className` on the outermost element', () => {
+ const Element = () => <Timeline.Badge className={'test-class-name'} />
+ const FeatureFlagElement = () => {
+ return (
+ <FeatureFlags
+ flags={{
+ primer_react_css_modules_team: true,
+ primer_react_css_modules_staff: true,
+ primer_react_css_modules_ga: true,
+ }}
+ >
+ <Element />
+ </FeatureFlags>
+ )
+ }
+ expect(HTMLRender(<FeatureFlagElement />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+ })
+})


The sx-compliant Timeline.Badge doesn't support className, I thought it'd make sense to add it to the css modules refactor and therefore I'm only testing for that one here, but lmk if that doesn't make sense and I can revert!

francinelucca · 2024-11-22T18:56:14Z

+/**
+ * @deprecated Use the `TimelineItemProps` type instead
+ */
+export type TimelineItemsProps = StyledTimelineItemProps & HTMLProps<HTMLDivElement>
+
+export type TimelineItemProps = StyledTimelineItemProps & HTMLProps<HTMLDivElement>


It seems to me the "correct" prop name would be TimelineItemProps singular, so I'm proposing deprecating TimelineItemsProps in favor of TimelineItemProps. Would love to hear thoughts on this one

changeset-bot · 2024-11-22T18:59:53Z

🦋 Changeset detected

Latest commit: db6b3eb

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

…er/react into 4366-update-timeline-to-css-modules

primer-integration · 2024-11-22T20:33:08Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/352333

primer-integration · 2024-11-22T20:48:31Z

🟢 golden-jobs completed with status success.

langermank

Just a few nitpicks! The color vars look good 👍

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

github-actions · 2024-11-25T18:00:28Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

github-actions · 2024-11-25T18:00:45Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2024-11-25T18:01:00Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2024-11-25T18:01:18Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

feat(Timeline): Convert Popover to CSS modules behind team feature flag
795d40d

francinelucca added component: Timeline update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Nov 22, 2024

github-actionsBot added the staff Author is a staff member label Nov 22, 2024

francinelucca added component: TimelineItem status: wip and removed staff Author is a staff member labels Nov 22, 2024

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 22, 2024

francinelucca temporarily deployed to github-pages November 22, 2024 18:52 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5329 November 22, 2024 18:54 Inactive

francinelucca commented Nov 22, 2024
View reviewed changes

test(vrt): update snapshots
fab0989

github-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 22, 2024

francinelucca added 2 commits November 22, 2024 14:00

chore(Timeline): add changeset and small format fixes
2fcfebd

Merge branch '4366-update-timeline-to-css-modules' of github.com:prim…
4f9178d
…er/react into 4366-update-timeline-to-css-modules

francinelucca temporarily deployed to github-pages November 22, 2024 19:03 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5329 November 22, 2024 19:05 Inactive

github-actionsBot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Nov 22, 2024

Merge branch 'main' into 4366-update-timeline-to-css-modules
cfebf83

francinelucca temporarily deployed to github-pages November 22, 2024 20:21 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5329 November 22, 2024 20:23 Inactive

github-actionsBot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Nov 22, 2024

francinelucca removed the status: wip label Nov 22, 2024

francinelucca added the status: review needed label Nov 22, 2024

francinelucca marked this pull request as ready for review November 22, 2024 22:06

francinelucca requested review from a team as code owners November 22, 2024 22:06

francinelucca requested review from jonrohan and tbenning November 22, 2024 22:06

francinelucca added the staff Author is a staff member label Nov 25, 2024

jonrohan approved these changes Nov 25, 2024
View reviewed changes

langermank approved these changes Nov 25, 2024
View reviewed changes

Comment threadpackages/react/src/Timeline/Timeline.module.css Outdated
Comment threadpackages/react/src/Timeline/Timeline.module.css Outdated
Comment threadpackages/react/src/Timeline/Timeline.module.css Outdated

francineluccaand others added 2 commits November 25, 2024 12:59

Update packages/react/src/Timeline/Timeline.module.css
e59f4b3
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

Update packages/react/src/Timeline/Timeline.module.css
f554d30
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 25, 2024

Update packages/react/src/Timeline/Timeline.module.css
b1899bc
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 25, 2024

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 25, 2024

Merge branch 'main' into 4366-update-timeline-to-css-modules
db6b3eb

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 25, 2024

francinelucca deployed to github-pages November 25, 2024 18:02 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-5329 November 25, 2024 18:02 Inactive

francinelucca added this pull request to the merge queue Nov 25, 2024

github-merge-queueBot removed this pull request from the merge queue due to failed status checks Nov 25, 2024

francinelucca added this pull request to the merge queue Nov 25, 2024

Merged via the queue into main with commit e7547e8Nov 25, 2024

francinelucca deleted the 4366-update-timeline-to-css-modules branch November 25, 2024 20:22

primerBot mentioned this pull request Nov 25, 2024
Release tracking (37.6.0) #5296
Merged

		/* TODOl not quite sure if this is the correct migration for this line */
		background-color: var(--timelineBadge-bgColor);

Uh oh!

Conversation

francinelucca commented Nov 22, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

github-actionsBot commented Nov 22, 2024

Uh oh!

github-actionsBot commented Nov 22, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

francineluccaNov 22, 2024

Choose a reason for hiding this comment

Uh oh!

francineluccaNov 22, 2024

Choose a reason for hiding this comment

Uh oh!

francineluccaNov 22, 2024

Choose a reason for hiding this comment

Uh oh!

changeset-botBot commented Nov 22, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

primer-integrationBot commented Nov 22, 2024

Uh oh!

primer-integrationBot commented Nov 22, 2024

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Nov 25, 2024

Uh oh!

github-actionsBot commented Nov 25, 2024

Uh oh!

github-actionsBot commented Nov 25, 2024

Uh oh!

github-actionsBot commented Nov 25, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Nov 22, 2024•
edited
Loading

github-actionsBot commented Nov 22, 2024•
edited
Loading

changeset-botBot commented Nov 22, 2024•
edited
Loading