diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 58725b1514..2a9907906d 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -38549,6 +38549,65 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = ` `; +exports[`Storyshots Forms|Checkbox With HelpText 1`] = ` +
+
+
+ +
+
+
+
+ +
+
+
+`; + exports[`Storyshots Forms|DropDown Default 1`] = `
`; +exports[`Storyshots Forms|Radio With HelpText 1`] = ` +
+ + +
+`; + exports[`Storyshots Forms|Textarea OnCancel 1`] = `
+ )) + .add("With HelpText", () => ( + + + + )); diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx index 52321fd37f..291e8f7e30 100644 --- a/scm-ui/ui-components/src/forms/Checkbox.tsx +++ b/scm-ui/ui-components/src/forms/Checkbox.tsx @@ -47,7 +47,7 @@ export default class Checkbox extends React.Component { renderHelp = () => { const { title, helpText } = this.props; if (helpText && !title) { - return ; + return ; } }; diff --git a/scm-ui/ui-components/src/forms/Radio.stories.tsx b/scm-ui/ui-components/src/forms/Radio.stories.tsx index fd457c66a3..aef1bfe29d 100644 --- a/scm-ui/ui-components/src/forms/Radio.stories.tsx +++ b/scm-ui/ui-components/src/forms/Radio.stories.tsx @@ -30,6 +30,15 @@ const Spacing = styled.div` padding: 2em; `; +const RadioList = styled.div` + display: flex; + flex-direction: column; + > label:not(:last-child) { + margin-bottom: 0.75rem; + } + padding: 2em; +`; + storiesOf("Forms|Radio", module) .add("Default", () => ( @@ -41,4 +50,14 @@ storiesOf("Forms|Radio", module) + )) + .add("With HelpText", () => ( + + + + )); diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx index fe6a35f4a6..3599d5a29d 100644 --- a/scm-ui/ui-components/src/forms/Radio.tsx +++ b/scm-ui/ui-components/src/forms/Radio.tsx @@ -43,7 +43,7 @@ class Radio extends React.Component { renderHelp = () => { const helpText = this.props.helpText; if (helpText) { - return ; + return ; } };