Feature/ds 294 (#847)

* Typescript types are more lenient in some instances * Certain components are now allowing react.reactnode instead of string in their typings * reverted dropdown changes
gsoft-inc · Sep 3, 2024 · 2df12a9 · 2df12a9
1 parent 346eb1d
commit 2df12a9
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/fresh-emus-smell.md b/.changeset/fresh-emus-smell.md
@@ -0,0 +1,9 @@
+---
+"@igloo-ui/alert": patch
+"@igloo-ui/bar-chart": patch
+"@igloo-ui/checkbox": patch
+"@igloo-ui/form-group": patch
+"@igloo-ui/list": patch
+---
+
+Certain components are now allowing react.reactnode instead of string in their typings
diff --git a/packages/Alert/src/Alert.tsx b/packages/Alert/src/Alert.tsx
@@ -29,7 +29,7 @@ export type Type = "announcement" | "info" | "premium" | "success" | "warning";
 export type Appearance = "card" | "inline" | "horizontal";
 
 export interface AlertButton {
-    label: string;
+    label: React.ReactNode;
     onClick: () => void;
 }
 
@@ -214,9 +214,9 @@ const Alert: React.FunctionComponent<AlertProps> = ({
                     {hasButton && renderAlertActionButton(appearance, button, isWorkleap)}
                 </div>
 
-                {canBeClosed && renderDismissButton(setShow, 
-                                                    isHorizontal ? "medium" : "xsmall", 
-                                                    onClose, 
+                {canBeClosed && renderDismissButton(setShow,
+                                                    isHorizontal ? "medium" : "xsmall",
+                                                    onClose,
                                                     stringFormatter.format("close"))}
             </div>
         );

diff --git a/packages/BarChart/src/BarChart.tsx b/packages/BarChart/src/BarChart.tsx
@@ -8,7 +8,7 @@ export interface DataSet {
     /** Add id for bar chart. */
     id: string | number;
     /** Add label text above the bar chart. */
-    label: string;
+    label: React.ReactNode;
     /** The value displayed beside the bar chart. */
     value: number;
     /** Add the color to the bar chart. */

diff --git a/packages/Checkbox/src/Checkbox.stories.tsx b/packages/Checkbox/src/Checkbox.stories.tsx
@@ -63,11 +63,11 @@ export const Disabled: Story = {
         <Checkbox htmlFor="ids-checkbox-disabled" disabled>
           Label
         </Checkbox>
-    
+
         <Checkbox htmlFor="ids-checkbox-disabled-active" checked disabled>
           Label
         </Checkbox>
-    
+
         <Checkbox
           htmlFor="ids-checkbox-disabled-indeterminate"
           indeterminate

diff --git a/packages/FormGroup/src/FormGroup.tsx b/packages/FormGroup/src/FormGroup.tsx
@@ -15,13 +15,13 @@ export interface FormGroupProps extends React.ComponentProps<"div"> {
     /** Add a data-test tag for automated tests */
     dataTest?: string;
     /** Add a message below the form element */
-    message?: string;
+    message?: React.ReactNode;
     /** Specifies the type of message to display */
     messageType?: MessageType;
     /** Add the htmlFor attribute to the label of the form element */
     htmlFor?: string;
     /** Add label text above the form element */
-    label?: string;
+    label?: React.ReactNode;
     /** Decides when to show the message */
     showMessage?: boolean;
 }