From 1a529a818b984feda4872dac65cd62577a202c4d Mon Sep 17 00:00:00 2001 From: joneff Date: Wed, 20 Oct 2021 13:14:55 +0300 Subject: [PATCH] feat(dropdown-list): add size, shape and color customization to dropdown list BREAKING CHANGE: Use high-level picker for dropdown list base Dropdown list reuses the picker base component size, rounded and fill component options. --- .../bootstrap/scss/dropdownlist/_layout.scss | 9 -- packages/bootstrap/scss/pager/_theme.scss | 5 + .../default/scss/dropdownlist/_layout.scss | 91 ++++--------------- .../default/scss/dropdownlist/_theme.scss | 60 +----------- .../default/scss/dropdowntree/_layout.scss | 2 +- packages/default/scss/editor/_layout.scss | 5 - packages/default/scss/filter/_layout.scss | 7 +- packages/default/scss/forms/_layout.scss | 1 - packages/default/scss/pager/_layout.scss | 13 +-- packages/default/scss/pivotgrid/_layout.scss | 4 +- .../material/scss/dropdownlist/_layout.scss | 11 --- packages/material/scss/editor/_layout.scss | 5 - packages/material/scss/forms/_layout.scss | 5 - packages/material/scss/grid/_layout.scss | 6 -- 14 files changed, 36 insertions(+), 188 deletions(-) diff --git a/packages/bootstrap/scss/dropdownlist/_layout.scss b/packages/bootstrap/scss/dropdownlist/_layout.scss index 9bcf5fc399f..c074da42d65 100644 --- a/packages/bootstrap/scss/dropdownlist/_layout.scss +++ b/packages/bootstrap/scss/dropdownlist/_layout.scss @@ -1,10 +1 @@ @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss"; - -@include exports( "dropdownlist/layout/bootstrap" ) { - - // Dropdown list - .k-dropdown { - transition: $transition; - } - -} diff --git a/packages/bootstrap/scss/pager/_theme.scss b/packages/bootstrap/scss/pager/_theme.scss index c8496ae2b2c..27a5d18aa82 100644 --- a/packages/bootstrap/scss/pager/_theme.scss +++ b/packages/bootstrap/scss/pager/_theme.scss @@ -2,6 +2,11 @@ @include exports( "pager/theme/bootstrap" ) { + + // Pager + .k-pager-wrap {} + + // Responsive .k-pager-md, .k-pager-sm { diff --git a/packages/default/scss/dropdownlist/_layout.scss b/packages/default/scss/dropdownlist/_layout.scss index 3b03e824ed6..92b1e528cec 100644 --- a/packages/default/scss/dropdownlist/_layout.scss +++ b/packages/default/scss/dropdownlist/_layout.scss @@ -1,91 +1,36 @@ @include exports("dropdownlist/layout") { // Dropdown list - .k-dropdown { - @include border-radius( $kendo-input-border-radius ); - width: $kendo-input-default-width; - border-width: $kendo-input-border-width; - border-style: solid; - box-sizing: border-box; - outline: 0; - font-family: $kendo-input-font-family; - font-size: $kendo-input-font-size; - line-height: $kendo-input-line-height; - text-align: start; - white-space: nowrap; - display: inline-flex; - flex-flow: row nowrap; - vertical-align: middle; - position: relative; - overflow: hidden; - transition: all .1s ease; // sass-lint:disable-line no-transition-all - -webkit-touch-callout: none; - -webkit-tap-highlight-color: $rgba-transparent; + .k-dropdown-list {} - *, - *::before, - *::after { - box-sizing: border-box; - } - - - // Input - .k-input {} + // Native select + select.k-dropdown-list {} - // Loading icon - .k-i-loading { - // width: $kendo-input-icon-width; - // height: $kendo-input-icon-height; - } + // Dropdown operator + .k-dropdown-operator { + width: min-content; + flex: none; + aspect-ratio: 1; - // Select - .k-select { - // padding: $picker-select-padding-y $picker-select-padding-x; - width: if( $use-picker-select-width, $kendo-input-spinner-width, null ); + .k-input-button { border-width: 0; - border-inline-start-width: $kendo-input-button-width; - border-style: solid; - border-color: transparent; - outline: 0; - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - flex: 0 0 auto; - cursor: pointer; } - } - - - - // Dropdown operator - .k-dropdown-operator { - width: auto; + .k-input-button .k-button-icon { + width: auto; + aspect-ratio: 1; + } - .k-input { + .k-input-inner { display: none; } - .k-select { - width: $kendo-button-inner-calc-size; - height: $kendo-button-inner-calc-size; - } } - - // Native select - select.k-dropdown { - @include border-radius( $kendo-input-border-radius ); - padding: $kendo-input-padding-y $kendo-input-padding-x; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - outline: 0; - overflow: hidden; - text-overflow: ellipsis; - transition: all .1s ease; // sass-lint:disable-block no-transition-all - cursor: pointer; + // Alias + .k-dropdown, + .k-dropdownlist { + @extend .k-dropdown-list !optional; } } diff --git a/packages/default/scss/dropdownlist/_theme.scss b/packages/default/scss/dropdownlist/_theme.scss index 1eb13f03767..876fc445d70 100644 --- a/packages/default/scss/dropdownlist/_theme.scss +++ b/packages/default/scss/dropdownlist/_theme.scss @@ -1,63 +1,9 @@ @include exports( "dropdownlist/theme" ) { // Dropdown list - .k-dropdown { - @include fill( - $dropdownlist-text, - $dropdownlist-bg, - $dropdownlist-border, - $dropdownlist-gradient - ); + .k-dropdown-list {} - // Hover state - &:hover, - &.k-state-hover { - @include fill( - $dropdownlist-hovered-text, - $dropdownlist-hovered-bg, - $dropdownlist-hovered-border, - $dropdownlist-hovered-gradient - ); - } - - // Focus state - &:focus, - &.k-state-focus { - @include fill( - $dropdownlist-focused-text, - $dropdownlist-focused-bg, - $dropdownlist-focused-border, - $dropdownlist-focused-gradient - ); - @include box-shadow($dropdownlist-focused-shadow); - } - &:focus-within { - @include fill( - $dropdownlist-focused-text, - $dropdownlist-focused-bg, - $dropdownlist-focused-border, - $dropdownlist-focused-gradient - ); - @include box-shadow($dropdownlist-focused-shadow); - } - - - // Invalid state - &.k-invalid, - &.ng-invalid, - &.k-state-invalid { - border-color: $invalid-border; - - .k-input-validation-icon { - color: $invalid-text; - } - - &:focus-within, - &.k-state-focus { - @include box-shadow($invalid-shadow); - } - } - - } + // Native select + select.k-dropdown-list {} } diff --git a/packages/default/scss/dropdowntree/_layout.scss b/packages/default/scss/dropdowntree/_layout.scss index 4330c883725..05e9a0d9a24 100644 --- a/packages/default/scss/dropdowntree/_layout.scss +++ b/packages/default/scss/dropdowntree/_layout.scss @@ -2,7 +2,7 @@ .k-dropdowntree { @extend .k-multiselect; - @extend .k-dropdown; + @extend .k-dropdown-list; } // Dropdowntree popup diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss index f01ff59c757..2efbdd3cce2 100644 --- a/packages/default/scss/editor/_layout.scss +++ b/packages/default/scss/editor/_layout.scss @@ -576,11 +576,6 @@ .k-edit-field > .k-checkbox { position: relative; // fix scrolling } - - // Align - .k-dropdown.k-align { - width: auto; - } } diff --git a/packages/default/scss/filter/_layout.scss b/packages/default/scss/filter/_layout.scss index 57f16c011c9..3da368ea520 100644 --- a/packages/default/scss/filter/_layout.scss +++ b/packages/default/scss/filter/_layout.scss @@ -47,10 +47,9 @@ .k-toolbar { border-style: solid; } - - .k-filter-operator .k-dropdown { - width: $filter-operator-dropdown-width; - } + } + .k-filter-operator .k-dropdown-list { + width: $filter-operator-dropdown-width; } .k-filter-item { diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss index 4de71589c10..2c5f8089770 100644 --- a/packages/default/scss/forms/_layout.scss +++ b/packages/default/scss/forms/_layout.scss @@ -140,7 +140,6 @@ } - .k-dropdown, .k-multiselect, .k-dateinput, .k-datepicker, diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss index e6c6a7e0aeb..bf4629203e9 100644 --- a/packages/default/scss/pager/_layout.scss +++ b/packages/default/scss/pager/_layout.scss @@ -37,11 +37,6 @@ } } - .k-widget, - select.k-dropdown { - font-size: inherit; - } - .k-rtl &, &[dir="rtl"], [dir="rtl"] & { @@ -108,7 +103,7 @@ flex-direction: row; position: relative; - select.k-dropdown { + select.k-dropdown-list { cursor: pointer; display: none; } @@ -176,7 +171,7 @@ .k-pager-sizes { @extend %base-pager-section; - .k-dropdown, + .k-dropdown-list, > select { margin-right: 1ex; width: $pager-dropdown-width; @@ -184,7 +179,7 @@ .k-rtl &, [dir="rtl"] & { - .k-dropdown, + .k-dropdown-list, > select { margin-left: 1ex; margin-right: 0; @@ -222,7 +217,7 @@ // Show native select .k-pager-numbers-wrap { - select.k-dropdown { + select.k-dropdown-list { width: $pager-dropdown-width; display: flex; } diff --git a/packages/default/scss/pivotgrid/_layout.scss b/packages/default/scss/pivotgrid/_layout.scss index 8105b69767d..30e85f028e7 100644 --- a/packages/default/scss/pivotgrid/_layout.scss +++ b/packages/default/scss/pivotgrid/_layout.scss @@ -247,7 +247,7 @@ font-weight: 500; align-items: flex-start; } - .k-dropdown { + .k-dropdown-list { max-width: 90px; } .k-textbox { @@ -340,7 +340,7 @@ .k-icon { margin-right: map-get( $spacing, 2 ); } - .k-dropdown { + .k-dropdown-list { max-width: 100px; } } diff --git a/packages/material/scss/dropdownlist/_layout.scss b/packages/material/scss/dropdownlist/_layout.scss index 1e5dea0f5a7..c074da42d65 100644 --- a/packages/material/scss/dropdownlist/_layout.scss +++ b/packages/material/scss/dropdownlist/_layout.scss @@ -1,12 +1 @@ @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss"; - -@include exports( "dropdownlist/layout/material" ) { - - // Dropdown list - .k-dropdown { - @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important - border-width: $kendo-input-border-width 0; - border-top-color: transparent !important; // sass-lint:disable-line no-important - } - -} diff --git a/packages/material/scss/editor/_layout.scss b/packages/material/scss/editor/_layout.scss index 1e74c76a92b..3838089d023 100644 --- a/packages/material/scss/editor/_layout.scss +++ b/packages/material/scss/editor/_layout.scss @@ -49,11 +49,6 @@ float: none; display: flex; flex-direction: row; - - .k-dropdown { - width: auto; - flex: 1 1 auto; - } } } diff --git a/packages/material/scss/forms/_layout.scss b/packages/material/scss/forms/_layout.scss index 0b8cc125dbd..356bb4c3f0e 100644 --- a/packages/material/scss/forms/_layout.scss +++ b/packages/material/scss/forms/_layout.scss @@ -19,11 +19,6 @@ display: flex; flex-direction: row; - .k-dropdown { - width: auto; - flex: 1 1 auto; - } - > div { width: auto; flex: 1 1 auto; diff --git a/packages/material/scss/grid/_layout.scss b/packages/material/scss/grid/_layout.scss index 3b13d350239..8034706a754 100644 --- a/packages/material/scss/grid/_layout.scss +++ b/packages/material/scss/grid/_layout.scss @@ -53,12 +53,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping- border-radius: 50%; } - .k-filter-row { - .k-dropdown-operator .k-dropdown-wrap { - border-width: 0; - } - } - .k-header-column-menu { border-radius: 50%; }