Commit Graph

196 Commits

Author SHA1 Message Date
Nathan Vasse
6ebeb116d3 ♻️(react) migrate Modals to react modal
We encoutered an issue where stacked modal backdrop were not rendered
above the modal below. It was caused by the dialog element that is
natively rendered on the top layer regardless where it is create in
the DOM. So we decided to use react modal that provides hand crafted
dialog, and implementing a11y features.

Closes #314
2024-04-23 14:38:44 +02:00
Nathan Vasse
c61b2ac43d (react) introduce large and extra-large new modal sizes
We realized it was missing an in between medium and large existing
modal sizes. The old large now become extra-large.

Closes #313
2024-04-23 14:38:44 +02:00
Nathan Vasse
c81c0eaf43 🔖(release) version packages
Bump @openfun/cunningham-react to 2.7.0
2024-03-28 17:36:03 +01:00
Nathan Vasse
dd1f2be22c 📦️(react) remove public files from build
Those unwanted files were included in the build, thus in the package.

Fixes #308
2024-03-28 11:31:36 +01:00
Nathan Vasse
a8ec9fb757 (react) add InputPassword
We had the need to have a built-in password input able to show or
hide the password.

Closes #301
2024-03-21 17:16:39 +01:00
Nathan Vasse
0ef7684b12 (react) add Tooltip component
This component will allow to provide contextual information on any
DOM node.

Closes #239
2024-03-21 16:14:55 +01:00
Nathan Vasse
b4a6367bce 🐛(react) fix DataGrid selection checkbox rerendering
Each time a row was select or unselect the checkbox was re-triggering
its animation, which looked buggy.

Fixes #37
2024-03-19 14:34:14 +01:00
Nathan Vasse
20f5bb703b ♻️(react) make className standard across components
The className prop was sometimes set onto the nested element and
sometimes on the container element, which was not consistent. Now
we always set the className onto the upmost element.
2024-03-19 14:15:35 +01:00
Nathan Vasse
f398e51db3 (react) add width property to DataGrid columns
Without this feature we needed to override CSS directly in order to
make columns a specific width.

Closes #240
2024-03-18 17:01:01 +01:00
Nathan Vasse
25e61c2b4a (react) add enableSorting support on DataGrid
Previously it was only available at column level. This way we will
be able to disable sorting on all columns at once.

Closes #298
2024-03-15 15:47:43 +01:00
Nathan Vasse
8e7300b92c 💄(react) add border-radius transition
This transition was not working, now this provides are smoother effect.

Closes #112
2024-03-13 15:53:59 +01:00
Nathan Vasse
974f139f14 🐛(react) add warning when onSortModelChange is missing
We encountered the case were a user reported that the column were
making cursor pointer but clicking on it was doing nothing. It was
caused by the fact that onSortModelChange was not provided. So in
this case we trigger a warning only if enableSorting is true on one
column at least.
2024-03-12 11:34:20 +01:00
Nathan Vasse
317cab4bad (react) add sorting on custom cells
Previously sorting on custom cells was not possible because they were
considered as "display cells" by React-Table, which is made for actions
columns, which aren't sortable.

Closes #296 #100
2024-03-12 11:34:20 +01:00
Nathan Vasse
30ec253ab0 (react) make Pagination goto input optionnal
Based on a recent request we needed to make it optionnal in order to
have simpler pagination in some cases.

Closes #183
2024-03-08 16:33:54 +01:00
Nathan Vasse
d63c203b21 🚨(react) fix CSS end warning usage
Next.js is warning about the usage of end instead of flex-end during
compilation.

Fixes #291
2024-03-08 15:06:25 +01:00
Nathan Vasse
31fa91e92f (react) add empty placeholder customization props
We want to be able to customize the empty placeholder label, add a
call to action and choose whether we want to display the image as well.

Closes #27
2024-03-06 17:43:29 +01:00
Nathan Vasse
c667d51a11 🔖(release) version packages
Bump @openfun/cunningham-tokens to 2.1.1
Bump @openfun/cunningham-react to 2.6.0
2024-03-04 15:50:15 +01:00
Nathan Vasse
04ab3306e2 (react) add onSearchInputChange callback to searchable select
We want to be able to notify an event when the search term of the
searchable select gets updated.
2024-03-04 14:40:40 +01:00
Nathan Vasse
680365a117 💄(react) make Modal close button sticky
We want to make sure this button is always visible inside scrollable
modals.

Fixes #278
2024-02-28 17:36:32 +01:00
Nathan Vasse
4fbd75cdcf 🐛(tokens) fix invalid sass with comma
The generated sass from tokens containing commas, like font families was
not valid due to the way maps are made in sass. So we wrap those value
in quotes.
2024-02-28 17:19:32 +01:00
Nathan Vasse
7461626822 📱(react) improve DateRangerPicker responsive
The component was not able to resize properly on narrow screens.
2024-02-28 17:19:32 +01:00
Nathan Vasse
54df5d6c71 💄(react) remove modal content outline on focus
This was giving a strange look n feel, neither improving a11y.
2024-02-28 17:19:32 +01:00
Nathan Vasse
ea39ea09fd 🔖(release) version packages
Bump @openfun/cunningham-react to 2.5.0
Bump cunningham-demo to 2.0.0
2024-02-21 16:43:45 +01:00
jbpenrath
be1e2e2614 💄(react) make modal backdrop color customisable
As we cannot user CSS vars into backdrop pseudo element, we decide to
create a dom element to simulate the modal backdrop.

Resolve #257
2024-02-15 14:54:17 +01:00
Lebaud Antoine
9795b7184b 🩹(react) fix DateRangePicker layout overflow
Resolved a width conflict in the date range picker where the field width
conflicted with the component's min-width. This caused content
overflow in the field container, resulting in layout issues.
2024-02-14 10:39:34 +01:00
Nathan Vasse
f685abb36c ♻️(react) use info design tokens
Some info variant of components were using primary design token instead
of info.
2024-02-13 15:14:05 +01:00
Nathan Vasse
ebfccc1f99 🐛(react) fix DatePicker dropdowns
When having a start date, using the year or month dropdown was
causing the calendar to abruptly close.

Fixes #244
2024-02-13 10:36:14 +01:00
Nathan Vasse
f16eed9a6d 🐛(react) fix Select submit button
As the default type of button is "submit", when including a Select
inside a form, clicking on any of its button was triggering form
submission.
2024-02-12 11:46:09 +01:00
Nathan Vasse
e79768c7ce 🐛(react) fix DatePicker submit button
As the default type of button is "submit", when including a DatePicker
inside a form, clicking on any of its button was triggering form
submission.

Fixes #245
2024-02-12 11:46:09 +01:00
Nathan Vasse
a32bac75db 🐛(react) fix missing selected option of Select
In some cases, when the options were newly built object, due to the
fact that we were using object equality to check for the current selected
item, it was not working in those cases.
2024-02-06 11:24:12 +01:00
Nathan Vasse
d61ab65d82 🐛(react) fix multi select menu opening
At first we had a simple bug were it was not possible to open the
menu by clicking on the label. This fix is a rework to consider
the select wrapper as the toggle button itself, which is what we
do on the mono version. This change caused various tests to fail.
2024-02-05 17:54:29 +01:00
Nathan Vasse
1445f4a222 (react) add Modal
Here it is! Our really wanted Modal component, based on Figma sketches.
2024-02-05 15:23:03 +01:00
Nathan Vasse
3616c72673 (demo) new demo
This new demo aims to take advantage of all the new Cunningham's
components. The old demo was kind of a draft, this new one gives
a better overview of what Cunningham is capable of.
2024-01-25 15:58:33 +01:00
Nathan Vasse
77921e018c (react) switch icons to material-icons-outlined
We decided to switch to this new icons family for aesthetic reasons.
2024-01-08 15:49:34 +01:00
Nathan Vasse
540cdc6896 💄(react) update Alert and Toast icon size
We realized that even if the Figma sketches indicates that the icons
are 16px in reality the rendered DOM was not visualy matching the
sketches. We needs 19px to match the sketches.
2024-01-08 15:49:34 +01:00
Nathan Vasse
132b676ff7 (react) add Toast component
This component allows to create dynamic Toast appearing at the bottom
of the screen for few seconds.
2024-01-05 16:38:09 +01:00
Nathan Vasse
33d0c9fdca (react) add Alert
Here is the Alert component based on recent delivered sketches.
There is a main component that based on props renders sub alert components.
2024-01-02 15:26:13 +01:00
Nathan Vasse
e90a5dd6e6 (react) add text variants to Button
These variant are smaller buttons without background that can be used
in cases where we want the Button to have a minimal design.
2024-01-02 15:26:13 +01:00
Nathan Vasse
6d91c1d19f (react) add useControllableState hook
This hook is used to create a state that can be controlled by the parent.
If not the state is handled internally. We start to have this redundant
use case across Cunningham, so creating a dedicated hook reduces the
components verbosity and complexity.
2024-01-02 15:26:13 +01:00
Nathan Vasse
3dd7b3ef8e 🔖(release) version packages
Bump @openfun/cunningham-react to 2.4.0
Bump @openfun/cunningham-tokens to 2.1.0
2023-12-12 11:39:32 +01:00
Nathan Vasse
7ddcfeb4bc 🐛(react) fix closing of menu via toggle button
Previously it was not possible to close the menu when clicking on
the toggle button on search select. It was caused by a conflicting
state update.
1. Downshift triggers closing the menu from getToggleButtonProps
2. wrapperProps was calling downshiftReturn.openMenu()
2023-11-30 10:40:13 +01:00
Nathan Vasse
b25aa8f078 🔖(release) version packages
Bump @openfun/cunningham-react to 2.3.0
2023-11-27 14:14:24 +01:00
Nathan Vasse
e3882eb308 🏷️(react) support ReactNode as input label
There are use cases that required to put links inside Checkboxes or
Radio inputs.
2023-11-27 10:02:28 +01:00
Nathan Vasse
6b6c0ea942 🔖(release) version packages
Bump @openfun/cunningham-react to 2.2.0
2023-11-24 11:15:55 +01:00
Nathan Vasse
94b32be5d3 (react) add monoline props to multi select
We want to enable a mode that prevent the pills the wrap on multiple
lines in order to control any height overflowing. In monoline mode the
selected items are displayed as text to allow text ellipsis, and the
menu renders the list items with checkboxes.
2023-11-24 11:01:41 +01:00
Nathan Vasse
b340272207 🔖(release) version packages
Bump @openfun/cunningham-react to 2.1.0
Bump cunningham-demo to 1.0.1
2023-11-03 11:19:31 +01:00
Lebaud Antoine
b714c3d543 📝(doc) update instructions to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices.
2023-10-24 20:32:42 +02:00
Nathan Vasse
bbf3df852f (react) add TextArea component
How could we ship a design system library without a textarea?
2023-10-24 11:56:47 +02:00
Nathan Vasse
01528b9377 (react) render Button as link
For a variety of reasons, such as accessibility or integration with
external react-router deps style we needed to be able to provide the
ability to render the Button component as link in order to be able
to provide link-specific attribute for rendering such as href.
2023-10-23 15:27:47 +02:00
Nathan Vasse
d39d33d02c 🐛(react) fix inputs overflowing placeholder
The oveflowing labels were spreading on two lines. I had to wrap a
span inside a label in order to be able to deal with the text-oveflow
plus the absolute positionning.
2023-10-16 12:01:35 +02:00