openfun · AntoLC · Oct 24, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Replace grommet Button (#2453)
+
 ## [4.7.0] - 2023-10-19
 
 ### Added

diff --git a/...tend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx b/...tend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Grid } from 'grommet';
-import { AddCircle } from 'grommet-icons';
+import { Button } from '@openfun/cunningham-react';
+import { Box, Grid } from 'grommet';
 import { Nullable } from 'lib-common';
 import { Classroom, ClassroomSVG, ContentCard, Text } from 'lib-components';
 import React from 'react';
@@ -82,11 +82,12 @@ export const SelectContentSection = ({
     <Box>
       <Box margin={{ vertical: 'medium' }}>
         <Button
-          icon={<AddCircle />}
-          secondary
-          label={intl.formatMessage(messages.addClassroom)}
+          icon={<span className="material-icons">add_circle</span>}
           onClick={addAndSelectContent}
-        />
+          style={{ alignSelf: 'start' }}
+        >
+          {intl.formatMessage(messages.addClassroom)}
+        </Button>
       </Box>
       <Grid columns="small" gap="small">
         {items?.map((item: Classroom) => {

diff --git a/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx b/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Button } from 'grommet';
+import { Button } from '@openfun/cunningham-react';
+import { Box } from 'grommet';
 import {
   PlusSVG,
   Text,
@@ -142,7 +143,7 @@ export const UploadFiles = () => {
           size: 'small',
           color: 'blue-active',
         }}
-        margin={{ bottom: 'large' }}
+        margin={{ bottom: 'medium' }}
         round="small"
       >
         {uploadsInProgress.length > 0 && (
@@ -213,6 +214,7 @@ export const UploadFiles = () => {
                   direction={filesToUpload.length === 0 ? 'column' : 'row'}
                   align="center"
                   gap="medium"
+                  style={{ cursor: 'pointer' }}
                 >
                   {filesToUpload.length === 0 ? (
                     <PlusSVG iconColor="#75A7E5" height="100px" width="100px" />
@@ -235,14 +237,19 @@ export const UploadFiles = () => {
       </Box>
 
       <Button
-        primary
+        className="mb-s p-b"
         onClick={() => {
           void uploadFiles();
         }}
-        label={intl.formatMessage(messages.uploadButtonLabel)}
-        margin={{ bottom: 'large' }}
+        aria-label={intl.formatMessage(messages.uploadButtonLabel)}
         disabled={filesToUpload.length === 0}
-      />
+        style={{
+          alignSelf: 'center',
+        }}
+        fullWidth
+      >
+        {intl.formatMessage(messages.uploadButtonLabel)}
+      </Button>
     </Box>
   );
 };
diff --git a/...ontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx b/...ontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, Grid } from 'grommet';
-import { AddCircle, DocumentStore } from 'grommet-icons';
+import { Button } from '@openfun/cunningham-react';
+import { Box, Grid } from 'grommet';
+import { DocumentStore } from 'grommet-icons';
 import { Nullable } from 'lib-common';
 import { ContentCard, FileDepository, Text } from 'lib-components';
 import React from 'react';
@@ -84,11 +85,12 @@ export const SelectContentSection = ({
     <Box>
       <Box margin={{ vertical: 'medium' }}>
         <Button
-          icon={<AddCircle />}
-          secondary
-          label={intl.formatMessage(messages.addFileDepository)}
+          icon={<span className="material-icons">add_circle</span>}
           onClick={addAndSelectContent}
-        />
+          style={{ alignSelf: 'start' }}
+        >
+          {intl.formatMessage(messages.addFileDepository)}
+        </Button>
       </Box>
       <Grid columns="small" gap="small">
         {items?.map((item: FileDepository) => (

diff --git a/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/MarkdownWizard/index.tsx
@@ -1,5 +1,5 @@
-import { Input } from '@openfun/cunningham-react';
-import { Box, Button } from 'grommet';
+import { Button, Input } from '@openfun/cunningham-react';
+import { Box } from 'grommet';
 import { Breakpoints } from 'lib-common';
 import { Text, WhiteCard, WizardLayout, useResponsive } from 'lib-components';
 import {
@@ -106,9 +106,9 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
           />
 
           <Button
-            a11yTitle={intl.formatMessage(messages.createMarkdownButtonLabel)}
+            fullWidth
+            aria-label={intl.formatMessage(messages.createMarkdownButtonLabel)}
             disabled={!localTitle}
-            label={intl.formatMessage(messages.createMarkdownButtonLabel)}
             onClick={() => {
               saveDocumentTranslations({
                 language_code: language,
@@ -117,10 +117,10 @@ export const MarkdownWizard = ({ markdownDocumentId }: MarkdownWizardProps) => {
                 rendered_content: '',
               });
             }}
-            primary
-            style={{ minHeight: '50px', fontFamily: 'Roboto-Medium' }}
             title={intl.formatMessage(messages.createMarkdownButtonLabel)}
-          />
+          >
+            {intl.formatMessage(messages.createMarkdownButtonLabel)}
+          </Button>
         </Box>
       </WhiteCard>
     </WizardLayout>

diff --git a/...ntend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx b/...ntend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, Grid } from 'grommet';
-import { AddCircle, DocumentText } from 'grommet-icons';
+import { Button } from '@openfun/cunningham-react';
+import { Box, Grid } from 'grommet';
+import { DocumentText } from 'grommet-icons';
 import { Nullable } from 'lib-common';
 import {
   ContentCard,
@@ -96,11 +97,12 @@ export const SelectContentSection = ({
     <Box>
       <Box margin={{ vertical: 'medium' }}>
         <Button
-          icon={<AddCircle />}
-          secondary
-          label={intl.formatMessage(messages.addDocument)}
+          icon={<span className="material-icons">add_circle</span>}
           onClick={addAndSelectContent}
-        />
+          style={{ alignSelf: 'start' }}
+        >
+          {intl.formatMessage(messages.addDocument)}
+        </Button>
       </Box>
       <Grid columns="small" gap="small">
         {items?.map((item: MarkdownDocument) => {

diff --git a/src/frontend/apps/lti_site/components/ActionLink/ActionLink.tsx b/src/frontend/apps/lti_site/components/ActionLink/ActionLink.tsx
diff --git a/...rontend/apps/lti_site/components/DashboardDocument/DashboardDocumentPaneButtons/index.tsx b/...rontend/apps/lti_site/components/DashboardDocument/DashboardDocumentPaneButtons/index.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@openfun/cunningham-react';
 import { Box } from 'grommet';
 import {
-  DashboardButton,
   Document,
   builderUploadFormRoute,
   modelName,
@@ -12,7 +12,7 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { PLAYER_ROUTE } from 'components/routes';
 
-const DashboardButtonWithLink = withLink(DashboardButton);
+const ButtonWithLink = withLink(Button);
 
 const messages = defineMessages({
   btnPlay: {
@@ -56,24 +56,20 @@ export const DashboardDocumentPaneButtons = ({
       justify={displayWatchBtn ? 'center' : 'end'}
       margin="small"
     >
-      <DashboardButtonWithLink
-        label={
-          <FormattedMessage
-            {...(document.upload_state === uploadState.PENDING &&
-            !uploadManagerState[document.id]
-              ? messages.btnUploadFirst
-              : messages.btnReplace)}
-          />
-        }
-        primary={!displayWatchBtn}
+      <ButtonWithLink
         to={builderUploadFormRoute(modelName.DOCUMENTS, document.id)}
-      />
-      {displayWatchBtn && (
-        <DashboardButtonWithLink
-          label={<FormattedMessage {...messages.btnPlay} />}
-          primary={displayWatchBtn}
-          to={`/${PLAYER_ROUTE.base}/${PLAYER_ROUTE.documents}`}
+      >
+        <FormattedMessage
+          {...(document.upload_state === uploadState.PENDING &&
+          !uploadManagerState[document.id]
+            ? messages.btnUploadFirst
+            : messages.btnReplace)}
         />
+      </ButtonWithLink>
+      {displayWatchBtn && (
+        <ButtonWithLink to={`/${PLAYER_ROUTE.base}/${PLAYER_ROUTE.documents}`}>
+          <FormattedMessage {...messages.btnPlay} />
+        </ButtonWithLink>
       )}
     </Box>
   );

diff --git a/src/frontend/apps/lti_site/components/DashboardDocument/DashboardDocumentTitleForm/index.tsx b/src/frontend/apps/lti_site/components/DashboardDocument/DashboardDocumentTitleForm/index.tsx
@@ -1,6 +1,6 @@
-import { Input } from '@openfun/cunningham-react';
-import { Button, Form } from 'grommet';
-import { Maybe } from 'lib-common';
+import { Button, Input } from '@openfun/cunningham-react';
+import { Form } from 'grommet';
+import { Maybe, colorsTokens } from 'lib-common';
 import {
   Document,
   Text,
@@ -83,15 +83,12 @@ export const DashboardDocumentTitleForm = ({
           state={error ? 'error' : undefined}
           text={error}
         />
-        <Button
-          type="submit"
-          primary
-          label="Submit"
-          margin={{ top: 'small' }}
-        />
+        <Button type="submit" className="mt-t">
+          Submit
+        </Button>
         {udpated && (
           <Text
-            color="var(--c--theme--colors--success-500)"
+            color={colorsTokens['success-500']}
             className="ml-s"
             weight="bold"
           >

diff --git a/src/frontend/apps/lti_site/components/DashboardDocument/index.tsx b/src/frontend/apps/lti_site/components/DashboardDocument/index.tsx
@@ -1,4 +1,5 @@
 import { Box } from 'grommet';
+import { colorsTokens } from 'lib-common';
 import {
   Document,
   Heading,
@@ -65,7 +66,7 @@ const CommonStatusLine = ({
     <Heading
       level={5}
       style={{ margin: 0, paddingRight: '1rem' }}
-      color="var(--c--theme--colors--secondary-text)"
+      color={colorsTokens['secondary-text']}
     >
       <FormattedMessage {...messages.title} />
     </Heading>
@@ -112,7 +113,7 @@ const DashboardDocument = (props: DashboardDocumentProps) => {
               <Heading
                 level={5}
                 style={{ margin: 0, paddingRight: '1rem' }}
-                color="var(--c--theme--colors--secondary-text)"
+                color={colorsTokens['secondary-text']}
               >
                 {intl.formatMessage(messages.filename)}
               </Heading>

diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
@@ -1,5 +1,5 @@
-import { Input, Loader } from '@openfun/cunningham-react';
-import { Box, Button } from 'grommet';
+import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { Box } from 'grommet';
 import { AddCircle, Trash } from 'grommet-icons';
 import {
   CopyClipboard,
@@ -109,11 +109,11 @@ export const PlaylistPortabilityList = ({
           pad={{ left: 'small', right: 'none' }}
           action={(item, index) => (
             <Button
+              color="tertiary"
               aria-label={intl.formatMessage(messages.removePortability, {
                 title: item.title,
               })}
               key={index}
-              plain
               icon={<Trash />}
               onClick={() => {
                 removePlaylistPortability(item.id);

diff --git a/src/frontend/apps/lti_site/components/PortabilityRequest/index.tsx b/src/frontend/apps/lti_site/components/PortabilityRequest/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Button } from 'grommet';
+import { Button } from '@openfun/cunningham-react';
+import { Box } from 'grommet';
 import { Clock } from 'grommet-icons';
 import {
   DecodedJwtLTI,
@@ -117,11 +118,9 @@ export const PortabilityRequest = ({
           <Text type="p" className="mt-s">
             <FormattedMessage {...messages.pleaseMakeRequest} />
           </Text>
-          <Button
-            label={intl.formatMessage(messages.requestBtnLabel)}
-            onClick={onRequestBtnClick}
-            primary
-          />
+          <Button onClick={onRequestBtnClick}>
+            {intl.formatMessage(messages.requestBtnLabel)}
+          </Button>
         </React.Fragment>
       )}
     </Box>

diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, Grid } from 'grommet';
-import { AddCircle, Document as DocumentIcon } from 'grommet-icons';
+import { Button } from '@openfun/cunningham-react';
+import { Box, Grid } from 'grommet';
+import { Document as DocumentIcon } from 'grommet-icons';
 import { Nullable } from 'lib-common';
 import {
   ContentCard,
@@ -141,11 +142,12 @@ export const SelectContentSection = ({
     <Box>
       <Box margin={{ vertical: 'medium' }}>
         <Button
-          icon={<AddCircle />}
-          secondary
-          label={addMessage}
+          icon={<span className="material-icons">add_circle</span>}
           onClick={addAndSelectContent}
-        />
+          style={{ alignSelf: 'start' }}
+        >
+          {addMessage}
+        </Button>
       </Box>
       <Grid columns="small" gap="small">
         {items?.map(