feat(TextInput): Update TextInput to use data attributes for styling #5242

hussam-i-am · 2024-11-06T17:19:15Z

Relates to https://github.com/github/primer/issues/4365

Changelog

New

Changed

As a precursor to feat(TextInput): Convert TextInput to CSS module behind feature flag #5227, updated the styled components to use data attributes for styling and moved away from using the functions
Replaced get calls with CSS variables and removed fallbacks
Updated test helper to include the data attributes
Updated snapshots to reflect reordered styles and CSS variables

Removed

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

Not sure if it is a known issue but it seems that passing in small for size does not currently do anything, whereas with the changes made, we are getting smaller inputs

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)

changeset-bot · 2024-11-06T17:19:19Z

🦋 Changeset detected

Latest commit: 779c1f3

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

github-actions · 2024-11-06T17:19:49Z

👋 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-06T17:22:31Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.55 KB (+0.06% 🔺)
packages/react/dist/browser.umd.js	99.09 KB (+0.29% 🔺)

hussam-i-am · 2024-11-06T17:35:00Z

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

-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
-    expect(blockStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(defaultStyles).not.toEqual(expect.objectContaining(expectedStyles))
+    expect(blockStyles).toEqual(expect.objectContaining(expectedStyles))


Update so that variables accurately reflect what is being tests.

hussam-i-am · 2024-11-06T17:35:30Z

packages/react/src/internal/components/TextInputWrapper.tsx

@@ -56,56 +16,37 @@ export type StyledBaseWrapperProps = {
  isInputFocused?: boolean
  monospace?: boolean
  validationStatus?: FormValidationStatus
+  /** @deprecated Use `size` prop instead */
+  variant?: TextInputSizes
+  size?: TextInputSizes


Moved into the base props since that is where they are being used

…am/text-input-data-attrs

hussam-i-am · 2024-11-07T00:18:28Z

packages/react/src/internal/components/TextInputWrapper.tsx

+    ${minWidth}
+    ${maxWidth}
+    ${sx}
+  }


Wrapped in & {...} to ensure it has greater specificity than data attributes for passed in sx prors

hussam-i-am · 2024-11-07T00:18:39Z

packages/react/src/internal/components/TextInputWrapper.tsx

-  ${sx};
+  & {
+    ${sx}
+  }


Wrapped in & {...} to ensure it has greater specificity than data attributes for passed in sx prors

primer-integration · 2024-11-07T00:48:35Z

🔴 golden-jobs completed with status failure.

jonrohan

this change looks good to me, wanna tag in @joshblack to get his review

primer-integration · 2024-11-08T05:17:43Z

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

chore(TextInput): Update TextInput to use data attributes for styling

669d8f9

hussam-i-am self-assigned this Nov 6, 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 6, 2024

hussam-i-am temporarily deployed to github-pages November 6, 2024 17:21 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 17:21 Inactive

remove variant functions

19d0b08

hussam-i-am temporarily deployed to github-pages November 6, 2024 17:33 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 17:33 Inactive

hussam-i-am commented Nov 6, 2024

View reviewed changes

add data attrs

51aed91

hussam-i-am temporarily deployed to github-pages November 6, 2024 17:39 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 17:40 Inactive

hussam-i-am added 3 commits November 6, 2024 20:15

Merge branch 'main' of https://github.com/primer/react into hussam-i-…

b475780

…am/text-input-data-attrs

update jest snapshots

e3617ee

changeset

6a241ce

hussam-i-am temporarily deployed to github-pages November 6, 2024 20:20 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 20:20 Inactive

add width to block

6db3a71

hussam-i-am temporarily deployed to github-pages November 6, 2024 20:50 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 20:51 Inactive

hussam-i-am added 2 commits November 6, 2024 23:51

add higher specificity to passing in sx

189a565

update snapshots

e902102

hussam-i-am temporarily deployed to github-pages November 6, 2024 23:58 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 6, 2024 23:58 Inactive

revert success border color

d99cd58

hussam-i-am temporarily deployed to github-pages November 7, 2024 00:09 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 7, 2024 00:10 Inactive

hussam-i-am marked this pull request as ready for review November 7, 2024 00:17

hussam-i-am requested a review from a team as a code owner November 7, 2024 00:17

hussam-i-am requested a review from TylerJDev November 7, 2024 00:17

hussam-i-am commented Nov 7, 2024

View reviewed changes

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 7, 2024

jonrohan approved these changes Nov 7, 2024

View reviewed changes

Merge branch 'main' into hussam-i-am/text-input-data-attrs

0a463f2

hussam-i-am requested a review from joshblack November 7, 2024 18:58

hussam-i-am temporarily deployed to github-pages November 7, 2024 19:00 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 7, 2024 19:00 Inactive

Merge branch 'main' into hussam-i-am/text-input-data-attrs

fef5246

hussam-i-am temporarily deployed to github-pages November 7, 2024 23:10 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 7, 2024 23:10 Inactive

Merge branch 'main' into hussam-i-am/text-input-data-attrs

05973c0

hussam-i-am temporarily deployed to github-pages November 7, 2024 23:49 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5242 November 7, 2024 23:49 Inactive

Merge branch 'main' into hussam-i-am/text-input-data-attrs

779c1f3

hussam-i-am deployed to github-pages November 8, 2024 04:54 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5242 November 8, 2024 04:54 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(TextInput): Update TextInput to use data attributes for styling #5242

feat(TextInput): Update TextInput to use data attributes for styling #5242

hussam-i-am commented Nov 6, 2024

changeset-bot bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024

github-actions bot commented Nov 6, 2024 •

edited

Loading

hussam-i-am Nov 6, 2024

hussam-i-am Nov 6, 2024

hussam-i-am Nov 7, 2024

hussam-i-am Nov 7, 2024

primer-integration bot commented Nov 7, 2024 •

edited

Loading

jonrohan left a comment

primer-integration bot commented Nov 8, 2024

feat(TextInput): Update TextInput to use data attributes for styling #5242

Are you sure you want to change the base?

feat(TextInput): Update TextInput to use data attributes for styling #5242

Conversation

hussam-i-am commented Nov 6, 2024

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

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

🦋 Changeset detected

github-actions bot commented Nov 6, 2024

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

size-limit report 📦

hussam-i-am Nov 6, 2024

Choose a reason for hiding this comment

hussam-i-am Nov 6, 2024

Choose a reason for hiding this comment

hussam-i-am Nov 7, 2024

Choose a reason for hiding this comment

hussam-i-am Nov 7, 2024

Choose a reason for hiding this comment

primer-integration bot commented Nov 7, 2024 • edited Loading

jonrohan left a comment

Choose a reason for hiding this comment

primer-integration bot commented Nov 8, 2024

changeset-bot bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

primer-integration bot commented Nov 7, 2024 •

edited

Loading