Skip to content

Commit

Permalink
PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@mollykreis
mollykreis committed Mar 1, 2024
1 parent f8f5b2a commit 6ddb64e
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 40 deletions.
17 changes: 5 additions & 12 deletions packages/nimble-components/src/table/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,25 +116,18 @@ export const styles = css`
height: ${controlSlimHeight};
cursor: col-resize;
position: absolute;
}
.column-divider:hover {
border-color: ${borderHoverColor};
}
.column-divider.visible {
display: block;
z-index: ${ZIndexLevels.zIndex1};
}
.column-divider.active {
.column-divider:hover,
.column-divider.divider-active {
border-color: ${borderHoverColor};
}
.header-container:hover .column-divider.left,
.header-container:hover .column-divider.right {
.column-divider.column-active,
.header-container:hover .column-divider,
.header-container:hover .column-divider {
display: block;
z-index: ${ZIndexLevels.zIndex1};
}
.column-divider::before {
Expand Down
8 changes: 4 additions & 4 deletions packages/nimble-components/src/table/template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ export const template = html<Table>`
class="
column-divider
left
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'visible' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'active' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
"
@mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event as MouseEvent, c.index)}">
</div>
Expand All @@ -107,8 +107,8 @@ export const template = html<Table>`
class="
column-divider
right
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'visible' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'active' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
"
@mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event as MouseEvent, c.index)}">
</div>
Expand Down
48 changes: 24 additions & 24 deletions packages/nimble-components/src/table/tests/table-column-sizing.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -750,39 +750,39 @@ describe('Table Interactive Column Sizing', () => {
describe('active divider tests', () => {
const dividerActiveTests = [
{
name: 'click on first column right divider only results in one active and one visible divider',
name: 'click on first column right divider',
dividerClickIndex: 0,
leftDividerClick: false,
expectedVisibleIndexes: [0]
expectedColumnActiveDividerIndexes: [0]
},
{
name: 'click on second column left divider results in one active and two visible dividers',
name: 'click on second column left divider',
dividerClickIndex: 1,
expectedVisibleIndexes: [1, 2]
expectedColumnActiveDividerIndexes: [1, 2]
},
{
name: 'click on second column right divider results in one active and two visible dividers',
name: 'click on second column right divider',
dividerClickIndex: 2,
expectedVisibleIndexes: [1, 2]
expectedColumnActiveDividerIndexes: [1, 2]
},
{
name: 'click on third column left divider results in one active and two visible dividers',
name: 'click on third column left divider',
dividerClickIndex: 3,
expectedVisibleIndexes: [3, 4]
expectedColumnActiveDividerIndexes: [3, 4]
},
{
name: 'click on third column right divider results in one active and two visible dividers',
name: 'click on third column right divider',
dividerClickIndex: 4,
expectedVisibleIndexes: [3, 4]
expectedColumnActiveDividerIndexes: [3, 4]
},
{
name: 'click on last column left divider only results in one active and one visible divider',
name: 'click on last column left divider',
dividerClickIndex: 5,
expectedVisibleIndexes: [5]
expectedColumnActiveDividerIndexes: [5]
}
] as const;
parameterizeSpec(dividerActiveTests, (spec, name, value) => {
spec(name, async () => {
spec(`${name} updates expected dividers as "divider-active" and "column-active"`, async () => {
const dividers = Array.from(
element.shadowRoot!.querySelectorAll('.column-divider')
);
Expand All @@ -795,21 +795,21 @@ describe('Table Interactive Column Sizing', () => {
const mouseUpEvent = new MouseEvent('mouseup');
divider.dispatchEvent(mouseDownEvent);
await waitForUpdatesAsync();
const activeDividers = [];
const visibleDividers = [];
const dividerActiveDividers = [];
const columnActiveDividers = [];
for (let i = 0; i < dividers.length; i++) {
if (dividers[i]!.classList.contains('active')) {
activeDividers.push(i);
if (dividers[i]!.classList.contains('divider-active')) {
dividerActiveDividers.push(i);
}
if (dividers[i]!.classList.contains('visible')) {
visibleDividers.push(i);
if (dividers[i]!.classList.contains('column-active')) {
columnActiveDividers.push(i);
}
}
document.dispatchEvent(mouseUpEvent); // clean up registered event handlers

expect(activeDividers.length).toEqual(1);
expect(activeDividers[0]).toEqual(value.dividerClickIndex);
expect(visibleDividers).toEqual(value.expectedVisibleIndexes);
expect(dividerActiveDividers.length).toEqual(1);
expect(dividerActiveDividers[0]).toEqual(value.dividerClickIndex);
expect(columnActiveDividers).toEqual(value.expectedColumnActiveDividerIndexes);
});
});

Expand Down Expand Up @@ -838,12 +838,12 @@ describe('Table Interactive Column Sizing', () => {
});
divider.dispatchEvent(mouseDownEvent);
await waitForUpdatesAsync();
expect(divider.classList.contains('active')).toBeTruthy();
expect(divider.classList.contains('divider-active')).toBeTruthy();

const mouseUpEvent = new MouseEvent('mouseup');
document.dispatchEvent(mouseUpEvent);
await waitForUpdatesAsync();
expect(divider.classList.contains('active')).toBeFalsy();
expect(divider.classList.contains('divider-active')).toBeFalsy();
});
});

Expand Down

0 comments on commit 6ddb64e

Please sign in to comment.