Commit Graph

153 Commits

Author SHA1 Message Date
Nathan Vasse
8086a48672 📝(react) improve form examples
We decided to improve the examples to fit better the guidelines of the
design-system.
2023-09-11 12:07:49 +02:00
Nathan Vasse
8fd34add8a 🐛(react) fix Radio, Checkbox fullWidth
The fullWidth was buggy for those components, the label was floating
in the middle of the empty space where it feels correct to keep it
aligned on the left.
2023-09-11 12:07:49 +02:00
Nathan Vasse
9de9a9735d 💄(react) improve Select actions ui
The button were too big compared to the sketches. So we re-adjust their
sizes and positions.
2023-09-11 12:07:49 +02:00
Nathan Vasse
cdace69482 💄(react) adjust checkbox and radio borders and colors
Based on a QA feedback.
2023-09-11 12:07:49 +02:00
Nathan Vasse
dce90eafb4 💄(react) add margin to right supporting text
If the left text is long it was able in some cases to be too close
to the right text.
2023-09-11 12:07:49 +02:00
Nathan Vasse
d36e31448e 💄(react) improve FileUploader style
Based on recent QA feedbacks we needed to do small changes to the style
of the FileUploader.
2023-09-11 12:07:49 +02:00
Nathan Vasse
6257dd9cbc 💄(react) fix DatePicker label focused
The label of the DatePicker was not using the specific focus color.
2023-09-11 12:07:49 +02:00
Nathan Vasse
cf542e4fa9 💄(react) fix DatePicker, Select, Input success colors
This is based on recent QA report.
2023-09-11 12:07:49 +02:00
Nathan Vasse
9a349c1556 💄(react) fix Select and Input error colors
This was a feedback from the QA.
2023-09-11 12:07:49 +02:00
Nathan Vasse
1c45b93a85 💄(react) homogenize form fields colors
Based on the QA feedbacks we figured out that form fields were not all
using the exact same greyscale colors.
2023-09-11 12:07:49 +02:00
Nathan Vasse
4c64cb3993 📝(react) add disabled form example
Before it wasn't really handy to see form inputs next to each other
in order to make sure that their style is homogeneous when being
disabled.
2023-09-11 12:07:49 +02:00
Nathan Vasse
94f392e037 💄(react) update DatePicker error color
The QA reported that the colors were not correct.
2023-09-11 12:07:49 +02:00
Nathan Vasse
37772a4b85 💄(react) update DatePicker segments colors
Based on QA feedbacks we just want a background color for the focused
segments.
2023-09-11 12:07:49 +02:00
Nathan Vasse
09e474c8c1 ♻️(react) update Pagination behavior
We want to make the Pagination more intuitive and fluent. Now it displays
the current page all the time, auto select, auto submits on blur.
2023-09-11 12:07:49 +02:00
Nathan Vasse
c90f66f0cd 💄(react) hide input number arrows
During our last meeting regarding the QA the designer told us to remove
the arrows on the number input. We can still change the value with the
keyboard arrows, so it does not cause a11y issues.
2023-09-11 12:07:49 +02:00
Nathan Vasse
71dc458ab4 ♻️(react) use nano Button inside DatePicker
Based on the last QA it appears that we were using wrong button size
and icon size ratio. By using the newly created nano size we can make
the code much simpler.
2023-09-11 12:07:49 +02:00
Nathan Vasse
32b8dc0915 💄(react) make DatePicker placeholders uppercase
This was a feedback from the QA.
2023-09-11 12:07:49 +02:00
Nathan Vasse
c0028966f1 (react) add a nano button, proper icon sizes
Previously we had to hack the button in order to display small clickable
icons, like the clear button in the DatePicker. By introducing a new
nano button we can natively achieve that. Also make more homegenous
font size and icon sizes in existing button sizes.
2023-09-11 12:07:49 +02:00
Nathan Vasse
495f7d3731 💄(react) fix DatePicker focus
Based on QA feedback the keyboard focus of the DatePicker was using
the browser default outline ( when navigating with tab key ), this
ensure a consistent style accross different focus modes.
2023-09-11 12:07:49 +02:00
Nathan Vasse
9be1ec52b3 💄(react) make the checkboxes column the smallest
QA feedbacks told us that the checkbox column was too wide, this update
makes it the smallest possible.
2023-09-11 12:07:49 +02:00
Nathan Vasse
cf299d9e2b 💄(react) align actions column items on the right
The design-system guidelines tell that actions button must be aligned
on the right. To make this behavior effortless this feature adds a
special class to actions column to apply the correct css style in order
to achieve that.
2023-09-11 12:07:49 +02:00
Nathan Vasse
4d2a5d1873 💄(react) update DataGrid empty placeholder's ui
The border was not matching the sketches.
2023-09-11 12:07:49 +02:00
Nathan Vasse
7128e7fef7 💄(react) using correct DataGrid header class
Previously the headers of the DataGrid were not aligned with the
correct title class.
2023-09-11 12:07:49 +02:00
Nathan Vasse
4e6e5a2e52 💄(react) fix Button style
QA-based updates to the Button components. It includes global UI updates
to make the Button to match the sketches.
2023-09-11 12:07:49 +02:00
Nathan Vasse
051c79fd6f ♻️(react) improve props propagation
Before we had to edit input components using Field when adding new props
to the latter.
2023-09-05 11:48:04 +02:00
Nathan Vasse
b530e966ae (react) add textItems to Field
This allow to add bullet points lists below inputs, the best example
is when we want to list multiple errors from form validation.

Fixes #147
2023-09-05 11:48:04 +02:00
Nathan Vasse
468c8161eb 📝(react) add RHF examples
Rework a bit the recent work made on RHF example to make some component
more generic, such as RhfSelect and RhfDatepicker, which is based on a
design using RHF context hooks to provide a seamless integration.

Fixes #144
2023-09-05 11:15:51 +02:00
Nathan Vasse
a88aa1a23d 🐛(react) fix isActive console warning
Previously when interacting with a select, the list items
were triggering a warning.
2023-09-05 11:15:51 +02:00
Nathan Vasse
66c25bcdbd 🏷️(react) export more types
Based on recent developers feedbacks that needed to use props types
in order to wrap the lib's component they were stuck because we were
not exporting all of them.

Fixes #143
2023-08-29 16:26:40 +02:00
jbpenrath
c89d9dc6df 🚨(react) fix linter warning & errors
With upgrade new linter warning and erros are popped up. So we fix it.
2023-08-21 15:33:50 +02:00
Anthony Le Courric
9edb9765db (react) position top datepicker
Position the datepicker on top of the input when the input is
at the bottom of the screen and whenthere is enough space to display
the datepicker on the top.
2023-08-21 12:32:14 +02:00
Romain Le Cellier
4eae45c4d9 🐛(react) fix RadioGroup optional prop
since 5dde74c10d RadioGroup style was a
mandatory property.
It should be optional.
2023-08-10 18:37:15 +02:00
Romain Le Cellier
3e1cdbe9d6 🚑️(react) fix unexisting import
Since b72d0d5c90 InputRefType doesn't
exist.
We missed some usage of it that are removed in this fix.
2023-08-10 18:37:15 +02:00
Romain Le Cellier
5dde74c10d 📝(react) react-hook-form forms Sports examples
Our forms needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
d0941ae0a7 📝(react) react-hook-form forms Login examples
Our forms needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
e3563f85d1 (react) react-hook-form Select example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
4e53857159 (react) react-hook-form Radio example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
d506cab978 (react) react-hook-form Checkbox example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
e3bf4cadf2 (react) react-hook-form Switch example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
b72d0d5c90 (react) react-hook-form Input example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Romain Le Cellier
3471e2e0b2 (react) add Button token font-family
Components font-family have to be customizable.
2023-08-04 17:42:18 +02:00
Lebaud Antoine
94ae861ae9 🚚(react) make datepicker utils tests a tsx file
In order to use vitest dependency, make the utils test file
use a tsx extension.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
7e5a11ec7d 📝(react) add a timezone management section to date picker docs
Describe the current behavior of date picker components,
especially with the recent changes in component's API.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
9d31c502b8 📝(react) document date picker utils functions
Add some docstring documentation to the newly updated utils
functions, to help understand what are their role and params.
User have a clear view of inputs and outputs timezone.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
cd42afb10e (react) add a timezone props on date picker components
By default, component's timezone is the user locale timezone.
Component now offers a way to set its timezone to any supported
Intl timezone format. Please note that output values from the
component will always be converted to a UTC timezone.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
0dc46d1144 (react) restrict inputs formats in date picker components
Enforces a standardized approach for end consumers using the
component's API. Consumers are now required to provide a date as an
ISO string in either UTC or with a UTC offset. The support for native
Date objects has been removed to ensure consistent and reliable
behavior across all implementations. By adopting this uniform input
format, we can simplify usage and avoid potential inconsistencies in
date handling.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
8cf8e1eba2 🩹(react) harmonize date picker components output
By introducing this utility function, we ensure that any output value
is converted back to an ISO 8601 date and time string in UTC timezone.
Overall, it harmonize and factorize the way we output
values from date picker components.
2023-08-02 19:02:22 +02:00
Lebaud Antoine
bae7392fe1 (react) strip "Today, " from selected date range literal
DateRangePicker aria-labels mention when a selected date range
contains today's date, which breaks the tests  while ran on the
first day of the month. Avoid these tests to be flaky.
2023-08-02 16:22:40 +02:00
Nathan Vasse
40f2eb2b06 ♻️(react) upgrade code for Downshift 8
This new major version broke our components, including the way the menu
gets opened, how to determine the disabled options and some other semantic
types changes.
2023-07-18 16:59:39 +02:00
Nathan Vasse
d85f9edac8 🚨(lint) update file for prettier 3.0.0
Prettier 3.0.0 comes with new standards so we need to upgrade our files
to comply with it.
2023-07-18 16:59:39 +02:00