🐛 fix(footer): update footer to use bal-dropdown and investigate in c…

…urrent error (#1472) * Create PR for #1470 * fix(segment): adjust bal-change event type * fix(footer): use bal-dropdown to avoid angular insert-node issue * fix(segment): adjust a11y for form controls so it is linked with label and message * chore: updata docs --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Sep 27, 2024 · 0d195c5 · 0d195c5
1 parent d276f84
commit 0d195c5
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 44 deletions.
diff --git a/.changeset/metal-carrots-joke.md b/.changeset/metal-carrots-joke.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: adjust a11y for form controls so it is linked with label and message
diff --git a/.changeset/pink-rockets-lie.md b/.changeset/pink-rockets-lie.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**segment**: adjust bal-change event type
diff --git a/.changeset/real-eagles-add.md b/.changeset/real-eagles-add.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**footer**: use bal-dropdown to avoid angular insert-node issue
diff --git a/docs/stories/components/00-overview.stories.mdx b/docs/stories/components/00-overview.stories.mdx
@@ -518,6 +518,24 @@ Form components serve as tools for gathering user input through a range of metho
       <bal-date value="2023-10-21"></bal-date>
     </div>
   </GridComponent>
+  <GridComponent
+    scale="1"
+    label="DropDown"
+    pageTitle="Components/Form/DropDown"
+    description="Select allows the user to choose one or multiple option from a list."
+  >
+    <bal-dropdown value="Apple" style={{ width: '227px' }}>
+      <bal-option value="Apple" label="Apple">
+        Apple
+      </bal-option>
+      <bal-option value="Banana" label="Banana">
+        Banana
+      </bal-option>
+      <bal-option value="Mango" label="Mango">
+        Mango
+      </bal-option>
+    </bal-dropdown>
+  </GridComponent>
   <GridComponent
     scale="1"
     label="Field"
@@ -677,21 +695,16 @@ Form components serve as tools for gathering user input through a range of metho
   </GridComponent>
   <GridComponent
     scale="1"
-    label="Select"
-    pageTitle="Components/Form/Select"
-    description="Select allows the user to choose one or multiple option from a list."
+    label="Segment"
+    pageTitle="Components/Form/Segment"
+    description="Segment offers a list of options. The user can only select one option from a number of choices."
   >
-    <bal-select value="Apple">
-      <bal-select-option value="Apple" label="Apple">
-        Apple
-      </bal-select-option>
-      <bal-select-option value="Banana" label="Banana">
-        Banana
-      </bal-select-option>
-      <bal-select-option value="Mango" label="Mango">
-        Mango
-      </bal-select-option>
-    </bal-select>
+    <div class="text-align-center">
+      <bal-segment value="yes">
+        <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+        <bal-segment-item value="no" label="No"></bal-segment-item>
+      </bal-segment>
+    </div>
   </GridComponent>
   <GridComponent
     scale="1"

diff --git a/packages/core/src/components/bal-dropdown/bal-dropdown.sass b/packages/core/src/components/bal-dropdown/bal-dropdown.sass
@@ -7,6 +7,7 @@
   display: block
   position: relative
   flex: 1
+  width: 100%
 
 // Root interactive element
 // --------------------------------------------------

diff --git a/packages/core/src/components/bal-field/bal-field.tsx b/packages/core/src/components/bal-field/bal-field.tsx
@@ -173,8 +173,8 @@ export class Field implements ComponentInterface, BalMutationObserver {
       'bal-field-control bal-dropdown',
       'bal-field-control bal-checkbox',
       'bal-field-control bal-radio',
-      'bal-field-control bal-segment-item',
       'bal-field-control bal-segment',
+      'bal-field-control bal-segment-item',
       'bal-field-control bal-checkbox-group',
       'bal-field-control bal-radio-group',
       'bal-field-control bal-number-input',

diff --git a/packages/core/src/components/bal-footer/bal-footer.sass b/packages/core/src/components/bal-footer/bal-footer.sass
@@ -7,11 +7,13 @@
   position: static
   user-select: auto
 
+  +element(slot)
+    color: var(--bal-footer-color)
+
   +element(inner)
     position: relative
     font-family: var(--bal-footer-font-family)
     background-color: var(--bal-footer-background)
-    color: var(--bal-footer-color)
     padding-top: var(--bal-space-x-small)
     padding-bottom: var(--bal-space-large)
     +tablet
@@ -21,10 +23,6 @@
       padding-top: var(--bal-space-large)
       padding-bottom: var(--bal-space-large)
 
-    &,
-    p
-      color: var(--bal-footer-color)
-
     +element(wrapper)
       display: flex
       flex-direction: column
@@ -47,33 +45,45 @@
           flex-wrap: nowrap
           align-items: center
 
-          bal-icon, .input
+          .bal-dropdown__list
+            min-width: 105%
+            right: 0 !important
+            left: auto !important
+
+          bal-icon,
+          .input
             cursor: pointer
+            min-width: auto !important
+
+          .bal-dropdown__rear
+            +fillSvg(var(--bal-color-white))
 
           &:hover
-            bal-icon
+            .bal-dropdown__rear
               +fillSvg(var(--bal-footer-language-background-hover))
-            .input
+            .input,
+            .bal-dropdown__root__content
               color: var(--bal-footer-language-color-hover)
 
           &:active
-            bal-icon
+            .bal-dropdown__rear
               +fillSvg(var(--bal-footer-language-background-active))
-            .input
+            .input,
+            .bal-dropdown__root__content
               color: var(--bal-footer-language-color-active)
 
           +element(wrapper)
-            width: 5rem
-
-            bal-input-group
+            .bal-input-group
               background: transparent
               border: none
+              justify-content: center
+              align-items: center
 
               &:hover
                 background: transparent !important
 
-              bal-icon
-                min-width: 0.75rem !important
+              bal-dropdown
+                min-width: 5rem
 
         +element(logo)
           display: flex

diff --git a/packages/core/src/components/bal-footer/bal-footer.tsx b/packages/core/src/components/bal-footer/bal-footer.tsx
@@ -19,7 +19,7 @@ import { stopEventBubbling } from '../../utils/form-input'
   styleUrl: 'bal-footer.sass',
 })
 export class Footer implements BalConfigObserver, Loggable {
-  private selectEl: HTMLBalSelectElement | undefined
+  private selectEl: HTMLBalDropdownElement | undefined
 
   @State() links: FooterLink[] = []
   @State() socialMediaLinks: SocialMediaLink[] = []
@@ -120,6 +120,7 @@ export class Footer implements BalConfigObserver, Loggable {
 
   render() {
     const block = BEM.block('footer')
+    const elSlot = block.element('slot')
     const elInner = block.element('inner')
     const elInnerWrapper = elInner.element('wrapper')
     const elContainer = elInnerWrapper.element('container')
@@ -177,33 +178,37 @@ export class Footer implements BalConfigObserver, Loggable {
                 >
                   <bal-input-group>
                     <bal-icon
-                      class={{
-                        ...elIcon.class(),
-                      }}
+                      class={'bal-dropdown__rear'}
                       name="web"
                       color="white"
                       onClick={el => {
                         stopEventBubbling(el)
                         this.selectEl?.open()
                       }}
                     ></bal-icon>
-                    <bal-select
-                      ref={el => (this.selectEl = el as HTMLBalSelectElement)}
+                    <bal-dropdown
+                      ref={el => (this.selectEl = el as HTMLBalDropdownElement)}
                       value={this.language}
                       onBalChange={event => this.changeLanguage(event.detail as any)}
                       data-testid="bal-footer-language"
                     >
                       {this.allowedLanguages.map(language => (
-                        <bal-select-option key={language} label={language.toLocaleUpperCase()} value={language}>
+                        <bal-option key={language} label={language.toLocaleUpperCase()} value={language}>
                           {language.toLocaleUpperCase()}
-                        </bal-select-option>
+                        </bal-option>
                       ))}
-                    </bal-select>
+                    </bal-dropdown>
                   </bal-input-group>
                 </div>
               </div>
             </div>
-            <slot></slot>
+            <div
+              class={{
+                ...elSlot.class(),
+              }}
+            >
+              <slot></slot>
+            </div>
             <div
               class={{
                 container: true,

diff --git a/packages/core/src/components/bal-footer/bal-footer.vars.sass b/packages/core/src/components/bal-footer/bal-footer.vars.sass
@@ -18,3 +18,11 @@
   --bal-footer-language-background-hover: var(--bal-color-light-blue-2)
   --bal-footer-language-color-active: var(--bal-color-light-blue-3)
   --bal-footer-language-background-active: var(--bal-color-light-blue-3)
+
+bal-footer
+  --bal-dropdown-control-background: transparent
+  --bal-dropdown-control-input-background: transparent
+  --bal-dropdown-control-border-color: transparent
+  --bal-dropdown-popover-empty-text-color: var(--bal-color-white)
+  --bal-dropdown-control-text-color: var(--bal-color-white)
+  --bal-dropdown-control-text-color-focused: var(---bal-color-white)
diff --git a/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx b/packages/core/src/components/bal-segment/bal-segment-item/bal-segment-item.tsx
@@ -199,10 +199,8 @@ export class SegmentItem implements ComponentInterface {
     let buttonAttributes: any = {}
 
     if (hasTabindex) {
-      let labelId = this.ariaForm.labelId || null
-      labelId = `${labelId || ''} ${id}-lbl`.trim()
       buttonAttributes = {
-        'aria-labelledby': labelId,
+        'aria-labelledby': this.ariaForm.labelId,
         'aria-describedby': this.ariaForm.messageId,
       }
     }

diff --git a/packages/core/src/components/bal-segment/bal-segment.interfaces.ts b/packages/core/src/components/bal-segment/bal-segment.interfaces.ts
@@ -4,7 +4,7 @@
 /// <reference path="../../interfaces.d.ts" />
 
 namespace BalProps {
-  export type BalSegmentValue = string | number
+  export type BalSegmentValue = string | number | boolean
 }
 
 namespace BalEvents {

diff --git a/packages/core/src/components/bal-segment/bal-segment.tsx b/packages/core/src/components/bal-segment/bal-segment.tsx
@@ -450,6 +450,7 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal
     return (
       <Host
         role="radiogroup"
+        id={this.ariaForm.controlId}
         aria-labelledby={this.ariaForm.labelId}
         aria-describedby={this.ariaForm.messageId}
         class={{