Skip to content

Commit 9e01f4d

Browse files
Lukas742Lukas742
authored
docs: outline experimental components & remove deprecated APIs (#7211)
The commit also removes the custom styling of the Storybook search input
1 parent a1af5ee commit 9e01f4d

File tree

4 files changed

+86
-119
lines changed

4 files changed

+86
-119
lines changed

‎.storybook/manager-head.html‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,6 @@
77
body {
88
font-family: var(--sapFontFamily);
99
}
10-
#storybook-explorer-searchfield {
11-
font-size: var(--sapFontSize);
12-
box-sizing: border-box;
13-
border: 0;
14-
white-space: nowrap;
15-
text-overflow: ellipsis;
16-
height: var(--sapElement_Height);
17-
min-height: var(--sapElement_Height);
18-
border-radius: var(--sapField_BorderCornerRadius);
19-
padding-inline-end: 0.625rem;
20-
box-shadow: var(--sapField_Shadow);
21-
color: var(--sapField_TextColor);
22-
background: var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));
23-
background-color: var(--sapField_Background, var(--sapField_Background));
24-
border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
25-
}
26-
27-
#storybook-explorer-searchfield:hover {
28-
background: var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));
29-
background-color: var(--sapField_Hover_Background, var(--sapField_Hover_Background));
30-
border-color: var(--sapField_Hover_BorderColor);
31-
box-shadow: var(--sapField_Hover_Shadow);
32-
}
33-
34-
#storybook-explorer-searchfield:focus {
35-
background: var(--sapField_Focus_Background, var(--sapField_Focus_Background));
36-
outline: var(--sapField_Active_BorderColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
37-
outline-offset: -0.125rem;
38-
box-shadow: none;
39-
}
4010

4111
.docblock-argstable-body label[title] {
4212
background: #fff !important;
@@ -56,6 +26,7 @@
5626
#ai-button::after,
5727
#data-display-table::after,
5828
#inputs-tokenizer::after,
29+
#inputs-search::after,
5930
#modals-popovers-usermenu::after,
6031
#modals-popovers-usersettingsdialog::after,
6132
#charts-timelinechart::after {

‎packages/main/src/webComponents/Search/Search.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as ComponentStories from './Search.stories';
44

55
<Meta of={ComponentStories} />
66

7-
<DocsHeader />
7+
<DocsHeader experimental />
88

99
<br />
1010

‎packages/main/src/webComponents/Table/Table.mdx‎

Lines changed: 41 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ import * as ComponentStories from './Table.stories';
3737

3838
## Growing Table
3939

40-
`Table` with growing feature (`<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />`):
40+
`Table` with growing feature (`<TableGrowing onLoadMore={onLoadMore} mode={TableGrowingMode.Scroll} />`):
4141

4242
<Canvas of={ComponentStories.GrowingTable} />
4343

4444
<details>
4545

46-
<summary>Show code</summary>
46+
<summary>Show static code</summary>
4747

48-
```jsx
48+
```tsx
4949
const createRows = (indexOffset) => {
5050
return new Array(25).fill('').map((_, index) => (
5151
<TableRow key={`${index + indexOffset}-row`}>
@@ -68,39 +68,32 @@ const createRows = (indexOffset) => {
6868
));
6969
};
7070

71-
const GrowingTable = () => {
71+
const GrowingTable = (props) => {
72+
const [mode, setMode] = useState<TableGrowingPropTypes['mode']>(TableGrowingMode.Button);
7273
const [rows, setRows] = useState(createRows(1));
7374
const onLoadMore = () => {
7475
setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
7576
};
7677
return (
77-
<div style={{ height: '250px', overflow: 'auto' }}>
78-
<Table
79-
{...otherProps}
80-
headerRow={
81-
<TableHeaderRow sticky>
82-
<TableHeaderCell width={'200px'} minWidth={'200px'}>
83-
<span>Product</span>
84-
</TableHeaderCell>
85-
<TableHeaderCell minWidth={'200px'}>
86-
<span>Supplier</span>
87-
</TableHeaderCell>
88-
<TableHeaderCell minWidth={'200px'}>
89-
<span>Dimensions</span>
90-
</TableHeaderCell>
91-
<TableHeaderCell minWidth={'100px'} maxWidth="200px">
92-
<span>Weight</span>
93-
</TableHeaderCell>
94-
<TableHeaderCell minWidth="200px">
95-
<span>Price</span>
96-
</TableHeaderCell>
97-
</TableHeaderRow>
98-
}
99-
features={<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />}
78+
<>
79+
<Label showColon style={{ marginInlineEnd: '0.5rem' }}>
80+
Growing <code>mode</code>
81+
</Label>
82+
<SegmentedButton
83+
style={{ marginBlockEnd: '0.5rem' }}
84+
onSelectionChange={(e) => {
85+
setMode(e.detail.selectedItems[0].textContent as TableGrowingPropTypes['mode']);
86+
}}
10087
>
101-
{rows}
102-
</Table>
103-
</div>
88+
<SegmentedButtonItem selected={mode === TableGrowingMode.Scroll}>Scroll</SegmentedButtonItem>
89+
<SegmentedButtonItem selected={mode === TableGrowingMode.Button}>Button</SegmentedButtonItem>
90+
</SegmentedButton>
91+
<div style={{ height: '250px', overflow: 'auto' }}>
92+
<Table {...props} features={<TableGrowing onLoadMore={onLoadMore} mode={mode} />}>
93+
{rows}
94+
</Table>
95+
</div>
96+
</>
10497
);
10598
};
10699
```
@@ -109,52 +102,36 @@ const GrowingTable = () => {
109102

110103
## Table with row selection
111104

112-
`Table` with selection feature (`<TableSelection mode="Multiple" />`):
105+
`Table` with selection features (`<TableSelectionSingle />` & `<TableSelectionMulti />`)
113106

114107
<Canvas of={ComponentStories.WithSelection} />
115108

116109
<details>
117110

118-
<summary>Show code</summary>
111+
<summary>Show static code</summary>
119112

120-
```jsx
113+
```tsx
121114
function TableWithRowSelection(props) {
122-
const [mode, setMode] = useState(TableSelectionMode.Multiple);
115+
const [mode, setMode] = useState<'Single' | 'Multi' | 'None'>('Single');
123116
return (
124117
<>
125118
<SegmentedButton
126119
onSelectionChange={(e) => {
127-
setMode(e.detail.selectedItems[0].textContent);
120+
setMode(e.detail.selectedItems[0].textContent as 'Single' | 'Multi' | 'None');
128121
}}
129122
>
130-
{Object.values(TableSelectionMode).map((selectionMode) => (
131-
<SegmentedButtonItem key={selectionMode} selected={selectionMode === mode}>
132-
{selectionMode}
133-
</SegmentedButtonItem>
134-
))}
123+
<SegmentedButtonItem selected={'None' === mode}>None</SegmentedButtonItem>
124+
<SegmentedButtonItem selected={'Single' === mode}>Single</SegmentedButtonItem>
125+
<SegmentedButtonItem selected={'Multi' === mode}>Multi</SegmentedButtonItem>
135126
</SegmentedButton>
136127
<Table
137128
{...props}
138-
headerRow={
139-
<TableHeaderRow sticky>
140-
<TableHeaderCell width={'200px'} minWidth={'200px'}>
141-
<span>Product</span>
142-
</TableHeaderCell>
143-
<TableHeaderCell minWidth={'200px'}>
144-
<span>Supplier</span>
145-
</TableHeaderCell>
146-
<TableHeaderCell minWidth={'200px'}>
147-
<span>Dimensions</span>
148-
</TableHeaderCell>
149-
<TableHeaderCell minWidth={'100px'} maxWidth="200px">
150-
<span>Weight</span>
151-
</TableHeaderCell>
152-
<TableHeaderCell minWidth="200px">
153-
<span>Price</span>
154-
</TableHeaderCell>
155-
</TableHeaderRow>
129+
features={
130+
<>
131+
{'Single' === mode && <TableSelectionSingle />}
132+
{'Multi' === mode && <TableSelectionMulti />}
133+
</>
156134
}
157-
features={<TableSelection mode={mode} />}
158135
>
159136
<TableRow>
160137
<TableCell>
@@ -206,7 +183,7 @@ function TableWithRowSelection(props) {
206183

207184
<details>
208185

209-
<summary>Show code</summary>
186+
<summary>Show static code</summary>
210187

211188
```tsx
212189
// enrich data with `position` (if not already available)
@@ -401,21 +378,17 @@ Enable drag-and-drop by using the `onMoveOver` and `onMove` event in combination
401378
<Description of={TableVirtualizer} />
402379
<ArgTypes of={TableVirtualizer} />
403380

404-
## TableVirtualizer
405-
406-
<Description of={TableVirtualizer} />
407-
<ArgTypes of={TableVirtualizer} />
408-
409-
## TableVirtualizer
381+
## TableSelectionMulti
410382

411383
<Description of={TableSelectionMulti} />
412384
<ArgTypes of={TableSelectionMulti} />
413-
## TableVirtualizer
385+
386+
## TableSelectionSingle
414387

415388
<Description of={TableSelectionSingle} />
416389
<ArgTypes of={TableSelectionSingle} />
417390

418-
## TableSelection
391+
## TableSelection (deprecated)
419392

420393
**Deprecated!**
421394

‎packages/main/src/webComponents/Table/Table.stories.tsx‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
import dataLarge from '@sb/mockData/Friends500.json';
22
import type { Meta, StoryObj } from '@storybook/react';
33
import TableGrowingMode from '@ui5/webcomponents/dist/types/TableGrowingMode.js';
4-
import TableSelectionMode from '@ui5/webcomponents/dist/types/TableSelectionMode.js';
54
import editIcon from '@ui5/webcomponents-icons/dist/edit.js';
65
import saveIcon from '@ui5/webcomponents-icons/dist/save.js';
7-
import type { TablePropTypes, TableVirtualizerPropTypes } from '@ui5/webcomponents-react';
8-
import { SegmentedButton, SegmentedButtonItem } from '@ui5/webcomponents-react';
96
import { useEffect, useState } from 'react';
7+
import { Label } from '../Label/index.js';
8+
import { SegmentedButton } from '../SegmentedButton/index.js';
9+
import { SegmentedButtonItem } from '../SegmentedButtonItem/index.js';
1010
import { TableCell } from '../TableCell/index.js';
11+
import type { TableGrowingPropTypes } from '../TableGrowing/index.js';
1112
import { TableGrowing } from '../TableGrowing/index.js';
1213
import { TableHeaderCell } from '../TableHeaderCell/index.js';
1314
import { TableHeaderRow } from '../TableHeaderRow/index.js';
1415
import { TableRow } from '../TableRow/index.js';
1516
import { TableRowAction } from '../TableRowAction/index.js';
1617
import { TableRowActionNavigation } from '../TableRowActionNavigation/index.js';
17-
import { TableSelection } from '../TableSelection/index.js';
18+
import { TableSelectionMulti } from '../TableSelectionMulti/index.js';
19+
import { TableSelectionSingle } from '../TableSelectionSingle/index.js';
20+
import type { TableVirtualizerPropTypes } from '../TableVirtualizer/index.js';
1821
import { TableVirtualizer } from '../TableVirtualizer/index.js';
22+
import type { TablePropTypes } from './index.js';
1923
import { Table } from './index.js';
2024

2125
const popInColumns = (
@@ -109,6 +113,7 @@ export const Default: Story = {
109113

110114
export const GrowingTable: Story = {
111115
render: (args) => {
116+
const [mode, setMode] = useState<TableGrowingPropTypes['mode']>(TableGrowingMode.Button);
112117
const createRows = (indexOffset) => {
113118
return new Array(25).fill('').map((_, index) => (
114119
<TableRow key={`${index + indexOffset}-row`}>
@@ -135,32 +140,52 @@ export const GrowingTable: Story = {
135140
setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
136141
};
137142
return (
138-
<div style={{ height: '250px', overflow: 'auto' }}>
139-
<Table {...args} features={<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />}>
140-
{rows}
141-
</Table>
142-
</div>
143+
<>
144+
<Label showColon style={{ marginInlineEnd: '0.5rem' }}>
145+
Growing <code>mode</code>
146+
</Label>
147+
<SegmentedButton
148+
style={{ marginBlockEnd: '0.5rem' }}
149+
onSelectionChange={(e) => {
150+
setMode(e.detail.selectedItems[0].textContent as TableGrowingPropTypes['mode']);
151+
}}
152+
>
153+
<SegmentedButtonItem selected={mode === TableGrowingMode.Scroll}>Scroll</SegmentedButtonItem>
154+
<SegmentedButtonItem selected={mode === TableGrowingMode.Button}>Button</SegmentedButtonItem>
155+
</SegmentedButton>
156+
<div style={{ height: '250px', overflow: 'auto' }}>
157+
<Table {...args} features={<TableGrowing onLoadMore={onLoadMore} mode={mode} />}>
158+
{rows}
159+
</Table>
160+
</div>
161+
</>
143162
);
144163
}
145164
};
146165

147166
export const WithSelection: Story = {
148167
render(args) {
149-
const [mode, setMode] = useState<TableSelectionMode>(TableSelectionMode.Multiple);
168+
const [mode, setMode] = useState<'Single' | 'Multi' | 'None'>('Single');
150169
return (
151170
<>
152171
<SegmentedButton
153172
onSelectionChange={(e) => {
154-
setMode(e.detail.selectedItems[0].textContent);
173+
setMode(e.detail.selectedItems[0].textContent as 'Single' | 'Multi' | 'None');
155174
}}
156175
>
157-
{Object.values(TableSelectionMode).map((selectionMode) => (
158-
<SegmentedButtonItem key={selectionMode} selected={selectionMode === mode}>
159-
{selectionMode}
160-
</SegmentedButtonItem>
161-
))}
176+
<SegmentedButtonItem selected={'None' === mode}>None</SegmentedButtonItem>
177+
<SegmentedButtonItem selected={'Single' === mode}>Single</SegmentedButtonItem>
178+
<SegmentedButtonItem selected={'Multi' === mode}>Multi</SegmentedButtonItem>
162179
</SegmentedButton>
163-
<Table {...args} features={<TableSelection mode={mode} />}>
180+
<Table
181+
{...args}
182+
features={
183+
<>
184+
{'Single' === mode && <TableSelectionSingle />}
185+
{'Multi' === mode && <TableSelectionMulti />}
186+
</>
187+
}
188+
>
164189
<TableRow>
165190
<TableCell>
166191
<span>Notebook Basic</span>
@@ -273,9 +298,7 @@ export const withRowActions: Story = {
273298
actions={
274299
<>
275300
<TableRowAction icon={editIcon}>Edit</TableRowAction>
276-
<TableRowAction icon={saveIcon} disabled>
277-
Save
278-
</TableRowAction>
301+
<TableRowAction icon={saveIcon}>Save</TableRowAction>
279302
<TableRowActionNavigation interactive={!!(index % 2)} />
280303
</>
281304
}

0 commit comments

Comments
 (0)