Commit Graph

144 Commits

Author SHA1 Message Date
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
Nathan Vasse
9661e280e0 🐛(react) fix DataGrid stories
Due to a recent update we need to set id for custom columns. This
wasn't reflected in stories.
2023-07-17 11:29:01 +02:00
Lebaud Antoine
2cd8c6e843 🐛(react) make DatePicker's tests no longer depend on the user's locale
Refactor tests to enhance simplicity and clarity by introducing
expected string values. This improvement is particularly relevant
for focused months and focused year scenarios. Consequently, the
tests no longer depend on the user's locale.
2023-07-13 14:22:43 +02:00
Lebaud Antoine
c35cc603a7 🐛(react) resolve development warning in CalendarAux component
Resolve development warning in `CalendarAux` component caused
by recent updates to react-aria dependencies. Update props for next
and previous calendar buttons, removing `onFocusChange` before
passing to the Button component.
2023-07-13 14:11:18 +02:00
Anthony LC
e4c1df5b0b 🐛(react) fix datagrid column unique key
If we had more than 1 columns with custom cells, we would get a warning
about duplicate keys, because every columns got the key `actions`.
We add the column index to the key to make it unique.
2023-07-12 16:06:09 +02:00
Nathan Vasse
2344cdbe6f (react) update DatePicker test
The recent updates of @react-aria renamed the segment name from
month to "month,", causing tests fails.
2023-07-12 15:47:35 +02:00
Nathan Vasse
16dd24148b (react) update DateRangerPicker test
Due to the recent update of @react-aria/calendar the role of the calendar
has changed from group to application, the test were using this role.
2023-07-12 15:47:35 +02:00
Lebaud Antoine
5338e2142f 📝(react) update incoming DatePicker features
Documentation was outdated, as the range date picker is now available.
2023-07-12 00:47:52 +02:00
Lebaud Antoine
5c61413949 📝(react) illustrate international calendars of DatePicker component
Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.
2023-07-12 00:47:52 +02:00
Lebaud Antoine
e1489b7fe0 (react) internationalize calendar system in DatePicker
Component was lacking some customization capabilities.
Using the browser calendar system wasn't enough modular.
This introduces a `locale` props, that allows a higher
customization of the component. By default, the calendar
system of the DatePicker is synchronized with the Cunningham
Provider.
2023-07-12 00:47:52 +02:00