studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(react) fix DatePicker alignments

Browse Source 
Due to the previous changes of LabelledBox that allows it to fit dynamic
height containers, we forgot to update the DatePicker resulting in a broken
CSS alignment.
This commit is contained in:
Nathan Vasse
2023-06-19 16:00:45 +02:00
committed by NathanVss
parent 760ffb48e9
commit 501ba1a031
3 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/seven-icons-peel.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": patch
---
fix DatePicker alignments

7
packages/react/src/components/Forms/DatePicker/index.scss
View File

@@ -11,7 +11,7 @@
border-color: var(--c--components--forms-datepicker--border-color); border-color: var(--c--components--forms-datepicker--border-color);
border-style: var(--c--components--forms-datepicker--border-style); border-style: var(--c--components--forms-datepicker--border-style);
display: flex; display: flex;
align-items: center;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out); transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
padding: 0 0.75rem; padding: 0 0.75rem;
gap: 1rem; gap: 1rem;
@@ -25,6 +25,11 @@
&--clickable { &--clickable {
cursor: pointer; cursor: pointer;
} }
&__icon {
display: flex;
align-items: center;
}
} }
&__inner { &__inner {

34
packages/react/src/components/Forms/DatePicker/index.tsx
View File

@@ -130,22 +130,24 @@ export const DatePicker = ({
{state.value && ( {state.value && (
<input type="hidden" name={name} value={state.value?.toString()} /> <input type="hidden" name={name} value={state.value?.toString()} />
)} )}
<Button <div className="c__date-picker__wrapper__icon">
{...{ <Button
...otherButtonProps, {...{
"aria-label": t( ...otherButtonProps,
state.isOpen "aria-label": t(
? "components.forms.date_picker.toggle_button_aria_label_close" state.isOpen
: "components.forms.date_picker.toggle_button_aria_label_open" ? "components.forms.date_picker.toggle_button_aria_label_close"
), : "components.forms.date_picker.toggle_button_aria_label_open"
}} ),
color="tertiary" }}
size="small" color="tertiary"
className="c__date-picker__wrapper__toggle" size="small"
onClick={state.toggle} className="c__date-picker__wrapper__toggle"
icon={<span className="material-icons">calendar_today</span>} onClick={state.toggle}
disabled={disabled} icon={<span className="material-icons">calendar_today</span>}
/> disabled={disabled}
/>
</div>
<LabelledBox label={label} labelAsPlaceholder={labelAsPlaceholder}> <LabelledBox label={label} labelAsPlaceholder={labelAsPlaceholder}>
<div className="c__date-picker__inner"> <div className="c__date-picker__inner">
{!labelAsPlaceholder && ( {!labelAsPlaceholder && (