Skip to content

Commit ea29901

Browse files
jnm2377asudoh
jnm2377
authored and
asudoh
committed
feat(data-table): add row sizes (#2388)
1 parent 5c4a201 commit ea29901

File tree

5 files changed

+455
-83
lines changed

5 files changed

+455
-83
lines changed

‎packages/components/src/components/data-table/_data-table-action.scss‎

Lines changed: 140 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,16 @@
176176
//-------------------------------------------------
177177
//TOOLBAR BUTTONS
178178
//-------------------------------------------------
179-
.#{$prefix}--overflow-menu.#{$prefix}--toolbar-action,
179+
.#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
180+
@include button-reset;
181+
display: flex;
182+
cursor: pointer;
183+
height: $layout-04;
184+
width: $layout-04;
185+
padding: $spacing-md;
186+
transition: background $duration--fast-02 motion(entrance, productive);
187+
}
188+
180189
// DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead
181190
.#{$prefix}--toolbar-action {
182191
@include button-reset;
@@ -312,14 +321,14 @@
312321
padding-right: $spacing-lg;
313322
width: 100%;
314323
height: 100%;
324+
pointer-events: none;
325+
visibility: hidden;
315326
will-change: transform;
316327
background-color: $interactive-01;
317328
transition: transform $duration--fast-02 motion(standard, productive),
318329
visibility $duration--fast-02 motion(standard, productive),
319330
opacity $duration--fast-02 motion(standard, productive);
320331
transform: translate3d(0, 48px, 0);
321-
pointer-events: none;
322-
visibility: hidden;
323332
}
324333

325334
.#{$prefix}--batch-actions:focus {
@@ -403,6 +412,7 @@
403412

404413
.#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
405414
opacity: 0;
415+
transition: opacity $transition--base $carbon--standard-easing;
406416
}
407417

408418
// cancel btn
@@ -424,6 +434,133 @@
424434
.#{$prefix}--batch-summary__para {
425435
@include type-style('body-short-01');
426436
}
437+
438+
//-------------------------------------------------
439+
//SMALL TOOLBAR
440+
//-------------------------------------------------
441+
.#{$prefix}--table-toolbar--small {
442+
height: rem(32px);
443+
444+
.#{$prefix}--toolbar-search-container-expandable,
445+
.#{$prefix}--toolbar-search-container-persistent {
446+
height: rem(32px);
447+
}
448+
449+
.#{$prefix}--toolbar-search-container-expandable
450+
.#{$prefix}--search
451+
.#{$prefix}--search-input,
452+
.#{$prefix}--toolbar-search-container-persistent
453+
.#{$prefix}--search
454+
.#{$prefix}--search-input {
455+
height: rem(32px);
456+
}
457+
458+
.#{$prefix}--toolbar-search-container-expandable
459+
.#{$prefix}--search
460+
.#{$prefix}--search-close,
461+
.#{$prefix}--toolbar-search-container-persistent
462+
.#{$prefix}--search
463+
.#{$prefix}--search-close {
464+
height: rem(32px);
465+
width: rem(32px);
466+
}
467+
468+
.#{$prefix}--toolbar-search-container-expandable
469+
.#{$prefix}--search
470+
.#{$prefix}--search-magnifier,
471+
.#{$prefix}--toolbar-search-container-persistent
472+
.#{$prefix}--search
473+
.#{$prefix}--search-magnifier {
474+
height: rem(32px);
475+
width: rem(32px);
476+
padding: $spacing-xs;
477+
}
478+
479+
//hidden
480+
.#{$prefix}--toolbar-search-container-expandable {
481+
width: rem(32px);
482+
}
483+
484+
.#{$prefix}--toolbar-search-container-expandable
485+
.#{$prefix}--search
486+
.#{$prefix}--search-input {
487+
padding-left: $spacing-xl;
488+
}
489+
490+
//active
491+
.#{$prefix}--toolbar-search-container-active {
492+
flex: auto;
493+
transition: flex 175ms $carbon--standard-easing;
494+
}
495+
496+
.#{$prefix}--toolbar-search-container-active
497+
.#{$prefix}--search
498+
.#{$prefix}--search-input {
499+
visibility: visible;
500+
}
501+
502+
.#{$prefix}--toolbar-search-container-active
503+
.#{$prefix}--search
504+
.#{$prefix}--search-input:focus {
505+
@include focus-outline('outline');
506+
background: $hover-field;
507+
}
508+
509+
.#{$prefix}--toolbar-search-container-active
510+
.#{$prefix}--search
511+
.#{$prefix}--search-input:active,
512+
.#{$prefix}--toolbar-search-container-active
513+
.#{$prefix}--search
514+
.#{$prefix}--search-input:not(:placeholder-shown) {
515+
background: $hover-field;
516+
}
517+
518+
.#{$prefix}--toolbar-search-container-active
519+
.#{$prefix}--search
520+
.#{$prefix}--search-magnifier:focus,
521+
.#{$prefix}--toolbar-search-container-active
522+
.#{$prefix}--search
523+
.#{$prefix}--search-magnifier:active,
524+
.#{$prefix}--toolbar-search-container-active
525+
.#{$prefix}--search
526+
.#{$prefix}--search-magnifier:hover {
527+
@include focus-outline('reset');
528+
background: transparent;
529+
}
530+
}
531+
532+
//-------------------------------------------------
533+
// SMALL BATCH ACTIONS
534+
//-------------------------------------------------
535+
.#{$prefix}--table-toolbar--small
536+
.#{$prefix}--batch-actions
537+
.#{$prefix}--action-list {
538+
height: rem(32px);
539+
}
540+
541+
.#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
542+
height: rem(32px);
543+
width: rem(32px);
544+
padding: $spacing-xs;
545+
}
546+
547+
.#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {
548+
padding-top: rem(3px);
549+
height: rem(32px);
550+
}
551+
552+
.#{$prefix}--table-toolbar--small
553+
.#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
554+
top: rem(8px);
555+
}
556+
557+
.#{$prefix}--table-toolbar--small
558+
.#{$prefix}--toolbar-action
559+
~ .#{$prefix}--btn {
560+
height: rem(32px);
561+
width: rem(160px);
562+
overflow: hidden;
563+
}
427564
}
428565

429566
@include exports('data-table-v2-action') {

‎packages/components/src/components/data-table/_data-table-core.scss‎

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,6 @@
9393
.#{$prefix}--data-table th {
9494
color: $text-01;
9595
background-color: $ui-03;
96-
border-top: 1px solid $ui-03;
97-
border-bottom: 1px solid $ui-03;
9896
}
9997

10098
.#{$prefix}--data-table th:first-of-type {
@@ -109,6 +107,7 @@
109107
.#{$prefix}--data-table .#{$prefix}--table-header-label {
110108
display: block;
111109
padding: rem(14px) 0;
110+
text-align: left;
112111
}
113112

114113
.#{$prefix}--data-table td {
@@ -316,6 +315,112 @@
316315
.#{$prefix}--overflow-menu__icon {
317316
opacity: 1;
318317
}
318+
319+
//----------------------------------------------------------------------------
320+
// Compact
321+
//----------------------------------------------------------------------------
322+
.#{$prefix}--data-table--compact thead tr,
323+
.#{$prefix}--data-table--compact tbody tr {
324+
height: rem(24px);
325+
}
326+
327+
.#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
328+
padding: rem(2px) 0;
329+
}
330+
331+
.#{$prefix}--data-table--compact td {
332+
padding-top: rem(2px);
333+
padding-bottom: rem(2px);
334+
}
335+
336+
.#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
337+
width: rem(32px);
338+
height: rem(23px); //24px row - 1px border
339+
}
340+
341+
.#{$prefix}--data-table.#{$prefix}--data-table--compact
342+
.#{$prefix}--table-column-menu {
343+
padding-top: 0;
344+
}
345+
346+
.#{$prefix}--data-table.#{$prefix}--data-table--compact
347+
.#{$prefix}--table-column-checkbox {
348+
padding-top: 0;
349+
padding-bottom: 0;
350+
}
351+
352+
.#{$prefix}--data-table.#{$prefix}--data-table--compact
353+
.#{$prefix}--table-column-checkbox
354+
.#{$prefix}--checkbox-label {
355+
min-height: rem(23px); //24px row - 1px border
356+
height: rem(23px);
357+
}
358+
359+
//----------------------------------------------------------------------------
360+
// Short
361+
//----------------------------------------------------------------------------
362+
.#{$prefix}--data-table--short thead tr,
363+
.#{$prefix}--data-table--short tbody tr {
364+
height: rem(32px);
365+
}
366+
367+
.#{$prefix}--data-table--short .#{$prefix}--table-header-label {
368+
padding: rem(7px) 0;
369+
}
370+
371+
.#{$prefix}--data-table--short td {
372+
padding-top: rem(7px);
373+
padding-bottom: rem(6px);
374+
}
375+
376+
.#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
377+
height: rem(31px); //32px row - 1px border
378+
}
379+
380+
.#{$prefix}--data-table.#{$prefix}--data-table--short
381+
.#{$prefix}--table-column-menu {
382+
padding-top: 0;
383+
}
384+
385+
.#{$prefix}--data-table.#{$prefix}--data-table--short
386+
.#{$prefix}--table-column-checkbox {
387+
padding-top: rem(3px);
388+
padding-bottom: rem(3px);
389+
}
390+
391+
//----------------------------------------------------------------------------
392+
// Tall
393+
//----------------------------------------------------------------------------
394+
.#{$prefix}--data-table--tall thead tr,
395+
.#{$prefix}--data-table--tall tbody tr {
396+
height: rem(64px);
397+
}
398+
399+
.#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
400+
padding: rem(16px) 0;
401+
}
402+
403+
.#{$prefix}--data-table--tall td {
404+
padding-top: 1rem;
405+
}
406+
407+
.#{$prefix}--data-table--cell-secondary-text {
408+
@include type-style('label-01');
409+
}
410+
411+
.#{$prefix}--data-table.#{$prefix}--data-table--tall
412+
.#{$prefix}--table-column-menu,
413+
.#{$prefix}--data-table.#{$prefix}--data-table--tall
414+
.#{$prefix}--table-column-checkbox {
415+
padding-top: rem(12px);
416+
}
417+
418+
//----------------------------------------------------------------------------
419+
// Static
420+
//----------------------------------------------------------------------------
421+
.#{$prefix}--data-table--static {
422+
width: auto;
423+
}
319424
}
320425

321426
@include exports('data-table-v2-core') {

0 commit comments

Comments
 (0)