Skip to content

Commit 1c5b596

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): use single stylesheet (#6763)
1 parent a4f7d96 commit 1c5b596

21 files changed

+318
-259
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

+253
Original file line numberDiff line numberDiff line change
@@ -333,3 +333,256 @@
333333
min-width: unset;
334334
padding: 0;
335335
}
336+
337+
/* ==========================================================================
338+
Header styles
339+
========================================================================== */
340+
341+
.thContainer {
342+
&:first-child > [role='columnheader'] {
343+
border-inline-start: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
344+
}
345+
346+
&:last-child > [role='columnheader'] {
347+
border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
348+
}
349+
}
350+
351+
.verticalEndBorder:last-child > [role='columnheader'] {
352+
border-inline-end: 1px solid var(--sapList_BorderColor);
353+
}
354+
355+
.header {
356+
height: 100%;
357+
display: flex;
358+
align-items: center;
359+
text-align: start;
360+
font-family: var(--_ui5wcr-AnalyticalTable-HeaderFontFamily);
361+
font-size: var(--sapFontSize);
362+
font-weight: normal;
363+
color: inherit;
364+
text-overflow: ellipsis;
365+
white-space: nowrap;
366+
max-width: 100%;
367+
position: relative;
368+
width: 100%;
369+
overflow-x: hidden;
370+
overflow-y: hidden;
371+
box-sizing: border-box;
372+
373+
& > span {
374+
width: 100%;
375+
text-overflow: ellipsis;
376+
white-space: nowrap;
377+
overflow-x: hidden;
378+
overflow-y: hidden;
379+
}
380+
}
381+
382+
.text {
383+
cursor: inherit;
384+
color: inherit;
385+
font-family: inherit;
386+
width: 100%;
387+
text-align: start;
388+
}
389+
390+
.iconContainer {
391+
display: flex;
392+
position: absolute;
393+
color: var(--sapContent_IconColor);
394+
inset-inline-end: 0.5rem;
395+
396+
& > [ui5-icon]:not(:first-child) {
397+
margin-inline-start: 0.125rem;
398+
}
399+
}
400+
401+
.selectAllCheckBoxContainer {
402+
display: flex;
403+
justify-content: center;
404+
}
405+
406+
.icon {
407+
height: 0.8125rem;
408+
width: 0.8125rem;
409+
}
410+
411+
/* ==========================================================================
412+
Resizer styles
413+
========================================================================== */
414+
415+
.resizer {
416+
display: inline-block;
417+
width: 3px;
418+
height: 100%;
419+
position: absolute;
420+
inset-block-end: 0;
421+
inset-block-start: 0;
422+
z-index: 1;
423+
cursor: col-resize;
424+
425+
&:hover,
426+
&:active {
427+
background-color: var(--sapContent_DragAndDropActiveColor);
428+
}
429+
}
430+
431+
/* ==========================================================================
432+
ColumnHeaderModal styles
433+
========================================================================== */
434+
435+
.popover {
436+
font-weight: normal;
437+
438+
&::part(content) {
439+
padding: 0;
440+
}
441+
}
442+
443+
.filterIcon {
444+
padding-inline-end: 0.5rem;
445+
color: var(--sapContent_NonInteractiveIconColor);
446+
}
447+
448+
.filterText {
449+
overflow: visible;
450+
padding-inline-end: 0.5rem;
451+
}
452+
453+
/* ==========================================================================
454+
Expandable styles
455+
========================================================================== */
456+
457+
.container {
458+
height: var(--_ui5wcr-AnalyticalTableExpandButtonHeight);
459+
margin-inline-end: 0.125rem;
460+
flex-shrink: 0;
461+
}
462+
463+
.expandableIcon {
464+
color: var(--sapContent_IconColor);
465+
width: 100%;
466+
height: 100%;
467+
display: flex;
468+
align-items: center;
469+
&::part(root) {
470+
padding: 0.375rem;
471+
width: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
472+
height: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
473+
}
474+
}
475+
476+
.button {
477+
color: var(--sapTextColor);
478+
height: 100%;
479+
font-size: 0.75rem;
480+
}
481+
482+
.nonExpandableCellSpacer {
483+
width: var(--_ui5wcr-AnalyticalTableExpandIndicatorWidth);
484+
flex-shrink: 0;
485+
}
486+
487+
.withExpandableButton {
488+
margin-inline-end: 0.5rem;
489+
}
490+
491+
/* ==========================================================================
492+
PopIn styles
493+
========================================================================== */
494+
495+
.popInContainer {
496+
width: 100%;
497+
}
498+
499+
.defaultCell > :first-child {
500+
padding-block-start: 0.25rem;
501+
}
502+
503+
.popInHeader {
504+
color: var(--sapContent_LabelColor);
505+
height: 16px;
506+
}
507+
508+
.gap {
509+
gap: 0.5rem;
510+
}
511+
512+
/* ==========================================================================
513+
SubComponent styles
514+
========================================================================== */
515+
516+
.subcomponent {
517+
position: absolute;
518+
width: 100%;
519+
&:focus {
520+
outline-offset: calc(-1 * var(--sapContent_FocusWidth));
521+
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
522+
}
523+
}
524+
525+
/* ==========================================================================
526+
VerticalResizer styles
527+
========================================================================== */
528+
529+
.verticalResizerContainer {
530+
overflow: hidden;
531+
position: relative;
532+
height: 5px;
533+
text-align: center;
534+
cursor: row-resize;
535+
box-sizing: border-box;
536+
537+
&:hover {
538+
background-color: var(--sapContent_DragAndDropActiveColor);
539+
color: var(--sapHighlightTextColor);
540+
}
541+
542+
&:before {
543+
font-size: 10px;
544+
font-family: var(--sapFontFamily);
545+
inset-block-start: 0;
546+
position: absolute;
547+
content: '⦁⦁⦁⦁';
548+
line-height: 5px;
549+
pointer-events: none;
550+
}
551+
}
552+
553+
.verticalResizer {
554+
position: absolute;
555+
opacity: 0.5;
556+
background-color: var(--sapContent_DragAndDropActiveColor);
557+
height: 5px;
558+
}
559+
560+
/* ==========================================================================
561+
VerticalScrollbar styles
562+
========================================================================== */
563+
564+
.headerSection {
565+
box-sizing: border-box;
566+
border-block-start: var(--_ui5wcr-AnalyticalTable-OuterBorderBlock);
567+
border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
568+
border-block-end: var(--_ui5wcr-AnalyticalTable-HeaderBorderWidth) solid var(--sapList_HeaderBorderColor);
569+
background-color: var(--sapList_HeaderBackground);
570+
border-inline-start: 1px solid var(--sapList_BorderColor);
571+
margin-inline-start: -1px;
572+
width: calc(var(--sapScrollBar_Dimension) + 2px);
573+
}
574+
.scrollbar {
575+
overflow-y: auto;
576+
border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
577+
border-block-end: 1px solid var(--sapList_TableFooterBorder);
578+
border-inline-start: 1px solid var(--sapList_BorderColor);
579+
margin-inline-start: -1px;
580+
box-sizing: border-box;
581+
}
582+
583+
.bottomSection {
584+
flex-grow: 1;
585+
background-color: var(--sapList_FooterBackground);
586+
box-sizing: border-box;
587+
border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
588+
}

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css

-69
This file was deleted.

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import type { Virtualizer } from '@tanstack/react-virtual';
2-
import { useStylesheet } from '@ui5/webcomponents-react-base';
32
import { forwardRef, Fragment } from 'react';
4-
import type { DivWithCustomScrollProp } from '../types/index.js';
3+
import type { ClassNames, DivWithCustomScrollProp } from '../types/index.js';
54
import { RenderColumnTypes } from '../types/index.js';
6-
import { classNames, styleData } from './Resizer.module.css.js';
75
import { ColumnHeader } from './index.js';
86

97
interface ColumnHeaderContainerProps {
8+
classNames: ClassNames;
109
headerProps: Record<string, any>;
1110
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1211
headerGroup: Record<string, any>;
@@ -18,10 +17,16 @@ interface ColumnHeaderContainerProps {
1817
}
1918

2019
export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
21-
const { headerProps, headerGroup, resizeInfo, isRtl, columnVirtualizer, uniqueId, showVerticalEndBorder } = props;
22-
23-
useStylesheet(styleData, 'Resizer');
24-
20+
const {
21+
headerProps,
22+
headerGroup,
23+
resizeInfo,
24+
isRtl,
25+
columnVirtualizer,
26+
uniqueId,
27+
showVerticalEndBorder,
28+
classNames
29+
} = props;
2530
const { key, ...reactTableHeaderProps } = headerProps;
2631

2732
return (
@@ -71,6 +76,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
7176
virtualColumn={virtualColumn}
7277
columnVirtualizer={columnVirtualizer}
7378
isRtl={isRtl}
79+
classNames={classNames}
7480
>
7581
{column.render(RenderColumnTypes.Header)}
7682
</ColumnHeader>

‎packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.module.css

-15
This file was deleted.

0 commit comments

Comments
 (0)