Skip to content

Commit dab4408

Browse files
Gururajj77emyarodheloiselui
authored
fix: data-table batch action feature parity (#19821)
* fix: resizing the batch action toolbar according to size property * fix: fixed the link problem and updated size property styles * fix: extended styles from the package: * fix: misalignment of cancel button left border fixed * fix: fixed the padding styles for the button * fix: removed redundant style * chore: storybook matching * fix: hover parity: * chore: comments cleanup * fix: fixed the css * fix: playground styles * fix: removed playground story and fixed the hover for last button * chore: playground story variable update * Update packages/web-components/src/components/data-table/table-batch-actions.ts Co-authored-by: emyarod <emyarod@users.noreply.github.com> * fix: added styles for the smaller sizes * fix: modified to use the layout tokens(suggestion) * chore: cleanup convert wording * chore: cleanup convert wording * fix: changed from html to cds button and fixed focus for safari * chore: story cleanup --------- Co-authored-by: emyarod <emyarod@users.noreply.github.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
1 parent 2dd1055 commit dab4408

File tree

6 files changed

+308
-146
lines changed

6 files changed

+308
-146
lines changed

‎packages/web-components/src/components/button/button.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $css--plex: true !default;
1717
@use '@carbon/styles/scss/components/tooltip';
1818
@use '@carbon/styles/scss/components/chat-button' as *;
1919
@use '@carbon/styles/scss/layout' as *;
20+
@use '@carbon/styles/scss/motion' as *;
2021

2122
@include code-snippet;
2223

@@ -147,3 +148,80 @@ $css--plex: true !default;
147148
:host(#{$prefix}-button-set[stacked]) {
148149
@extend .#{$prefix}--btn-set--stacked;
149150
}
151+
152+
:host(#{$prefix}-button[data-context='data-table']) {
153+
.#{$prefix}--btn {
154+
padding-inline: $spacing-05;
155+
}
156+
157+
.#{$prefix}--btn__icon {
158+
position: static;
159+
fill: $icon-on-color;
160+
margin-inline-start: $spacing-03;
161+
162+
.st0 {
163+
fill: none;
164+
}
165+
}
166+
}
167+
168+
:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel) {
169+
--divider-opacity: 1;
170+
171+
button.#{$prefix}--btn {
172+
position: relative;
173+
display: inline-flex;
174+
align-items: center;
175+
justify-content: center;
176+
margin: 0;
177+
block-size: 100%;
178+
min-block-size: 100%;
179+
padding-inline-end: $spacing-05;
180+
padding-inline-start: $spacing-05;
181+
182+
&::before {
183+
@media (prefers-reduced-motion: reduce) {
184+
transition: none;
185+
}
186+
187+
position: absolute;
188+
display: block;
189+
border: none;
190+
background-color: $text-on-color;
191+
block-size: $spacing-05;
192+
content: '';
193+
inline-size: rem(1px);
194+
inset-block-start: rem(15px);
195+
inset-inline-start: 0;
196+
opacity: var(--divider-opacity);
197+
transition: opacity $duration-fast-02 motion(standard, productive);
198+
}
199+
200+
&:hover::before {
201+
opacity: 0;
202+
}
203+
}
204+
}
205+
206+
:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel[size='sm']) {
207+
button.#{$prefix}--btn {
208+
block-size: $spacing-07;
209+
min-block-size: auto;
210+
padding-block: 0.375rem;
211+
212+
&::before {
213+
inset-block-start: rem(8px);
214+
}
215+
}
216+
}
217+
218+
:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel[size='lg']) {
219+
button.#{$prefix}--btn {
220+
block-size: $spacing-09;
221+
min-block-size: auto;
222+
223+
&::before {
224+
inset-block-start: rem(15px);
225+
}
226+
}
227+
}

‎packages/web-components/src/components/data-table/_table-action.scss‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,25 @@
1212
@use '@carbon/styles/scss/theme' as *;
1313
@use '@carbon/styles/scss/components/button';
1414
@use '@carbon/styles/scss/components/search';
15+
@use '@carbon/styles/scss/components/data-table/data-table';
1516
@use '@carbon/styles/scss/components/data-table/action';
16-
17+
@use '@carbon/styles/scss/layout' as *;
1718
//
1819
// Table toolbar
1920
//
2021

2122
:host(#{$prefix}-table-toolbar) {
2223
@extend .#{$prefix}--table-toolbar;
24+
@include emit-layout-tokens();
2325

2426
z-index: 1;
2527
}
2628

29+
:host(#{$prefix}-table-toolbar[size='xs']),
30+
:host(#{$prefix}-table-toolbar[size='sm']) {
31+
@extend .#{$prefix}--table-toolbar--sm;
32+
}
33+
2734
:host(#{$prefix}-table-toolbar-content) {
2835
@extend .#{$prefix}--toolbar-content;
2936

@@ -36,6 +43,21 @@
3643
}
3744
}
3845

46+
:host(#{$prefix}-table-toolbar-content[size='xs']),
47+
:host(#{$prefix}-table-toolbar-content[size='sm']) {
48+
::slotted(#{$prefix}-table-toolbar-search),
49+
::slotted(#{$prefix}-overflow-menu),
50+
::slotted(#{$prefix}-button) {
51+
block-size: $spacing-07;
52+
min-block-size: $spacing-07;
53+
}
54+
55+
::slotted(#{$prefix}-table-toolbar-search),
56+
::slotted(#{$prefix}-overflow-menu) {
57+
inline-size: $spacing-07;
58+
}
59+
}
60+
3961
:host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
4062
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
4163
transform: translate3d(0, $spacing-09, 0);
@@ -132,3 +154,97 @@
132154
:host(#{$prefix}-table-batch-actions[active]) {
133155
@extend .#{$prefix}--batch-actions--active;
134156
}
157+
158+
:host(#{$prefix}-table-batch-actions[size='xs']),
159+
:host(#{$prefix}-table-batch-actions[size='sm']) {
160+
block-size: $spacing-07;
161+
min-block-size: $spacing-07;
162+
163+
.#{$prefix}--batch-summary {
164+
block-size: $spacing-07;
165+
min-block-size: $spacing-07;
166+
167+
&__para {
168+
padding: 0;
169+
margin: 0;
170+
block-size: $spacing-07;
171+
line-height: $spacing-07;
172+
}
173+
}
174+
175+
.#{$prefix}--action-list {
176+
block-size: $spacing-07;
177+
}
178+
179+
.#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
180+
block-size: $spacing-07;
181+
min-block-size: auto;
182+
padding-block: 0.375rem;
183+
184+
&::before {
185+
inset-block-start: rem(8px);
186+
}
187+
}
188+
}
189+
190+
:host(#{$prefix}-table-batch-actions[size='md']),
191+
:host(#{$prefix}-table-batch-actions[size='lg']),
192+
:host(#{$prefix}-table-batch-actions[size='xl']) {
193+
block-size: $spacing-09;
194+
min-block-size: $spacing-09;
195+
196+
.#{$prefix}--batch-summary {
197+
block-size: $spacing-09;
198+
min-block-size: $spacing-09;
199+
200+
&__para {
201+
padding: 0;
202+
margin: 0;
203+
block-size: $spacing-09;
204+
line-height: $spacing-09;
205+
}
206+
}
207+
208+
.#{$prefix}--action-list {
209+
block-size: $spacing-09;
210+
}
211+
212+
.#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
213+
block-size: $spacing-09;
214+
min-block-size: auto;
215+
216+
&::before {
217+
inset-block-start: rem(15px);
218+
}
219+
}
220+
}
221+
222+
:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='xs']),
223+
:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='sm']) {
224+
transform: translate3d(0, $spacing-07, 0);
225+
}
226+
227+
:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='md']),
228+
:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='lg']),
229+
:host(#{$prefix}-table-toolbar-content[has-batch-actions][size='xl']) {
230+
transform: translate3d(0, $spacing-09, 0);
231+
}
232+
233+
:host(#{$prefix}-table-batch-actions) {
234+
.#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel {
235+
--divider-opacity: 1;
236+
237+
&::before {
238+
@media (prefers-reduced-motion: reduce) {
239+
transition: none;
240+
}
241+
242+
opacity: var(--divider-opacity);
243+
transition: opacity $duration-fast-02 motion(standard, productive);
244+
}
245+
246+
&:hover::before {
247+
opacity: 0;
248+
}
249+
}
250+
}

0 commit comments

Comments
 (0)