-
Notifications
You must be signed in to change notification settings - Fork 7
feat: adopt calendar to mobile version #216
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Preview is ready. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Btw, there is no way (for now) to see this changes in all of our components (except Calendar in pure view) because we use native date pickers in case of mobile view (useMobile
hook output)
state, | ||
); | ||
|
||
const buttonView = props.size === 'xl' ? 'outlined' : 'flat'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why we should change button view according to the size
property? I suggest u to use useMobile
hook here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
$block: '.#{variables.$ns}calendar'; | ||
|
||
#{$block} { | ||
--_--calendar-padding: var(--g-date-calendar-padding, 8px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--g-date-calendar-padding
is public css variable. Removing it is a breaking change
#{$block} { | ||
--_--calendar-padding: var(--g-date-calendar-padding, 8px); | ||
--_--calendar-padding-x: var(--g-date-calendar-padding-x, 16px); | ||
--_--calendar-padding-y: var(--g-date-calendar-padding-y, 8px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why did you need to define these variables --g-date-calendar-padding-x
& --g-date-calendar-padding-y
?
Slightly tunned the design of the component:
xl
sizes, because there is no focus in mobile version