Skip to content

Commit 0d6c89f

Browse files
EKong-IBMEKong-IBM
committed
feat(table): table storybook custom input
#58370
1 parent 39d35a3 commit 0d6c89f

File tree

12 files changed

+11969
-3299
lines changed

12 files changed

+11969
-3299
lines changed

‎packages/react/src/components/PageTitleBar/__snapshots__/PageTitleBar.story.storyshot‎

Lines changed: 218 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -914,6 +914,69 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
914914
</svg>
915915
</button>
916916
</th>
917+
<th
918+
aria-sort="none"
919+
className="table-header-label-start iot--table-head--table-header table-header-sortable"
920+
data-testid="null-table-head-column-customInput"
921+
scope="col"
922+
style={
923+
Object {
924+
"width": undefined,
925+
}
926+
}
927+
>
928+
<button
929+
align="start"
930+
className="table-header-label-start iot--table-head--table-header table-header-sortable bx--table-sort"
931+
data-column="customInput"
932+
data-floating-menu-container={true}
933+
id="column-customInput"
934+
onClick={[Function]}
935+
>
936+
<span
937+
className="bx--table-header-label"
938+
>
939+
<span
940+
className=""
941+
title="Custom Input"
942+
>
943+
Custom Input
944+
</span>
945+
</span>
946+
<svg
947+
aria-label="Sort rows by this header in ascending order"
948+
className="bx--table-sort__icon"
949+
fill="currentColor"
950+
focusable="false"
951+
height={16}
952+
preserveAspectRatio="xMidYMid meet"
953+
role="img"
954+
viewBox="0 0 16 16"
955+
width={16}
956+
xmlns="http://www.w3.org/2000/svg"
957+
>
958+
<path
959+
d="M3.7 6.7L7.5 2.9 7.5 15 8.5 15 8.5 2.9 12.3 6.7 13 6 8 1 3 6z"
960+
/>
961+
</svg>
962+
<svg
963+
aria-label="Sort rows by this header in ascending order"
964+
className="bx--table-sort__icon-unsorted"
965+
fill="currentColor"
966+
focusable="false"
967+
height={16}
968+
preserveAspectRatio="xMidYMid meet"
969+
role="img"
970+
viewBox="0 0 32 32"
971+
width={16}
972+
xmlns="http://www.w3.org/2000/svg"
973+
>
974+
<path
975+
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
976+
/>
977+
</svg>
978+
</button>
979+
</th>
917980
<th
918981
className="iot--table-header-row-action-column"
919982
data-testid="null-table-head-row-actions-column"
@@ -1293,7 +1356,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
12931356
</div>
12941357
</th>
12951358
<th
1296-
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
1359+
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width"
12971360
data-column="object"
12981361
scope="col"
12991362
>
@@ -1338,6 +1401,17 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
13381401
</div>
13391402
</div>
13401403
</th>
1404+
<th
1405+
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
1406+
data-column="customInput"
1407+
scope="col"
1408+
>
1409+
<div
1410+
className="bx--table-header-label"
1411+
>
1412+
<div />
1413+
</div>
1414+
</th>
13411415
<th
13421416
className="iot--filter-header-row--header"
13431417
scope="col"
@@ -1656,6 +1730,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
16561730
</span>
16571731
</span>
16581732
</td>
1733+
<td
1734+
align="start"
1735+
className="data-table-start"
1736+
data-column="customInput"
1737+
data-offset={0}
1738+
id="cell-table-12-row-1-customInput"
1739+
offset={0}
1740+
>
1741+
<span
1742+
className="iot--table__cell__offset"
1743+
style={
1744+
Object {
1745+
"--row-nesting-offset": "0px",
1746+
}
1747+
}
1748+
/>
1749+
</td>
16591750
<td
16601751
className="iot--row-actions-cell--table-cell"
16611752
>
@@ -2057,6 +2148,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
20572148
</span>
20582149
</span>
20592150
</td>
2151+
<td
2152+
align="start"
2153+
className="data-table-start"
2154+
data-column="customInput"
2155+
data-offset={0}
2156+
id="cell-table-12-row-4-customInput"
2157+
offset={0}
2158+
>
2159+
<span
2160+
className="iot--table__cell__offset"
2161+
style={
2162+
Object {
2163+
"--row-nesting-offset": "0px",
2164+
}
2165+
}
2166+
/>
2167+
</td>
20602168
<td
20612169
className="iot--row-actions-cell--table-cell"
20622170
>
@@ -3160,6 +3268,69 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
31603268
</svg>
31613269
</button>
31623270
</th>
3271+
<th
3272+
aria-sort="none"
3273+
className="table-header-label-start iot--table-head--table-header table-header-sortable"
3274+
data-testid="null-table-head-column-customInput"
3275+
scope="col"
3276+
style={
3277+
Object {
3278+
"width": undefined,
3279+
}
3280+
}
3281+
>
3282+
<button
3283+
align="start"
3284+
className="table-header-label-start iot--table-head--table-header table-header-sortable bx--table-sort"
3285+
data-column="customInput"
3286+
data-floating-menu-container={true}
3287+
id="column-customInput"
3288+
onClick={[Function]}
3289+
>
3290+
<span
3291+
className="bx--table-header-label"
3292+
>
3293+
<span
3294+
className=""
3295+
title="Custom Input"
3296+
>
3297+
Custom Input
3298+
</span>
3299+
</span>
3300+
<svg
3301+
aria-label="Sort rows by this header in ascending order"
3302+
className="bx--table-sort__icon"
3303+
fill="currentColor"
3304+
focusable="false"
3305+
height={16}
3306+
preserveAspectRatio="xMidYMid meet"
3307+
role="img"
3308+
viewBox="0 0 16 16"
3309+
width={16}
3310+
xmlns="http://www.w3.org/2000/svg"
3311+
>
3312+
<path
3313+
d="M3.7 6.7L7.5 2.9 7.5 15 8.5 15 8.5 2.9 12.3 6.7 13 6 8 1 3 6z"
3314+
/>
3315+
</svg>
3316+
<svg
3317+
aria-label="Sort rows by this header in ascending order"
3318+
className="bx--table-sort__icon-unsorted"
3319+
fill="currentColor"
3320+
focusable="false"
3321+
height={16}
3322+
preserveAspectRatio="xMidYMid meet"
3323+
role="img"
3324+
viewBox="0 0 32 32"
3325+
width={16}
3326+
xmlns="http://www.w3.org/2000/svg"
3327+
>
3328+
<path
3329+
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
3330+
/>
3331+
</svg>
3332+
</button>
3333+
</th>
31633334
<th
31643335
className="iot--table-header-row-action-column"
31653336
data-testid="null-table-head-row-actions-column"
@@ -3539,7 +3710,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
35393710
</div>
35403711
</th>
35413712
<th
3542-
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
3713+
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width"
35433714
data-column="object"
35443715
scope="col"
35453716
>
@@ -3584,6 +3755,17 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
35843755
</div>
35853756
</div>
35863757
</th>
3758+
<th
3759+
className="iot--tableheader-filter iot--filter-header-row--header iot--filter-header-row--header-width iot--filter-header-row--last-column"
3760+
data-column="customInput"
3761+
scope="col"
3762+
>
3763+
<div
3764+
className="bx--table-header-label"
3765+
>
3766+
<div />
3767+
</div>
3768+
</th>
35873769
<th
35883770
className="iot--filter-header-row--header"
35893771
scope="col"
@@ -3902,6 +4084,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
39024084
</span>
39034085
</span>
39044086
</td>
4087+
<td
4088+
align="start"
4089+
className="data-table-start"
4090+
data-column="customInput"
4091+
data-offset={0}
4092+
id="cell-table-13-row-1-customInput"
4093+
offset={0}
4094+
>
4095+
<span
4096+
className="iot--table__cell__offset"
4097+
style={
4098+
Object {
4099+
"--row-nesting-offset": "0px",
4100+
}
4101+
}
4102+
/>
4103+
</td>
39054104
<td
39064105
className="iot--row-actions-cell--table-cell"
39074106
>
@@ -4303,6 +4502,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/P
43034502
</span>
43044503
</span>
43054504
</td>
4505+
<td
4506+
align="start"
4507+
className="data-table-start"
4508+
data-column="customInput"
4509+
data-offset={0}
4510+
id="cell-table-13-row-4-customInput"
4511+
offset={0}
4512+
>
4513+
<span
4514+
className="iot--table__cell__offset"
4515+
style={
4516+
Object {
4517+
"--row-nesting-offset": "0px",
4518+
}
4519+
}
4520+
/>
4521+
</td>
43064522
<td
43074523
className="iot--row-actions-cell--table-cell"
43084524
>

0 commit comments

Comments
 (0)