Merge pull request #281 from dcos-labs/brandonc/fix_element_typedefs

fix: Props should allow ReactNode in certain cases

packages/modal/components/DialogModal.tsx

@@ -18,7 +18,7 @@ export interface DialogModalProps extends ModalBaseProps {
  /** Whether we automatically add padding to the body of the modal. */
  isContentFlush?: boolean;
  /** The text displayed in the header of the modal. */
- title: string;
+ title: React.ReactNode;
 }
 
 class DialogModal extends React.PureComponent<DialogModalProps, {}> {

packages/modal/components/DialogModalWithFooter.tsx

@@ -8,7 +8,7 @@ export interface DialogModalWithFooterProps extends DialogModalProps {
  /** The primary button */
  ctaButton: React.ReactElement<ButtonProps>;
  /** The text for the button that secondary button, which closes the modal */
- closeText: string;
+ closeText: React.ReactNode;
 }
 
 class DialogModalWithFooter extends React.PureComponent<

packages/modal/components/FullscreenModal.tsx

@@ -12,11 +12,11 @@ interface FullscreenModalProps extends ModalBaseProps {
  /** The primary button */
  ctaButton?: React.ReactElement<ButtonProps>;
  /** The text for the button that secondary button, which closes the modal */
- closeText: string;
+ closeText: React.ReactNode;
  /** The title that appears in the header */
- title: string;
+ title: React.ReactNode;
  /** The subtitle that appears in the header */
- subtitle?: string;
+ subtitle?: React.ReactNode;
  /** Whether we automatically add padding to the body of the modal. */
  isContentFlush?: boolean;
  /** Custom header content component. ⚠️Use rarely and with caution⚠️ */

packages/modal/components/ModalBase.tsx

@@ -24,7 +24,7 @@ export enum ModalSizes {
 }
 
 export interface ModalBaseProps {
- children?: React.ReactNode | string;
+ children?: React.ReactNode;
  /** Controls whether the modal animates in and out. ⚠️Do not use this directly⚠️ */
  isAnimated?: boolean;
  /** Whether the modal is open */

packages/table/components/Column.tsx

@@ -10,7 +10,7 @@ export interface ColumnProps {
  /**
  * header is providing the contents for the header cell for the column.
  */
- header: string | React.ReactNode;
+ header: React.ReactNode;
  /**
  * cellRenderer is the function which is creating the cell contents for this column.
  */

packages/table/components/SortableHeaderCell.tsx

@@ -9,7 +9,7 @@ type SortDirection = "ASC" | "DESC" | null;
 interface Props {
  sortHandler: () => void;
  sortDirection: SortDirection;
- columnContent: string | React.ReactNode;
+ columnContent: React.ReactNode;
  textAlign?: TextAlign;
 }
 interface State {

packages/textInput/components/TextInput.tsx

@@ -45,19 +45,19 @@ export interface TextInputProps extends React.HTMLProps<HTMLInputElement> {
  /**
  * Sets the contents of the input label. This can be a `string` or any `ReactNode`.
  */
- inputLabel: string | React.ReactNode;
+ inputLabel: React.ReactNode;
  /**
  * Defaults to `true`, but can be set to `false` to visibly hide the `TextInput`'s label. The `inputLabel` should still be set even when hidden for accessibility support.
  */
  showInputLabel: boolean;
  /**
  * hintContent is text or a ReactNode that is displayed directly under the input with additional information about the expected input.
  */
- hintContent?: string | React.ReactNode;
+ hintContent?: React.ReactNode;
  /**
  * Sets the contents for validation errors. This will be displayed below the input element. Errors are only visible when the `TextInput` appearance is also set to `TextInputAppearance.Error`.
  */
- errors?: string[];
+ errors?: React.ReactNode[];
 }
 
 export class TextInput<

uiKitStory.ts

@@ -1,9 +1,9 @@
 import { storiesOf } from "@storybook/react";
 import { withReadme } from "storybook-readme";
-import { checkA11y } from '@storybook/addon-a11y';
+import { checkA11y } from "@storybook/addon-a11y";
 
 export default function uiKitStory(name: string, module: any, readme: any) {
-  return storiesOf(name, module)
-  .addDecorator(withReadme([readme]))
-  .addDecorator(checkA11y)
+ return storiesOf(name, module)
+ .addDecorator(withReadme([readme]))
+ .addDecorator(checkA11y);
 }