From 00cc94fa698526cc16f62b721b0965d56ff971c0 Mon Sep 17 00:00:00 2001 From: Brandon Croft Date: Fri, 18 Jan 2019 11:19:24 -0700 Subject: [PATCH 1/2] fix: Props should allow ReactNode in certain cases In order to better provide translatable labels. In other cases, string | ReactNode was simplified to ReactNode because that type already includes string. --- packages/modal/components/DialogModal.tsx | 2 +- packages/modal/components/DialogModalWithFooter.tsx | 2 +- packages/modal/components/FullscreenModal.tsx | 6 +++--- packages/modal/components/ModalBase.tsx | 2 +- packages/table/components/Column.tsx | 2 +- packages/table/components/SortableHeaderCell.tsx | 2 +- packages/textInput/components/TextInput.tsx | 6 +++--- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/modal/components/DialogModal.tsx b/packages/modal/components/DialogModal.tsx index 577102e49..2a558804e 100644 --- a/packages/modal/components/DialogModal.tsx +++ b/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 { diff --git a/packages/modal/components/DialogModalWithFooter.tsx b/packages/modal/components/DialogModalWithFooter.tsx index b0088e1ae..45c09d053 100644 --- a/packages/modal/components/DialogModalWithFooter.tsx +++ b/packages/modal/components/DialogModalWithFooter.tsx @@ -8,7 +8,7 @@ export interface DialogModalWithFooterProps extends DialogModalProps { /** The primary button */ ctaButton: React.ReactElement; /** The text for the button that secondary button, which closes the modal */ - closeText: string; + closeText: React.ReactNode; } class DialogModalWithFooter extends React.PureComponent< diff --git a/packages/modal/components/FullscreenModal.tsx b/packages/modal/components/FullscreenModal.tsx index 7df5795a8..43f3d3aca 100644 --- a/packages/modal/components/FullscreenModal.tsx +++ b/packages/modal/components/FullscreenModal.tsx @@ -12,11 +12,11 @@ interface FullscreenModalProps extends ModalBaseProps { /** The primary button */ ctaButton?: React.ReactElement; /** 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⚠️ */ diff --git a/packages/modal/components/ModalBase.tsx b/packages/modal/components/ModalBase.tsx index 982faa50a..6ba3c2f14 100644 --- a/packages/modal/components/ModalBase.tsx +++ b/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 */ diff --git a/packages/table/components/Column.tsx b/packages/table/components/Column.tsx index 5f202af5f..e32c8eae7 100644 --- a/packages/table/components/Column.tsx +++ b/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. */ diff --git a/packages/table/components/SortableHeaderCell.tsx b/packages/table/components/SortableHeaderCell.tsx index 5160aa776..f0ce67cd9 100644 --- a/packages/table/components/SortableHeaderCell.tsx +++ b/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 { diff --git a/packages/textInput/components/TextInput.tsx b/packages/textInput/components/TextInput.tsx index 7e87e3687..dad4c6eb6 100644 --- a/packages/textInput/components/TextInput.tsx +++ b/packages/textInput/components/TextInput.tsx @@ -45,7 +45,7 @@ export interface TextInputProps extends React.HTMLProps { /** * 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. */ @@ -53,11 +53,11 @@ export interface TextInputProps extends React.HTMLProps { /** * 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< From 0fbb281074968a7866f62415b6295538a3f6cf7f Mon Sep 17 00:00:00 2001 From: Brandon Croft Date: Fri, 18 Jan 2019 11:19:42 -0700 Subject: [PATCH 2/2] style: uiKitStory prettier --- uiKitStory.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/uiKitStory.ts b/uiKitStory.ts index 2064a5b43..b9467cfc1 100644 --- a/uiKitStory.ts +++ b/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); }