@cloudscape-design/board-components 3.0.6 → 3.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/board/internal.js +1 -1
- package/board/styles.css.js +5 -5
- package/board/styles.scoped.css +9 -9
- package/board/styles.selectors.js +5 -5
- package/board-item/styles.css.js +10 -10
- package/board-item/styles.scoped.css +10 -10
- package/board-item/styles.selectors.js +10 -10
- package/internal/environment.js +3 -3
- package/internal/grid/grid.d.ts +1 -1
- package/internal/grid/grid.js +3 -2
- package/internal/grid/interfaces.d.ts +0 -1
- package/internal/grid/item.js +6 -1
- package/internal/grid/styles.css.js +6 -2
- package/internal/grid/styles.scoped.css +6 -198
- package/internal/grid/styles.selectors.js +6 -2
- package/internal/handle/styles.css.js +1 -1
- package/internal/handle/styles.scoped.css +9 -9
- package/internal/handle/styles.selectors.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -13
- package/Config +0 -23
- package/README-cloudscape.md +0 -20
- package/README-open-source.md +0 -0
package/board/internal.js
CHANGED
|
@@ -156,7 +156,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
|
|
|
156
156
|
const announcement = transitionAnnouncement
|
|
157
157
|
? announcementToString(transitionAnnouncement, items, i18nStrings, columns)
|
|
158
158
|
: "";
|
|
159
|
-
return (_jsxs("div", { ref: __internalRootRef, children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: columns,
|
|
159
|
+
return (_jsxs("div", { ref: __internalRootRef, children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => {
|
|
160
160
|
var _a;
|
|
161
161
|
const layoutShift = (_a = transition === null || transition === void 0 ? void 0 : transition.layoutShift) !== null && _a !== void 0 ? _a : removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.layoutShift;
|
|
162
162
|
const transforms = layoutShift ? createTransforms(itemsLayout, layoutShift.moves, gridContext) : {};
|
package/board/styles.css.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"placeholder": "
|
|
5
|
-
"placeholder--active": "awsui_placeholder--
|
|
6
|
-
"placeholder--hover": "awsui_placeholder--
|
|
7
|
-
"root": "
|
|
8
|
-
"empty": "
|
|
4
|
+
"placeholder": "awsui_placeholder_1h7dk_s83el_1",
|
|
5
|
+
"placeholder--active": "awsui_placeholder--active_1h7dk_s83el_5",
|
|
6
|
+
"placeholder--hover": "awsui_placeholder--hover_1h7dk_s83el_8",
|
|
7
|
+
"root": "awsui_root_1h7dk_s83el_12",
|
|
8
|
+
"empty": "awsui_empty_1h7dk_s83el_16"
|
|
9
9
|
};
|
|
10
10
|
|
package/board/styles.scoped.css
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
.
|
|
2
|
-
border-radius: var(--border-radius-container-
|
|
1
|
+
.awsui_placeholder_1h7dk_s83el_1:not(#\9) {
|
|
2
|
+
border-radius: var(--border-radius-container-gh9ysk, 16px);
|
|
3
3
|
height: 100%;
|
|
4
4
|
}
|
|
5
|
-
.awsui_placeholder--
|
|
6
|
-
background-color: var(--color-board-placeholder-active-
|
|
5
|
+
.awsui_placeholder--active_1h7dk_s83el_5:not(#\9) {
|
|
6
|
+
background-color: var(--color-board-placeholder-active-vaxzdf, #e9ebed);
|
|
7
7
|
}
|
|
8
|
-
.awsui_placeholder--
|
|
9
|
-
background-color: var(--color-board-placeholder-hover-
|
|
8
|
+
.awsui_placeholder--hover_1h7dk_s83el_8:not(#\9) {
|
|
9
|
+
background-color: var(--color-board-placeholder-hover-v1s7kq, #d3e7f9);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
12
|
+
.awsui_root_1h7dk_s83el_12:not(#\9) {
|
|
13
13
|
/* used in test-utils */
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.
|
|
16
|
+
.awsui_empty_1h7dk_s83el_16:not(#\9) {
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
width: 100%;
|
|
19
19
|
padding: var(--space-scaled-m-pv0fmt, 16px) var(--space-scaled-l-t03y3z, 20px) var(--space-scaled-l-t03y3z, 20px);
|
|
20
|
-
color: var(--color-text-empty-
|
|
20
|
+
color: var(--color-text-empty-fjv325, #5f6b7a);
|
|
21
21
|
display: flex;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"placeholder": "
|
|
6
|
-
"placeholder--active": "awsui_placeholder--
|
|
7
|
-
"placeholder--hover": "awsui_placeholder--
|
|
8
|
-
"root": "
|
|
9
|
-
"empty": "
|
|
5
|
+
"placeholder": "awsui_placeholder_1h7dk_s83el_1",
|
|
6
|
+
"placeholder--active": "awsui_placeholder--active_1h7dk_s83el_5",
|
|
7
|
+
"placeholder--hover": "awsui_placeholder--hover_1h7dk_s83el_8",
|
|
8
|
+
"root": "awsui_root_1h7dk_s83el_12",
|
|
9
|
+
"empty": "awsui_empty_1h7dk_s83el_16"
|
|
10
10
|
};
|
|
11
11
|
|
package/board-item/styles.css.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"container-override": "awsui_container-
|
|
6
|
-
"active": "
|
|
7
|
-
"header": "
|
|
8
|
-
"flexible": "
|
|
9
|
-
"handle": "
|
|
10
|
-
"header-content": "awsui_header-
|
|
11
|
-
"settings": "
|
|
12
|
-
"fixed": "
|
|
13
|
-
"resizer": "
|
|
4
|
+
"root": "awsui_root_9ckv7_7y7kt_1",
|
|
5
|
+
"container-override": "awsui_container-override_9ckv7_7y7kt_6",
|
|
6
|
+
"active": "awsui_active_9ckv7_7y7kt_6",
|
|
7
|
+
"header": "awsui_header_9ckv7_7y7kt_10",
|
|
8
|
+
"flexible": "awsui_flexible_9ckv7_7y7kt_16",
|
|
9
|
+
"handle": "awsui_handle_9ckv7_7y7kt_20",
|
|
10
|
+
"header-content": "awsui_header-content_9ckv7_7y7kt_24",
|
|
11
|
+
"settings": "awsui_settings_9ckv7_7y7kt_28",
|
|
12
|
+
"fixed": "awsui_fixed_9ckv7_7y7kt_33",
|
|
13
|
+
"resizer": "awsui_resizer_9ckv7_7y7kt_37"
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
.
|
|
1
|
+
.awsui_root_9ckv7_7y7kt_1:not(#\9) {
|
|
2
2
|
display: contents;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
/* TODO: use container API instead of styles override */
|
|
6
|
-
.awsui_container-
|
|
7
|
-
box-shadow: var(--shadow-container-active-
|
|
6
|
+
.awsui_container-override_9ckv7_7y7kt_6.awsui_active_9ckv7_7y7kt_6:not(#\9) {
|
|
7
|
+
box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.awsui_header_9ckv7_7y7kt_10:not(#\9) {
|
|
11
11
|
display: flex;
|
|
12
12
|
justify-items: center;
|
|
13
13
|
padding: var(--space-scaled-s-cu1hzn, 12px) calc(var(--space-container-horizontal-tlw03i, 20px) - var(--space-scaled-xs-6859qs, 8px));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.
|
|
16
|
+
.awsui_flexible_9ckv7_7y7kt_16:not(#\9) {
|
|
17
17
|
flex: 1 1 min-content;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.
|
|
20
|
+
.awsui_handle_9ckv7_7y7kt_20:not(#\9) {
|
|
21
21
|
margin-top: calc(var(--space-scaled-xxs-95dhkm, 4px) + 1px);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.awsui_header-
|
|
24
|
+
.awsui_header-content_9ckv7_7y7kt_24:not(#\9) {
|
|
25
25
|
margin-left: var(--space-scaled-xxs-95dhkm, 4px);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
.
|
|
28
|
+
.awsui_settings_9ckv7_7y7kt_28:not(#\9) {
|
|
29
29
|
margin-top: calc(var(--space-scaled-xxxs-b6dm8t, 2px) + 1px);
|
|
30
30
|
margin-left: var(--space-static-xs-9adq92, 8px);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.
|
|
33
|
+
.awsui_fixed_9ckv7_7y7kt_33:not(#\9) {
|
|
34
34
|
flex: 0 0 auto;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.awsui_resizer_9ckv7_7y7kt_37:not(#\9) {
|
|
38
38
|
position: absolute;
|
|
39
39
|
bottom: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
|
|
40
40
|
right: calc(var(--space-static-xs-9adq92, 8px) - var(--space-static-xxxs-k3qmdh, 2px));
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"container-override": "awsui_container-
|
|
7
|
-
"active": "
|
|
8
|
-
"header": "
|
|
9
|
-
"flexible": "
|
|
10
|
-
"handle": "
|
|
11
|
-
"header-content": "awsui_header-
|
|
12
|
-
"settings": "
|
|
13
|
-
"fixed": "
|
|
14
|
-
"resizer": "
|
|
5
|
+
"root": "awsui_root_9ckv7_7y7kt_1",
|
|
6
|
+
"container-override": "awsui_container-override_9ckv7_7y7kt_6",
|
|
7
|
+
"active": "awsui_active_9ckv7_7y7kt_6",
|
|
8
|
+
"header": "awsui_header_9ckv7_7y7kt_10",
|
|
9
|
+
"flexible": "awsui_flexible_9ckv7_7y7kt_16",
|
|
10
|
+
"handle": "awsui_handle_9ckv7_7y7kt_20",
|
|
11
|
+
"header-content": "awsui_header-content_9ckv7_7y7kt_24",
|
|
12
|
+
"settings": "awsui_settings_9ckv7_7y7kt_28",
|
|
13
|
+
"fixed": "awsui_fixed_9ckv7_7y7kt_33",
|
|
14
|
+
"resizer": "awsui_resizer_9ckv7_7y7kt_37"
|
|
15
15
|
};
|
|
16
16
|
|
package/internal/environment.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "board-components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var THEME = "
|
|
4
|
-
export var ALWAYS_VISUAL_REFRESH =
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (31b6099a)";
|
|
3
|
+
export var THEME = "open-source-visual-refresh";
|
|
4
|
+
export var ALWAYS_VISUAL_REFRESH = true;
|
package/internal/grid/grid.d.ts
CHANGED
package/internal/grid/grid.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import { useContainerQuery } from "@cloudscape-design/component-toolkit";
|
|
5
|
+
import clsx from "clsx";
|
|
5
6
|
import { Children } from "react";
|
|
6
7
|
import { zipTwoArrays } from "../utils/zip-arrays";
|
|
7
8
|
import GridItem from "./item";
|
|
@@ -10,7 +11,7 @@ import styles from "./styles.css.js";
|
|
|
10
11
|
const GRID_GAP = 16;
|
|
11
12
|
/* Matches grid-auto-rows in CSS. */
|
|
12
13
|
const ROWSPAN_HEIGHT = 100;
|
|
13
|
-
export default function Grid({ layout, children: render, columns
|
|
14
|
+
export default function Grid({ layout, children: render, columns }) {
|
|
14
15
|
const [gridWidth, containerQueryRef] = useContainerQuery((entry) => entry.contentBoxWidth, []);
|
|
15
16
|
// The below getters translate relative grid units into size/offset values in pixels.
|
|
16
17
|
const getWidth = (colspan) => {
|
|
@@ -24,5 +25,5 @@ export default function Grid({ layout, children: render, columns, rows }) {
|
|
|
24
25
|
const gridContext = { getWidth, getHeight, getColOffset, getRowOffset };
|
|
25
26
|
const children = render === null || render === void 0 ? void 0 : render(gridContext);
|
|
26
27
|
const zipped = zipTwoArrays(layout, Children.toArray(children));
|
|
27
|
-
return (_jsx("div", { ref: containerQueryRef,
|
|
28
|
+
return (_jsx("div", { ref: containerQueryRef, className: clsx(styles.grid, styles[`columns-${columns}`]), children: zipped.map(([item, children]) => (_jsx(GridItem, { item: item, children: children }, item.id))) }));
|
|
28
29
|
}
|
package/internal/grid/item.js
CHANGED
|
@@ -5,6 +5,11 @@ import { memo } from "react";
|
|
|
5
5
|
import styles from "./styles.css.js";
|
|
6
6
|
const GridItem = ({ children, item }) => {
|
|
7
7
|
// Grid row start can not be set as part of a CSS class names, since we have a potentially infinite height grid.
|
|
8
|
-
return (_jsx("div", {
|
|
8
|
+
return (_jsx("div", { className: styles.grid__item, style: {
|
|
9
|
+
gridRowStart: item.y + 1,
|
|
10
|
+
gridRowEnd: `span ${item.height}`,
|
|
11
|
+
gridColumnStart: item.x + 1,
|
|
12
|
+
gridColumnEnd: `span ${item.width}`,
|
|
13
|
+
}, children: children }));
|
|
9
14
|
};
|
|
10
15
|
export default memo(GridItem);
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"grid": "
|
|
5
|
-
"
|
|
4
|
+
"grid": "awsui_grid_1hw7z_yec0l_1",
|
|
5
|
+
"columns-1": "awsui_columns-1_1hw7z_yec0l_10",
|
|
6
|
+
"columns-2": "awsui_columns-2_1hw7z_yec0l_14",
|
|
7
|
+
"columns-4": "awsui_columns-4_1hw7z_yec0l_18",
|
|
8
|
+
"columns-6": "awsui_columns-6_1hw7z_yec0l_22",
|
|
9
|
+
"grid__item": "awsui_grid__item_1hw7z_yec0l_26"
|
|
6
10
|
};
|
|
7
11
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.awsui_grid_1hw7z_yec0l_1:not(#\9) {
|
|
2
2
|
display: grid;
|
|
3
3
|
/* Matches GRID_GAP constant used for calculations. */
|
|
4
4
|
/* TODO: consider using different gaps for comfortable/compact which would require a mode observer. */
|
|
@@ -7,215 +7,23 @@
|
|
|
7
7
|
grid-auto-rows: 100px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.awsui_grid_1hw7z_yec0l_1.awsui_columns-1_1hw7z_yec0l_10:not(#\9) {
|
|
11
11
|
grid-template-columns: minmax(0, 1fr);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.awsui_grid_1hw7z_yec0l_1.awsui_columns-2_1hw7z_yec0l_14:not(#\9) {
|
|
15
15
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.awsui_grid_1hw7z_yec0l_1.awsui_columns-4_1hw7z_yec0l_18:not(#\9) {
|
|
19
19
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.awsui_grid_1hw7z_yec0l_1.awsui_columns-6_1hw7z_yec0l_22:not(#\9) {
|
|
23
23
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
27
|
-
grid-column-end: span 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
|
|
31
|
-
grid-column-end: span 1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
|
|
35
|
-
grid-column-end: span 1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
|
|
39
|
-
grid-column-end: span 1;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
|
|
43
|
-
grid-column-end: span 1;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
|
|
47
|
-
grid-column-end: span 2;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
|
|
51
|
-
grid-column-end: span 2;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
|
|
55
|
-
grid-column-end: span 2;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
|
|
59
|
-
grid-column-end: span 1;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
|
|
63
|
-
grid-column-end: span 3;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
|
|
67
|
-
grid-column-end: span 3;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
|
|
71
|
-
grid-column-end: span 3;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
|
|
75
|
-
grid-column-end: span 1;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
|
|
79
|
-
grid-column-end: span 4;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
|
|
83
|
-
grid-column-end: span 4;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
|
|
87
|
-
grid-column-end: span 4;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
|
|
91
|
-
grid-column-end: span 1;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
|
|
95
|
-
grid-column-end: span 5;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
|
|
99
|
-
grid-column-end: span 5;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
|
|
103
|
-
grid-column-end: span 5;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
|
|
107
|
-
grid-column-end: span 1;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
|
|
111
|
-
grid-column-end: span 6;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
|
|
115
|
-
grid-column-end: span 6;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
|
|
119
|
-
grid-column-end: span 6;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
|
|
123
|
-
grid-column-start: 1;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
|
|
127
|
-
grid-column-start: 1;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
|
|
131
|
-
grid-column-start: 1;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
|
|
135
|
-
grid-column-start: 1;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
|
|
139
|
-
grid-column-start: 1;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
|
|
143
|
-
grid-column-start: 2;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
|
|
147
|
-
grid-column-start: 2;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
|
|
151
|
-
grid-column-start: 2;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
|
|
155
|
-
grid-column-start: 1;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
|
|
159
|
-
grid-column-start: 3;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
|
|
163
|
-
grid-column-start: 3;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
|
|
167
|
-
grid-column-start: 3;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
|
|
171
|
-
grid-column-start: 1;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
|
|
175
|
-
grid-column-start: 4;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
|
|
179
|
-
grid-column-start: 4;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
|
|
183
|
-
grid-column-start: 4;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
|
|
187
|
-
grid-column-start: 1;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
|
|
191
|
-
grid-column-start: 5;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
|
|
195
|
-
grid-column-start: 5;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
|
|
199
|
-
grid-column-start: 5;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
|
|
203
|
-
grid-column-start: 1;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
|
|
207
|
-
grid-column-start: 6;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
|
|
211
|
-
grid-column-start: 6;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
|
|
215
|
-
grid-column-start: 6;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.awsui_grid__item_1hw7z_67wyf_26:not(#\9) {
|
|
26
|
+
.awsui_grid__item_1hw7z_yec0l_26:not(#\9) {
|
|
219
27
|
display: block;
|
|
220
28
|
position: relative;
|
|
221
29
|
}
|
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"grid": "
|
|
6
|
-
"
|
|
5
|
+
"grid": "awsui_grid_1hw7z_yec0l_1",
|
|
6
|
+
"columns-1": "awsui_columns-1_1hw7z_yec0l_10",
|
|
7
|
+
"columns-2": "awsui_columns-2_1hw7z_yec0l_14",
|
|
8
|
+
"columns-4": "awsui_columns-4_1hw7z_yec0l_18",
|
|
9
|
+
"columns-6": "awsui_columns-6_1hw7z_yec0l_22",
|
|
10
|
+
"grid__item": "awsui_grid__item_1hw7z_yec0l_26"
|
|
7
11
|
};
|
|
8
12
|
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
.
|
|
1
|
+
.awsui_handle_cc1pu_jzwgj_1:not(#\9) {
|
|
2
2
|
-webkit-appearance: none;
|
|
3
3
|
appearance: none;
|
|
4
4
|
background: transparent;
|
|
5
5
|
border: none;
|
|
6
6
|
padding: var(--space-scaled-xxs-95dhkm, 4px);
|
|
7
|
-
color: var(--color-text-interactive-default-
|
|
7
|
+
color: var(--color-text-interactive-default-eg5fsa, #414d5c);
|
|
8
8
|
}
|
|
9
|
-
.
|
|
10
|
-
color: var(--color-text-interactive-hover-
|
|
9
|
+
.awsui_handle_cc1pu_jzwgj_1:not(#\9):hover {
|
|
10
|
+
color: var(--color-text-interactive-hover-v3lasm, #000716);
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible {
|
|
13
13
|
position: relative;
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
outline: none;
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible {
|
|
18
18
|
outline: 2px dotted transparent;
|
|
19
19
|
outline-offset: 3px;
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.awsui_handle_cc1pu_jzwgj_1:not(#\9):focus-visible::before {
|
|
22
22
|
content: " ";
|
|
23
23
|
display: block;
|
|
24
24
|
position: absolute;
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
top: calc(-1 * 4px);
|
|
28
28
|
width: calc(100% + 2 * 4px);
|
|
29
29
|
height: calc(100% + 2 * 4px);
|
|
30
|
-
border-radius: var(--border-radius-control-default-focus-ring-
|
|
31
|
-
border: 2px solid var(--color-border-item-focused-
|
|
30
|
+
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
31
|
+
border: 2px solid var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
32
32
|
}
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudscape-design/board-components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.8",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/cloudscape-design/board-components.git"
|
|
@@ -27,17 +27,5 @@
|
|
|
27
27
|
"react": "^18.2.0",
|
|
28
28
|
"react-dom": "^18.2.0"
|
|
29
29
|
},
|
|
30
|
-
"//": "ensure that typedoc uses latest typescript. It prints a warning, but works",
|
|
31
|
-
"overrides": {
|
|
32
|
-
"typescript": "^4.9.4"
|
|
33
|
-
},
|
|
34
|
-
"lint-staged": {
|
|
35
|
-
"*.{js,jsx,ts,tsx}": [
|
|
36
|
-
"eslint --fix"
|
|
37
|
-
],
|
|
38
|
-
"package-lock.json": [
|
|
39
|
-
"./scripts/prepare-package-lock.js"
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
30
|
"license": "Apache-2.0"
|
|
43
31
|
}
|
package/Config
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
package.AWS-UI-Board-Components = {
|
|
2
|
-
interfaces = (3.0);
|
|
3
|
-
|
|
4
|
-
build-system = npm-pretty-much;
|
|
5
|
-
build-tools = {
|
|
6
|
-
3.0 = {
|
|
7
|
-
NpmPrettyMuch = 1.1;
|
|
8
|
-
NodeJS = default;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
dependencies = {
|
|
13
|
-
3.0 = {
|
|
14
|
-
AWS-UI-Component-Toolkit = 1.0;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
test-dependencies = {
|
|
19
|
-
3.0 = {
|
|
20
|
-
AWS-UI-ReleaseTools = 3.0;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
};
|
package/README-cloudscape.md
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
## React components for Cloudscape Design System
|
|
2
|
-
|
|
3
|
-
This package contains the source code of dashboard-oriented components in the [Cloudscape Design System](https://cloudscape.design/).
|
|
4
|
-
For more information about board components, see [the documentation](https://cloudscape.design/components/board-components/).
|
|
5
|
-
|
|
6
|
-
Cloudscape is an open source design system for building intuitive, engaging, and inclusive user experiences at scale. It consists of an extensive set of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.
|
|
7
|
-
|
|
8
|
-
Cloudscape was built for and is used by Amazon Web Services (AWS) products and services. We created it in 2016 to improve the user experience across AWS web applications, and also to help teams implement those applications faster. Since then, we have continued enhancing the system based on customer feedback and research.
|
|
9
|
-
|
|
10
|
-
## Getting help
|
|
11
|
-
|
|
12
|
-
You can [create bug reports or feature requests](https://github.com/cloudscape-design/board-components/issues/new/choose), or [start a discussion](https://github.com/cloudscape-design/components/discussions) to ask a question. To minimize duplicates, we recommend that you search for existing bug reports, feature requests, or discussions before initiating a new thread.
|
|
13
|
-
|
|
14
|
-
## Contributing
|
|
15
|
-
|
|
16
|
-
The [contribution guidelines](/CONTRIBUTING.md) contains information on how to contribute, as well as our support model and versioning strategy.
|
|
17
|
-
|
|
18
|
-
## License
|
|
19
|
-
|
|
20
|
-
This project is licensed under the [Apache 2.0 License](/LICENSE).
|
package/README-open-source.md
DELETED
|
File without changes
|