From cbc0bbcad49870196610e71e11ecae80ced64f25 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Thu, 2 Apr 2026 16:08:59 +0000 Subject: [PATCH] fix(dees-input-list): refine dees-input-list spacing and simplify the add item action button --- changelog.md | 7 ++ ts_web/00_commitinfo_data.ts | 2 +- .../dees-input-list/dees-input-list.ts | 99 +++++++++++-------- 3 files changed, 67 insertions(+), 41 deletions(-) diff --git a/changelog.md b/changelog.md index 423d5f5..d838cf3 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-02 - 3.49.2 - fix(dees-input-list) +refine dees-input-list spacing and simplify the add item action button + +- reduce list item, input, helper text, and empty state sizing for a more compact layout +- replace the add action from dees-button to a native icon-only button and remove the unused button import +- simplify add-input styling by removing bordered focus treatment and using a minimal inline input appearance + ## 2026-04-01 - 3.49.1 - fix(ts_web) resolve TypeScript nullability and event typing issues across web components diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 67159d4..25721f5 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.49.1', + version: '3.49.2', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts index 9d6fd6b..d6ed741 100644 --- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts +++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts @@ -9,7 +9,6 @@ import { } from '@design.estate/dees-element'; import { DeesInputBase } from '../dees-input-base/dees-input-base.js'; import '../../00group-utility/dees-icon/dees-icon.js'; -import '../../00group-button/dees-button/dees-button.js'; import { demoFunc } from './dees-input-list.demo.js'; import { themeDefaultStyles } from '../../00theme.js'; @@ -130,13 +129,13 @@ export class DeesInputList extends DeesInputBase { .list-item { display: flex; align-items: center; - gap: 8px; - padding: 12px 16px; + gap: 6px; + padding: 6px 10px; border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease; position: relative; - overflow: hidden; /* Prevent animation from affecting scroll bounds */ + overflow: hidden; } .list-item:last-of-type { @@ -181,8 +180,8 @@ export class DeesInputList extends DeesInputBase { } .drag-handle dees-icon { - width: 16px; - height: 16px; + width: 14px; + height: 14px; } .item-content { @@ -195,15 +194,15 @@ export class DeesInputList extends DeesInputBase { .item-text { flex: 1; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; - font-size: 14px; - line-height: 20px; + font-size: 13px; + line-height: 18px; word-break: break-word; } .item-edit-input { flex: 1; - padding: 4px 8px; - font-size: 14px; + padding: 3px 6px; + font-size: 13px; font-family: inherit; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; @@ -222,8 +221,8 @@ export class DeesInputList extends DeesInputBase { display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; + width: 24px; + height: 24px; border-radius: 4px; background: transparent; border: none; @@ -262,34 +261,29 @@ export class DeesInputList extends DeesInputBase { } .action-button dees-icon { - width: 14px; - height: 14px; + width: 13px; + height: 13px; } .add-item-container { display: flex; - gap: 8px; - padding: 12px 16px; + gap: 6px; + padding: 6px 10px; background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')}; border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; } .add-input { flex: 1; - padding: 8px 12px; - font-size: 14px; + padding: 4px 8px; + font-size: 13px; + line-height: 18px; font-family: inherit; - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - border-radius: 4px; + background: transparent; + border: none; outline: none; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; - transition: all 0.15s ease; - } - - .add-input:focus { - border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')}; + min-width: 0; } .add-input::placeholder { @@ -302,29 +296,54 @@ export class DeesInputList extends DeesInputBase { } .add-button { - padding: 8px 16px; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 4px; + background: transparent; + border: none; + cursor: pointer; + color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; + transition: all 0.15s ease; + flex-shrink: 0; + } + + .add-button:hover:not(:disabled) { + background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; + } + + .add-button:disabled { + opacity: 0.3; + cursor: default; + } + + .add-button dees-icon { + width: 14px; + height: 14px; } .empty-state { - padding: 32px 16px; + padding: 16px 10px; text-align: center; color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')}; - font-size: 14px; - font-style: italic; + font-size: 13px; } .validation-message { color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')}; - font-size: 13px; - margin-top: 6px; - line-height: 1.5; + font-size: 12px; + margin-top: 4px; + line-height: 1.4; } .description { color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')}; - font-size: 13px; - margin-top: 6px; - line-height: 1.5; + font-size: 12px; + margin-top: 4px; + line-height: 1.4; } /* Scrollbar styling */ @@ -429,13 +448,13 @@ export class DeesInputList extends DeesInputBase { @keydown=${this.handleAddKeyDown} ?disabled=${this.disabled} /> - - Add - + + ` : ''}