(frontend) replace grommet text input with cunningham text input #2374

AntoLC · 2023-08-10T14:55:36Z

Purpose

Replace grommet text input with cunningham text input.

It is more critical than we thought I guess, we often need to refactor the code to make it work with the new input:

the grommet Form component is not working with the new input
the way the errors are managed change as well (not from the Form component anymore)

Proposal

replace every grommet TextInput by cunningham Input
improve fetch error
tests

lunika

the font weight is not the same with master branch. 400 on the master branch, 300 on this one.

src/frontend/apps/standalone_site/src/components/Text/PrivateTextInputField.tsx

src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx

...StudentLiveStarter/StudentLiveAdvertising/StudentLiveRegistration/RegistrationForm/index.tsx

lunika · 2023-09-04T13:20:48Z

...me-overlay-displays-the-component-and-compares-it-with-previous-render-screenshot-1-snap.png

The render is not the same at all. Is it normal ? If yes, is it needed to keep it ?

I don't know what is the best to do:

either let it like that (it will still check some changes)

Or remove this test

Or try to add the lib-common css to try to get the real render

The last solution is a bit complicated though, in order to have the css interpreted by jest, we need to install jest-transform-css, and couple it with the snapshot libraries.
Let me know if it deserves that we pass time on it.

AntoLC · 2023-09-05T09:51:21Z

the font weight is not the same with master branch. 400 on the master branch, 300 on this one.

The font weight is not the same but visually it should be the same, the weight change visually from 600.

On the top is the grommet input and the bottom the cunningham, the only visual diff on the label is that cunningham add a small opacity on the label, so the color become slightly lighter on the cunningham one.

lunika · 2023-09-05T09:59:47Z

On the left grommet, on the right cunningham.

You can see that the weight on the value is not the same and if you inspect and watch the computed styles you will that the weight is not the same.

lunika · 2023-09-05T10:01:19Z

Oh and I just notice that the font family used is not the same

kernicPanel · 2023-09-05T11:58:41Z

src/frontend/apps/standalone_site/src/components/Text/PrivateTextInputField.tsx

+  ...inputProps
+}: PrivateTextInputFieldProps) => {
+  const intl = useIntl();
+  const [isHidden, setIsHidden] = useState(true);


I find hidden a bit misleading, what about obscured ?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/password

...lone_site/src/features/Contents/features/ClassRoom/components/Manage/ClassRoomCreateForm.tsx

AntoLC · 2023-09-05T13:48:55Z

Oh and I just notice that the font family used is not the same

You're right, incredible eyes.
f383dc0

kernicPanel

Sorry for being relou

src/frontend/apps/standalone_site/src/components/Text/PrivateTextInputField.tsx

AntoLC · 2023-09-05T14:06:29Z

I added this commit (♻️(frontend) update way to load correct front), before to have a bold Roboto, we had to change the font-family (example). With the new way, we don't have to change the font-family anymore, just changing the weight will load the correct font (works only with the exact font name Roboto, so only with cunningham for the moment).

kernicPanel

...standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx

lunika · 2023-09-05T16:18:40Z

src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx

        </Box>
+        <Select


On master branch, this select starts at 8AM. We should keep this behaviour

As discussed, I removed the dev about the SchedulingFields (💄(lib_component) replace grommet input by cunningham input).

Double border on the Renater Input fix as well: f1bc86e#diff-3a9a8f08640f71a847e275f989f27e616d3082378d8cf07812c25273384edcaeR375-R377

The backend can return different body response when an error occurs, to access it we needed to cast the error prop, this commit adds a body prop to have an easy access to the error body.

CunninghamProvider is necessary in multiple cunningham components, so it is easier to maintain a single provider per app.

- replace grommet input by cunningham input - move PrivateTextInputField to root/components/Text - refacto forms to fit new cunningham input text

- replace grommet input by cunningham input - VideoCreateForm is not used anymore so remove it

- replace grommet input by cunningham input

Until now when we wanted to change the font weight with Roboto, we had to change the font-family name, this is not a good practice. Now just by changing the font-weight, the correct font is loaded, if your css use `font-weight:900`, the font will be Roboto Black.

Added - Add playlist is_claimable attribute - Add the Accept-Language header to most of the http request (#2394) Changed - Replace grommet TextInput by Cunningham Input (#2374) - Save classroom recording urls in a cache and remove access from db column

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from 4cbcae2 to 1886e74 Compare August 11, 2023 14:08

AntoLC self-assigned this Aug 11, 2023

AntoLC added improvement feature request critical Frontend labels Aug 11, 2023

AntoLC force-pushed the feature/anthony/cunningham-text-input branch 13 times, most recently from c8547fc to 6d4f0c0 Compare September 1, 2023 14:29

AntoLC marked this pull request as ready for review September 1, 2023 14:47

AntoLC requested review from lunika and kernicPanel September 1, 2023 14:47

lunika reviewed Sep 4, 2023

View reviewed changes

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from 6d4f0c0 to 3f29815 Compare September 5, 2023 09:37

AntoLC requested a review from lunika September 5, 2023 09:53

kernicPanel reviewed Sep 5, 2023

View reviewed changes

kernicPanel approved these changes Sep 5, 2023

View reviewed changes

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from dacb41d to a4c09d3 Compare September 5, 2023 14:14

AntoLC requested a review from kernicPanel September 5, 2023 14:20

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from a4c09d3 to 8ebdbb7 Compare September 5, 2023 14:32

kernicPanel approved these changes Sep 5, 2023

View reviewed changes

...standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx Show resolved Hide resolved

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from 90d8cee to 41b53cd Compare September 5, 2023 16:05

lunika reviewed Sep 5, 2023

View reviewed changes

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from 41b53cd to ae0fbba Compare September 6, 2023 10:09

AntoLC requested a review from lunika September 6, 2023 10:23

lunika approved these changes Sep 6, 2023

View reviewed changes

AntoLC added 9 commits September 7, 2023 10:47

🥅(frontend) better capture of error body

029cb96

The backend can return different body response when an error occurs, to access it we needed to cast the error prop, this commit adds a body prop to have an easy access to the error body.

♻️(frontend) single CunninghamProvider per app

1dee1db

CunninghamProvider is necessary in multiple cunningham components, so it is easier to maintain a single provider per app.

💄(website) replace grommet input by cunningham input

713462a

- replace grommet input by cunningham input - move PrivateTextInputField to root/components/Text - refacto forms to fit new cunningham input text

💄(lti) replace grommet input by cunningham input

4f4f86d

- replace grommet input by cunningham input - VideoCreateForm is not used anymore so remove it

💄(lib_video) replace grommet input by cunningham input

6311b6e

- replace grommet input by cunningham input

💄(lib_classroom) replace grommet input by cunningham input

f4baa03

- replace grommet input by cunningham input

💄(lib_component) replace grommet input by cunningham input

1a47e6e

- replace grommet input by cunningham input

💄(lib_markdown) replace grommet input by cunningham input

674b1ba

- replace grommet input by cunningham input

AntoLC force-pushed the feature/anthony/cunningham-text-input branch from ae0fbba to 1709ed1 Compare September 7, 2023 08:48

AntoLC enabled auto-merge (rebase) September 7, 2023 08:49

AntoLC merged commit 3810c8f into master Sep 7, 2023

AntoLC deleted the feature/anthony/cunningham-text-input branch September 7, 2023 09:03

lunika mentioned this pull request Sep 8, 2023

🔖(minor) bump release to 4.4.0 #2403

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(frontend) replace grommet text input with cunningham text input #2374

(frontend) replace grommet text input with cunningham text input #2374

AntoLC commented Aug 10, 2023 •

edited

Loading

lunika left a comment

lunika Sep 4, 2023

AntoLC Sep 5, 2023 •

edited

Loading

AntoLC Sep 5, 2023

AntoLC commented Sep 5, 2023

lunika commented Sep 5, 2023

lunika commented Sep 5, 2023

kernicPanel Sep 5, 2023

AntoLC Sep 5, 2023

AntoLC commented Sep 5, 2023

kernicPanel left a comment

AntoLC commented Sep 5, 2023

kernicPanel left a comment

lunika Sep 5, 2023

AntoLC Sep 6, 2023

AntoLC Sep 6, 2023

(frontend) replace grommet text input with cunningham text input #2374

(frontend) replace grommet text input with cunningham text input #2374

Conversation

AntoLC commented Aug 10, 2023 • edited Loading

Purpose

Proposal

lunika left a comment

Choose a reason for hiding this comment

lunika Sep 4, 2023

Choose a reason for hiding this comment

AntoLC Sep 5, 2023 • edited Loading

Choose a reason for hiding this comment

AntoLC Sep 5, 2023

Choose a reason for hiding this comment

AntoLC commented Sep 5, 2023

lunika commented Sep 5, 2023

lunika commented Sep 5, 2023

kernicPanel Sep 5, 2023

Choose a reason for hiding this comment

AntoLC Sep 5, 2023

Choose a reason for hiding this comment

AntoLC commented Sep 5, 2023

kernicPanel left a comment

Choose a reason for hiding this comment

AntoLC commented Sep 5, 2023

kernicPanel left a comment

Choose a reason for hiding this comment

lunika Sep 5, 2023

Choose a reason for hiding this comment

AntoLC Sep 6, 2023

Choose a reason for hiding this comment

AntoLC Sep 6, 2023

Choose a reason for hiding this comment

AntoLC commented Aug 10, 2023 •

edited

Loading

AntoLC Sep 5, 2023 •

edited

Loading