🐛 fix(footer): safari style for the language select

.changeset/nervous-years-repair.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**form**: add missing row gap between controls

.changeset/two-flowers-sell.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**footer**: safari style for the language select

docs/stories/components/bal-form/bal-form.mdx

@@ -1,4 +1,5 @@
-import { Canvas, Meta, Markdown } from '@storybook/blocks'
+import { Canvas, Meta, Markdown, Unstyled } from '@storybook/blocks'
+import { navigate } from '@storybook/addon-links'
 import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, LinkCards, LinkCard } from '../../../.storybook/blocks'
 import * as FormStories from './bal-form.stories'
 
@@ -8,6 +9,21 @@ import * as FormStories from './bal-form.stories'
 
 <Banner of={FormStories} />
 
+<Lead>
+  Before using the component, please refer to the documentation to learn how to structure and build forms with the
+  design system for the best accessibility (a11y) experience.
+</Lead>
+
+<Unstyled>
+  <a
+    className="button is-primary mb-x-large mt-normal"
+    style={{ width: 'auto' }}
+    onClick={() => navigate({ title: 'Development/Form' })}
+  >
+    How to structure form controls
+  </a>
+</Unstyled>
+
 <Lead>
   {' '}
   The `bal-form` wraps the form section. It helps to scroll to the first invalid field after a failed submit.

e2e/cypress/e2e/visual/bal-field.visual.cy.ts

@@ -9,8 +9,8 @@ describe('bal-field', () => {
     cy.getByTestId('readonly').testVisual('field-readonly-desktop')
     cy.getByTestId('required').testVisual('field-required-desktop')
     cy.getByTestId('valid').testVisual('field-valid-desktop')
-    cy.getByTestId('label-long').testVisual('label-long-desktop')
-    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-desktop')
+    cy.getByTestId('label-long').testVisual('label-long-desktop', { errorThreshold: 0.2 })
+    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-desktop', { errorThreshold: 0.2 })
 
     cy.platform('tablet')
     cy.getByTestId('basic').testVisual('field-basic-tablet')
@@ -19,8 +19,8 @@ describe('bal-field', () => {
     cy.getByTestId('readonly').testVisual('field-readonly-tablet')
     cy.getByTestId('required').testVisual('field-required-tablet')
     cy.getByTestId('valid').testVisual('field-valid-tablet')
-    cy.getByTestId('label-long').testVisual('label-long-tablet')
-    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-tablet')
+    cy.getByTestId('label-long').testVisual('label-long-tablet', { errorThreshold: 0.2 })
+    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-tablet', { errorThreshold: 0.2 })
 
     cy.platform('mobile')
     cy.getByTestId('basic').testVisual('field-basic-mobile')
@@ -29,8 +29,8 @@ describe('bal-field', () => {
     cy.getByTestId('readonly').testVisual('field-readonly-mobile')
     cy.getByTestId('required').testVisual('field-required-mobile')
     cy.getByTestId('valid').testVisual('field-valid-mobile')
-    cy.getByTestId('label-long').testVisual('label-long-mobile')
-    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-mobile')
+    cy.getByTestId('label-long').testVisual('label-long-mobile', { errorThreshold: 0.2 })
+    cy.getByTestId('label-long-with-hint').testVisual('label-long-with-hint-mobile', { errorThreshold: 0.2 })
   })
 })
 

libs/nx/src/executors/build-styles/generators/flex.ts

@@ -80,6 +80,7 @@ export const generateFlex = async (options: BuildStylesExecutorSchema) => {
 
   const tokens = await utils.getTokens({ token: 'size.space', ...options })
   const keys = utils.filterTokenKeys({ tokens, ignore: ['tablet', 'desktop', 'none'] })
+
   const valuesGap = {
     'gap-none': '0',
     'gap-auto': 'auto',
@@ -92,6 +93,28 @@ export const generateFlex = async (options: BuildStylesExecutorSchema) => {
     'column-gap-none': '0',
     'column-gap-auto': 'auto',
   }
+
+  const gapNone = utils.staticClass({
+    property: 'gap',
+    values: {
+      ...valuesGap,
+    },
+  })
+
+  const gapRowNone = utils.staticClass({
+    property: 'row-gap',
+    values: {
+      ...valuesRowGap,
+    },
+  })
+
+  const gapColumnNone = utils.staticClass({
+    property: 'column-gap',
+    values: {
+      ...valuesColumnGap,
+    },
+  })
+
   for (const index in keys) {
     const key = keys[index]
     valuesGap[`gap-${key}`] = `var(--bal-space-${key})`
@@ -190,6 +213,9 @@ export const generateFlex = async (options: BuildStylesExecutorSchema) => {
         rulesFlexGapDesktop,
         rulesFlexGapRowDesktop,
         rulesFlexGapColumnDesktop,
+        gapNone.rules,
+        gapRowNone.rules,
+        gapColumnNone.rules,
       ],
     }),
   )

libs/nx/src/executors/build-styles/generators/layout.ts

@@ -48,6 +48,9 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
     property: 'top',
     values: {
       'top-auto': 'auto',
+      'top-1rem': '1rem',
+      'top-0-5rem': '0.5rem',
+      'top-0-25rem': '0.25rem',
       'top-0': '0',
       'top-50': '50%',
       'top-100': '100%',
@@ -58,6 +61,7 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
     property: 'right',
     values: {
       'right-auto': 'auto',
+      'right-1rem': '1rem',
       'right-0': '0',
       'right-50': '50%',
       'right-100': '100%',
@@ -68,6 +72,7 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
     property: 'bottom',
     values: {
       'bottom-auto': 'auto',
+      'bottom-1rem': '1rem',
       'bottom-0': '0',
       'bottom-50': '50%',
       'bottom-100': '100%',
@@ -78,6 +83,7 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
     property: 'left',
     values: {
       'left-auto': 'auto',
+      'left-1rem': '1rem',
       'left-0': '0',
       'left-50': '50%',
       'left-100': '100%',
@@ -113,7 +119,6 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
         left.docs,
         zIndex.docs,
         verticalAlign.docs,
-        // visibility.docs,
       ],
       rules: [
         display.rules,
@@ -125,7 +130,6 @@ export const generateLayout = async (options: BuildStylesExecutorSchema) => {
         left.rules,
         zIndex.rules,
         verticalAlign.rules,
-        // visibility.rules,
       ],
     }),
   )

packages/core/src/components/bal-field/bal-field.sass

@@ -44,11 +44,15 @@
         .button
           width: 100%
 
-.bal-field-control
-  padding-bottom: 1.375rem
+.bal-field-message
+  margin-top: 0 !important
 
 .bal-field-control + .bal-field-message
-  margin-top: -1.5rem !important
+  min-height: 1.375rem
+  line-height: 1.375rem
+
+.bal-field-control:not(:has(+ .bal-field-message))
+  padding-bottom: 1.375rem
 
 .bal-field--horizontal
   display: flex

packages/core/src/components/bal-footer/bal-footer.sass

@@ -45,57 +45,37 @@
           flex-wrap: nowrap
           align-items: center
 
-          .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))
-            position: absolute
-            left: 0
-
-          .bal-dropdown__native
-            background: transparent
-            color: var(--bal-color-white)
-            border: none
-            font-weight: var(--bal-font-weight-bold)
+          +element(wrapper)
+            display: flex
+            gap: 1rem
             cursor: pointer
-            padding-left: 1.5rem
 
-          &:hover
-            .bal-dropdown__rear
-              +fillSvg(var(--bal-footer-language-background-hover))
-            .input,
-            .bal-dropdown__native,
-            .bal-dropdown__root__content
-              color: var(--bal-footer-language-color-hover)
-
-          &:active
-            .bal-dropdown__rear
-              +fillSvg(var(--bal-footer-language-background-active))
-            .input,
-            .bal-dropdown__native,
-            .bal-dropdown__root__content
-              color: var(--bal-footer-language-color-active)
-
-          +element(wrapper)
-            .bal-input-group
+            select
+              padding-left: 2px
+              padding-right: 2px
               background: transparent
+              -webkit-appearance: none
               border: none
-              justify-content: center
-              align-items: center
-
-              &:hover
-                background: transparent !important
+              color: var(--bal-color-white)
+              font-weight: var(--bal-font-weight-bold)
+              font-family: var(--bal-font-family-title)
+              cursor: pointer
+
+              option
+                background: var(--bal-color-white) !important
+                color: var(--bal-color-primary) !important
+                font-weight: var(--bal-font-weight-bold) !important
+                font-family: var(--bal-font-family-text) !important
+
+            &:hover
+              +fillSvg(var(--bal-footer-language-background-hover))
+              select
+                color: var(--bal-footer-language-color-hover)
 
-              bal-dropdown
-                min-width: 5rem
+            &:active
+              +fillSvg(var(--bal-footer-language-background-active))
+              select
+                color: var(--bal-footer-language-color-active)
 
         +element(logo)
           display: flex

packages/core/src/components/bal-footer/bal-footer.tsx

@@ -180,21 +180,26 @@ export class Footer implements BalConfigObserver, Loggable {
                     ...elWrapper.class(),
                   }}
                 >
-                  <bal-input-group>
-                    <bal-icon class={'bal-dropdown__rear'} name="web" color="white"></bal-icon>
-                    <select
-                      id="bubu"
-                      class={'bal-dropdown__native'}
-                      onChange={event => this.changeLanguage((event.target as HTMLSelectElement).value)}
-                      data-testid="bal-footer-language"
-                    >
-                      {this.allowedLanguages.map(language => (
-                        <option key={language} value={language} selected={language === this.language}>
-                          {language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name}
-                        </option>
-                      ))}
-                    </select>
-                  </bal-input-group>
+                  <bal-icon
+                    class={{
+                      ...elWrapper.element('icon').class(),
+                    }}
+                    name="web"
+                    color="white"
+                  ></bal-icon>
+                  <select
+                    class={{
+                      ...elWrapper.element('select').class(),
+                    }}
+                    onChange={event => this.changeLanguage((event.target as HTMLSelectElement).value)}
+                    data-testid="bal-footer-language"
+                  >
+                    {this.allowedLanguages.map(language => (
+                      <option key={language} value={language} selected={language === this.language}>
+                        {language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name}
+                      </option>
+                    ))}
+                  </select>
                 </div>
               </div>
             </div>

packages/core/src/components/bal-form-grid/bal-form-grid.sass

@@ -3,6 +3,7 @@
 +block(form-grid)
   display: flex
   flex-direction: column
+  row-gap: .25rem
   +desktop
     flex-direction: row
 

packages/css/src/core/form/tools.sass

@@ -42,7 +42,7 @@
 
 .field
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: 0.25rem
   // Modifiers
   &.has-addons
     display: flex

packages/styles/src/core/form/tools.sass

@@ -42,7 +42,7 @@
 
 .field
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: 0.25rem
   // Modifiers
   &.has-addons
     display: flex

packages/tokens/src/tokens/shadow.json

@@ -17,6 +17,12 @@
       "keepFormat": true,
       "noFigmaImport": true,
       "comment": "Large shadow are used for hover effects."
+    },
+    "header": {
+      "value": "0 4px 4px 0 rgba(0, 7, 57, 0.15)",
+      "keepFormat": true,
+      "noFigmaImport": true,
+      "comment": "Shadow effect for a header bar"
     }
   },
   "text": {