Skip to content

Fix/bugs in datepicker #620

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Sep 23, 2024
Merged

Fix/bugs in datepicker #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7304aa
fixed_problems_from_jira_1_3_4
Kron1749 Sep 18, 2024
14d9506
fixed_hover_state_light_theme
Kron1749 Sep 18, 2024
47a7980
removed_some_neomorph_styles_from_usual_datepicker
Kron1749 Sep 18, 2024
7b9d264
deleted_another_placeholder
Kron1749 Sep 19, 2024
ab4fb0a
Fix 'default default' issue
Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions src/components/DatePicker/SDatePicker/SDatePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div :class="computedClasses">
<span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
<el-date-picker
ref="picker"
v-model="model"
Expand Down Expand Up @@ -46,12 +45,13 @@ import { ElFormItem } from 'element-ui/types/form-item'
import { SIcon } from '../../Icon/SIcon'
import SizeMixin from '../../../mixins/SizeMixin'
import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
import { PickerTypes, PickerAlignment, InputTypes } from '../consts'

@Component({
components: { ElDatePicker, SIcon }
})
export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin, DesignSystemInject) {
/**
* Value of date picker component. Can be used with `v-model`.
* Can be date object / array with date objects for date range picker
Expand Down Expand Up @@ -212,13 +212,6 @@ export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
return this.isInputType && this.clearable
}

get willPlaceholderBeShown (): boolean {
if (!this.isInputType) {
return false
}
return !!(this.model && this.placeholder)
}

get computedPopperClass (): string {
const cssClasses: Array<string> = []
if (this.popperClass) {
Expand All @@ -237,6 +230,9 @@ export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
} else if (this.isStandardSize) {
cssClasses.push(`s-${this.size}`)
}
if (this.isNeumorphic) {
cssClasses.push('neumorphic')
}
if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
}
Expand Down
4 changes: 2 additions & 2 deletions src/stories/SDatePicker.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePick

export default {
component: SDatePicker,
title: 'Design System/Components/Date Picker',
title: 'Design System/Components/Date Picker 🟣',
excludeStories: /.*Data$/,
argTypes: {
unlinkPanels: {
Expand Down Expand Up @@ -95,7 +95,7 @@ export const configurable: Story = (args, { argTypes }) => ({
:align="align"
:border-radius="borderRadius"
:popper-class="borderRadius"
:input-type="inputType"
:input-type="inputType"
placeholder="Select date"
start-placeholder="From"
end-placeholder="To"
Expand Down
2 changes: 1 addition & 1 deletion src/styles/datepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ $date-picker-padding: 8px;
.el-input__inner,
.s-placeholder {
color: var(--s-color-base-content-quaternary);
background-color: var(--s-color-base-disabled);
background-color: var(--s-color-base-background);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/styles/neumorphism/collapse.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$neu-collapse-button-size: var(--s-size-medium);
$neu-collapse-button-border-width: 0px !default;
$neu-collapse-button-border-style: solid !default !default;
$neu-collapse-button-border-style: solid !default;
$neu-collapse-button-background-color: var(--s-color-utility-body) !default;
$neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default;
$neu-collapse-button-text-color-hover: var(--s-color-base-content-secondary) !default;
Expand Down
82 changes: 46 additions & 36 deletions src/styles/neumorphism/datepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,11 @@ $date-picker-padding: 8px;
}
.el-input__inner,
.s-placeholder {
background-color: var(--s-color-base-background-hover);
background-color: var(--s-color-utility-surface);
[design-system-theme="dark"] & {
background-color: var(--s-color-base-background-hover);
}

}
}
.s-placeholder + .el-date-editor {
Expand All @@ -154,15 +158,17 @@ $date-picker-padding: 8px;
}
&.s-disabled {
.el-input__inner {
border-color: var(--s-color-base-disabled);
border-color: var(--neu-datepicker-background-color);
}
.el-input__inner,
.s-placeholder {
color: var(--s-color-base-content-quaternary);
background-color: var(--s-color-base-disabled);
background-color: var(--s-color-base-background);
}
}
}


.s-placeholder {
// TODO: add default animation from material-ui
color: var(--s-color-base-content-tertiary);
Expand Down Expand Up @@ -224,7 +230,7 @@ $date-picker-padding: 8px;
.el-date-editor.el-input__inner,
.el-date-editor .el-input__inner {
color: var(--s-color-base-content-quaternary);
border-color: var(--s-color-base-disabled);
border-color: var(--neu-datepicker-background-color);
background-color: var(--s-color-utility-surface);
&::placeholder {
color: var(--s-color-base-content-quaternary);
Expand Down Expand Up @@ -375,48 +381,51 @@ $date-picker-padding: 8px;
color: var(--s-color-utility-surface);
}
}
}
}
&[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: var(--s-color-base-content-tertiary);
}
}

.el-picker-panel__footer {
box-shadow: var(--neu-datepicker-box-shadow);
background-color: var(--neu-datepicker-background-color);
border-top-color: $neu-datepicker-border-main !important;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
> .el-button {
text-transform: uppercase;
height: 32px;
.el-picker-panel__footer {
box-shadow: var(--neu-datepicker-box-shadow);
background-color: var(--neu-datepicker-background-color);
border-top-color: $neu-datepicker-border-main !important;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
> .el-button {
text-transform: uppercase;
height: 32px;
border-radius: var(--s-border-radius-big);
&:hover,
&:focus {
color: var(--s-color-theme-accent);
}
&.is-disabled.is-plain {
background-color: var(--s-color-base-content-tertiary);
}

&.is-plain {
border-color: transparent;
background-color: $neu-datepicker-background-color-btn;
color: $neu-datepicker-text-color-btn;
box-shadow: var(--neu-datepicker-box-shadow-btn);
border-radius: var(--s-border-radius-big);

&:hover,
&:focus {
color: var(--s-color-theme-accent);
}
&.is-disabled.is-plain {
background-color: var(--s-color-base-content-tertiary);
}

&.is-plain {
border-color: transparent;
background-color: $neu-datepicker-background-color-btn;
color: $neu-datepicker-text-color-btn;
box-shadow: var(--neu-datepicker-box-shadow-btn);
border-radius: var(--s-border-radius-big);

&:hover,
&:focus {
color: $neu-datepicker-text-color-btn;
border-color: $neu-datepicker-border-main;
[design-system-theme="dark"] & {
border-color: var(--s-color-theme-accent-hover);
}
border-color: $neu-datepicker-border-main;
[design-system-theme="dark"] & {
border-color: var(--s-color-base-content-primary);
}
}
}
}
div[x-arrow].popper__arrow {
border-bottom-color: var(--s-color-base-background-hover);
}
}
div[x-arrow].popper__arrow {
border-bottom: unset;
}

.el-input.is-disabled .el-input__inner {
background-color: var(--neu-datepicker-background-color);
Expand All @@ -426,6 +435,7 @@ $date-picker-padding: 8px;
}
}


.el-input--small {
.el-input__inner {
padding: 6px 12px;
Expand Down