feat(Timeline): Convert Timeline to CSS modules behind team feature flag #5329

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

Closes https://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

packages/react/src/Timeline/Timeline.module.css

+    /* 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

packages/react/src/Timeline/__tests__/Timeline.test.tsx

+  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

packages/react/src/Timeline/Timeline.tsx

+/**
+ * @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 👍

packages/react/src/Timeline/Timeline.module.css

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 labels Nov 22, 2024

github-actions bot 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-actions bot 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-actions bot temporarily 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-actions bot removed the update snapshots 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-actions bot temporarily deployed to storybook-preview-5329 November 22, 2024 19:05 Inactive

github-actions bot 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-actions bot temporarily deployed to storybook-preview-5329 November 22, 2024 20:23 Inactive

github-actions bot 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 tbenning and jonrohan 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

packages/react/src/Timeline/Timeline.module.css Outdated Show resolved Hide resolved

packages/react/src/Timeline/Timeline.module.css Outdated Show resolved Hide resolved

packages/react/src/Timeline/Timeline.module.css Outdated Show resolved Hide resolved

francinelucca and 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-actions bot 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-actions bot 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-actions bot 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-actions bot 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-actions bot deployed to storybook-preview-5329 November 25, 2024 18:02 View deployment

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

github-merge-queue bot 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 e7547e8 Nov 25, 2024
43 checks passed

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

primer bot mentioned this pull request Nov 25, 2024

Release tracking (37.6.0) #5296

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Timeline): Convert Timeline to CSS modules behind team feature flag #5329

feat(Timeline): Convert Timeline to CSS modules behind team feature flag #5329

francinelucca commented Nov 22, 2024 •

edited

Loading

github-actions bot commented Nov 22, 2024

github-actions bot commented Nov 22, 2024 •

edited

Loading

francinelucca Nov 22, 2024

francinelucca Nov 22, 2024

francinelucca Nov 22, 2024

changeset-bot bot commented Nov 22, 2024 •

edited

Loading

primer-integration bot commented Nov 22, 2024

primer-integration bot commented Nov 22, 2024

langermank left a comment

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

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

feat(Timeline): Convert Timeline to CSS modules behind team feature flag #5329

feat(Timeline): Convert Timeline to CSS modules behind team feature flag #5329

Conversation

francinelucca commented Nov 22, 2024 • edited Loading

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

github-actions bot commented Nov 22, 2024

github-actions bot commented Nov 22, 2024 • edited Loading

size-limit report 📦

francinelucca Nov 22, 2024

Choose a reason for hiding this comment

francinelucca Nov 22, 2024

Choose a reason for hiding this comment

francinelucca Nov 22, 2024

Choose a reason for hiding this comment

changeset-bot bot commented Nov 22, 2024 • edited Loading

🦋 Changeset detected

primer-integration bot commented Nov 22, 2024

primer-integration bot commented Nov 22, 2024

langermank left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

github-actions bot commented Nov 25, 2024

francinelucca commented Nov 22, 2024 •

edited

Loading

github-actions bot commented Nov 22, 2024 •

edited

Loading

changeset-bot bot commented Nov 22, 2024 •

edited

Loading