Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(list, list-item, list-item-group): improve drag experience by indenting items #9169

Merged
merged 13 commits into from
Apr 25, 2024
Merged

fix(list, list-item, list-item-group): improve drag experience by indenting items #9169

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
36e306c
fix(list, list-item, list-item-group): improve drag experience by ind…
driskull Apr 22, 2024
76478de
cleanup css
driskull Apr 22, 2024
1b5e525
cleanup css
driskull Apr 22, 2024
9a62554
move bottom content out of indentation.
driskull Apr 23, 2024
09e6e0e
Merge branch 'main' into dris0000/list-indent-fix
driskull Apr 23, 2024
c6a430e
cleanup
driskull Apr 23, 2024
47f4e28
cleanup
driskull Apr 23, 2024
fd8ed1a
cleanup
driskull Apr 23, 2024
b46c317
cleanup hidden items.
driskull Apr 23, 2024
688d33b
border fixes
driskull Apr 23, 2024
e584e14
fix bordering logic
driskull Apr 23, 2024
aaede95
only border items that are visible and open
driskull Apr 24, 2024
94c5192
small cleanup
driskull Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/calcite-components/src/components/handle/handle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
items-center
justify-center
self-stretch
border-none
bg-transparent;
border-none;
color: theme("borderColor.color.input");
padding-block: theme("spacing.3");
padding-inline: theme("spacing.1");
Expand Down
15 changes: 4 additions & 11 deletions packages/calcite-components/src/components/list-item-group/list-item-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
:host {
@apply flex flex-col bg-foreground-1;
--calcite-list-item-spacing-indent: theme("spacing.4");
}

:host([filter-hidden]) {
Expand All @@ -15,20 +14,14 @@

.heading {
@apply p-0;
padding-inline-start: calc(
var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
);
}

::slotted(calcite-list-item) {
@apply shadow-border-top;
margin-block-start: 1px;
::slotted(calcite-list-item:not([filter-hidden], [closed])) {
border-block-start: 1px solid var(--calcite-color-border-3);
}

// removes shadow for the first item of the group for both filtered and unfiltered items.
::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) {
@apply shadow-none;
margin-block-start: 0px;
::slotted(calcite-list-item:not([filter-hidden], [closed]):nth-of-type(1)) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ashetland because of how this selector works, applying the border to the bottom instead of the top is going to require some refactoring.

With CSS, its much easier to get the first element but getting the last one that isn't hidden by the filter or closed is kind of not doable.

We would need to refactor to remove the last item's border with JS.

border-block-start: 0;
}

@include base-component();
24 changes: 3 additions & 21 deletions packages/calcite-components/src/components/list-item-group/list-item-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
import {
Component,
Element,
Event,
EventEmitter,
h,
Host,
Prop,
State,
VNode,
} from "@stencil/core";
import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from "@stencil/core";
import {
connectInteractive,
disconnectInteractive,
Expand All @@ -17,7 +7,6 @@ import {
updateHostInteraction,
} from "../../utils/interactive";
import { MAX_COLUMNS } from "../list-item/resources";
import { getDepth } from "../list-item/utils";
import { CSS } from "./resources";
/**
* @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
Expand Down Expand Up @@ -71,8 +60,6 @@ export class ListItemGroup implements InteractiveComponent {
// --------------------------------------------------------------------------

connectedCallback(): void {
const { el } = this;
this.visualLevel = getDepth(el, true);
connectInteractive(this);
}

Expand All @@ -92,23 +79,18 @@ export class ListItemGroup implements InteractiveComponent {

@Element() el: HTMLCalciteListItemGroupElement;

@State() visualLevel: number = null;

// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------

render(): VNode {
const { disabled, heading, visualLevel } = this;
const { disabled, heading } = this;
return (
<Host>
<InteractiveContainer disabled={disabled}>
<tr
class={CSS.container}
style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
>
<tr class={CSS.container}>
<td class={CSS.heading} colSpan={MAX_COLUMNS}>
{heading}
</td>
Expand Down
49 changes: 29 additions & 20 deletions packages/calcite-components/src/components/list-item/list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
:host {
@apply flex flex-col;
@apply flex flex-col bg-foreground-1;
--calcite-list-item-icon-color: theme("colors.brand");
--calcite-list-item-spacing-indent: theme("spacing.4");
}

@include disabled();

.indent {
@apply flex
flex-col
border-solid
border-0
border-color-3;

margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
}

.container {
@apply bg-foreground-1
box-border
Expand All @@ -14,9 +23,6 @@
* {
@apply box-border;
}
padding-inline-start: calc(
var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
);
}

.container--hover:hover {
Expand Down Expand Up @@ -47,7 +53,7 @@
}

.nested-container {
@apply bg-foreground-1 flex flex-col;
@apply flex flex-col;
}

.nested-container--hidden {
Expand Down Expand Up @@ -122,13 +128,14 @@ td:focus {
.content-start,
.content-end {
@apply flex-auto;

::slotted(calcite-icon) {
@apply self-center mx-3;
}
}

.content-bottom {
@apply bg-foreground-1 flex flex-col;
padding-inline-start: calc(
var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
);
@apply flex flex-col;
}

.content-container--has-center-content .content-start,
Expand Down Expand Up @@ -171,20 +178,18 @@ td:focus {
.drag-container,
.open-container {
@apply flex items-center;

calcite-action,
calcite-handle {
@apply self-stretch;
}
}

.open-container,
.selection-container {
@apply cursor-pointer;
}

.content-start,
.content-end {
::slotted(calcite-icon) {
@apply self-center mx-3;
}
}

.actions-start,
.actions-end {
@apply p-0;
Expand All @@ -198,13 +203,17 @@ td:focus {
}
}

::slotted(calcite-list-item),
::slotted(calcite-list-item:not([filter-hidden], [closed])),
::slotted(calcite-list) {
@apply border-solid border-0 border-t border-color-3;
border-block-start: 1px solid var(--calcite-color-border-3);
}

::slotted(calcite-list-item:not([filter-hidden], [closed]):nth-of-type(1)) {
border-block-start: 0;
}

::slotted(calcite-list:empty) {
@apply py-3;
@apply border-t-0;
}

@include base-component();
15 changes: 3 additions & 12 deletions packages/calcite-components/src/components/list-item/list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,8 +312,6 @@ export class ListItem

@State() level: number = null;

@State() visualLevel: number = null;

@State() parentListEl: HTMLCalciteListElement;

@State() openable = false;
Expand Down Expand Up @@ -355,7 +353,6 @@ export class ListItem
const { el } = this;
this.parentListEl = el.closest(listSelector);
this.level = getDepth(el) + 1;
this.visualLevel = getDepth(el, true);
this.setSelectionDefaults();
}

Expand Down Expand Up @@ -560,13 +557,9 @@ export class ListItem
}

renderContentBottom(): VNode {
const { hasContentBottom, visualLevel } = this;
const { hasContentBottom } = this;
return (
<div
class={CSS.contentBottom}
hidden={!hasContentBottom}
style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
>
<div class={CSS.contentBottom} hidden={!hasContentBottom}>
<slot name={SLOTS.contentBottom} onSlotchange={this.handleContentBottomSlotChange} />
</div>
);
Expand Down Expand Up @@ -651,7 +644,6 @@ export class ListItem
selectionAppearance,
selectionMode,
closed,
visualLevel,
filterHidden,
} = this;

Expand Down Expand Up @@ -681,7 +673,6 @@ export class ListItem
onFocusin={this.emitInternalListItemActive}
onKeyDown={this.handleItemKeyDown}
role="row"
style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
tabIndex={active ? 0 : -1}
// eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.containerEl = el)}
Expand All @@ -694,7 +685,7 @@ export class ListItem
{this.renderActionsEnd()}
</tr>
{this.renderContentBottom()}
{this.renderDefaultContainer()}
<div class={CSS.indent}>{this.renderDefaultContainer()}</div>
</InteractiveContainer>
</Host>
);
Expand Down
1 change: 1 addition & 0 deletions packages/calcite-components/src/components/list-item/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export const CSS = {
container: "container",
indent: "indent",
containerHover: "container--hover",
containerBorder: "container--border",
containerBorderSelected: "container--border-selected",
Expand Down
13 changes: 3 additions & 10 deletions packages/calcite-components/src/components/list/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,11 @@
}

::slotted(calcite-list-item:not([filter-hidden], [closed])) {
@apply shadow-border-top;
margin-block-start: 1px;
border-block-start: 1px solid var(--calcite-color-border-3);
}

::slotted(calcite-list-item:first-of-type) {
@apply shadow-none;
}

// removes shadow for the first item in filteredItems of the list.
::slotted(calcite-list-item[data-filter]) {
@apply shadow-none;
margin-block-start: 0px;
::slotted(calcite-list-item:not([filter-hidden], [closed]):nth-of-type(1)) {
border-block-start: 0;
}

.sticky-pos {
Expand Down
Loading
Loading