🐛 fix(dropdown): small variant has loading and disabled style issues (#1633)

* Create PR for #1632

* fix: segment and dropdown

* chore: add missing visual tests

* update base images

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <[email protected]>
Co-authored-by: hirsch88 <[email protected]>

Author: github-actions[bot]

.changeset/five-toes-join.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**dropdown**: change spinner circle background to white

.changeset/popular-pants-prove.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: add auto invalid option for angular

.changeset/silent-ducks-worry.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**dropdown**: remove hover & active styles for disabled state

e2e/cypress/snapshots/base/visual/bal-dropdown.visual.cy.ts/dropdown-clearable-empty-closed.png

@@ -2696,6 +2696,10 @@ export namespace Components {
         "verticalOnMobile": boolean;
     }
     interface BalSegment {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff": boolean;
         /**
           * If `true`, the user cannot interact with the segment.
          */
@@ -7812,6 +7816,10 @@ declare namespace LocalJSX {
         "verticalOnMobile"?: boolean;
     }
     interface BalSegment {
+        /**
+          * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        "autoInvalidOff"?: boolean;
         /**
           * If `true`, the user cannot interact with the segment.
          */

e2e/cypress/snapshots/base/visual/bal-dropdown.visual.cy.ts/dropdown-clearable-empty-open.png

@@ -176,8 +176,11 @@
   min-height: 2rem
 
 .bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded)
+
   border: none
   background: var(--bal-color-background-grey-light)
+
+.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled)
   +hover
     &:hover
       background: var(--bal-color-purple-1)
@@ -197,6 +200,8 @@
 .bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded)
   border: none
   background: var(--bal-color-purple-2)
+
+.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled)
   +hover
     &:hover
       background: var(--bal-color-purple-3)
@@ -213,9 +218,9 @@
       .bal-icon__inner
         +fillSvg(var(--bal-color-text-primary))
 
-.bal-dropdown__root--theme-purple-expanded,
-.bal-dropdown__root--theme-purple-expanded:hover,
-.bal-dropdown__root--theme-purple-expanded:active
+.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled),
+.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover,
+.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active
   border: none
   background: var(--bal-color-purple-2)
   .bal-dropdown__root__input,

e2e/cypress/snapshots/base/visual/bal-dropdown.visual.cy.ts/dropdown-clearable-empty-selected.png

@@ -206,26 +206,50 @@ <h2 class="title text-large">Form Field</h2>
           </bal-field>
         </section>
         <h2 class="title text-large">Small Purple Theme</h2>
-        <section data-testid="small-purple" class="bg-white p-large gap-normal flex">
-          <bal-dropdown placeholder="Leistung" clearable inline-label="Leistung" size="small" theme="purple">
-            <bal-option value="v100" label="100 PS">100 PS</bal-option>
-            <bal-option value="v140" label="140 PS">140 PS</bal-option>
-            <bal-option value="v165" label="165 PS">165 PS</bal-option>
-            <bal-option value="v210" label="210 PS">210 PS</bal-option>
-          </bal-dropdown>
-          <bal-dropdown
-            value="v140"
-            placeholder="Leistung"
-            clearable
-            inline-label="Leistung"
-            size="small"
-            theme="purple"
-          >
-            <bal-option value="v100" label="100 PS">100 PS</bal-option>
-            <bal-option value="v140" label="140 PS">140 PS</bal-option>
-            <bal-option value="v165" label="165 PS">165 PS</bal-option>
-            <bal-option value="v210" label="210 PS">210 PS</bal-option>
-          </bal-dropdown>
+        <section data-testid="small-purple" class="bg-white p-large gap-normal flex flex-direction-column">
+          <section class="bg-white gap-normal flex m-none">
+            <bal-dropdown placeholder="Leistung" clearable inline-label="Leistung" size="small" theme="purple">
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-dropdown>
+            <bal-dropdown
+              value="v140"
+              placeholder="Leistung"
+              clearable
+              inline-label="Leistung"
+              size="small"
+              theme="purple"
+            >
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-dropdown>
+          </section>
+          <section class="bg-white gap-normal flex m-none">
+            <bal-dropdown placeholder="Leistung" clearable disabled inline-label="Leistung" size="small" theme="purple">
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-dropdown>
+            <bal-dropdown
+              value="v140"
+              placeholder="Leistung"
+              clearable
+              loading
+              inline-label="Leistung"
+              size="small"
+              theme="purple"
+            >
+              <bal-option value="v100" label="100 PS">100 PS</bal-option>
+              <bal-option value="v140" label="140 PS">140 PS</bal-option>
+              <bal-option value="v165" label="165 PS">165 PS</bal-option>
+              <bal-option value="v210" label="210 PS">210 PS</bal-option>
+            </bal-dropdown>
+          </section>
         </section>
       </main>
     </bal-doc-app>

e2e/cypress/snapshots/base/visual/bal-dropdown.visual.cy.ts/dropdown-desktop-basic-empty-closed.png

@@ -1,40 +1,40 @@
 import {
   Component,
-  h,
   ComponentInterface,
-  Host,
   Element,
-  Prop,
   Event,
   EventEmitter,
-  Watch,
-  State,
-  writeTask,
+  h,
+  Host,
   Listen,
   Method,
+  Prop,
+  State,
+  Watch,
+  writeTask,
 } from '@stencil/core'
+import { BalAnimationObserver, ListenToAnimation } from '../../utils/animation'
 import { BEM } from '../../utils/bem'
-import { SegmentValue } from './bal-segment.types'
-import { Logger, LogInstance } from '../../utils/log'
+import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints'
+import { BalFocusObserver, ListenToFocus } from '../../utils/focus'
+import { FOCUS_KEYS } from '../../utils/focus-visible'
+import { BalAriaForm, defaultBalAriaForm } from '../../utils/form'
+import { stopEventBubbling } from '../../utils/form-input'
+import { raf } from '../../utils/helpers'
 import {
   isArrowDownKey,
-  isArrowUpKey,
-  isSpaceKey,
-  isHomeKey,
-  isEndKey,
   isArrowLeftKey,
   isArrowRightKey,
+  isArrowUpKey,
+  isEndKey,
   isEnterKey,
+  isHomeKey,
+  isSpaceKey,
 } from '../../utils/keyboard'
-import { stopEventBubbling } from '../../utils/form-input'
-import { FOCUS_KEYS } from '../../utils/focus-visible'
-import { ListenToWindowResize, BalWindowResizeObserver } from '../../utils/resize'
-import { isDescendant, raf } from '../../utils/helpers'
-import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints'
-import { BalFocusObserver, ListenToFocus } from '../../utils/focus'
-import { defaultBalAriaForm, BalAriaForm } from '../../utils/form'
+import { Logger, LogInstance } from '../../utils/log'
+import { BalWindowResizeObserver, ListenToWindowResize } from '../../utils/resize'
 import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
-import { BalAnimationObserver, ListenToAnimation } from '../../utils/animation'
+import { SegmentValue } from './bal-segment.types'
 
 @Component({
   tag: 'bal-segment',
@@ -75,6 +75,11 @@ export class Segment
    */
   @Prop() invalid = false
 
+  /**
+   * If `true`, in Angular reactive forms the control will not be set invalid
+   */
+  @Prop({ reflect: true }) autoInvalidOff = false
+
   /**
    * If `true`, the user cannot interact with the segment.
    */

e2e/cypress/snapshots/base/visual/bal-dropdown.visual.cy.ts/dropdown-desktop-basic-empty-open.png

@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from '@stencil/core'
-import { BalLanguage } from '../config'
 import { BEM } from '../bem'
+import { BalLanguage } from '../config'
 import { i18nBalDropdown } from './dropdown.i18n'
 
 export interface DropdownIconProps {
@@ -31,7 +31,9 @@ export const DropdownIcon: FunctionalComponent<DropdownIconProps> = ({
   const block = BEM.block('dropdown')
 
   if (loading) {
-    return <bal-spinner class={{ ...block.element('rear').class() }} small variation="circle"></bal-spinner>
+    return (
+      <bal-spinner class={{ ...block.element('rear').class() }} small variation="circle" color="white"></bal-spinner>
+    )
   } else if (clearable && filled && !disabled) {
     return (
       <button