theme and layout acccross all components

Author: timea-solid

src/v2/components/footer/Footer.test.ts

@@ -37,4 +37,26 @@ describe('SolidUIFooterElement', () => {
 
     currentUserSpy.mockRestore()
   })
+
+  it('defaults layout to desktop', async () => {
+    const footer = new Footer()
+    document.body.appendChild(footer)
+    await footer.updateComplete
+
+    expect(footer.layout).toBe('desktop')
+    expect(footer.getAttribute('layout')).toBe('desktop')
+  })
+
+  it('applies mobile layout styles by removing border, box-shadow and border-radius', async () => {
+    const footer = new Footer()
+    footer.layout = 'mobile'
+    document.body.appendChild(footer)
+    await footer.updateComplete
+
+    const style = footer.shadowRoot?.querySelector('style')?.textContent
+    expect(style).toContain(':host([layout=\'mobile\'])')
+    expect(style).toContain('border: none;')
+    expect(style).toContain('box-shadow: none;')
+    expect(footer.getAttribute('layout')).toBe('mobile')
+  })
 })

src/v2/components/footer/Footer.ts

@@ -6,6 +6,7 @@ import { getName } from '../../../utils/headerFooterHelpers'
 export class Footer extends LitElement {
   static properties = {
     theme: { type: String, reflect: true },
+    layout: { type: String, reflect: true },
     position: { type: String, reflect: true },
     top: { type: String, reflect: true },
     right: { type: String, reflect: true },
@@ -63,9 +64,16 @@ export class Footer extends LitElement {
       display: block;
       margin-bottom: 0.5rem;
     }
+
+    :host([layout='mobile']) {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+    }
   `
 
   declare theme: 'light' | 'dark'
+  declare layout: 'desktop' | 'mobile'
   declare position: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky'
   declare top: string
   declare right: string
@@ -77,6 +85,7 @@ export class Footer extends LitElement {
   constructor () {
     super()
     this.theme = 'light'
+    this.layout = 'desktop'
     this.position = 'static'
     this.top = 'auto'
     this.right = 'auto'

src/v2/components/footer/README.md

@@ -59,6 +59,7 @@ footer.bottom = '1rem'
 
 Properties / attributes:
 
+- `layout`: `desktop` (default) or `mobile`. In mobile layout, the border, box-shadow and border-radius are removed.
 - `position`: `static`, `absolute`, `relative`, `fixed`, or `sticky`.
 - `top`: CSS offset for the top edge when `position` is not `static`.
 - `right`: CSS offset for the right edge when `position` is not `static`.

src/v2/components/header/Header.ts

@@ -645,6 +645,7 @@ export class Header extends LitElement {
           <solid-ui-login-button
             label="${this.loginAction.label}"
             icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon || this.loginAction.icon) : undefined)}
+            layout="${this.layout}"
             theme="${this.theme}"
             part="login-action"
             @login-success="${() => this.handleLoginSuccess()}"

src/v2/components/loginButton/LoginButton.ts

@@ -8,6 +8,7 @@ export class LoginButton extends LitElement {
     theme: { type: String, reflect: true },
     issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },
     icon: { type: String, reflect: true },
+    layout: { type: String, reflect: true },
     _popupOpen: { state: true },
     _issuerInputValue: { state: true },
     _dropdownOpen: { state: true }
@@ -309,6 +310,7 @@ export class LoginButton extends LitElement {
   declare theme: 'light' | 'dark'
   declare issuerUrl: string
   declare icon: string
+  declare layout: 'desktop' | 'mobile'
   declare _popupOpen: boolean
   declare _issuerInputValue: string
   declare _dropdownOpen: boolean
@@ -322,6 +324,7 @@ export class LoginButton extends LitElement {
     this.theme = 'light'
     this.issuerUrl = ''
     this.icon = ''
+    this.layout = 'desktop'
     this._popupOpen = false
     this._issuerInputValue = ''
     this._dropdownOpen = false

src/v2/components/loginButton/README.md

@@ -55,6 +55,7 @@ btn.addEventListener('login-success', (e: CustomEvent) => {
 | `label`     | `label`       | `string`           | `Log In` | Button text. Overridable via the default slot. |
 | `issuerUrl` | `issuer-url`  | `string`           | `''`     | Pre-fills the IDP URL input in the popup. If `localStorage.loginIssuer` is set it takes precedence. |
 | `icon`      | `icon`        | `string`           | `''`     | URL of a decorative icon displayed on the left side of the button text. When used inside `<solid-ui-header layout="mobile">`, the header suppresses the icon. |
+| `layout`    | `layout`      | `'desktop' \| 'mobile'` | `'desktop'` | When set to `mobile`, removes the button border for a compact header appearance. |
 | `theme`     | `theme`       | `'light' \| 'dark'` | `'light'` | Sets the colour theme. Use `'dark'` when placing the button on a dark background. |
 
 ### Events
@@ -98,7 +99,7 @@ Set `theme="dark"` for dark backgrounds. The button background (`--primary-royal
 <solid-ui-login-button theme="dark"></solid-ui-login-button>
 ```
 
-When used inside `<solid-ui-header>`, the theme attribute is forwarded automatically. When the header is in `mobile` layout, its built-in login button suppresses the `icon`.
+When used inside `<solid-ui-header>`, the theme attribute is forwarded automatically. When the header is in `mobile` layout, its built-in login button suppresses the `icon`. When the `layout` attribute is set to `mobile`, the button renders without a border for a cleaner compact mobile/header presentation.
 
 ## Popup behaviour