Skip to content

Commit

Permalink
fix(list-item): improve drag handle spacing (#11156)
Browse files Browse the repository at this point in the history 
**Related Issue:** #11125 

## Summary

This removes extra `inline-start` padding on the list-item's drag handle
for all scales and adds an appropriate amount of `inline-end` padding to
the handle in `selection-mode="none"` and
`selection-appearance="border"` variants.

BEGIN_COMMIT_OVERRIDE
omitted from changelog
END_COMMIT_OVERRIDE
  • Loading branch information
@eriklharper
eriklharper authored Dec 30, 2024
1 parent f4b5724 commit 7b8b7d8
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 3 deletions.
16 changes: 13 additions & 3 deletions packages/calcite-components/src/components/list-item/list-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,11 @@
color: var(--calcite-list-icon-color, var(--calcite-color-text-3));
}

:host([display-mode="flat"][drag-handle]:is([selection-mode="none"], [selection-appearance="border"])) {
.drag-container {
padding-inline-end: var(--calcite-spacing-xxs);
}
}
:host([scale="s"]) {
.actions-start {
padding-inline-end: var(--calcite-spacing-sm);
Expand Down Expand Up @@ -228,7 +233,7 @@
}
:host([scale="m"][display-mode="flat"][drag-handle]) {
.container {
padding-inline-start: var(--calcite-spacing-xxs);
padding-inline-start: 0;
}
.selection-container {
padding-inline: var(--calcite-spacing-xxs) var(--calcite-spacing-sm);
Expand All @@ -249,7 +254,7 @@
}
:host([scale="m"][display-mode="nested"][drag-handle]) {
.container {
padding-inline-start: var(--calcite-spacing-xxs);
padding-inline-start: 0;
}
.selection-container {
padding-inline: var(--calcite-spacing-xxs);
Expand Down Expand Up @@ -287,7 +292,7 @@
}
:host([scale="l"][display-mode="flat"][drag-handle]) {
.container {
padding-inline-start: var(--calcite-spacing-xxs);
padding-inline-start: 0;
}
.selection-container {
padding-inline-end: var(--calcite-spacing-md);
Expand All @@ -298,6 +303,11 @@
padding-inline-start: var(--calcite-spacing-xxs);
}
}
:host([scale="l"][display-mode="nested"][drag-handle]) {
.container {
padding-inline-start: 0;
}
}
:host([scale="l"][display-mode="nested"][selection-appearance="icon"]:not([selection-mode="none"]):not([drag-handle])) {
.container {
padding-inline-start: var(--calcite-spacing-lg);
Expand Down
150 changes: 150 additions & 0 deletions packages/calcite-components/src/demos/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,156 @@
<demo-dom-swapper>
<h1 style="margin: 0 auto; text-align: center">List</h1>

<!-- scales -->
<div class="parent">
<div class="child right-aligned-text">scales</div>

<div class="child">
<calcite-list scale="s" selection-mode="none" selection-appearance="border" label="test">
<calcite-list-item label="small" value="small" description="small hello world"> </calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list selection-mode="none" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world"> </calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list scale="l" selection-mode="none" label="test">
<calcite-list-item label="large" value="large" description="large hello world"> </calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales drag-enabled -->
<div class="parent">
<div class="child right-aligned-text">scales drag-enabled</div>

<div class="child">
<calcite-list drag-enabled scale="s" selection-mode="none" label="test">
<calcite-list-item label="small" value="small" description="small hello world"> </calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled selection-mode="none" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world"> </calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled scale="l" selection-mode="none" label="test">
<calcite-list-item label="large" value="large" description="large hello world"> </calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales selection icon -->
<div class="parent">
<div class="child right-aligned-text">scales selection icon</div>

<div class="child">
<calcite-list scale="s" selection-mode="single" label="test">
<calcite-list-item label="small" value="small" description="small hello world" selected>
</calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list selection-mode="single" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world" selected>
</calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list scale="l" selection-mode="single" label="test">
<calcite-list-item label="large" value="large" description="large hello world" selected>
</calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales selection icon drag-enabled -->
<div class="parent">
<div class="child right-aligned-text">scales selection icon drag-enabled</div>

<div class="child">
<calcite-list drag-enabled scale="s" selection-mode="single" label="test">
<calcite-list-item label="small" value="small" description="small hello world" selected>
</calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled selection-mode="single" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world" selected>
</calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled scale="l" selection-mode="single" label="test">
<calcite-list-item label="large" value="large" description="large hello world" selected>
</calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales selection border -->
<div class="parent">
<div class="child right-aligned-text">scales selection border</div>

<div class="child">
<calcite-list scale="s" selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="small" value="small" description="small hello world" selected>
</calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world" selected>
</calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list scale="l" selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="large" value="large" description="large hello world" selected>
</calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales selection border drag-enabled -->
<div class="parent">
<div class="child right-aligned-text">scales selection border drag-enabled</div>

<div class="child">
<calcite-list drag-enabled scale="s" selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="small" value="small" description="small hello world" selected>
</calcite-list-item>
<calcite-list-item label="small" value="small" description="small hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="medium" value="medium" description="medium hello world" selected>
</calcite-list-item>
<calcite-list-item label="medium" value="medium" description="medium hello world" closable>
</calcite-list-item>
</calcite-list>
<calcite-list drag-enabled scale="l" selection-appearance="border" selection-mode="single" label="test">
<calcite-list-item label="large" value="large" description="large hello world" selected>
</calcite-list-item>
<calcite-list-item label="large" value="large" description="large hello world" closable>
</calcite-list-item>
</calcite-list>
</div>
</div>

<!-- scales -->
<div class="parent">
<div class="child right-aligned-text">scales with icon-start and icon-end</div>
Expand Down

0 comments on commit 7b8b7d8

Please sign in to comment.