From 5446d70bcadf5f6fba19e7085fa92692b7b79cdb Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Tue, 12 Mar 2024 15:29:07 +0100 Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=93=9D(react)=20fix=20RHF=20login?= =?UTF-8?q?=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This story was broken due to incorrect usage of FormProvider. --- .../Examples/ReactHookForm/Login.stories.tsx | 99 ++++++++++--------- 1 file changed, 51 insertions(+), 48 deletions(-) diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx index b3fcac6fd..27e6d6899 100644 --- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx +++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx @@ -1,7 +1,7 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { Meta } from "@storybook/react"; import React from "react"; -import { useForm } from "react-hook-form"; +import { FormProvider, useForm } from "react-hook-form"; import * as Yup from "yup"; import { RhfInput } from ":/components/Forms/Input/stories-utils"; import { Checkbox } from ":/components/Forms/Checkbox"; @@ -29,7 +29,7 @@ const loginSchema = Yup.object().shape({ }); export const Login = () => { - const { register, handleSubmit, formState } = useForm({ + const methods = useForm({ defaultValues: { email: "", password: "", @@ -41,53 +41,56 @@ export const Login = () => { }); return ( -
-

+ - Log in -

- - -
- + Log in + + -
- -
- You do not have an account?{" "} - - Register - -
- + +
+ +
+ +
+ You do not have an account?{" "} + + Register + +
+ + ); }; From f398e51db30b77aa36ee4960099b1f96436c7599 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 28 Feb 2024 16:57:42 +0100 Subject: [PATCH 02/16] =?UTF-8?q?=E2=9C=A8(react)=20add=20width=20property?= =?UTF-8?q?=20to=20DataGrid=20columns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Without this feature we needed to override CSS directly in order to make columns a specific width. Closes #240 --- .changeset/popular-wasps-bathe.md | 5 ++ .../react/src/components/DataGrid/_index.scss | 2 + .../src/components/DataGrid/index.spec.tsx | 40 ++++++++++++++ .../src/components/DataGrid/index.stories.tsx | 54 +++++++++++++++++++ .../react/src/components/DataGrid/index.tsx | 12 ++++- .../react/src/components/DataGrid/utils.tsx | 1 + 6 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 .changeset/popular-wasps-bathe.md diff --git a/.changeset/popular-wasps-bathe.md b/.changeset/popular-wasps-bathe.md new file mode 100644 index 000000000..9b8ad6521 --- /dev/null +++ b/.changeset/popular-wasps-bathe.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +add width property to DataGrid columns diff --git a/packages/react/src/components/DataGrid/_index.scss b/packages/react/src/components/DataGrid/_index.scss index ab83e416a..5668e9737 100644 --- a/packages/react/src/components/DataGrid/_index.scss +++ b/packages/react/src/components/DataGrid/_index.scss @@ -23,6 +23,7 @@ border-collapse: collapse; font-weight: var(--c--theme--font--weights--regular); width: 100%; + table-layout: fixed; th, td { text-align: left; @@ -30,6 +31,7 @@ white-space: nowrap; font-size: var(--c--theme--font--sizes--m); height: 3rem; + overflow: hidden; } th { diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx index 467915e71..83378fd63 100644 --- a/packages/react/src/components/DataGrid/index.spec.tsx +++ b/packages/react/src/components/DataGrid/index.spec.tsx @@ -381,4 +381,44 @@ describe("", () => { expect(tds[0].textContent).toEqual(row.sub.name); }); }); + + it("should render column with specific width", async () => { + const database = Array.from(Array(10)).map(() => ({ + id: faker.string.uuid(), + name: faker.person.fullName(), + email: faker.internet.email(), + })); + + const Component = () => { + return ( + + + + ); + }; + + render(); + + const table = screen.getByRole("table"); + const ths = getAllByRole(table, "columnheader"); + expect(ths.length).toBe(2); + expect(ths[0].textContent).toEqual("First name"); + expect(ths[1].textContent).toEqual("Email"); + + expect(ths[0].style.width).toEqual("50px"); + expect(ths[1].style.width).toEqual(""); + }); }); diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx index c4a4bf23e..a8a20ec7a 100644 --- a/packages/react/src/components/DataGrid/index.stories.tsx +++ b/packages/react/src/components/DataGrid/index.stories.tsx @@ -335,3 +335,57 @@ export const DataListOnly = () => { /> ); }; + +export const WithColumnWidth = () => { + const database = useMemo( + () => + Array.from(Array(23)).map(() => ({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + email: faker.internet.email(), + address: faker.location.streetAddress(), + })), + [], + ); + return ( + ( +