From 132a30f2b64ff977e33f3a247a3667f8512ce4b3 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Thu, 30 Jul 2020 11:02:30 +0200 Subject: [PATCH 01/31] Fix tooltip overflow in checkbox and radio context --- .../src/__snapshots__/storyshots.test.ts.snap | 104 ++++++++++++++++++ .../src/forms/Checkbox.stories.tsx | 11 ++ scm-ui/ui-components/src/forms/Checkbox.tsx | 2 +- .../ui-components/src/forms/Radio.stories.tsx | 19 ++++ scm-ui/ui-components/src/forms/Radio.tsx | 2 +- 5 files changed, 136 insertions(+), 2 deletions(-) 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 ; } }; From 1c21c72b20613c6e95876e931b2c6a2683246725 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Thu, 30 Jul 2020 11:03:48 +0200 Subject: [PATCH 02/31] Update CHANGELOG.md --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fc627f6f7..149382ff2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [2.3.0] - 2020-07-23 +## Unreleased +### Fixed +- Fix tooltip overflow in checkbox and radio context ([#1271](https://github.com/scm-manager/scm-manager/pull/1271)) +## [2.3.0] - 2020-07-23 ### Added - Add branch link provider to access branch links in plugins ([#1243](https://github.com/scm-manager/scm-manager/pull/1243)) - Add key value input field component ([#1246](https://github.com/scm-manager/scm-manager/pull/1246)) From 2490eccc7126053d7739d04437329a09da28c96f Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Thu, 30 Jul 2020 13:04:12 +0200 Subject: [PATCH 03/31] Remove unused import --- scm-ui/ui-components/src/forms/Checkbox.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx index 24dc31d4de..29b0e2938a 100644 --- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx +++ b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx @@ -25,7 +25,6 @@ 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; From 4268fed1146b841108abad256dd9b9ced35ad650 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Thu, 30 Jul 2020 16:52:22 +0200 Subject: [PATCH 04/31] Add storyshot for our concrete bug case --- .../src/__snapshots__/storyshots.test.ts.snap | 91 +++++++++++++++++++ .../src/modals/Modal.stories.tsx | 25 ++++- 2 files changed, 115 insertions(+), 1 deletion(-) 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 2a9907906d..6fef75054b 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -41565,6 +41565,97 @@ exports[`Storyshots Modal|Modal Default 1`] = `
`; +exports[`Storyshots Modal|Modal With Checkbox with HelpText inside 1`] = ` +
+
+
+
+

+ Hitchhiker Modal +

+
+
+

+ This content should not cause a vertical scrollbar. +

+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+`; + exports[`Storyshots Navigation|Secondary Active when match 1`] = `
@@ -37,9 +43,26 @@ const body = (

); +const checkboxBody = ( + <> +

This content should not cause a vertical scrollbar.

+ + + + + +); + storiesOf("Modal|Modal", module) .addDecorator(story => {story()}) - .add("Default", () => ); + .add("Default", () => ) + .add("With Checkbox with HelpText inside", () => ( + true} active={true} title={"Hitchhiker Modal"} /> + )); const CloseableModal = () => { const [show, setShow] = useState(true); From d88704a00983376c008d39c3f67ccc3f58abfbbe Mon Sep 17 00:00:00 2001 From: Sebastian Sdorra Date: Fri, 31 Jul 2020 10:17:03 +0200 Subject: [PATCH 05/31] improve modal stories to show overflow bug on form elements --- .../src/modals/Modal.stories.tsx | 194 +++++++++++++++--- 1 file changed, 168 insertions(+), 26 deletions(-) diff --git a/scm-ui/ui-components/src/modals/Modal.stories.tsx b/scm-ui/ui-components/src/modals/Modal.stories.tsx index 711cc26129..3633d6ed00 100644 --- a/scm-ui/ui-components/src/modals/Modal.stories.tsx +++ b/scm-ui/ui-components/src/modals/Modal.stories.tsx @@ -24,52 +24,194 @@ import { storiesOf } from "@storybook/react"; import { MemoryRouter } from "react-router-dom"; -import * as React from "react"; -import { useState } from "react"; +import React, { useState, FC } from "react"; import Modal from "./Modal"; import Checkbox from "../forms/Checkbox"; import styled from "styled-components"; +import ExternalLink from "../navigation/ExternalLink"; +import { Radio, Textarea, InputField } from "../forms"; +import { ButtonGroup, Button } from "../buttons"; +import Notification from "../Notification"; const TopAndBottomMargin = styled.div` margin: 0.75rem 0; // only for aesthetic reasons `; -const body = ( -

- Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows +const RadioList = styled.div` + display: flex; + flex-direction: column; + > label:not(:last-child) { + margin-bottom: 0.6em; + } +`; + +const text = `Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance.with Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly - ordinary mob. -

-); + ordinary mob.`; -const checkboxBody = ( - <> -

This content should not cause a vertical scrollbar.

- - - - - -); +// eslint-disable-next-line @typescript-eslint/no-empty-function +const doNothing = () => {}; storiesOf("Modal|Modal", module) .addDecorator(story => {story()}) - .add("Default", () => ) - .add("With Checkbox with HelpText inside", () => ( - true} active={true} title={"Hitchhiker Modal"} /> + .add("Default", () => ( + +

{text}

+ + )) + .add("Closeable", () => ( + +

{text}

+ + )) + .add("With form elements", () => ( + + + + + +
+

{text}

+
+