From 1e617d4f94a65ab59ac6ea5993573645a531fe4a Mon Sep 17 00:00:00 2001
From: Rafael Specht <rafaelspdasilva@gmail.com>
Date: Tue, 23 Jul 2024 07:45:23 -0300
Subject: [PATCH] fix: extend props correctly on recently changed interfaces

---
 packages/components/src/components/Label/Label.tsx         | 4 +++-
 packages/components/src/components/List/OrderedList.tsx    | 4 +++-
 packages/components/src/components/List/UnorderedList.tsx  | 4 +++-
 packages/components/src/components/Paragraph/Paragraph.tsx | 4 +++-
 packages/components/src/components/Table/Td.tsx            | 4 +++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/Label/Label.tsx b/packages/components/src/components/Label/Label.tsx
index aa7be39f3..44be71471 100644
--- a/packages/components/src/components/Label/Label.tsx
+++ b/packages/components/src/components/Label/Label.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { Box, BoxProps } from "../../primitives/Box";
 
-export interface LabelProps extends BoxProps {
+export interface LabelProps
+  extends Omit<React.HTMLAttributes<HTMLLabelElement>, "color">,
+    BoxProps {
   /** Adjusts the cursor to be not-allowed. */
   disabled?: boolean;
   /** Use and `id` to tie a label directly to a specific form element. */
diff --git a/packages/components/src/components/List/OrderedList.tsx b/packages/components/src/components/List/OrderedList.tsx
index e53d59b26..0efa25156 100644
--- a/packages/components/src/components/List/OrderedList.tsx
+++ b/packages/components/src/components/List/OrderedList.tsx
@@ -2,7 +2,9 @@ import styled from "@xstyled/styled-components";
 import React from "react";
 import { Box, BoxProps } from "../../primitives/Box";
 
-export interface OrderedListProps extends BoxProps {
+export interface OrderedListProps
+  extends Omit<React.HTMLAttributes<HTMLOListElement>, "color">,
+    BoxProps {
   /** The list items */
   children: NonNullable<React.ReactNode>;
 }
diff --git a/packages/components/src/components/List/UnorderedList.tsx b/packages/components/src/components/List/UnorderedList.tsx
index f220701ed..effee69d1 100644
--- a/packages/components/src/components/List/UnorderedList.tsx
+++ b/packages/components/src/components/List/UnorderedList.tsx
@@ -2,7 +2,9 @@ import styled from "@xstyled/styled-components";
 import React from "react";
 import { Box, BoxProps } from "../../primitives/Box";
 
-export interface UnorderedListProps extends BoxProps {
+export interface UnorderedListProps
+  extends Omit<React.HTMLAttributes<HTMLUListElement>, "color">,
+    BoxProps {
   /** The list items */
   children: NonNullable<React.ReactNode>;
 }
diff --git a/packages/components/src/components/Paragraph/Paragraph.tsx b/packages/components/src/components/Paragraph/Paragraph.tsx
index af55ce460..ce8ff7f00 100644
--- a/packages/components/src/components/Paragraph/Paragraph.tsx
+++ b/packages/components/src/components/Paragraph/Paragraph.tsx
@@ -4,7 +4,9 @@ import { Box, BoxProps } from "../../primitives/Box";
 
 type ParagraphSizeOptions = "large" | "medium" | "small";
 
-export interface ParagraphProps extends BoxProps {
+export interface ParagraphProps
+  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
+    BoxProps {
   /** The contents of the paragraph. Can be text or valid text related HTML, i.e. anchor and strong elements. */
   children: NonNullable<React.ReactNode>;
   /** Changes the font-size and line-height of the Paragraph. */
diff --git a/packages/components/src/components/Table/Td.tsx b/packages/components/src/components/Table/Td.tsx
index 07b3e95e3..0db0b986f 100644
--- a/packages/components/src/components/Table/Td.tsx
+++ b/packages/components/src/components/Table/Td.tsx
@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 import { Box, BoxProps } from "../../primitives/Box";
 import { TableContext } from "./TableContext";
 
-export interface TdProps extends BoxProps {
+export interface TdProps
+  extends Omit<React.HTMLAttributes<HTMLTableCellElement>, "color">,
+    BoxProps {
   /** The valid HTML contents of the table cell. */
   children?: React.ReactNode;
   /** Used to make a cell span over multiple columns. */