Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-03 12:05:52 +01:00
Code Issues Packages Projects Releases Activity

Fix tooltip overflow in checkbox and radio context

Browse Source
This commit is contained in:
Florian Scholdei
2020-07-30 11:02:30 +02:00
parent 02738b816c
commit 132a30f2b6
5 changed files with 136 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
scm-ui/ui-components/src/forms/Checkbox.stories.tsx
View File

@@ -25,6 +25,7 @@ import React from "react";
import { storiesOf } from "@storybook/react";
import Checkbox from "./Checkbox";
import styled from "styled-components";
import Radio from "./Radio";
const Spacing = styled.div`
padding: 2em;
@@ -42,4 +43,14 @@ storiesOf("Forms|Checkbox", module)
<Spacing>
<Checkbox label="Checked but disabled" checked={true} disabled={true} />
</Spacing>
))
.add("With HelpText", () => (
<Spacing>
<Checkbox label="Classic helpText" checked={false} helpText="This is a classic help text." />
<Checkbox
label="Long helpText"
checked={true}
helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
/>
</Spacing>
));

2
scm-ui/ui-components/src/forms/Checkbox.tsx
View File

@@ -47,7 +47,7 @@ export default class Checkbox extends React.Component<Props> {
renderHelp = () => {
const { title, helpText } = this.props;
if (helpText && !title) {
return <Help message={helpText} />;
return <Help message={helpText} className="has-tooltip-multiline" />;
}
};

19
scm-ui/ui-components/src/forms/Radio.stories.tsx
View File

@@ -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", () => (
<Spacing>
@@ -41,4 +50,14 @@ storiesOf("Forms|Radio", module)
<Spacing>
<Radio label="Checked but disabled" checked={true} disabled={true} />
</Spacing>
))
.add("With HelpText", () => (
<RadioList>
<Radio label="Classic helpText" checked={false} helpText="This is a classic help text." />
<Radio
label="Long helpText"
checked={true}
helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
/>
</RadioList>
));

2
scm-ui/ui-components/src/forms/Radio.tsx
View File

@@ -43,7 +43,7 @@ class Radio extends React.Component<Props> {
renderHelp = () => {
const helpText = this.props.helpText;
if (helpText) {
return <Help message={helpText} />;
return <Help message={helpText} className="has-tooltip-multiline" />;
}
};