From d39d33d02c0ac89a2b9922e8fea68be22f7d64f7 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 4 Oct 2023 17:09:08 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20inputs=20overflowin?= =?UTF-8?q?g=20placeholder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The oveflowing labels were spreading on two lines. I had to wrap a span inside a label in order to be able to deal with the text-oveflow plus the absolute positionning. --- .changeset/soft-files-grin.md | 5 + .../Examples/EdgeCases/index.stories.tsx | 92 +++++++++++++++++++ .../src/components/Forms/Input/index.spec.tsx | 2 +- .../components/Forms/LabelledBox/index.scss | 9 ++ .../components/Forms/LabelledBox/index.tsx | 2 +- .../src/components/Forms/Select/index.scss | 2 + .../src/components/Forms/Select/mono.spec.tsx | 4 +- .../components/Forms/Select/multi.spec.tsx | 4 +- 8 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 .changeset/soft-files-grin.md create mode 100644 packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx diff --git a/.changeset/soft-files-grin.md b/.changeset/soft-files-grin.md new file mode 100644 index 0000000..630c19b --- /dev/null +++ b/.changeset/soft-files-grin.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +fix inputs overflowing placeholder diff --git a/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx new file mode 100644 index 0000000..bf76103 --- /dev/null +++ b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx @@ -0,0 +1,92 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { Input } from ":/components/Forms/Input"; +import { Checkbox } from ":/components/Forms/Checkbox"; +import { Button } from ":/components/Button"; +import { Select } from ":/components/Forms/Select"; +import { CunninghamProvider } from ":/components/Provider"; +import { FileUploader } from ":/components/Forms/FileUploader"; +import { Switch } from ":/components/Forms/Switch"; + +export default { + title: "Components/Forms/Examples/Edge Cases", +} as Meta; + +export const OverflowLabels = () => { + const overflow = " and some very long overflowing text"; + return ( + +
+

+ Application +

+ + +
+ +
+ + +
+
+ +
+ +
+
+
+ Your curriculum vitae +
+ +
+
+ + +
+ + + + Need help ? + + +
+ ); +}; diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx index 3fb1e00..5219cff 100644 --- a/packages/react/src/components/Forms/Input/index.spec.tsx +++ b/packages/react/src/components/Forms/Input/index.spec.tsx @@ -51,7 +51,7 @@ describe("", () => { const input2: HTMLInputElement = screen.getByRole("textbox", { name: "Second name", }); - const label = screen.getByText("First name"); + const label = screen.getByText("First name")!.parentElement!; expect(Array.from(label.classList)).toContain("placeholder"); // Clicking on the input should remove the placeholder class. diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss index ddb1a4c..4fe51d9 100644 --- a/packages/react/src/components/Forms/LabelledBox/index.scss +++ b/packages/react/src/components/Forms/LabelledBox/index.scss @@ -15,12 +15,21 @@ top: 0.5rem; transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); color: var(--c--components--forms-labelledbox--label-color--small); + // Enable text overflow ellipsis. + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + &.placeholder { @extend %text-style; top: 16px; color: var(--c--components--forms-labelledbox--label-color--big); } + + span { + white-space: nowrap; + } } &__children { diff --git a/packages/react/src/components/Forms/LabelledBox/index.tsx b/packages/react/src/components/Forms/LabelledBox/index.tsx index e970114..5fe5f72 100644 --- a/packages/react/src/components/Forms/LabelledBox/index.tsx +++ b/packages/react/src/components/Forms/LabelledBox/index.tsx @@ -38,7 +38,7 @@ export const LabelledBox = ({ htmlFor={htmlFor} id={labelId} > - {label} + {label} )}
{children}
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss index 219eb1c..24b88ce 100644 --- a/packages/react/src/components/Forms/Select/index.scss +++ b/packages/react/src/components/Forms/Select/index.scss @@ -21,6 +21,8 @@ label { cursor: pointer; + // In case of text-overflow we do not want the text to render above the toggle button arrow. + max-width: calc(100% - 1.5rem); } &:hover { diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx index 1d0a01d..80966a2 100644 --- a/packages/react/src/components/Forms/Select/mono.spec.tsx +++ b/packages/react/src/components/Forms/Select/mono.spec.tsx @@ -868,7 +868,7 @@ describe("", () => { screen.getByRole("combobox", { name: "City", }); - const label = screen.getByText("City"); + const label = screen.getByText("City")!.parentElement!; expect(Array.from(label.classList)).toContain("offscreen"); }); diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx index 39d41cd..0f9ca86 100644 --- a/packages/react/src/components/Forms/Select/multi.spec.tsx +++ b/packages/react/src/components/Forms/Select/multi.spec.tsx @@ -50,7 +50,7 @@ describe("", () => { screen.getByRole("combobox", { name: "Cities", }); - const label = screen.getByText("Cities"); + const label = screen.getByText("Cities")!.parentElement!; expect(Array.from(label.classList)).toContain("offscreen"); });