♻️(frontend) replace grommet TextArea with cunningham TextArea

In order to do the transition to the cunningham design system, we replace the grommet TextArea component with the cunningham TextArea components.
openfun · Nov 10, 2023 · c7e81d0 · c7e81d0
1 parent bdd29df
commit c7e81d0
Show file tree

Hide file tree

Showing 17 changed files with 233 additions and 320 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Replace grommet Button (#2453)
 - Replace grommet Box (#2484)
+- Replace grommet TextArea (#2500)
 - Update psycopg to version 3
 - Update node to version 20
 - Replace pylti with oauthlib for LTI request validation

diff --git a/...e_site/src/features/Contents/features/ClassRoom/components/Manage/ClassRoomCreateForm.tsx b/...e_site/src/features/Contents/features/ClassRoom/components/Manage/ClassRoomCreateForm.tsx
@@ -1,7 +1,6 @@
-import { Field, Input } from '@openfun/cunningham-react';
-import { TextArea } from 'grommet';
+import { Field, Input, TextArea } from '@openfun/cunningham-react';
 import { useCreateClassroom } from 'lib-classroom';
-import { BoxError, Form, FormField, ModalButton } from 'lib-components';
+import { BoxError, Form, ModalButton } from 'lib-components';
 import { Fragment, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
@@ -130,18 +129,17 @@ const ClassroomCreateForm = () => {
 
         {selectPlaylist}
 
-        <FormField
+        <TextArea
           label={intl.formatMessage(messages.descriptionLabel)}
-          htmlFor="description-id"
-          name="description"
-        >
-          <TextArea
-            size="1rem"
-            rows={5}
-            name="description"
-            id="description-id"
-          />
-        </FormField>
+          rows={5}
+          fullWidth
+          onChange={(e) => {
+            setClassroom((value) => ({
+              ...value,
+              description: e.target.value,
+            }));
+          }}
+        />
 
         <ModalButton
           aria-label={intl.formatMessage(messages.submitLabel)}

diff --git a/.../standalone_site/src/features/Contents/features/Live/components/Manage/LiveCreateForm.tsx b/.../standalone_site/src/features/Contents/features/Live/components/Manage/LiveCreateForm.tsx
@@ -1,12 +1,10 @@
-import { Field, Input } from '@openfun/cunningham-react';
+import { Field, Input, TextArea } from '@openfun/cunningham-react';
 import { useQueryClient } from '@tanstack/react-query';
-import { TextArea } from 'grommet';
 import { Nullable } from 'lib-common';
 import {
   Box,
   BoxError,
   Form,
-  FormField,
   LiveModeType,
   ModalButton,
   useResponsive,
@@ -139,18 +137,17 @@ const LiveCreateForm = () => {
 
           {selectPlaylist}
 
-          <FormField
+          <TextArea
             label={intl.formatMessage(messages.descriptionLabel)}
-            htmlFor="description-id"
-            name="description"
-          >
-            <TextArea
-              size="1rem"
-              rows={5}
-              name="description"
-              id="description-id"
-            />
-          </FormField>
+            rows={5}
+            fullWidth
+            onChange={(e) => {
+              setLive((value) => ({
+                ...value,
+                description: e.target.value,
+              }));
+            }}
+          />
         </Box>
 
         <ModalButton

diff --git a/...tandalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.tsx b/...tandalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.tsx
@@ -1,11 +1,9 @@
-import { Field, Input } from '@openfun/cunningham-react';
-import { TextArea } from 'grommet';
+import { Field, Input, TextArea } from '@openfun/cunningham-react';
 import { Nullable } from 'lib-common';
 import {
   Box,
   BoxError,
   Form,
-  FormField,
   ModalButton,
   UploadManagerStatus,
   Video,
@@ -156,18 +154,19 @@ const VideoCreateForm = () => {
 
           {selectPlaylist}
 
-          <FormField
-            label={intl.formatMessage(messages.descriptionLabel)}
-            htmlFor="description-id"
-            name="description"
-          >
+          <Field className="mb-s" fullWidth>
             <TextArea
-              size="1rem"
+              label={intl.formatMessage(messages.descriptionLabel)}
               rows={5}
-              name="description"
-              id="description-id"
+              fullWidth
+              onChange={(e) => {
+                setVideo((value) => ({
+                  ...value,
+                  description: e.target.value,
+                }));
+              }}
             />
-          </FormField>
+          </Field>
 
           <UploadVideoForm
             onRetry={() => null}

diff --git a/...ckages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Description/index.tsx b/...ckages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Description/index.tsx
@@ -1,4 +1,4 @@
-import { Form, FormField, TextArea } from 'grommet';
+import { Field, TextArea } from '@openfun/cunningham-react';
 import { Maybe } from 'lib-common';
 import { Classroom, FoldableItem, debounce } from 'lib-components';
 import React, { useEffect, useRef, useState } from 'react';
@@ -80,13 +80,6 @@ export const Description = () => {
     debouncedUpdateClassroom(updatedClassroom);
   };
 
-  const handleBlur = () => {
-    if (JSON.stringify(updatedClassroomState) !== '{}') {
-      window.clearTimeout(timeoutId.current);
-      updateClassroomMutation.mutate(updatedClassroomState);
-    }
-  };
-
   useEffect(() => {
     setUpdatedClassroomState({});
   }, [classroom]);
@@ -97,57 +90,37 @@ export const Description = () => {
       initialOpenValue
       title={intl.formatMessage(messages.title)}
     >
-      <Form
-        value={{ ...classroom, ...updatedClassroomState }}
-        onBlur={handleBlur}
-      >
-        <FormField
-          label={intl.formatMessage(messages.descriptionLabel)}
-          htmlFor="description"
-          margin={{ bottom: 'medium' }}
-        >
-          <TextArea
-            name="description"
-            id="description"
-            value={{ ...classroom, ...updatedClassroomState }.description || ''}
-            onChange={(e) => {
-              handleChange({ description: e.target.value });
-            }}
-            resize="vertical"
-            style={{
-              minHeight: '150px',
-            }}
-            onInput={(e) => {
-              e.currentTarget.style.height = 'auto';
-              e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
-            }}
-          />
-        </FormField>
-        <FormField
+      <TextArea
+        label={intl.formatMessage(messages.descriptionLabel)}
+        value={{ ...classroom, ...updatedClassroomState }.description || ''}
+        onChange={(e) => {
+          handleChange({ description: e.target.value });
+        }}
+        style={{
+          minHeight: '150px',
+        }}
+        onInput={(e) => {
+          e.currentTarget.style.height = 'auto';
+          e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+        }}
+      />
+
+      <Field className="mt-s" fullWidth>
+        <TextArea
           label={intl.formatMessage(messages.welcomeTextLabel)}
-          htmlFor="welcome_text"
-          margin={{ bottom: 'medium' }}
-        >
-          <TextArea
-            name="welcome_text"
-            id="welcome_text"
-            value={
-              { ...classroom, ...updatedClassroomState }.welcome_text || ''
-            }
-            onChange={(e) => {
-              handleChange({ welcome_text: e.target.value });
-            }}
-            resize="vertical"
-            style={{
-              minHeight: '150px',
-            }}
-            onInput={(e) => {
-              e.currentTarget.style.height = 'auto';
-              e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
-            }}
-          />
-        </FormField>
-      </Form>
+          value={{ ...classroom, ...updatedClassroomState }.welcome_text || ''}
+          onChange={(e) => {
+            handleChange({ welcome_text: e.target.value });
+          }}
+          style={{
+            minHeight: '150px',
+          }}
+          onInput={(e) => {
+            e.currentTarget.style.height = 'auto';
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
+          }}
+        />
+      </Field>
     </FoldableItem>
   );
 };
diff --git a/...b_classroom/src/components/ClassroomWidgetProvider/widgets/ToolsAndApplications/index.tsx b/...b_classroom/src/components/ClassroomWidgetProvider/widgets/ToolsAndApplications/index.tsx
@@ -1,10 +1,5 @@
-import {
-  Box,
-  Classroom,
-  FoldableItem,
-  TextAreaInput,
-  ToggleInput,
-} from 'lib-components';
+import { TextArea } from '@openfun/cunningham-react';
+import { Box, Classroom, FoldableItem, ToggleInput } from 'lib-components';
 import React, { useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';
@@ -178,20 +173,18 @@ export const ToolsAndApplications = () => {
         }
       />
       {updatedClassroomState.enable_recordings && (
-        <TextAreaInput
-          title={intl.formatMessage(messages.recordingPurpose)}
-          placeholder={intl.formatMessage(messages.recordingPurpose)}
+        <TextArea
+          label={intl.formatMessage(messages.recordingPurpose)}
           value={
             { ...classroom, ...updatedClassroomState }.recording_purpose || ''
           }
-          setValue={(recording_purpose) => {
-            handleChange({ recording_purpose });
+          onChange={(e) => handleChange({ recording_purpose: e.target.value })}
+          style={{
+            minHeight: '150px',
           }}
-          formFieldProps={{
-            margin: { bottom: 'medium' },
-            style: {
-              minHeight: 'auto',
-            },
+          onInput={(e) => {
+            e.currentTarget.style.height = 'auto';
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`;
           }}
         />
       )}

diff --git a/src/frontend/packages/lib_common/cunningham.ts b/src/frontend/packages/lib_common/cunningham.ts
@@ -55,6 +55,18 @@ const config = {
         },
       },
       components: {
+        'forms-textarea': {
+          'border-color': 'var(--c--components--forms-textarea--border-color)',
+          'border-color-hover':
+            'var(--c--components--forms-textarea--border-color)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-textarea--border-radius)',
+            focus: 'var(--c--components--forms-textarea--border-radius)',
+          },
+          disabled: {
+            'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
+          },
+        },
         'forms-checkbox': {
           'background-color': {
             hover: '#055fd214',
@@ -65,6 +77,9 @@ const config = {
         'forms-labelledbox': {
           'label-color': {
             small: 'var(--c--theme--colors--primary-500)',
+            big: {
+              disabled: 'var(--c--theme--colors--greyscale-400)',
+            },
           },
         },
         'forms-switch': {

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css
@@ -16,7 +16,7 @@
 .labelled-box--disabled label {
   color: var(--c--components--forms-labelledbox--label-color--small--disabled);
 }
-.labelled-box label.placeholder {
+.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
   top: 50%;
   transform: translateY(-50%);
 }
@@ -32,20 +32,23 @@
 }
 /**
  * Input
+ * TextArea
 */
-.c__input__wrapper {
+.c__input__wrapper, .c__textarea__wrapper {
   transition: all var(--c--theme--transitions--duration)
     var(--c--theme--transitions--ease-out);
 }
 .c__input__wrapper:has(input[readonly]), .c__input__wrapper:has(input[readonly]) * {
   cursor: default;
 }
+.c__textarea__wrapper:has(input.border-none), .c__textarea__wrapper:has(input.border-none) *,
 .c__input__wrapper:has(input.border-none), .c__input__wrapper:has(input.border-none) * {
   border: none;
 }
-.c__input__wrapper:hover {
+.c__input__wrapper:hover, .c__textarea__wrapper:hover {
   box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
 }
+.c__textarea__wrapper--disabled:hover, 
 .c__input__wrapper--disabled:hover, .c__input__wrapper:hover:has(input[readonly]) {
   box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 0px;
 }
@@ -55,7 +58,7 @@
 .c__input__wrapper .labelled-box__label.placeholder {
   cursor: inherit;
 }
-.c__input__wrapper .c__input {
+.c__input__wrapper .c__input, .c__textarea__wrapper .c__textarea {
   color: var(--c--components--forms-input--color);
   width: 100%;
 }
@@ -68,6 +71,12 @@ input:-webkit-autofill:focus {
     background-color 0s 600000s,
     color 0s 600000s;
 }
+.c__textarea__wrapper:hover {
+  border-color: var(--c--components--forms-textarea--border-color-hover);
+}
+.c__textarea__wrapper--disabled:hover {
+  border-color: var(--c--components--forms-textarea--disabled--border-color-hover);
+}
 /**
  * Select
 */

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.css
@@ -132,10 +132,16 @@
 	--c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
 	--c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 	--c--theme--transitions--duration: 250ms;
+	--c--components--forms-textarea--border-color: var(--c--components--forms-textarea--border-color);
+	--c--components--forms-textarea--border-color-hover: var(--c--components--forms-textarea--border-color);
+	--c--components--forms-textarea--border-radius--hover: var(--c--components--forms-textarea--border-radius);
+	--c--components--forms-textarea--border-radius--focus: var(--c--components--forms-textarea--border-radius);
+	--c--components--forms-textarea--disabled--border-color-hover: var(--c--theme--colors--greyscale-200);
 	--c--components--forms-checkbox--background-color--hover: #055fd214;
 	--c--components--forms-checkbox--color: var(--c--theme--colors--primary-500);
 	--c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--ml);
 	--c--components--forms-labelledbox--label-color--small: var(--c--theme--colors--primary-500);
+	--c--components--forms-labelledbox--label-color--big--disabled: var(--c--theme--colors--greyscale-400);
 	--c--components--forms-switch--accent-color: var(--c--theme--colors--primary-400);
 	--c--components--button--border-radius--active: var(--c--components--button--border-radius);
 	--c--components--button--medium-height: auto;