chore: fixing text variants, adding style prop and changing as to asChild #148

georgewrmarshall · 2024-11-22T22:30:52Z

Description

This PR introduces several important updates to the Text component in the design system react:

Added a new style prop to allow inline styles when needed for more flexible styling
Fixes broken text variants BodySm and BodyXs with proper responsive font sizes
Added the asChild prop to enable better component composition while maintaining styles as mentioned in the technical spike
Added comprehensive documentation and examples for all new features

These changes improve the component's flexibility and maintainability while maintaining its core functionality.

Related issues

Fixes: #149

Manual testing steps

Go to Storybook and navigate to the Text component stories
Test each variant to ensure proper responsive behavior
Test the asChild prop with different elements (span, button, input)
Verify inline styles work correctly when applied
Test all existing functionality still works (colors, weights, transforms, etc.)

Screenshots/Recordings

Before

Text component had limited styling options and no composition capabilities

before720.mov

After

Improved responsive typography
Added component composition via asChild
Added inline style support
Added comprehensive documentation

after720.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

socket-security · 2024-11-22T22:32:06Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@radix-ui/[email protected]	Transitive: environment	`+2`	303 kB	vladmoroz

View full report↗︎

socket-security · 2024-11-22T22:32:08Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: npm/@radix-ui/[email protected], npm/@radix-ui/[email protected]

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

georgewrmarshall · 2024-11-22T22:37:45Z

packages/design-system-react/package.json

@@ -47,6 +47,7 @@
    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
  },
  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",


Utilizes Radix Slot, which provides asChild functionality. See the technical spike documentation or the Radix docs for more details.

georgewrmarshall · 2024-11-22T22:37:57Z

packages/design-system-react/src/components/text/README.mdx

@@ -185,37 +185,58 @@ Use the boolean `ellipsis` prop to make the `Text` component have an ellipsis.

 <Canvas of={TextStories.Ellipsis} />

-### As
+### AsChild


Updating docs

georgewrmarshall · 2024-11-22T22:41:48Z

packages/design-system-react/src/components/text/Text.constants.ts

+    'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm md:text-l-body-sm',
  [TextVariant.BodyXs]:
-    'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs',
+    'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs md:text-l-body-xs',


This fixes incorrect font sizes for BodySm and BodyXs

Before

before720.mov

After

after720.mov

georgewrmarshall · 2024-11-22T22:42:47Z

packages/design-system-react/src/components/text/Text.stories.tsx

@@ -159,19 +160,35 @@ export const Ellipsis: Story = {
  ),
 };

-export const As: Story = {
+export const AsChild: Story = {


Updating stories from As to AsChild

georgewrmarshall · 2024-11-22T22:42:54Z

packages/design-system-react/src/components/text/Text.test.tsx

@@ -56,10 +56,10 @@ describe('Text Component', () => {
    expect(container.firstChild).toHaveClass('truncate');
  });

-  it('renders with custom HTML element when as prop is provided', () => {
+  it('renders with asChild prop correctly', () => {


Updating tests

georgewrmarshall · 2024-11-22T22:46:54Z

packages/design-system-react/src/components/text/Text.types.ts

@@ -117,28 +123,6 @@ export enum TextAlign {
  Justify = 'text-justify',
 }

-export type ValidTag =


No longer needed as we can use the asChild prop

georgewrmarshall · 2024-11-22T22:48:05Z

@SocketSecurity ignore-all

Marked as acceptable risk as we are protected against supply chain attack with lavamoat

georgewrmarshall · 2024-11-23T01:35:22Z

packages/design-system-react/src/components/text/README.mdx


-### Strong


No longer supported we can add these styles to the root CSS stylesheet if we want all strong tags to be bold

georgewrmarshall · 2024-11-23T01:40:23Z

packages/design-system-react/src/components/text/Text.stories.tsx

+      <Text asChild className="block">
+        <span>Text rendered as span</span>
+      </Text>
+      <Text asChild className="block">
+        <button type="button" onClick={action('button-clicked')}>
+          Text rendered as button
+        </button>
+      </Text>
+      <Text asChild className="bg-default border border-default">
+        <input
+          type="text"
+          placeholder="Rendered as input"
+          defaultValue="Text component as input"
+        />


…child

georgewrmarshall · 2024-11-23T01:55:50Z

packages/design-system-react/src/components/text/Text.test.tsx

@@ -84,37 +83,6 @@ describe('Text Component', () => {
    });
  });

-  describe('HTML Elements', () => {


No longer using ValidTag so we can remove this test and rely on Radix's Slot

georgewrmarshall added the team-design-system label Nov 22, 2024

georgewrmarshall self-assigned this Nov 22, 2024

georgewrmarshall commented Nov 22, 2024

View reviewed changes

georgewrmarshall force-pushed the text-updates branch 2 times, most recently from 8486a80 to a39a11e Compare November 23, 2024 01:34

georgewrmarshall commented Nov 23, 2024

View reviewed changes

georgewrmarshall added 4 commits November 22, 2024 17:50

chore: fixing text variants, adding style prop and changing as to as …

2595ab7

…child

chore: add comment

a189b38

chore: updating docs

4aa61a2

chore: updating tests

f62ebe9

georgewrmarshall force-pushed the text-updates branch from a39a11e to f62ebe9 Compare November 23, 2024 01:55

georgewrmarshall commented Nov 23, 2024

View reviewed changes

georgewrmarshall marked this pull request as ready for review November 23, 2024 01:56

georgewrmarshall requested a review from a team as a code owner November 23, 2024 01:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: fixing text variants, adding style prop and changing as to asChild #148

chore: fixing text variants, adding style prop and changing as to asChild #148

georgewrmarshall commented Nov 22, 2024 •

edited

Loading

socket-security bot commented Nov 22, 2024 •

edited

Loading

socket-security bot commented Nov 22, 2024 •

edited

Loading

georgewrmarshall Nov 22, 2024 •

edited

Loading

georgewrmarshall Nov 22, 2024

georgewrmarshall Nov 22, 2024

georgewrmarshall Nov 22, 2024

georgewrmarshall Nov 22, 2024

georgewrmarshall Nov 22, 2024

georgewrmarshall commented Nov 22, 2024

georgewrmarshall Nov 23, 2024 •

edited

Loading

georgewrmarshall Nov 23, 2024

georgewrmarshall Nov 23, 2024


		### Strong

chore: fixing text variants, adding style prop and changing as to asChild #148

Are you sure you want to change the base?

chore: fixing text variants, adding style prop and changing as to asChild #148

Conversation

georgewrmarshall commented Nov 22, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

socket-security bot commented Nov 22, 2024 • edited Loading

socket-security bot commented Nov 22, 2024 • edited Loading

Next steps

georgewrmarshall Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Nov 22, 2024

Choose a reason for hiding this comment

georgewrmarshall Nov 22, 2024

Choose a reason for hiding this comment

Before

After

georgewrmarshall Nov 22, 2024

Choose a reason for hiding this comment

georgewrmarshall Nov 22, 2024

Choose a reason for hiding this comment

georgewrmarshall Nov 22, 2024

Choose a reason for hiding this comment

georgewrmarshall commented Nov 22, 2024

georgewrmarshall Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Nov 23, 2024

Choose a reason for hiding this comment

After

georgewrmarshall Nov 23, 2024

Choose a reason for hiding this comment

georgewrmarshall commented Nov 22, 2024 •

edited

Loading

socket-security bot commented Nov 22, 2024 •

edited

Loading

socket-security bot commented Nov 22, 2024 •

edited

Loading

georgewrmarshall Nov 22, 2024 •

edited

Loading

georgewrmarshall Nov 23, 2024 •

edited

Loading