From 4b4a058bc132781cacb0f78aebf03e79b5da436c Mon Sep 17 00:00:00 2001 From: Joel Graham Date: Mon, 15 Mar 2021 10:47:58 +0000 Subject: [PATCH] fix: select list-item border-radius (#700) * enforce 0 border-radius * dedicated variable for each shape usage * important comment * dep-check throws on typography due to order Co-authored-by: yinonov --- common/foundation/scss/mixins/_shape-mixins.scss | 4 +++- components/badge/src/vwc-badge.scss | 6 ++++-- components/button/src/vwc-button.scss | 6 ++++-- components/icon-button/src/vwc-icon-button.scss | 6 ++++-- components/list/src/vwc-list-item.scss | 6 ++++-- components/select/src/vwc-select.scss | 5 ++++- components/textfield/src/vwc-textfield-input.scss | 2 +- components/textfield/src/vwc-textfield.scss | 9 +++++---- 8 files changed, 29 insertions(+), 15 deletions(-) diff --git a/common/foundation/scss/mixins/_shape-mixins.scss b/common/foundation/scss/mixins/_shape-mixins.scss index 99c621b2e..b2c441a15 100644 --- a/common/foundation/scss/mixins/_shape-mixins.scss +++ b/common/foundation/scss/mixins/_shape-mixins.scss @@ -1,5 +1,7 @@ @use '../variable-names/shape-variable-names' as shape-var-names; +$variable-name: --shape !default; + @function get-default-selector($list, $default) { $selectors: ''; @each $key, $_ in $list { @@ -38,7 +40,7 @@ $selector: join($selector, ':host(#{template($key)})', $separator: comma); #{$selector} { - --border-radius: #{$shape}; + #{$variable-name}: #{$shape}; } } } diff --git a/components/badge/src/vwc-badge.scss b/components/badge/src/vwc-badge.scss index ef83a1244..83846eba2 100644 --- a/components/badge/src/vwc-badge.scss +++ b/components/badge/src/vwc-badge.scss @@ -1,8 +1,10 @@ @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic; @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins'; -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins'; @use '@vonage/vvd-typography/scss/typography'; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with ( + $variable-name: --vvd-badge-shape +); @use '@vonage/vvd-foundation/scss/mixins/layout-mixins' with ( $layouts: filled outlined soft ); @@ -33,7 +35,7 @@ $vvd-badge-block-size: --vvd-badge-block-size; left: 0; border: var(--border); background-color: var(--background-color); - border-radius: var(--border-radius); + border-radius: var(--vvd-badge-shape); content: ''; inset: 0; opacity: calc(var(--opaque) * 0.01); diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss index 32fca3ccc..772765689 100644 --- a/components/button/src/vwc-button.scss +++ b/components/button/src/vwc-button.scss @@ -4,7 +4,9 @@ @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with ( $connotations: primary cta success alert info announcement ); -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins'; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with( + $variable-name: --vvd-button-shape +); @mixin size($type, $unit) { :host([#{$type}]) & { @@ -38,7 +40,7 @@ .mdc-button { $gutter: 8px; height: 40px; - border-radius: var(--border-radius); + border-radius: var(--vvd-button-shape); // ! this was supposed to be set by MDC font-stretch: var(--mdc-typography-button-font-stretch); letter-spacing: normal; diff --git a/components/icon-button/src/vwc-icon-button.scss b/components/icon-button/src/vwc-icon-button.scss index 0e7701e3f..6d15ff5e8 100644 --- a/components/icon-button/src/vwc-icon-button.scss +++ b/components/icon-button/src/vwc-icon-button.scss @@ -1,6 +1,8 @@ @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic; -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins'; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with ( + $variable-name: --vvd-icon-button-shape +); @use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with ( $connotations: primary cta success alert info announcement ); @@ -19,7 +21,7 @@ justify-content: center; border: var(--border); background-color: var(--background-color); - border-radius: var(--border-radius); + border-radius: var(--vvd-icon-button-shape); color: var(--color); &:disabled { color: var(#{color-semantic.$formfield-disabled-ink}); diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss index baa708693..ef13a71bc 100644 --- a/components/list/src/vwc-list-item.scss +++ b/components/list/src/vwc-list-item.scss @@ -1,7 +1,9 @@ @use '@vonage/vvd-typography/scss/typography' as typography; @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic; -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins'; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with ( + $variable-name: --vvd-list-item-shape +); $vvd-list-item-block-size: --vvd-list-item-block-size; $vvd-list-item-side-padding: --vvd-list-item-side-padding; @@ -21,7 +23,7 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin; @include typography.typography-cat-shorthand('body-2'); height: var(#{$vvd-list-item-block-size}); - border-radius: var(--border-radius, 0); + border-radius: var(--vvd-list-item-shape); #{$vvd-list-item-block-size}: 40px; #{$vvd-list-item-side-padding}: 24px; #{$vvd-list-item-graphic-margin}: 16px; diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss index 41a0dacfc..4f9f733fe 100644 --- a/components/select/src/vwc-select.scss +++ b/components/select/src/vwc-select.scss @@ -1,7 +1,10 @@ @forward './vwc-select-coupling'; @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/_scheme-variables' as scheme-variables; @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic; -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with ( + //! may consider replacing with own component variable to prevent delegation + $variable-name: --mdc-shape-small +); $vvd-select-size-block: --vvd-select-size-block; diff --git a/components/textfield/src/vwc-textfield-input.scss b/components/textfield/src/vwc-textfield-input.scss index 61f6865b2..1a85df1fd 100644 --- a/components/textfield/src/vwc-textfield-input.scss +++ b/components/textfield/src/vwc-textfield-input.scss @@ -15,7 +15,7 @@ border: unset; background: unset; block-size: 100%; - border-radius: var(--border-radius); + border-radius: var(--mdc-shape-small); color: var(#{scheme-variables.$vvd-color-on-base}); inline-size: 100%; inset: 0; diff --git a/components/textfield/src/vwc-textfield.scss b/components/textfield/src/vwc-textfield.scss index 64b29db1f..c0f1bbd2e 100644 --- a/components/textfield/src/vwc-textfield.scss +++ b/components/textfield/src/vwc-textfield.scss @@ -3,14 +3,16 @@ @use './vwc-textfield-variables' as textfield-variables; @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic; -@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins; +@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with ( + //! may consider replacing with own component variable to prevent delegation + $variable-name: --mdc-shape-small +); :host { --mdc-theme-error: #{color-semantic.$formfield-label-error-ink}; --mdc-text-field-fill-color: var(#{scheme-variables.$vvd-color-base}); --mdc-text-field-ink-color: var(#{scheme-variables.$vvd-color-on-base}); - --mdc-text-field-label-ink-color: var( #{color-semantic.$formfield-label-idle-ink} -); + --mdc-text-field-label-ink-color: var(#{color-semantic.$formfield-label-idle-ink}); --mdc-text-field-disabled-ink-color: var( #{color-semantic.$formfield-disabled-ink} ); @@ -32,7 +34,6 @@ --mdc-text-field-error-fill-color: var( #{color-semantic.$formfield-error-fill} ); - --mdc-shape-small: var(--border-radius); min-width: 180px;