Skip to content

Conversation

@MefistAldemisov
Copy link
Contributor

@MefistAldemisov MefistAldemisov commented Aug 8, 2025

Slightly tunned the design of the component:

  1. Added outlined button type for xl sizes, because there is no focus in mobile version
  2. Capitalized the months' names
@gravity-ui-bot
Copy link
Contributor

Preview is ready.

Copy link
Contributor

@korvin89 korvin89 left a 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';
Copy link
Contributor

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Contributor

@korvin89 korvin89 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now the calendar design in the mobile version looks like this Image

There are a number of questions about this:

  1. The selector and the left button are not indented
  2. The right button has become very out of alignment.
$block: '.#{variables.$ns}calendar';

#{$block} {
--_--calendar-padding: var(--g-date-calendar-padding, 8px);
Copy link
Contributor

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);
Copy link
Contributor

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?

@korvin89 korvin89 changed the title feat: adopt calendar to mobile version feat(Calendar): use outlined buttons view in case of xl size Oct 16, 2025
@MefistAldemisov MefistAldemisov merged commit 281e02f into main Oct 16, 2025
3 checks passed
@MefistAldemisov MefistAldemisov deleted the feat/redesign-mobile-calendar branch October 16, 2025 09:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

4 participants