Skip to content

Commit 0a93302

Browse files
MarcusNotheisMarcusNotheis
authored
Merge branch 'master' into refactor/table
2 parents a6a77d9 + 137da3f commit 0a93302

File tree

14 files changed

+101
-57
lines changed

14 files changed

+101
-57
lines changed

‎docs/welcome/Styling.stories.mdx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
88
# How can I style my Web Components?
99
[Open Github Project](https://github.com/SAP/ui5-webcomponents-react)
1010

11-
## Change styles for exisiting components
11+
## Change styles for existing components
1212
You can easily change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
1313
Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into the `document head`.
1414
If you want to change e.g. the color of all texts, you can do that by creating another `style` element with the following content:
@@ -23,6 +23,14 @@ You can change CSS Variables on any level - in the head, or on every single elem
2323
A full list of all supported CSS Variables can be found [here](https://github.com/SAP/ui5-webcomponents-react/blob/master/packages/base/src/styling/sap_fiori_3.ts)
2424
or in the [SAPUI5 Theming Parameters Toolbox](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html).
2525
26+
## Reuse global style classes
27+
The `ThemeProvider` component is offering global css classes that can be reused in your applications code to help you to achieve a Fiori look-and-feel.
28+
All globally available style classes are tracked in the `GlobalStyleClasses` enum which can be imported from `import { GlobalStyleClasses } from "@ui5/webcomponents-react/lib/GlobalStyleClasses";`.
29+
30+
|CSS Class|Description|
31+
|---------|-----------|
32+
|`sapScrollBar`|If added to an container that supports scrolling, the scrollbar will be styled according to the Fiori guidelines. |
33+
2634
## Style your own components
2735
It's quite likely that you have to create some custom components when you are building an app.
2836
In order to reuse our central styling approach, you can easily hook into our theming by using [`react-jss`](https://cssinjs.org/react-jss/?v=v10.0.0).

‎packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,7 @@ const styles = {
3939
zIndex: 0,
4040
backgroundColor: ThemingParameters.sapList_Background,
4141
overflowX: 'hidden !important',
42-
overflowY: 'auto !important',
43-
'&::-webkit-scrollbar': {
44-
backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
45-
width: ThemingParameters.sapScrollBar_Dimension
46-
},
47-
'&::-webkit-scrollbar-thumb': {
48-
backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
49-
width: ThemingParameters.sapScrollBar_Dimension,
50-
borderRadius: '0.25rem',
51-
'&:hover': {
52-
backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
53-
}
54-
},
55-
'&::-webkit-scrollbar-corner': {
56-
backgroundColor: ThemingParameters.sapScrollBar_TrackColor
57-
}
42+
overflowY: 'auto !important'
5843
},
5944
alternateRowColor: {
6045
backgroundColor: ThemingParameters.sapList_HeaderBackground

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

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '@ui5/webcomponents-icons/dist/icons/decline';
12
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
23
import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
34
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
@@ -60,6 +61,17 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
6061
);
6162
}
6263
break;
64+
case 'clear':
65+
column.clearSortBy();
66+
if (typeof onSort === 'function') {
67+
onSort(
68+
enrichEventWithDetails(e, {
69+
column,
70+
sortDirection: sortType
71+
})
72+
);
73+
}
74+
break;
6375
case 'group':
6476
const willGroup = !column.isGrouped;
6577
column.toggleGroupBy(willGroup);
@@ -77,9 +89,12 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
7789
popoverRef.current.close();
7890
}
7991
},
80-
[column, popoverRef, onGroupBy]
92+
[column, popoverRef, onGroupBy, onSort]
8193
);
8294

95+
const isSortedAscending = column.isSorted && column.isSortedDesc === false;
96+
const isSortedDescending = column.isSorted && column.isSortedDesc === true;
97+
8398
return (
8499
<Popover
85100
openByStyle={style}
@@ -91,16 +106,26 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
91106
style={staticStyle as CSSProperties}
92107
>
93108
<List onItemClick={handleSort}>
94-
{showSort && (
95-
<StandardListItem type={ListItemTypes.Active} icon={'sort-ascending'} data-sort={'asc'}>
109+
{isSortedAscending && (
110+
<StandardListItem type={ListItemTypes.Active} icon="decline" data-sort="clear">
111+
Clear Sorting
112+
</StandardListItem>
113+
)}
114+
{showSort && !isSortedAscending && (
115+
<StandardListItem type={ListItemTypes.Active} icon="sort-ascending" data-sort="asc">
96116
Sort Ascending
97117
</StandardListItem>
98118
)}
99-
{showSort && (
100-
<StandardListItem type={ListItemTypes.Active} icon={'sort-descending'} data-sort={'desc'}>
119+
{showSort && !isSortedDescending && (
120+
<StandardListItem type={ListItemTypes.Active} icon="sort-descending" data-sort="desc">
101121
Sort Descending
102122
</StandardListItem>
103123
)}
124+
{isSortedDescending && (
125+
<StandardListItem type={ListItemTypes.Active} icon="decline" data-sort="clear">
126+
Clear Sorting
127+
</StandardListItem>
128+
)}
104129
{showFilter && !column.isGrouped && (
105130
<CustomListItem type={ListItemTypes.Inactive}>
106131
<FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>

‎packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
282282
</div>
283283
</header>
284284
<div
285-
class="AnalyticalTable-tbody-0"
285+
class="AnalyticalTable-tbody-0 sapScrollBar"
286286
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
287287
>
288288
<div
@@ -816,7 +816,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
816816
</div>
817817
</header>
818818
<div
819-
class="AnalyticalTable-tbody-0"
819+
class="AnalyticalTable-tbody-0 sapScrollBar"
820820
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
821821
>
822822
<div
@@ -1976,7 +1976,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
19761976
</div>
19771977
</header>
19781978
<div
1979-
class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
1979+
class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
19801980
style="position: relative; height: 220px; width: 636px; overflow: auto; will-change: transform; direction: ltr;"
19811981
>
19821982
<div
@@ -2582,7 +2582,7 @@ exports[`AnalyticalTable custom row height 1`] = `
25822582
</div>
25832583
</header>
25842584
<div
2585-
class="AnalyticalTable-tbody-0"
2585+
class="AnalyticalTable-tbody-0 sapScrollBar"
25862586
style="position: relative; height: 300px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
25872587
>
25882588
<div
@@ -3408,7 +3408,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
34083408
</div>
34093409
</header>
34103410
<div
3411-
class="AnalyticalTable-tbody-0"
3411+
class="AnalyticalTable-tbody-0 sapScrollBar"
34123412
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
34133413
>
34143414
<div
@@ -3942,7 +3942,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
39423942
</div>
39433943
</header>
39443944
<div
3945-
class="AnalyticalTable-tbody-0"
3945+
class="AnalyticalTable-tbody-0 sapScrollBar"
39463946
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
39473947
>
39483948
<div
@@ -4476,7 +4476,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
44764476
</div>
44774477
</header>
44784478
<div
4479-
class="AnalyticalTable-tbody-0"
4479+
class="AnalyticalTable-tbody-0 sapScrollBar"
44804480
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
44814481
>
44824482
<div
@@ -5010,7 +5010,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
50105010
</div>
50115011
</header>
50125012
<div
5013-
class="AnalyticalTable-tbody-0"
5013+
class="AnalyticalTable-tbody-0 sapScrollBar"
50145014
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
50155015
>
50165016
<div
@@ -5594,7 +5594,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
55945594
</div>
55955595
</header>
55965596
<div
5597-
class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
5597+
class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
55985598
style="position: relative; height: 220px; width: 642px; overflow: auto; will-change: transform; direction: ltr;"
55995599
>
56005600
<div
@@ -6212,7 +6212,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
62126212
</div>
62136213
</header>
62146214
<div
6215-
class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
6215+
class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
62166216
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
62176217
>
62186218
<div

‎packages/main/src/components/AnalyticalTable/types/ColumnType.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface ColumnType extends Column {
77
id: string;
88
Filter: ComponentType<{ column: ColumnType; popoverRef?: RefObject<Ui5PopoverDomRef> }>;
99
toggleSortBy: (descending: boolean, multi?: any) => void;
10+
clearSortBy: () => void;
1011
toggleGroupBy: (set: boolean) => void;
1112
canFilter: boolean;
1213
canResize: boolean;

‎packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHe
44
import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
55
import React, { useCallback, useMemo, useRef } from 'react';
66
import { FixedSizeList } from 'react-window';
7+
import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
78
import { VirtualTableRow } from './VirtualTableRow';
89

910
interface VirtualTableBodyProps {
@@ -70,7 +71,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
7071
[prepareRow]
7172
);
7273

73-
const classNames = StyleClassHelper.of(classes.tbody);
74+
const classNames = StyleClassHelper.of(classes.tbody, GlobalStyleClasses.sapScrollBar);
7475
if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
7576
classNames.put(classes.selectable);
7677
}

‎packages/main/src/components/ObjectPage/ObjectPage.jss.ts

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,6 @@ const styles = {
1818
backgroundColor: ThemingParameters.sapBackgroundColor,
1919
overflowX: 'hidden',
2020
overflowY: 'auto',
21-
'&::-webkit-scrollbar': {
22-
backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
23-
width: ThemingParameters.sapScrollBar_Dimension
24-
},
25-
'&::-webkit-scrollbar-thumb': {
26-
backgroundColor: ThemingParameters.sapScrollBar_BorderColor,
27-
'&:hover': {
28-
backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
29-
}
30-
},
31-
'&::-webkit-scrollbar-corner': {
32-
backgroundColor: ThemingParameters.sapScrollBar_TrackColor
33-
},
3421
'& section[id*="ObjectPageSection-"] > div[role="heading"]': {
3522
display: 'none'
3623
},

‎packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`ObjectPage IconTabBar Mode 1`] = `
44
<div
5-
class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
5+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
66
data-component-name="ObjectPage"
77
>
88
<header
@@ -196,7 +196,7 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
196196

197197
exports[`ObjectPage Just Some Sections 1`] = `
198198
<div
199-
class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
199+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
200200
data-component-name="ObjectPage"
201201
>
202202
<header
@@ -312,7 +312,7 @@ exports[`ObjectPage Just Some Sections 1`] = `
312312

313313
exports[`ObjectPage Key Infos 1`] = `
314314
<div
315-
class="ObjectPage-objectPage-0"
315+
class="ObjectPage-objectPage-0 sapScrollBar"
316316
data-component-name="ObjectPage"
317317
>
318318
<header
@@ -521,7 +521,7 @@ exports[`ObjectPage Key Infos 1`] = `
521521

522522
exports[`ObjectPage No Header 1`] = `
523523
<div
524-
class="ObjectPage-objectPage-0 ObjectPage-noHeader-0"
524+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-noHeader-0"
525525
data-component-name="ObjectPage"
526526
>
527527
<header
@@ -660,7 +660,7 @@ exports[`ObjectPage No Header 1`] = `
660660

661661
exports[`ObjectPage Not crashing with 0 sections 1`] = `
662662
<div
663-
class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
663+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
664664
data-component-name="ObjectPage"
665665
>
666666
<header
@@ -735,7 +735,7 @@ exports[`ObjectPage Not crashing with 0 sections 1`] = `
735735

736736
exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
737737
<div
738-
class="ObjectPage-objectPage-0"
738+
class="ObjectPage-objectPage-0 sapScrollBar"
739739
data-component-name="ObjectPage"
740740
>
741741
<header
@@ -843,7 +843,7 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
843843

844844
exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
845845
<div
846-
class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
846+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
847847
data-component-name="ObjectPage"
848848
>
849849
<header
@@ -951,7 +951,7 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
951951

952952
exports[`ObjectPage Only Sections 1`] = `
953953
<div
954-
class="ObjectPage-objectPage-0"
954+
class="ObjectPage-objectPage-0 sapScrollBar"
955955
data-component-name="ObjectPage"
956956
>
957957
<header
@@ -1181,7 +1181,7 @@ exports[`ObjectPage Only Sections 1`] = `
11811181

11821182
exports[`ObjectPage Set selected section id 1`] = `
11831183
<div
1184-
class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
1184+
class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
11851185
data-component-name="ObjectPage"
11861186
>
11871187
<header
@@ -1297,7 +1297,7 @@ exports[`ObjectPage Set selected section id 1`] = `
12971297

12981298
exports[`ObjectPage With Subsections 1`] = `
12991299
<div
1300-
class="ObjectPage-objectPage-0"
1300+
class="ObjectPage-objectPage-0 sapScrollBar"
13011301
data-component-name="ObjectPage"
13021302
>
13031303
<header

‎packages/main/src/components/ObjectPage/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { enrichEventWithDetails, getScrollBarWidth } from '@ui5/webcomponents-re
66
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
77
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
88
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
9+
import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
910
import { Label } from '@ui5/webcomponents-react/lib/Label';
1011
import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode';
1112
import { Title } from '@ui5/webcomponents-react/lib/Title';
@@ -348,7 +349,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
348349
isMounted.current = true;
349350
}, [isMounted, setScrollbarWidth]);
350351

351-
const objectPageClasses = StyleClassHelper.of(classes.objectPage);
352+
const objectPageClasses = StyleClassHelper.of(classes.objectPage, GlobalStyleClasses.sapScrollBar);
352353
if (className) {
353354
objectPageClasses.put(className);
354355
}

‎packages/main/src/components/ThemeProvider/GlobalStyleClasses.jss.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
2+
import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
3+
4+
export const GlobalStyleClassesStyles = {
5+
'@global': {
6+
[`.${GlobalStyleClasses.sapScrollBar}`]: {
7+
'&::-webkit-scrollbar': {
8+
backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
9+
width: ThemingParameters.sapScrollBar_Dimension
10+
},
11+
'&::-webkit-scrollbar-thumb': {
12+
backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
13+
width: ThemingParameters.sapScrollBar_Dimension,
14+
borderRadius: '0.25rem',
15+
'&:hover': {
16+
backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
17+
}
18+
},
19+
'&::-webkit-scrollbar-corner': {
20+
backgroundColor: ThemingParameters.sapScrollBar_TrackColor
21+
}
22+
}
23+
}
24+
};

0 commit comments

Comments
 (0)