openfun / cunningham Goto Github PK

Bug Report

Problematic Behavior

On @openfun/[email protected].

In a controlled way, the checkbox doesn't change state (or change it 2 times on a row) when we click on it, the bug occurs when the card containing the checkbox is clickable.

A codesandbox was made to show the problem:
https://codesandbox.io/p/sandbox/react-ts-cunningham-prob-checkbox-controlled-7523d9

Purpose

Adding and using Cunningham in magnify, I have some thoughts and remarks

Proposal

• Add Icon section for how to use icons. Where to find them etc
• Why not add an "" component to simply add the icon name and not the css class (rounded / outlined / default / etc).
• Export prop types and prop attribute interfaces/types.

Feature Request

List of the features needed in order to finish the transition from Grommet to Cunningham design system:

Tabs component

• Tabs component - https://mui.com/material-ui/react-tabs/

Modal component

• Modal or Dialog component - https://mui.com/material-ui/react-dialog/

Popover component

• #176

Textarea component

• #179

Select component

• #187
• value with JSX.Element type
• label with JSX.Element type
• Virtualization (load data on scroll)
• required prop
• suggestion prop, to start the scroll to a specific value
• searchableFree prop, to search a potential value but let as well the possibility to use the value taped by the user (see example)
• 🐛 In a controlled way (with value), onChange is triggered on the first render.
• Select without border
• Searcheable without filtering onFocus: #166

In this case we need to be able to add an image per option.

Since some time, few flaky tests appeared during the CI execution, we can post here the one that occurred in order to fix them:

@openfun/cunningham-react:test:  FAIL  src/components/Forms/Select/mono.spec.tsx > <Select/> > Searchable > filters options when typing
@openfun/cunningham-react:test: AssertionError: expected 2 to be 1 // Object.is equality
@openfun/cunningham-react:test: 
@openfun/cunningham-react:test: - Expected
@openfun/cunningham-react:test: + Received
@openfun/cunningham-react:test: 
@openfun/cunningham-react:test: - 2
@openfun/cunningham-react:test: + 1
@openfun/cunningham-react:test: 
@openfun/cunningham-react:test:  ❯ Module.expectOptions src/components/Forms/Select/test-utils.tsx:9:26
@openfun/cunningham-react:test:       7| export const expectOptions = (expectedOptions: string[]) => {
@openfun/cunningham-react:test:       8|   const options = screen.getAllByRole("option");
@openfun/cunningham-react:test:       9|   expect(options.length).toBe(expectedOptions.length);
@openfun/cunningham-react:test:        |                          ^
@openfun/cunningham-react:test:      10|   options.forEach((option, i) => {
@openfun/cunningham-react:test:      11|     expect(option).toHaveTextContent(expectedOptions[i]);
@openfun/cunningham-react:test:  ❯ src/components/Forms/Select/mono.spec.tsx:132:7

Bug Report

Problematic Behavior

With the component SimpleDataGrid, if we have 2 columns using the method renderCell we get a react warning about
the keys that should be unique. This could in some cases lead to unexpected behavior.

A codesandbox was made to show the problem:
https://codesandbox.io/p/sandbox/react-ts-cunningham-datagrid-key-problem-rxccdh

At the moment it is impossible to render such list via the text attribute.

We could add a textItems that could receive a list of strings, which could be used as a list of errors when using the according state.

Problem:

In a controlled way with searchable mode, when we change the value, onChange returns us an undefined value.

How to reproduce

Codesandbox

https://codesandbox.io/p/sandbox/react-ts-cunningham-select-controled-undefined-qdj8sy

Purpose

Currently, Cunningham applies a CSS rule to all elements to enforce the use the font family base to all elements. This is weird as this prevent elements to inherit their font family to their parent.

Proposal

We should use a different rule to apply this font from the root, body or html element. In this way, by default elements will use the font family base but will inherit the font of their parent if they have a different one.

Our input's placeholder should not wrap.

Purpose

Adding and using Cunningham in magnify, I have some thoughts and remarks on the datagrid component

Proposal

• Be able to use nested fields without needing to use renderCell
• Set the min / max width of column
• Set the height of row / set the default padding of row. Exemple : A Select defaults to the entire top of the row with no spacing

Purpose

Currently, when a consumer customize global Cunningham tokens, those changes does not reflect on contextual component tokens. So the work to fully rebrand Cunningham is heavy.

Proposal

By default, contextual component tokens should be set with custom properties instead of raw values tokens.

// Before
--button-background-color: #00FFD2;

// After
--button-background-color: var(--color-primary-500);

It seems like this export configuration is not compatible with sass

Current workaround is to @import "@openfun/cunningham-react/dist/style"; which may break in future versions.

Error :

nc@xps15 ~/p/f/m/s/f/a/lti_site (install-cunningham)> yarn build-sass 
yarn run v1.22.19
$ sass scss/_main.scss ../../../backend/marsha/static/css/main.css --load-path=../../node_modules
Error: Can't find stylesheet to import.
   ╷
17 │ @import "@openfun/cunningham-react/style";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  scss/_main.scss 17:9  root stylesheet
error Command failed with exit code 65.

At the moment, for each component we need to manually define a Design tokens doc part and to make sure we exhaustively list and explain all available tokens defined in tokens.ts.

What I propose is to write a script in some way that parses tokens.ts and generate the Design tokens doc part, to achieve that we would maybe need to define descriptions of design tokens in comments like that:

import { DefaultTokens } from "@openfun/cunningham-tokens";

export const tokens = (defaults: DefaultTokens) => ({
  // Color of the background
  "accent-color": defaults.theme.colors["success-600"],
  // Color of the background
  "rail-background-color": defaults.theme.colors["greyscale-500"],
});

Currently, if we want to render a custom element into a cell, we must use the renderCell method. But this property cannot be defined next to the field property.

e.g:

  const database = [{ title: "toto" }];

<DataGrid
        rows={database}
        columns={[
          {
            field: "title",
            renderCell: (params) => <h1>{params.row.title}</h1>
          }
        ]} />

This will render :

But we expect that toto is render as a h1.

Once understood, it's fine to accept that field should not be defined if we need to use a custom rendering. But there is a remaining question with this logic.

If field property is not defined, does sorting column is still effective ?

Purpose

Adding and using Cunningham in magnify, I have some thoughts and remarks on the select component

Proposal

• To be able to disable the reset function of a select. (just remove the cross)
• Give the possibility to make a label optional. The information is not always useful in a select component, example: Select in a data grid.
• Add the ability to disable an option of a select with a disable attribute

Purpose

We need to demonstrate how to use Cunningham inputs with popular React form libraries (React Hook Form & Formik).

Proposal

Add within a documentation a dedicated part to explain that our inputs components are compatible with RHF & Formik. This documentation should also contain a story to demonstrate an implementation with RHF.

• Calendar opening on user click https://github.com/openfun/cunningham/assets/45729124/bd938d20-f0b6-441d-8e82-df5e5d25d504. Aria issue Interactive controls must not be nested
• Initial focused year in the year dropdown.
• Pressed selected calendar cell button when reopening the calendar.
• Set local in the test

Problem

Popover component doesn't seem exported in @openfun/cunningham-react.

Feature Request

It would be nice to have the part "Go to page" optional, it is a bit complicated if we don't want to display it on our component.

Bug Report

Problematic Behavior

On @openfun/[email protected].

The component Input has a warning about the property fullWidth not recognize.

A codesandbox was made to show the problem:
https://codesandbox.io/p/sandbox/react-ts-cunningham-input-error-fullwidth-lg7y2f

Problem location

051c79f#diff-011def717712a2954dcb40047dc1ff1eed86c6f7096cd10e7e94c914ffc2248fL32-L36

I guess since the last deps upgrade these errors appears during the compilation without preventing it from succeeding:

ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>' is not assignable to type 'ComponentType<ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>> | undefined'.
  Type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>' is not assignable to type 'FunctionComponent<ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<Props & RefAttributes<HTMLButtonElement>> | undefined' is not assignable to type 'WeakValidationMap<ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>> | undefined'.
        Type 'WeakValidationMap<Props & RefAttributes<HTMLButtonElement>>' has no properties in common with type 'WeakValidationMap<ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>>'.

7   component: Button
...

Current behavior

When having an 'inline' form, with the biggest button available size, we end up with the following layout:

Input and button heights are not matching.

Requested behavior

I suggest adding a new 'high' mode, that shares input's height (56px) to make the previous layout consistent, as follows:

Wdyt all? Do you think this addition would break design rules?

Purpose

Adding and using Cunningham in magnify, I have some thoughts and remarks on the checkbox component

Proposal

• have specific tokens to change the background color with and without hover. (And others ?)

• Even if in the specification it is not usual, why not add a pointer to the hover of a checbox / Radio / switch

Bug Report

Problematic Behavior

The component Select has a warning about a property isActive not recognize.

A codesandbox was made to show the problem:
https://codesandbox.io/p/sandbox/react-ts-cunningham-select-error-isactive-fv4rt8?file=/src/App.tsx

During our last meeting with @rlecellier he mentionned that the lib lacks exports of Option and SelectProps, we should improve the lib by exporting at least all component's props types and important associated types ( like Option is for Select ).

Hi,
When using the searchable select component, I have spotted this following minor issue:
When no result is found in the options' list, we display a very small white popover of few pixels' height. It feels quite weird, and the user might wonder if it's a rendering error. I would suggest two options:

1. Not showing any popover, because the options list is empty.
2. Showing an explicitno result disabled option.

Might be great to discuss it to the designer. Please find a screenshot to illustrate this (very) minor issue.

Running the tests yields lots of warnings.

yarn test

Add a TextArea component based on the standard Input.

Currently the first DataGrid implementation displays an illustration and basic message when there is no data to populate the component.

In the Figma, the empty state can have several layout.

• The illustration should be optional
• A call to action could be display to create a resource
• The label should be customized with the name of the related resource.

At the moment it is impossible to add a custom class to components. We could add a className attribute that would add the provided classes to the top-most dom element of the component.

WDYT @jbpenrath?

Purpose

Currently, the SassGenerator only take in account basics theme tokens, all components are ignored.

Proposal

The SassGenerator should act like other generator and include component tokens.

Purpose

Currently, we only expose React components from Cunningham. In some of your projects, some application views are based on html templates. So it could be interesting, to be able to quickly copy/paste a clean HTML structure of each components from the documentation.

Proposal

Like shopify/polaris did, we could render a React component then retrieve the HTML output to display it within the doc as a code block.

Our readme is too minimal and does not reflect the DS's components.

We should:

• IMO we miss a nice illustration ( maybe use Midjourney 😗 ), see Polaris example below
• Find a better wording
• Add components screenshots or gifs (?)
• Add preview of Storybook (?)
• ... ( give some ideas 😊 )

Bug Report

Problematic Behavior

Hi, I can see the css transition doesn't apply with the border-radius on most of the input.

https://openfun.github.io/cunningham/?path=/docs/components-forms-input--docs
https://openfun.github.io/cunningham/?path=/docs/components-forms-datepicker-doc--docs

Possible Solution

transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);

Currently, inputs has no background unlike control inputs and selects.

Purpose

Offer an option for uniform height across inline inputs.

Proposition

As soon as one option is selected in the multi-select component, its height increases. Inputs in the same row would render with a slightly different height. It feels a bit weird.

This proposition is inspired by other design systems, especially material ui and antd.

I would suggest one of these two options:

1. Improve the chip mode.
2. Add a one-line text mode.

Chip mode

• When chips fit on one line, make sure to keep the same height.
• When chips doesn't fit on one line, increase component's height.

Text mode

• Join selected options with a string separator (ex: ,)
• Wrap overflow using ...
• Make sure selected options still appears in the option list, with a selected style.

WDYT ?

Hi,
I have found this (very) minor issue on the LabelledBox component while building the date picker. Actually, when the LabelledBox component's child is active or focused, the label should be blue (...-color--focus) and not gray.

Current :

Target:

As we already have such classes c__field c__field--default c__field--compact @rlecellier proposed to add c__field--required for CSS selection purpose.

Purpose

A common use case of button component is to render as a link. Currently, Cunningham does not allow that.

Proposal

• Add as property to allow developer to enforce the component used to render the button.
  e.g:

<Button as={a}>A link</Button>
<Button as={RouterLinkComponent}>A link</Button>

Purpose

Adding and using Cunningham in magnify, I have some thoughts and remarks on the input component

Proposal

• If the input is of type password, add the possibility to show or hide it. (Don't forget the case if there is an icon on the left.)

• Be able to add a placeholder in addition to a label (or finally choose to put the placeholder in the text props. And why not use the placeholder props and use it in the text props)

• Have the same default height as the default button height

It appears that the use of {...register(...)} on Select component does not work due to a ref incompatibility. Though this could be overcome by using Controller but this is not what we intended by building this lib, it should work seamlessly.

Problematic behavior

About Date Picker component, currently the date format is defined according to the browser language. In some cases, Cunningham consumers would like to be able to enforce date format.

Expected behavior

Cunningham consumers should be able to set date format input through a property.

At the moment the design tokens shown on the documentation looks like that.

It doesn't well illustrate to users how to customize the values in a really straightforward way. While showing them in the following way would be much clearer I think, they would immediately understand where to edit them and also provide them the ability the quickly copy pasta in order to speed up things.

Please see also that can be related #56

Like checkbox, radio control should have a white background.