Skip to content

Commit c2e19ee

Browse files
JialeclJialecl
authored
Merge branch 'master' into Mil4n0r/status-light-examples
2 parents e46ce50 + 1fb45b6 commit c2e19ee

File tree

10 files changed

+171
-29
lines changed

10 files changed

+171
-29
lines changed

‎lib/src/badge/Badge.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ const LabelContainer = styled.span<{ size: BadgePropsType["size"] }>`
154154
font-family: ${CoreTokens.type_sans};
155155
font-size: ${(props) => sizeMap[props.size].fontSize};
156156
font-weight: ${CoreTokens.type_semibold};
157+
white-space: nowrap;
157158
`;
158159

159160
export default DxcBadge;

‎lib/src/badge/types.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
22

3-
type NotificationProps = {
3+
type ContextualProps = {
44
/**
55
* Text to be placed in the badge.
66
*/
7-
label?: number;
7+
label: string;
88
/**
99
* The available badge modes.
1010
*/
11-
mode: "notification";
11+
mode?: "contextual";
1212
/**
1313
* In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
1414
*/
15-
notificationLimit?: number;
15+
notificationLimit?: never;
1616
/**
1717
* Affects the visual style of the badge. It can be used following semantic purposes or not.
1818
*/
19-
color?: never;
19+
color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
2020
};
2121

22-
type ContextualProps = {
22+
type NotificationProps = {
2323
/**
2424
* Text to be placed in the badge.
2525
*/
26-
label: string;
26+
label?: number;
2727
/**
2828
* The available badge modes.
2929
*/
30-
mode?: "contextual";
30+
mode: "notification";
3131
/**
3232
* In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
3333
*/
34-
notificationLimit?: never;
34+
notificationLimit?: number;
3535
/**
3636
* Affects the visual style of the badge. It can be used following semantic purposes or not.
3737
*/
38-
color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
38+
color?: never;
3939
};
4040

4141
type CommonProps = {
@@ -53,6 +53,6 @@ type CommonProps = {
5353
size?: "small" | "medium" | "large";
5454
};
5555

56-
type Props = (NotificationProps | ContextualProps) & CommonProps;
56+
type Props = (ContextualProps | NotificationProps) & CommonProps;
5757

5858
export default Props;

‎lib/src/common/variables.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -844,10 +844,10 @@ export const componentTokens = {
844844
dataFontWeight: CoreTokens.type_regular,
845845
dataFontColor: CoreTokens.color_black,
846846
dataFontTextTransform: "none",
847-
dataPaddingTop: "14px",
848-
dataPaddingBottom: "12px",
847+
dataPaddingTop: "16px",
848+
dataPaddingBottom: "16px",
849849
dataPaddingRight: "20px",
850-
dataPaddingLeft: "40px",
850+
dataPaddingLeft: "20px",
851851
dataTextAlign: "left",
852852
dataTextLineHeight: "normal",
853853
headerBackgroundColor: CoreTokens.color_purple_700,
@@ -861,7 +861,7 @@ export const componentTokens = {
861861
headerPaddingTop: "16px",
862862
headerPaddingBottom: "16px",
863863
headerPaddingRight: "20px",
864-
headerPaddingLeft: "40px",
864+
headerPaddingLeft: "20px",
865865
headerTextAlign: "left",
866866
headerTextLineHeight: "normal",
867867
scrollBarThumbColor: CoreTokens.color_grey_700,

‎lib/src/container/Container.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const Container = styled.div<StyledProps>`
5656
border-radius: ${({ borderRadius }) => borderRadius};
5757
border-width: ${({ border }) => (border && "width" in border ? `${border?.width}` : "")};
5858
border-style: ${({ border }) => (border && "style" in border ? `${border?.style}` : "")};
59-
border-width: ${({ border }) => (border && "color" in border ? `${getCoreColorToken(border?.color)}` : "")};
59+
border-color: ${({ border }) => (border && "color" in border ? `${getCoreColorToken(border?.color)}` : "")};
6060
6161
${({ border }) => {
6262
if (border != null) {

‎lib/src/resultset-table/ResultsetTable.stories.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,25 @@ export const Chromatic = () => (
206206
<DxcResultsetTable columns={columnsSortable} rows={longValues} />
207207
</SmallContainer>
208208
</ExampleContainer>
209+
<ExampleContainer>
210+
<Title title="Reduced sortable table" theme="light" level={4} />
211+
<DxcResultsetTable columns={columnsSortable} rows={rowsSortable} mode="reduced" />
212+
</ExampleContainer>
213+
{/* PENDING SMALL ICON VERSION */}
214+
<ExampleContainer>
215+
<Title title="Reduced with items per page option" theme="light" level={4} />
216+
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} mode="reduced" />
217+
</ExampleContainer>
218+
<ExampleContainer>
219+
<Title title="Reduced scroll resultset table" theme="light" level={4} />
220+
<DxcResultsetTable columns={longColumns} rows={longRows} mode="reduced" />
221+
</ExampleContainer>
222+
<ExampleContainer>
223+
<SmallContainer>
224+
<Title title="Reduced small container and text overflow" theme="light" level={4} />
225+
<DxcResultsetTable columns={columnsSortable} rows={longValues} mode="reduced" />
226+
</SmallContainer>
227+
</ExampleContainer>
209228
<Title title="Margins" theme="light" level={2} />
210229
<ExampleContainer>
211230
<Title title="Xxsmall" theme="light" level={4} />

‎lib/src/resultset-table/ResultsetTable.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import useTheme from "../useTheme";
77
import ResultsetTablePropsType, { Column } from "./types";
88
import icons from "./Icons";
99
import { getMargin } from "../common/utils";
10+
import CoreTokens from "../common/coreTokens";
1011

1112
const normalizeSortValue = (sortValue) => (typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue);
1213

@@ -42,6 +43,7 @@ const DxcResultsetTable = ({
4243
itemsPerPageFunction,
4344
margin,
4445
tabIndex = 0,
46+
mode = "default",
4547
}: ResultsetTablePropsType): JSX.Element => {
4648
const colorsTheme = useTheme();
4749
const [page, changePage] = useState(1);
@@ -85,7 +87,7 @@ const DxcResultsetTable = ({
8587
return (
8688
<ThemeProvider theme={colorsTheme.table}>
8789
<DxcResultsetTableContainer margin={margin}>
88-
<DxcTable>
90+
<DxcTable mode={mode}>
8991
<thead>
9092
<tr>
9193
{columns.map((column, index) => (
@@ -101,6 +103,7 @@ const DxcResultsetTable = ({
101103
}}
102104
tabIndex={column.isSortable ? tabIndex : -1}
103105
isSortable={column.isSortable}
106+
mode={mode}
104107
>
105108
<span>{column.displayValue}</span>
106109
{column.isSortable && (
@@ -157,20 +160,19 @@ const DxcResultsetTableContainer = styled.div<{ margin: ResultsetTablePropsType[
157160
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
158161
`;
159162

160-
const HeaderContainer = styled.span<{ isSortable: Column["isSortable"] }>`
163+
const HeaderContainer = styled.span<{ isSortable: Column["isSortable"]; mode: ResultsetTablePropsType["mode"] }>`
161164
display: flex;
162165
align-items: center;
163166
justify-content: ${(props) =>
164167
props.theme.headerTextAlign === "center"
165168
? "center"
166169
: props.theme.headerTextAlign === "right"
167-
? "flex-end"
168-
: "flex-start"};
169-
gap: 8px;
170+
? "flex-end"
171+
: "flex-start"};
172+
gap: ${CoreTokens.spacing_8};
170173
width: fit-content;
171174
border: 1px solid transparent;
172175
border-radius: 2px;
173-
padding: 3px;
174176
cursor: ${(props) => (props.isSortable ? "pointer" : "default")};
175177
176178
${(props) =>

‎lib/src/resultset-table/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,12 @@ type Props = {
6565
* Value of the tabindex attribute applied to the sortable icon.
6666
*/
6767
tabIndex?: number;
68+
/**
69+
* Determines the visual style and layout
70+
* - "default": The default mode with big spacing
71+
* - "reduced": A reduced mode with minimal spacing for dense tables
72+
*/
73+
mode?: "default" | "reduced";
6874
};
6975

7076
export default Props;

‎lib/src/table/Table.stories.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,104 @@ export const Chromatic = () => (
117117
</DxcTable>
118118
</div>
119119
</ExampleContainer>
120+
<ExampleContainer>
121+
<Title title="Default reduced" theme="light" level={4} />
122+
<DxcTable mode="reduced">
123+
<tr>
124+
<th>header 1</th>
125+
<th>header 2</th>
126+
<th>header 3</th>
127+
</tr>
128+
<tr>
129+
<td>cell 1</td>
130+
<td>cell 2</td>
131+
<td>cell 3</td>
132+
</tr>
133+
<tr>
134+
<td>cell 4</td>
135+
<td>cell 5</td>
136+
<td>cell 6</td>
137+
</tr>
138+
<tr>
139+
<td>cell 7</td>
140+
<td>cell 8</td>
141+
<td>Cell 9</td>
142+
</tr>
143+
</DxcTable>
144+
</ExampleContainer>
145+
<ExampleContainer>
146+
<Title title="Reduced with scrollbar" theme="light" level={4} />
147+
<div
148+
style={{ height: 200 + "px", display: "flex", flexDirection: "row", width: 100 + "%", marginBottom: 50 + "px" }}
149+
>
150+
<DxcTable mode="reduced">
151+
<tr>
152+
<th>
153+
header<br></br>subheader
154+
</th>
155+
<th>
156+
header<br></br>subheader
157+
</th>
158+
<th>
159+
header<br></br>subheader
160+
</th>
161+
</tr>
162+
<tr>
163+
<td>
164+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
165+
dolore magna aliqua.
166+
</td>
167+
<td>
168+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
169+
consequat.
170+
</td>
171+
<td>
172+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
173+
</td>
174+
</tr>
175+
<tr>
176+
<td>cell data</td>
177+
<td>cell data</td>
178+
<td>cell data</td>
179+
</tr>
180+
<tr>
181+
<td>cell data</td>
182+
<td>cell data</td>
183+
<td>cell data</td>
184+
</tr>
185+
<tr>
186+
<td>cell data</td>
187+
<td>cell data</td>
188+
<td>cell data</td>
189+
</tr>
190+
<tr>
191+
<td>cell data</td>
192+
<td>cell data</td>
193+
<td>cell data</td>
194+
</tr>
195+
<tr>
196+
<td>cell data</td>
197+
<td>cell data</td>
198+
<td>cell data</td>
199+
</tr>
200+
<tr>
201+
<td>cell data</td>
202+
<td>cell data</td>
203+
<td>cell data</td>
204+
</tr>
205+
<tr>
206+
<td>cell data</td>
207+
<td>cell data</td>
208+
<td>cell data</td>
209+
</tr>
210+
<tr>
211+
<td>cell data</td>
212+
<td>cell data</td>
213+
<td>cell data</td>
214+
</tr>
215+
</DxcTable>
216+
</div>
217+
</ExampleContainer>
120218
<Title title="Margins" theme="light" level={2} />
121219
<ExampleContainer>
122220
<Title title="Xxsmall margin" theme="light" level={4} />

‎lib/src/table/Table.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { spaces } from "../common/variables";
44
import { getMargin } from "../common/utils";
55
import useTheme from "../useTheme";
66
import TablePropsType from "./types";
7+
import CoreTokens from "../common/coreTokens";
78

8-
const DxcTable = ({ children, margin }: TablePropsType): JSX.Element => {
9+
const DxcTable = ({ children, margin, mode = "default" }: TablePropsType): JSX.Element => {
910
const colorsTheme = useTheme();
1011

1112
return (
1213
<ThemeProvider theme={colorsTheme.table}>
1314
<DxcTableContainer margin={margin}>
14-
<DxcTableContent>{children}</DxcTableContent>
15+
<DxcTableContent mode={mode}>{children}</DxcTableContent>
1516
</DxcTableContainer>
1617
</ThemeProvider>
1718
);
@@ -48,14 +49,14 @@ const DxcTableContainer = styled.div<{ margin: TablePropsType["margin"] }>`
4849
}
4950
`;
5051

51-
const DxcTableContent = styled.table`
52+
const DxcTableContent = styled.table<{ mode: TablePropsType["mode"] }>`
5253
border-collapse: collapse;
5354
width: 100%;
5455
5556
& tr {
5657
border-bottom: ${(props) =>
5758
`${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
58-
height: 60px;
59+
height: ${(props) => (props.mode === "default" ? "60px" : "36px")};
5960
}
6061
& td {
6162
background-color: ${(props) => props.theme.dataBackgroundColor};
@@ -68,7 +69,9 @@ const DxcTableContent = styled.table`
6869
text-align: ${(props) => props.theme.dataTextAlign};
6970
line-height: ${(props) => props.theme.dataTextLineHeight};
7071
padding: ${(props) =>
71-
`${props.theme.dataPaddingTop} ${props.theme.dataPaddingRight} ${props.theme.dataPaddingBottom} ${props.theme.dataPaddingLeft}`};
72+
props.mode === "default"
73+
? `${props.theme.dataPaddingTop} ${props.theme.dataPaddingRight} ${props.theme.dataPaddingBottom} ${props.theme.dataPaddingLeft}`
74+
: `${CoreTokens.spacing_8} ${CoreTokens.spacing_16}`};
7275
}
7376
& th {
7477
background-color: ${(props) => props.theme.headerBackgroundColor};
@@ -81,16 +84,23 @@ const DxcTableContent = styled.table`
8184
text-align: ${(props) => props.theme.headerTextAlign};
8285
line-height: ${(props) => props.theme.headerTextLineHeight};
8386
padding: ${(props) =>
84-
`${props.theme.headerPaddingTop} ${props.theme.headerPaddingRight} ${props.theme.headerPaddingBottom} ${props.theme.headerPaddingLeft}`};
87+
props.mode === "default"
88+
? `${props.theme.headerPaddingTop} ${props.theme.headerPaddingRight} ${props.theme.headerPaddingBottom} ${props.theme.headerPaddingLeft}`
89+
: `${CoreTokens.spacing_8} ${CoreTokens.spacing_16}`};
8590
}
8691
& th:first-child {
8792
border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
93+
padding-left: ${(props) => (props.mode === "default" ? CoreTokens.spacing_24 : "20px")};
8894
}
8995
& th:last-child {
9096
border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
97+
padding-right: ${(props) => (props.mode === "default" ? CoreTokens.spacing_24 : "20px")};
98+
}
99+
& td:first-child {
100+
padding-left: ${(props) => (props.mode === "default" ? CoreTokens.spacing_24 : "20px")};
91101
}
92102
& td:last-child {
93-
padding-right: 40px;
103+
padding-right: ${(props) => (props.mode === "default" ? CoreTokens.spacing_24 : "20px")};
94104
}
95105
`;
96106

‎lib/src/table/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ type Props = {
1717
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1818
*/
1919
margin?: Space | Margin;
20+
/**
21+
* Determines the visual style and layout
22+
* - "default": Table with big spacing, applicable to most cases.
23+
* - "reduced": Smaller table with minimal spacing for high density information.
24+
*/
25+
mode?: "default" | "reduced";
2026
};
2127

2228
export default Props;

0 commit comments

Comments
 (0)