From bebaf7107d4e0e09219d852ac5d89ec55744592c Mon Sep 17 00:00:00 2001 From: Tim McConechy Date: Wed, 8 May 2024 15:15:06 -0400 Subject: [PATCH] Add QA fixes for buttons --- .../cards/example-workspace-widgets.html | 2 +- app/views/components/timepicker/test-states.html | 8 +++----- src/components/button/_button-new.scss | 10 +++++----- src/components/button/_button.scss | 4 ++++ src/components/cards/_cards.scss | 4 ++-- .../_contextualactionpanel.scss | 9 ++++++++- src/components/datepicker/_datepicker.scss | 15 +++++++++++++++ src/components/input/_input-new.scss | 2 +- src/components/masthead/_masthead-new.scss | 12 ++++++++++-- src/components/masthead/_masthead.scss | 6 ++++-- src/components/popupmenu/popupmenu.js | 3 ++- src/components/timepicker/_timepicker.scss | 9 +++++++++ src/core/_config.scss | 3 ++- src/themes/theme-classic-contrast.scss | 1 + src/themes/theme-classic-dark.scss | 1 + src/themes/theme-new-contrast.scss | 2 ++ src/themes/theme-new-dark.scss | 2 ++ src/themes/theme-new-light.scss | 3 ++- 18 files changed, 74 insertions(+), 22 deletions(-) diff --git a/app/views/components/cards/example-workspace-widgets.html b/app/views/components/cards/example-workspace-widgets.html index 4657e84c16..9b93ea656c 100644 --- a/app/views/components/cards/example-workspace-widgets.html +++ b/app/views/components/cards/example-workspace-widgets.html @@ -220,7 +220,7 @@

Search on a widget

-
+
diff --git a/app/views/components/timepicker/test-states.html b/app/views/components/timepicker/test-states.html index 24d3621694..97bf294f4e 100644 --- a/app/views/components/timepicker/test-states.html +++ b/app/views/components/timepicker/test-states.html @@ -17,11 +17,9 @@

Timepicker Example: States

Readonly -
-
- Disable -
-
+ + Disable + Enable
diff --git a/src/components/button/_button-new.scss b/src/components/button/_button-new.scss index dfdcd1e82f..8d4d0f1a21 100644 --- a/src/components/button/_button-new.scss +++ b/src/components/button/_button-new.scss @@ -229,20 +229,20 @@ border-radius: 8px; &:hover:not(:disabled):not(.close):not(.btn-filter):not(.personalize-actionable):not(.destructive) { - background-color: $button-editor-color-hover-background-new; - color: $button-editor-color-tertiary-hover-font-new; + background-color: $button-editor-color-hover-background-new !important; + color: $button-editor-color-tertiary-hover-font-new !important; svg.icon { - color: $button-editor-color-tertiary-hover-font-new; + color: $button-editor-color-tertiary-hover-font-new !important; } &.is-active svg.icon { - color: $editor-btn-active-color; + color: $editor-btn-active-color !important; } } } -.btn-icon.trigger:hover:not(:disabled){ +.btn-icon.trigger:hover:not(:disabled) { background-color: $button-color-tertiary-hover-background-new; } diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index e5bd88e1bf..464430e67d 100755 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -185,6 +185,10 @@ button { box-shadow: $button-gen-ai-focus !important; } + .dot-flashing-container { + margin-inline-end: 0; + } + &:hover { background: $button-gen-ai-hover-bg-color; diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss index 14d2a6a9fb..ee41a073a9 100644 --- a/src/components/cards/_cards.scss +++ b/src/components/cards/_cards.scss @@ -581,8 +581,8 @@ $card-header-section: '.card-header-section', '.widget-header-section'; .widget-content, .card-content { flex-direction: column; - height: 320px; - min-height: 320px; + height: 317px; + min-height: 317px; overflow: auto; width: 100%; diff --git a/src/components/contextualactionpanel/_contextualactionpanel.scss b/src/components/contextualactionpanel/_contextualactionpanel.scss index a34b205dac..ca2c204deb 100644 --- a/src/components/contextualactionpanel/_contextualactionpanel.scss +++ b/src/components/contextualactionpanel/_contextualactionpanel.scss @@ -81,7 +81,7 @@ height: 34px; margin-inline-start: 5px; vertical-align: middle; - + .go-back { svg { height: 14px; @@ -242,6 +242,13 @@ } } + .btn, + .btn-tertiary { + &:hover { + background-color: $contextual-panel-button-hover-bg-color !important; + } + } + .modal-body { padding: 3rem 0; diff --git a/src/components/datepicker/_datepicker.scss b/src/components/datepicker/_datepicker.scss index 7ce10bc3a1..8ac334ad22 100755 --- a/src/components/datepicker/_datepicker.scss +++ b/src/components/datepicker/_datepicker.scss @@ -97,6 +97,21 @@ + .trigger { color: $datepicker-readonly-icon-color; cursor: default; + + &:hover { + color: $datepicker-readonly-icon-color !important; + cursor: default; + background-color: transparent !important; + + &.icon, + &.btn-icon { + color: $datepicker-readonly-icon-color !important; + } + } + + &.btn-icon:hover:not([disabled]) .icon { + color: $datepicker-readonly-icon-color !important; + } } } } diff --git a/src/components/input/_input-new.scss b/src/components/input/_input-new.scss index 16a45f4962..c3d65f5049 100644 --- a/src/components/input/_input-new.scss +++ b/src/components/input/_input-new.scss @@ -37,7 +37,7 @@ span.required::after { .error-message { .icon { height: 18px; - margin-top: 4px; + margin-top: 0; margin-inline-end: 1px; width: 18px; } diff --git a/src/components/masthead/_masthead-new.scss b/src/components/masthead/_masthead-new.scss index 3061ed547d..b113321262 100644 --- a/src/components/masthead/_masthead-new.scss +++ b/src/components/masthead/_masthead-new.scss @@ -69,12 +69,20 @@ html[class*='theme-new-'] .masthead .flex-toolbar:not(.editor-toolbar):not(.form border-radius: 2px; &:not(:disabled):hover { - background-color: transparent; + background-color: transparent !important; + } + + &.is-open { + background-color: transparent !important; } } .masthead .toolbar:not(.standalone) .searchfield-wrapper.toolbar-searchfield-wrapper:not(.has-categories):not(.is-open) { &:hover { - background-color: transparent; + background-color: transparent !important; + } + + &.is-open { + background-color: transparent !important; } } diff --git a/src/components/masthead/_masthead.scss b/src/components/masthead/_masthead.scss index b88883d530..d665f48cdc 100755 --- a/src/components/masthead/_masthead.scss +++ b/src/components/masthead/_masthead.scss @@ -191,6 +191,7 @@ } &:hover:not([disabled]) { + background-color: transparent !important; color: $masthead-button-hover-color !important; .icon, @@ -201,10 +202,11 @@ &.is-open, &.is-open:hover { - color: $masthead-button-hover-color; + background-color: transparent; + color: $masthead-button-hover-color !important; .icon { - color: $masthead-button-hover-color; + color: $masthead-button-hover-color !important; } } diff --git a/src/components/popupmenu/popupmenu.js b/src/components/popupmenu/popupmenu.js index 7a7b445c26..84ff94f1c7 100644 --- a/src/components/popupmenu/popupmenu.js +++ b/src/components/popupmenu/popupmenu.js @@ -110,7 +110,8 @@ PopupMenu.prototype = { addDefaultOffset(element, settings) { if (settings === undefined || Object.keys(settings).length === 0) { if (element.classList.contains('btn-menu') || element.classList.contains('btn-actions')) { - this.settings.offset = { x: 0, y: 8 }; + const isInMasthead = element.closest('.masthead') !== null; + this.settings.offset = { x: 0, y: isInMasthead ? 0 : 8 }; } } }, diff --git a/src/components/timepicker/_timepicker.scss b/src/components/timepicker/_timepicker.scss index 6933b538e9..b932c3722f 100644 --- a/src/components/timepicker/_timepicker.scss +++ b/src/components/timepicker/_timepicker.scss @@ -71,6 +71,15 @@ + .trigger { color: $timepicker-readonly-icon-color; cursor: default; + + &.btn-icon:hover:not([disabled]) { + background-color: transparent !important; + color: $timepicker-readonly-icon-color; + + .icon { + color: $timepicker-readonly-icon-color; + } + } } } } diff --git a/src/core/_config.scss b/src/core/_config.scss index 20198c7b96..e379231b7b 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -349,7 +349,7 @@ $button-color-tertiary-hover-background: $ids-color-palette-slate-30; $button-color-tertiary-disabled-background-new: transparent; $button-color-tertiary-hover-text-new: $ids-color-palette-graphite-100; $button-color-tertiary-hover-text: $ids-color-palette-graphite-100; -$button-color-tertiary-hover-background-new: $ids-color-palette-azure-10; +$button-color-tertiary-hover-background-new: $ids-color-palette-graphite-10; $hero-button-color-tertiary-hover-background-new: $button-color-tertiary-hover-background-new; $button-color-destructive-focus-border-new: $ids-color-palette-ruby-60; $button-color-primary-destructive-initial-background-new: $ids-color-palette-ruby-60; @@ -869,6 +869,7 @@ $contextual-panel-color: $ids-color-palette-graphite-60; $contextual-panel-border-color: $ids-color-palette-graphite-30; $contextual-panel-searchfield-bg-color: $body-color-primary-background; $contextual-panel-searchfield-border-color: $ids-color-palette-graphite-30; +$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-30; // BreadCrumb $breadcrumb-color: $ids-color-palette-graphite-60; diff --git a/src/themes/theme-classic-contrast.scss b/src/themes/theme-classic-contrast.scss index c6da1fc5d7..02d75da892 100755 --- a/src/themes/theme-classic-contrast.scss +++ b/src/themes/theme-classic-contrast.scss @@ -522,6 +522,7 @@ $application-menu-trigger-icon-fill-color: $ids-color-palette-slate-30; $contextual-panel-bg: $ids-color-palette-graphite-30; $contextual-panel-border-color: $ids-color-palette-graphite-50; $contextual-panel-color: $ids-color-palette-white; +$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-40; //BreadCrumb $breadcrumb-color: $ids-color-palette-graphite-80; diff --git a/src/themes/theme-classic-dark.scss b/src/themes/theme-classic-dark.scss index 641607f2c3..79c07164ce 100755 --- a/src/themes/theme-classic-dark.scss +++ b/src/themes/theme-classic-dark.scss @@ -553,6 +553,7 @@ $application-menu-trigger-icon-fill-color: $trigger-icon-fill-color; $contextual-panel-bg: $ids-color-palette-slate-60; $contextual-panel-border-color: $ids-color-palette-slate-50; $contextual-panel-color: $ids-color-palette-slate-20; +$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-80; // BreadCrumb $breadcrumb-color: $ids-color-palette-slate-40; diff --git a/src/themes/theme-new-contrast.scss b/src/themes/theme-new-contrast.scss index b7971c4bdd..1ba9babf61 100644 --- a/src/themes/theme-new-contrast.scss +++ b/src/themes/theme-new-contrast.scss @@ -213,6 +213,7 @@ $button-color-secondary-initial-background: transparent; $button-disabled-background-color: transparent; $button-color-tertiary-hover-background-new: $ids-color-palette-slate-20; $button-color-tertiary-hover-text-new: $ids-color-palette-black; +$button-color-tertiary-hover-text: $ids-color-palette-black; $hero-button-color-tertiary-hover-background-new: $ids-color-palette-azure-70; // Tertiary Buttons @@ -607,6 +608,7 @@ $contextual-panel-color: $ids-color-palette-white; $contextual-panel-button-color: $ids-color-palette-slate-90; $contextual-panel-icon-color: $ids-color-palette-slate-90; $contextual-panel-hover-icon-color: $button-color-tertiary-hover-text; +$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-20; // BreadCrumb $breadcrumb-color: $ids-color-palette-slate-80; diff --git a/src/themes/theme-new-dark.scss b/src/themes/theme-new-dark.scss index 4835b1cc62..a89ddffee5 100644 --- a/src/themes/theme-new-dark.scss +++ b/src/themes/theme-new-dark.scss @@ -135,6 +135,7 @@ $button-color-secondary-initial-background: transparent; $button-color-tertiary-disabled-background-new: $ids-color-palette-slate-90; $button-color-tertiary-hover-background-new: $ids-color-palette-slate-80; $button-color-tertiary-hover-text-new: $ids-color-palette-white; +$button-color-tertiary-hover-text: $ids-color-palette-white; $button-color-primary-destructive-initial-background-new: $ids-color-palette-ruby-60; $button-color-primary-destructive-hover-background-new: $ids-color-palette-ruby-70; $button-color-tertiary-destructive-initial-background-new: $ids-color-palette-ruby-40; @@ -655,6 +656,7 @@ $module-nav-settings-menu-separator-color: $ids-color-palette-slate-90; $contextual-panel-bg: $ids-color-palette-slate-80; $contextual-panel-border-color: $ids-color-palette-slate-50; $contextual-panel-color: $ids-color-palette-slate-20; +$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-90; // BreadCrumb $breadcrumb-color: $ids-color-palette-slate-40; diff --git a/src/themes/theme-new-light.scss b/src/themes/theme-new-light.scss index b7e8557723..ccb64dcdb9 100644 --- a/src/themes/theme-new-light.scss +++ b/src/themes/theme-new-light.scss @@ -91,6 +91,7 @@ $contextual-panel-bg: $ids-color-palette-slate-10; $contextual-panel-color: $ids-color-palette-slate-60; $contextual-panel-border-color: $ids-color-palette-slate-30; $contextual-panel-searchfield-border-color: $ids-color-palette-slate-30; +$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-20; // Modal $modal-border-color: $ids-color-palette-slate-30; @@ -233,7 +234,7 @@ $header-button-disabled-color: rgba(0, 0, 0, 0.3); $button-color-tertiary-initial-font: rgba(0, 0, 0, 0.9); $button-color-tertiary-actionsheet-hover-font: $button-color-tertiary-hover-text-new; $button-disabled-background-color: transparent; -$button-color-tertiary-hover-text: $ids-color-palette-azure-60; +$button-color-tertiary-hover-text: $ids-color-palette-slate-100; $button-color-secondary-initial-background: transparent; $button-color-secondary-initial-font-new: $ids-color-palette-azure-60; $header-button-focus-color: $ids-color-palette-slate-100;