@backstage/ui 0.10.0 → 0.11.0-next.1
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/CHANGELOG.md +77 -0
- package/css/styles.css +43 -17
- package/dist/components/Box/Box.esm.js +13 -6
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/Box.module.css.esm.js +1 -1
- package/dist/components/Box/definition.esm.js +4 -1
- package/dist/components/Box/definition.esm.js.map +1 -1
- package/dist/components/Button/Button.esm.js +12 -1
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/Button/Button.module.css.esm.js +1 -1
- package/dist/components/Flex/Flex.esm.js +14 -6
- package/dist/components/Flex/Flex.esm.js.map +1 -1
- package/dist/components/Flex/Flex.module.css.esm.js +1 -1
- package/dist/components/Flex/definition.esm.js +4 -1
- package/dist/components/Flex/definition.esm.js.map +1 -1
- package/dist/components/Grid/Grid.esm.js +27 -12
- package/dist/components/Grid/Grid.esm.js.map +1 -1
- package/dist/components/Grid/Grid.module.css.esm.js +2 -2
- package/dist/components/Grid/definition.esm.js +8 -2
- package/dist/components/Grid/definition.esm.js.map +1 -1
- package/dist/components/Header/Header.module.css.esm.js +1 -1
- package/dist/components/Link/Link.esm.js +9 -6
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.esm.js +14 -21
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.module.css.esm.js +1 -1
- package/dist/components/Table/Table.module.css.esm.js +1 -1
- package/dist/components/Table/components/Table.esm.js +154 -15
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableRoot.esm.js +26 -0
- package/dist/components/Table/components/TableRoot.esm.js.map +1 -0
- package/dist/components/Table/definition.esm.js +3 -0
- package/dist/components/Table/definition.esm.js.map +1 -1
- package/dist/components/Table/hooks/useCompletePagination.esm.js +106 -0
- package/dist/components/Table/hooks/useCompletePagination.esm.js.map +1 -0
- package/dist/components/Table/hooks/useCursorPagination.esm.js +58 -0
- package/dist/components/Table/hooks/useCursorPagination.esm.js.map +1 -0
- package/dist/components/Table/hooks/useDebouncedReload.esm.js +17 -0
- package/dist/components/Table/hooks/useDebouncedReload.esm.js.map +1 -0
- package/dist/components/Table/hooks/useOffsetPagination.esm.js +64 -0
- package/dist/components/Table/hooks/useOffsetPagination.esm.js.map +1 -0
- package/dist/components/Table/hooks/usePageCache.esm.js +168 -0
- package/dist/components/Table/hooks/usePageCache.esm.js.map +1 -0
- package/dist/components/Table/hooks/useQueryState.esm.js +42 -0
- package/dist/components/Table/hooks/useQueryState.esm.js.map +1 -0
- package/dist/components/Table/hooks/useStableCallback.esm.js +10 -0
- package/dist/components/Table/hooks/useStableCallback.esm.js.map +1 -0
- package/dist/components/Table/hooks/useTable.esm.js +80 -99
- package/dist/components/Table/hooks/useTable.esm.js.map +1 -1
- package/dist/components/TablePagination/TablePagination.esm.js +76 -101
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/ToggleButton/ToggleButton.esm.js +51 -0
- package/dist/components/ToggleButton/ToggleButton.esm.js.map +1 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +8 -0
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButton/definition.esm.js +12 -0
- package/dist/components/ToggleButton/definition.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js +33 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js +8 -0
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js.map +1 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js +11 -0
- package/dist/components/ToggleButtonGroup/definition.esm.js.map +1 -0
- package/dist/hooks/useSurface.esm.js +74 -0
- package/dist/hooks/useSurface.esm.js.map +1 -0
- package/dist/index.d.ts +306 -92
- package/dist/index.esm.js +5 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,82 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.11.0-next.1
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 243e5e7: **BREAKING**: Redesigned Table component with new `useTable` hook API.
|
|
8
|
+
|
|
9
|
+
- The `Table` component (React Aria wrapper) is renamed to `TableRoot`
|
|
10
|
+
- New high-level `Table` component that handles data display, pagination, sorting, and selection
|
|
11
|
+
- The `useTable` hook is completely redesigned with a new API supporting three pagination modes (complete, offset, cursor)
|
|
12
|
+
- New types: `ColumnConfig`, `TableProps`, `TableItem`, `UseTableOptions`, `UseTableResult`
|
|
13
|
+
|
|
14
|
+
New features include unified pagination modes, debounced query changes, stale data preservation during reloads, and row selection with toggle/replace behaviors.
|
|
15
|
+
|
|
16
|
+
**Migration guide:**
|
|
17
|
+
|
|
18
|
+
1. Update imports and use the new `useTable` hook:
|
|
19
|
+
|
|
20
|
+
```diff
|
|
21
|
+
-import { Table, useTable } from '@backstage/ui';
|
|
22
|
+
-const { data, paginationProps } = useTable({ data: items, pagination: {...} });
|
|
23
|
+
+import { Table, useTable, type ColumnConfig } from '@backstage/ui';
|
|
24
|
+
+const { tableProps } = useTable({
|
|
25
|
+
+ mode: 'complete',
|
|
26
|
+
+ getData: () => items,
|
|
27
|
+
+});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Define columns and render with the new Table API:
|
|
31
|
+
|
|
32
|
+
```diff
|
|
33
|
+
-<Table aria-label="My table">
|
|
34
|
+
- <TableHeader>...</TableHeader>
|
|
35
|
+
- <TableBody items={data}>...</TableBody>
|
|
36
|
+
-</Table>
|
|
37
|
+
-<TablePagination {...paginationProps} />
|
|
38
|
+
+const columns: ColumnConfig<Item>[] = [
|
|
39
|
+
+ { id: 'name', label: 'Name', isRowHeader: true, cell: item => <CellText title={item.name} /> },
|
|
40
|
+
+ { id: 'type', label: 'Type', cell: item => <CellText title={item.type} /> },
|
|
41
|
+
+];
|
|
42
|
+
+
|
|
43
|
+
+<Table columnConfig={columns} {...tableProps} />
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Affected components: Table, TableRoot, TablePagination
|
|
47
|
+
|
|
48
|
+
- 95246eb: **Breaking** Updating color tokens to match the new neutral style on different surfaces.
|
|
49
|
+
|
|
50
|
+
## Migration notes
|
|
51
|
+
|
|
52
|
+
There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement.
|
|
53
|
+
|
|
54
|
+
- `--bui-bg-tint` can be replaced by `--bui-bg-neutral-on-surface-0`
|
|
55
|
+
- `--bui-bg-tint-hover` can be replaced by `--bui-bg-neutral-on-surface-0-hover`
|
|
56
|
+
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
57
|
+
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
58
|
+
|
|
59
|
+
- ea0c6d8: Introduce new `ToggleButton` & `ToggleButtonGroup` components in Backstage UI
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- 21c87cc: Fixes disabled state in primary and secondary buttons in Backstage UI.
|
|
64
|
+
- b3253b6: Fixed `Link` component causing hard page refreshes for internal routes. The component now properly uses React Router's navigation instead of full page reloads.
|
|
65
|
+
|
|
66
|
+
## 0.11.0-next.0
|
|
67
|
+
|
|
68
|
+
### Minor Changes
|
|
69
|
+
|
|
70
|
+
- 4ea1d15: **BREAKING**: Renamed CSS variable `--bui-bg` to `--bui-bg-surface-0` for consistency.
|
|
71
|
+
|
|
72
|
+
### Patch Changes
|
|
73
|
+
|
|
74
|
+
- 1880402: Fixes app background color on dark mode.
|
|
75
|
+
- 9c76682: build(deps-dev): bump `storybook` from 10.1.9 to 10.1.10
|
|
76
|
+
- b4a4911: Fixed SearchField `startCollapsed` prop not working correctly in Backstage UI. The field now properly starts in a collapsed state, expands when clicked and focused, and collapses back when unfocused with no input. Also fixed CSS logic to work correctly in all layout contexts (flex row, flex column, and regular containers).
|
|
77
|
+
|
|
78
|
+
Affected components: SearchField
|
|
79
|
+
|
|
3
80
|
## 0.10.0
|
|
4
81
|
|
|
5
82
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -51,17 +51,30 @@
|
|
|
51
51
|
--bui-gray-6: #8c8c8c;
|
|
52
52
|
--bui-gray-7: #757575;
|
|
53
53
|
--bui-gray-8: #595959;
|
|
54
|
-
--bui-bg: var(--bui-gray-1);
|
|
54
|
+
--bui-bg-surface-0: var(--bui-gray-1);
|
|
55
55
|
--bui-bg-surface-1: var(--bui-white);
|
|
56
|
-
--bui-bg-surface-2: var(--bui-gray-
|
|
56
|
+
--bui-bg-surface-2: var(--bui-gray-1);
|
|
57
|
+
--bui-bg-surface-3: var(--bui-gray-2);
|
|
57
58
|
--bui-bg-solid: #1f5493;
|
|
58
59
|
--bui-bg-solid-hover: #163a66;
|
|
59
60
|
--bui-bg-solid-pressed: #0f2b4e;
|
|
60
|
-
--bui-bg-solid-disabled: #
|
|
61
|
-
--bui-bg-
|
|
62
|
-
--bui-bg-
|
|
63
|
-
--bui-bg-
|
|
64
|
-
--bui-bg-
|
|
61
|
+
--bui-bg-solid-disabled: #163a66;
|
|
62
|
+
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
|
|
63
|
+
--bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
|
|
64
|
+
--bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
|
|
65
|
+
--bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0 / .06);
|
|
66
|
+
--bui-bg-neutral-on-surface-1: oklch(0% 0 0 / .06);
|
|
67
|
+
--bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0 / .12);
|
|
68
|
+
--bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0 / .16);
|
|
69
|
+
--bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0 / .06);
|
|
70
|
+
--bui-bg-neutral-on-surface-2: oklch(0% 0 0 / .06);
|
|
71
|
+
--bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0 / .12);
|
|
72
|
+
--bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0 / .16);
|
|
73
|
+
--bui-bg-neutral-on-surface-2-disabled: oklch(0% 0 0 / .06);
|
|
74
|
+
--bui-bg-neutral-on-surface-3: oklch(0% 0 0 / .06);
|
|
75
|
+
--bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0 / .12);
|
|
76
|
+
--bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0 / .16);
|
|
77
|
+
--bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0 / .06);
|
|
65
78
|
--bui-bg-danger: #feebe7;
|
|
66
79
|
--bui-bg-warning: #fff2b2;
|
|
67
80
|
--bui-bg-success: #e6f6eb;
|
|
@@ -71,7 +84,7 @@
|
|
|
71
84
|
--bui-fg-link-hover: #1f2d5c;
|
|
72
85
|
--bui-fg-disabled: #9e9e9e;
|
|
73
86
|
--bui-fg-solid: var(--bui-white);
|
|
74
|
-
--bui-fg-solid-disabled: #
|
|
87
|
+
--bui-fg-solid-disabled: #98a8bc;
|
|
75
88
|
--bui-fg-tint: #1f5493;
|
|
76
89
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
77
90
|
--bui-fg-danger: #e22b2b;
|
|
@@ -99,17 +112,30 @@
|
|
|
99
112
|
--bui-gray-6: #7b7b7b;
|
|
100
113
|
--bui-gray-7: #9e9e9e;
|
|
101
114
|
--bui-gray-8: #b4b4b4;
|
|
102
|
-
--bui-bg: #333;
|
|
103
|
-
--bui-bg-surface-1:
|
|
115
|
+
--bui-bg-surface-0: #333;
|
|
116
|
+
--bui-bg-surface-1: var(--bui-gray-1);
|
|
104
117
|
--bui-bg-surface-2: var(--bui-gray-2);
|
|
118
|
+
--bui-bg-surface-3: var(--bui-gray-3);
|
|
105
119
|
--bui-bg-solid: #9cc9ff;
|
|
106
120
|
--bui-bg-solid-hover: #83b9fd;
|
|
107
121
|
--bui-bg-solid-pressed: #83b9fd;
|
|
108
|
-
--bui-bg-solid-disabled: #
|
|
109
|
-
--bui-bg-
|
|
110
|
-
--bui-bg-
|
|
111
|
-
--bui-bg-
|
|
112
|
-
--bui-bg-
|
|
122
|
+
--bui-bg-solid-disabled: #1b3d68;
|
|
123
|
+
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
|
|
124
|
+
--bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
|
|
125
|
+
--bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
|
|
126
|
+
--bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0 / .1);
|
|
127
|
+
--bui-bg-neutral-on-surface-1: oklch(100% 0 0 / .06);
|
|
128
|
+
--bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0 / .1);
|
|
129
|
+
--bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0 / .16);
|
|
130
|
+
--bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0 / .06);
|
|
131
|
+
--bui-bg-neutral-on-surface-2: oklch(100% 0 0 / .08);
|
|
132
|
+
--bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0 / .12);
|
|
133
|
+
--bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0 / .2);
|
|
134
|
+
--bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0 / .08);
|
|
135
|
+
--bui-bg-neutral-on-surface-3: oklch(100% 0 0 / .08);
|
|
136
|
+
--bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0 / .12);
|
|
137
|
+
--bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0 / .2);
|
|
138
|
+
--bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / .08);
|
|
113
139
|
--bui-bg-danger: #3b1219;
|
|
114
140
|
--bui-bg-warning: #302008;
|
|
115
141
|
--bui-bg-success: #132d21;
|
|
@@ -119,7 +145,7 @@
|
|
|
119
145
|
--bui-fg-link-hover: #7eb5f7;
|
|
120
146
|
--bui-fg-disabled: var(--bui-gray-7);
|
|
121
147
|
--bui-fg-solid: #101821;
|
|
122
|
-
--bui-fg-solid-disabled:
|
|
148
|
+
--bui-fg-solid-disabled: #6191cc;
|
|
123
149
|
--bui-fg-tint: #9cc9ff;
|
|
124
150
|
--bui-fg-tint-disabled: var(--bui-gray-5);
|
|
125
151
|
--bui-fg-danger: #e22b2b;
|
|
@@ -239,7 +265,7 @@
|
|
|
239
265
|
}
|
|
240
266
|
|
|
241
267
|
body {
|
|
242
|
-
background-color: var(--bui-bg);
|
|
268
|
+
background-color: var(--bui-bg-surface-0);
|
|
243
269
|
color: var(--bui-fg-primary);
|
|
244
270
|
font-family: var(--bui-font-regular);
|
|
245
271
|
font-weight: var(--bui-font-weight-regular);
|
|
@@ -1,15 +1,21 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
1
2
|
import { forwardRef, createElement } from 'react';
|
|
2
3
|
import clsx from 'clsx';
|
|
3
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
4
5
|
import styles from './Box.module.css.esm.js';
|
|
5
6
|
import { BoxDefinition } from './definition.esm.js';
|
|
7
|
+
import { useSurface, SurfaceProvider } from '../../hooks/useSurface.esm.js';
|
|
6
8
|
|
|
7
9
|
const Box = forwardRef((props, ref) => {
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
const { surface: resolvedSurface } = useSurface({
|
|
11
|
+
surface: props.surface
|
|
12
|
+
});
|
|
13
|
+
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(BoxDefinition, {
|
|
14
|
+
...props,
|
|
15
|
+
surface: resolvedSurface
|
|
16
|
+
// Use resolved surface for data attribute
|
|
17
|
+
});
|
|
18
|
+
const { as = "div", children, className, surface, ...rest } = cleanedProps;
|
|
13
19
|
return createElement(
|
|
14
20
|
as,
|
|
15
21
|
{
|
|
@@ -21,9 +27,10 @@ const Box = forwardRef((props, ref) => {
|
|
|
21
27
|
className
|
|
22
28
|
),
|
|
23
29
|
style,
|
|
30
|
+
...dataAttributes,
|
|
24
31
|
...rest
|
|
25
32
|
},
|
|
26
|
-
children
|
|
33
|
+
resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children }) : children
|
|
27
34
|
);
|
|
28
35
|
});
|
|
29
36
|
Box.displayName = "Box";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Box.module.css';\nimport { BoxDefinition } from './definition';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps }
|
|
1
|
+
{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Box.module.css';\nimport { BoxDefinition } from './definition';\nimport { SurfaceProvider, useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n // Resolve the surface this Box creates for its children\n // Using 'surface' parameter = container behavior (auto increments)\n const { surface: resolvedSurface } = useSurface({\n surface: props.surface,\n });\n\n const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n useStyles(BoxDefinition, {\n ...props,\n surface: resolvedSurface, // Use resolved surface for data attribute\n });\n\n const { as = 'div', children, className, surface, ...rest } = cleanedProps;\n\n return createElement(\n as,\n {\n ref,\n className: clsx(\n classNames.root,\n styles[classNames.root],\n utilityClasses,\n className,\n ),\n style,\n ...dataAttributes,\n ...rest,\n },\n resolvedSurface ? (\n <SurfaceProvider surface={resolvedSurface}>{children}</SurfaceProvider>\n ) : (\n children\n ),\n );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGtE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,aAAA,EAAe;AAAA,IACvB,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,KAAK,KAAA,EAAO,QAAA,EAAU,WAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE9D,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB,cAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,IACA,kCACE,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,UAAS,CAAA,GAErD;AAAA,GAEJ;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box-module_bui-Box__2Q5um {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n}\n";
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box-module_bui-Box__2Q5um {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='0'] {\n background-color: var(--bui-bg-surface-0);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='1'] {\n background-color: var(--bui-bg-surface-1);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='2'] {\n background-color: var(--bui-bg-surface-2);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='3'] {\n background-color: var(--bui-bg-surface-3);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Box-module_bui-Box__2Q5um[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
4
|
var styles = {"bui-Box":"Box-module_bui-Box__2Q5um"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,aAAA,GAAgB;AAAA,EAC3B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n dataAttributes: {\n surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,aAAA,GAAgB;AAAA,EAC3B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;;;;"}
|
|
@@ -6,6 +6,7 @@ import { RiLoader4Line } from '@remixicon/react';
|
|
|
6
6
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
7
7
|
import { ButtonDefinition } from './definition.esm.js';
|
|
8
8
|
import stylesButton from './Button.module.css.esm.js';
|
|
9
|
+
import { useSurface } from '../../hooks/useSurface.esm.js';
|
|
9
10
|
|
|
10
11
|
const Button = forwardRef(
|
|
11
12
|
(props, ref) => {
|
|
@@ -17,7 +18,16 @@ const Button = forwardRef(
|
|
|
17
18
|
...props
|
|
18
19
|
}
|
|
19
20
|
);
|
|
20
|
-
const {
|
|
21
|
+
const {
|
|
22
|
+
children,
|
|
23
|
+
className,
|
|
24
|
+
iconStart,
|
|
25
|
+
iconEnd,
|
|
26
|
+
loading,
|
|
27
|
+
onSurface,
|
|
28
|
+
...rest
|
|
29
|
+
} = cleanedProps;
|
|
30
|
+
const { surface } = useSurface({ onSurface });
|
|
21
31
|
return /* @__PURE__ */ jsx(
|
|
22
32
|
Button$1,
|
|
23
33
|
{
|
|
@@ -25,6 +35,7 @@ const Button = forwardRef(
|
|
|
25
35
|
ref,
|
|
26
36
|
isPending: loading,
|
|
27
37
|
...dataAttributes,
|
|
38
|
+
...typeof surface === "string" ? { "data-on-surface": surface } : {},
|
|
28
39
|
...rest,
|
|
29
40
|
children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
30
41
|
/* @__PURE__ */ jsxs(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from './definition';\nimport styles from './Button.module.css';\n\n
|
|
1
|
+
{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ButtonDefinition } from './definition';\nimport styles from './Button.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/**\n * A button component built on React Aria Components that provides accessible\n * interactive elements for triggering actions.\n *\n * @remarks\n * The Button component supports multiple variants (primary, secondary, tertiary, danger),\n * sizes (small, medium), and states including loading and disabled. It automatically\n * handles keyboard navigation, focus management, and ARIA attributes for accessibility.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n *\n * @example\n * With icons and loading state:\n * ```tsx\n * <Button\n * variant=\"primary\"\n * size=\"medium\"\n * iconStart={<IconComponent />}\n * loading={isSubmitting}\n * >\n * Submit\n * </Button>\n * ```\n *\n * @public\n */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n ButtonDefinition,\n {\n size: 'small',\n variant: 'primary',\n ...props,\n },\n );\n\n const {\n children,\n className,\n iconStart,\n iconEnd,\n loading,\n onSurface,\n ...rest\n } = cleanedProps;\n\n const { surface } = useSurface({ onSurface });\n\n return (\n <RAButton\n className={clsx(classNames.root, styles[classNames.root], className)}\n ref={ref}\n isPending={loading}\n {...dataAttributes}\n {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n {...rest}\n >\n {({ isPending }) => (\n <>\n <span\n className={clsx(classNames.content, styles[classNames.content])}\n >\n {iconStart}\n {children}\n {iconEnd}\n </span>\n\n {isPending && (\n <ProgressBar\n aria-label=\"Loading\"\n isIndeterminate\n className={clsx(classNames.spinner, styles[classNames.spinner])}\n >\n <RiLoader4Line aria-hidden=\"true\" />\n </ProgressBar>\n )}\n </>\n )}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","styles"],"mappings":";;;;;;;;;;AAwDO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,aAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,QAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE9D,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n background-color: var(--bui-bg-surface-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button-module_bui-Button__1BvMm {\n --loading-duration: 200ms;\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n background-color: transparent;\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n background-color: var(--bui-bg-solid);\n color: var(--bui-fg-solid);\n\n &:hover {\n background-color: var(--bui-bg-solid-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-solid-pressed);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: var(--bui-bg-solid-disabled);\n color: var(--bui-fg-solid-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-on-surface-0);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n background-color: var(--bui-bg-neutral-on-surface-1);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n background-color: var(--bui-bg-neutral-on-surface-2);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n background-color: var(--bui-bg-neutral-on-surface-3);\n\n &:hover:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active:not([data-disabled='true']):not([data-loading='true']) {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n background-color: transparent;\n color: var(--bui-fg-primary);\n\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 200ms ease;\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-0-pressed);\n }\n\n &[data-on-surface='1'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-1-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-1-pressed);\n }\n }\n\n &[data-on-surface='2'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-2-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-2-pressed);\n }\n }\n\n &[data-on-surface='3'] {\n &:hover {\n background-color: var(--bui-bg-neutral-on-surface-3-hover);\n }\n\n &:active {\n background-color: var(--bui-bg-neutral-on-surface-3-pressed);\n }\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button-module_bui-Button__1BvMm[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button-module_bui-spin__yALtH 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button-module_bui-Button__1BvMm {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonContent__2x-bP {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK {\n transition-duration: 50ms;\n }\n\n .Button-module_bui-ButtonSpinner__1MWbK svg {\n animation: none;\n }\n }\n\n @keyframes Button-module_bui-spin__yALtH {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
4
|
var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm","bui-ButtonContent":"Button-module_bui-ButtonContent__2x-bP","bui-ButtonSpinner":"Button-module_bui-ButtonSpinner__1MWbK","bui-spin":"Button-module_bui-spin__yALtH"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -4,14 +4,20 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
5
|
import { FlexDefinition } from './definition.esm.js';
|
|
6
6
|
import styles from './Flex.module.css.esm.js';
|
|
7
|
+
import { useSurface, SurfaceProvider } from '../../hooks/useSurface.esm.js';
|
|
7
8
|
|
|
8
9
|
const Flex = forwardRef((props, ref) => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const { surface: resolvedSurface } = useSurface({
|
|
11
|
+
surface: props.surface
|
|
12
|
+
});
|
|
13
|
+
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(FlexDefinition, {
|
|
14
|
+
gap: "4",
|
|
15
|
+
...props,
|
|
16
|
+
surface: resolvedSurface
|
|
17
|
+
// Use resolved surface for data attribute
|
|
18
|
+
});
|
|
19
|
+
const { className, surface, ...rest } = cleanedProps;
|
|
20
|
+
const content = /* @__PURE__ */ jsx(
|
|
15
21
|
"div",
|
|
16
22
|
{
|
|
17
23
|
ref,
|
|
@@ -22,9 +28,11 @@ const Flex = forwardRef((props, ref) => {
|
|
|
22
28
|
className
|
|
23
29
|
),
|
|
24
30
|
style,
|
|
31
|
+
...dataAttributes,
|
|
25
32
|
...rest
|
|
26
33
|
}
|
|
27
34
|
);
|
|
35
|
+
return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
|
|
28
36
|
});
|
|
29
37
|
|
|
30
38
|
export { Flex };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FlexDefinition } from './definition';\nimport styles from './Flex.module.css';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps }
|
|
1
|
+
{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FlexDefinition } from './definition';\nimport styles from './Flex.module.css';\nimport { SurfaceProvider, useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n // Resolve the surface this Flex creates for its children\n // Using 'surface' parameter = container behavior (auto increments)\n const { surface: resolvedSurface } = useSurface({\n surface: props.surface,\n });\n\n const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n useStyles(FlexDefinition, {\n gap: '4',\n ...props,\n surface: resolvedSurface, // Use resolved surface for data attribute\n });\n\n const { className, surface, ...rest } = cleanedProps;\n\n const content = (\n <div\n ref={ref}\n className={clsx(\n classNames.root,\n utilityClasses,\n styles[classNames.root],\n className,\n )}\n style={style}\n {...dataAttributes}\n {...rest}\n />\n );\n\n return resolvedSurface ? (\n <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n ) : (\n content\n );\n});\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGxE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex-module_bui-Flex__3kax7 {\n display: flex;\n\n /* This helps when using `truncate` on text inside a flex container */\n min-width: 0;\n }\n}\n";
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex-module_bui-Flex__3kax7 {\n display: flex;\n\n /* This helps when using `truncate` on text inside a flex container */\n min-width: 0;\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='0'] {\n background-color: var(--bui-bg-surface-0);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='1'] {\n background-color: var(--bui-bg-surface-1);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='2'] {\n background-color: var(--bui-bg-surface-2);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='3'] {\n background-color: var(--bui-bg-surface-3);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Flex-module_bui-Flex__3kax7[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
4
|
var styles = {"bui-Flex":"Flex-module_bui-Flex__3kax7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Flex\n * @public\n */\nexport const FlexDefinition = {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA;
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Flex\n * @public\n */\nexport const FlexDefinition = {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n dataAttributes: {\n surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;;;;"}
|
|
@@ -4,14 +4,21 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
5
|
import { GridDefinition, GridItemDefinition } from './definition.esm.js';
|
|
6
6
|
import styles from './Grid.module.css.esm.js';
|
|
7
|
+
import { useSurface, SurfaceProvider } from '../../hooks/useSurface.esm.js';
|
|
7
8
|
|
|
8
9
|
const GridRoot = forwardRef((props, ref) => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const { surface: resolvedSurface } = useSurface({
|
|
11
|
+
surface: props.surface
|
|
12
|
+
});
|
|
13
|
+
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridDefinition, {
|
|
14
|
+
columns: "auto",
|
|
15
|
+
gap: "4",
|
|
16
|
+
...props,
|
|
17
|
+
surface: resolvedSurface
|
|
18
|
+
// Use resolved surface for data attribute
|
|
19
|
+
});
|
|
20
|
+
const { className, surface, ...rest } = cleanedProps;
|
|
21
|
+
const content = /* @__PURE__ */ jsx(
|
|
15
22
|
"div",
|
|
16
23
|
{
|
|
17
24
|
ref,
|
|
@@ -22,17 +29,23 @@ const GridRoot = forwardRef((props, ref) => {
|
|
|
22
29
|
className
|
|
23
30
|
),
|
|
24
31
|
style,
|
|
32
|
+
...dataAttributes,
|
|
25
33
|
...rest
|
|
26
34
|
}
|
|
27
35
|
);
|
|
36
|
+
return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
|
|
28
37
|
});
|
|
29
38
|
const GridItem = forwardRef((props, ref) => {
|
|
30
|
-
const {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
39
|
+
const { surface: resolvedSurface } = useSurface({
|
|
40
|
+
surface: props.surface
|
|
41
|
+
});
|
|
42
|
+
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridItemDefinition, {
|
|
43
|
+
...props,
|
|
44
|
+
surface: resolvedSurface
|
|
45
|
+
// Use resolved surface for data attribute
|
|
46
|
+
});
|
|
47
|
+
const { className, surface, ...rest } = cleanedProps;
|
|
48
|
+
const content = /* @__PURE__ */ jsx(
|
|
36
49
|
"div",
|
|
37
50
|
{
|
|
38
51
|
ref,
|
|
@@ -43,9 +56,11 @@ const GridItem = forwardRef((props, ref) => {
|
|
|
43
56
|
className
|
|
44
57
|
),
|
|
45
58
|
style,
|
|
59
|
+
...dataAttributes,
|
|
46
60
|
...rest
|
|
47
61
|
}
|
|
48
62
|
);
|
|
63
|
+
return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
|
|
49
64
|
});
|
|
50
65
|
const Grid = {
|
|
51
66
|
Root: GridRoot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { GridDefinition, GridItemDefinition } from './definition';\nimport styles from './Grid.module.css';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n const { classNames, utilityClasses, style, cleanedProps }
|
|
1
|
+
{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { GridDefinition, GridItemDefinition } from './definition';\nimport styles from './Grid.module.css';\nimport { SurfaceProvider, useSurface } from '../../hooks/useSurface';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n // Resolve the surface this Grid creates for its children\n // Using 'surface' parameter = container behavior (auto increments)\n const { surface: resolvedSurface } = useSurface({\n surface: props.surface,\n });\n\n const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n useStyles(GridDefinition, {\n columns: 'auto',\n gap: '4',\n ...props,\n surface: resolvedSurface, // Use resolved surface for data attribute\n });\n\n const { className, surface, ...rest } = cleanedProps;\n\n const content = (\n <div\n ref={ref}\n className={clsx(\n classNames.root,\n utilityClasses,\n styles[classNames.root],\n className,\n )}\n style={style}\n {...dataAttributes}\n {...rest}\n />\n );\n\n return resolvedSurface ? (\n <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n ) : (\n content\n );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n // Resolve the surface this GridItem creates for its children\n // Using 'surface' parameter = container behavior (auto increments)\n const { surface: resolvedSurface } = useSurface({\n surface: props.surface,\n });\n\n const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n useStyles(GridItemDefinition, {\n ...props,\n surface: resolvedSurface, // Use resolved surface for data attribute\n });\n\n const { className, surface, ...rest } = cleanedProps;\n\n const content = (\n <div\n ref={ref}\n className={clsx(\n classNames.root,\n utilityClasses,\n styles[classNames.root],\n className,\n )}\n style={style}\n {...dataAttributes}\n {...rest}\n />\n );\n\n return resolvedSurface ? (\n <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n ) : (\n content\n );\n});\n\n/** @public */\nexport const Grid = {\n Root: GridRoot,\n Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGrE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGzE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,kBAAA,EAAoB;AAAA,IAC5B,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid-module_bui-Grid__3vX0y {\n display: grid;\n }\n}\n";
|
|
4
|
-
var styles = {"bui-Grid":"Grid-module_bui-Grid__3vX0y"};
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid-module_bui-Grid__3vX0y {\n display: grid;\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='0'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='0'] {\n background-color: var(--bui-bg-surface-0);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='1'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='1'] {\n background-color: var(--bui-bg-surface-1);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='2'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='2'] {\n background-color: var(--bui-bg-surface-2);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='3'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='3'] {\n background-color: var(--bui-bg-surface-3);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='danger'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='warning'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Grid-module_bui-Grid__3vX0y[data-surface='success'],\n .Grid-module_bui-GridItem__1kwpF[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Grid":"Grid-module_bui-Grid__3vX0y","bui-GridItem":"Grid-module_bui-GridItem__1kwpF"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -19,13 +19,19 @@ const GridDefinition = {
|
|
|
19
19
|
"pt",
|
|
20
20
|
"px",
|
|
21
21
|
"py"
|
|
22
|
-
]
|
|
22
|
+
],
|
|
23
|
+
dataAttributes: {
|
|
24
|
+
surface: ["0", "1", "2", "3", "danger", "warning", "success"]
|
|
25
|
+
}
|
|
23
26
|
};
|
|
24
27
|
const GridItemDefinition = {
|
|
25
28
|
classNames: {
|
|
26
29
|
root: "bui-GridItem"
|
|
27
30
|
},
|
|
28
|
-
utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"]
|
|
31
|
+
utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"],
|
|
32
|
+
dataAttributes: {
|
|
33
|
+
surface: ["0", "1", "2", "3", "danger", "warning", "success"]
|
|
34
|
+
}
|
|
29
35
|
};
|
|
30
36
|
|
|
31
37
|
export { GridDefinition, GridItemDefinition };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Grid\n * @public\n */\nexport const GridDefinition = {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n} as const satisfies ComponentDefinition;\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA;
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Grid\n * @public\n */\nexport const GridDefinition = {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n dataAttributes: {\n surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n },\n} as const satisfies ComponentDefinition;\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n dataAttributes: {\n surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;AAMO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS,CAAA;AAAA,EACzD,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;;;;"}
|