Repository: marigold-ui/marigold
Pull request #3137 (2023-07-14 09:31:30)

fix: `<Text>` component doesn't enforce defaults

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 1a3aa3489d08a5080295fadeef590ca184c53022

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/fix-text?filename=.changeset/thirty-suits-wait.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afix%3A%20%60%3CText%3E%60%20component%20doesn't%20enforce%20defaults%0A)


vercel[bot]: [vc]: #nnbWrY9vPjHzm416MbHt0DuFLOcXLqYbS2f9FMCXXq0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9tYXJpZ29sZC9tYXJpZ29sZC84dzhON1Z2UkNiUjlDSkV0ZXhQY0x4djlMTDdlIiwicHJldmlld1VybCI6Im1hcmlnb2xkLWdpdC1maXgtdGV4dC1tYXJpZ29sZC52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn0seyJuYW1lIjoibWFyaWdvbGQtZG9jcyIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9tYXJpZ29sZC9tYXJpZ29sZC1kb2NzLzJvajg4NHRvb0JkZ2hDcUt4bXJSZDc3ZW1ZdnoiLCJwcmV2aWV3VXJsIjoibWFyaWdvbGQtZG9jcy1naXQtZml4LXRleHQtbWFyaWdvbGQudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold/8w8N7VvRCbR9CJEtexPcLxv9LL7e)) | [Visit Preview](https://marigold-git-fix-text-marigold.vercel.app) | Jul 14, 2023 9:31am |
| **marigold-docs** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold-docs/2oj884tooBdghCqKxmrRd77emYvz)) | [Visit Preview](https://marigold-docs-git-fix-text-marigold.vercel.app) | Jul 14, 2023 9:31am |



codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3137](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (1e5771c) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/ad49cb412d51bfffec75017bb5188f4e35ac7255?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (ad49cb4) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3137   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          110       110           
  Lines         6885      6885           
  Branches       310       315    +5     
=========================================
  Hits          6885      6885           
```

| [Impacted Files](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | Coverage Δ | |
|---|---|---|
| [packages/components/src/Text/Text.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3137?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvVGV4dC9UZXh0LnRzeA==) | `100.00% <100.00%> (ø)` | |


Patch:
diff --git a/.changeset/nervous-rules-admire.md b/.changeset/nervous-rules-admire.md
new file mode 100644
index 000000000..9e50863e4
--- /dev/null
+++ b/.changeset/nervous-rules-admire.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: `<Text>` component doesn't enforce defaults
diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx
index d6ec01d6e..3e20181c6 100644
--- a/packages/components/src/Text/Text.tsx
+++ b/packages/components/src/Text/Text.tsx
@@ -39,11 +39,11 @@ export const Text = ({
   variant,
   size,
   color,
-  align = 'none',
-  cursor = 'default',
-  weight = 'normal',
-  fontSize = 'xs',
-  fontStyle = 'normal',
+  align,
+  cursor,
+  weight,
+  fontSize,
+  fontStyle,
   children,
   ...props
 }: TextProps) => {
@@ -60,11 +60,11 @@ export const Text = ({
       className={cn(
         classNames,
         'text-[--color] outline-[--outline]',
-        textStyle[fontStyle],
-        textAlign[align],
-        cursorStyle[cursor],
-        fontWeight[weight],
-        textSize[fontSize]
+        fontStyle && textStyle[fontStyle],
+        align && textAlign[align],
+        cursor && cursorStyle[cursor],
+        weight && fontWeight[weight],
+        fontSize && textSize[fontSize]
       )}
       style={createVar({
         color:


Test patch:
diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx
index c9f5ebfcf..ae49d4a50 100644
--- a/packages/components/src/Text/Text.test.tsx
+++ b/packages/components/src/Text/Text.test.tsx
@@ -6,13 +6,13 @@ import { Text } from './Text';
 const theme: Theme = {
   name: 'test',
   colors: {
-    emerald: 'rgb(5 150 105);',
+    emerald: 'rgb(5 150 105)',
   },
   components: {
-    Text: cva("font-['Oswald_Regular']", {
+    Text: cva('font-["Oswald_Regular"]', {
       variants: {
         variant: {
-          one: 'font-["Arial]"',
+          one: 'font-["Arial"]',
         },
       },
     }),
@@ -26,7 +26,7 @@ test('uses base as default variant', () => {
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
-  expect(text).toHaveClass(`font-['Oswald_Regular']`);
+  expect(text).toHaveClass(`font-["Oswald_Regular"]`);
 });
 
 test('uses theme styles', () => {
@@ -38,7 +38,7 @@ test('uses theme styles', () => {
   const text = screen.getByText(/text/);
 
   expect(text.className).toMatchInlineSnapshot(
-    `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"`
+    `"font-["Arial"] text-[--color] outline-[--outline]"`
   );
 });
 
@@ -64,8 +64,9 @@ test('style props override theme styles', () => {
   const text = screen.getByText(/text/);
 
   expect(text.className).toMatchInlineSnapshot(
-    `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"`
+    `"font-["Arial"] text-[--color] outline-[--outline]"`
   );
+  expect(text.style.cssText).toMatchInlineSnapshot(`"--color: red-700;"`);
 });
 
 test('get theme color', () => {
@@ -78,9 +79,9 @@ test('get theme color', () => {
   const text = screen.getByTestId('text');
   expect(text).toMatchInlineSnapshot(`
     <p
-      class="font-['Oswald_Regular'] text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"
+      class="font-["Oswald_Regular"] text-[--color] outline-[--outline]"
       data-testid="text"
-      style="--color: rgb(5 150 105);;"
+      style="--color: rgb(5 150 105);"
     />
   `);
 });