@backstage/ui 0.0.0-nightly-20260106025021 → 0.0.0-nightly-20260108025012
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 +15 -1
- package/css/styles.css +32 -8
- 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/hooks/useSurface.esm.js +74 -0
- package/dist/hooks/useSurface.esm.js.map +1 -0
- package/dist/index.d.ts +58 -2
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-nightly-
|
|
3
|
+
## 0.0.0-nightly-20260108025012
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
+
- 95246eb: **Breaking** Updating color tokens to match the new neutral style on different surfaces.
|
|
8
|
+
|
|
9
|
+
## Migration notes
|
|
10
|
+
|
|
11
|
+
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.
|
|
12
|
+
|
|
13
|
+
- `--bui-bg-tint` can be replaced by `--bui-bg-neutral-on-surface-0`
|
|
14
|
+
- `--bui-bg-tint-hover` can be replaced by `--bui-bg-neutral-on-surface-0-hover`
|
|
15
|
+
- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
|
|
16
|
+
- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
|
|
17
|
+
|
|
7
18
|
- 4ea1d15: **BREAKING**: Renamed CSS variable `--bui-bg` to `--bui-bg-surface-0` for consistency.
|
|
8
19
|
|
|
9
20
|
### Patch Changes
|
|
@@ -14,6 +25,9 @@
|
|
|
14
25
|
|
|
15
26
|
Affected components: SearchField
|
|
16
27
|
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
- @backstage/version-bridge@1.0.11
|
|
30
|
+
|
|
17
31
|
## 0.11.0-next.0
|
|
18
32
|
|
|
19
33
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -59,10 +59,22 @@
|
|
|
59
59
|
--bui-bg-solid-hover: #163a66;
|
|
60
60
|
--bui-bg-solid-pressed: #0f2b4e;
|
|
61
61
|
--bui-bg-solid-disabled: #ebebeb;
|
|
62
|
-
--bui-bg-
|
|
63
|
-
--bui-bg-
|
|
64
|
-
--bui-bg-
|
|
65
|
-
--bui-bg-
|
|
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);
|
|
66
78
|
--bui-bg-danger: #feebe7;
|
|
67
79
|
--bui-bg-warning: #fff2b2;
|
|
68
80
|
--bui-bg-success: #e6f6eb;
|
|
@@ -108,10 +120,22 @@
|
|
|
108
120
|
--bui-bg-solid-hover: #83b9fd;
|
|
109
121
|
--bui-bg-solid-pressed: #83b9fd;
|
|
110
122
|
--bui-bg-solid-disabled: #222;
|
|
111
|
-
--bui-bg-
|
|
112
|
-
--bui-bg-
|
|
113
|
-
--bui-bg-
|
|
114
|
-
--bui-bg-
|
|
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);
|
|
115
139
|
--bui-bg-danger: #3b1219;
|
|
116
140
|
--bui-bg-warning: #302008;
|
|
117
141
|
--bui-bg-success: #132d21;
|
|
@@ -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 {\n background-color: var(--bui-bg-neutral-on-surface-0-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\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 {\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 background-color: var(--bui-bg-neutral-on-surface-2);\n\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 background-color: var(--bui-bg-neutral-on-surface-3);\n\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 box-shadow: inset 0 0 0 1px var(--bui-border-disabled);\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;;;;"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
|
|
4
|
+
|
|
5
|
+
const SurfaceContext = createVersionedContext("surface-context");
|
|
6
|
+
function incrementSurface(surface) {
|
|
7
|
+
if (!surface) return "0";
|
|
8
|
+
if (surface === "0") return "1";
|
|
9
|
+
if (surface === "1") return "2";
|
|
10
|
+
if (surface === "2" || surface === "3") return "3";
|
|
11
|
+
if (surface === "danger") return "danger";
|
|
12
|
+
if (surface === "warning") return "warning";
|
|
13
|
+
if (surface === "success") return "success";
|
|
14
|
+
if (surface === "auto") return "1";
|
|
15
|
+
return surface;
|
|
16
|
+
}
|
|
17
|
+
function resolveSurfaceForProvider(contextSurface, requestedSurface) {
|
|
18
|
+
if (!requestedSurface) {
|
|
19
|
+
return contextSurface;
|
|
20
|
+
}
|
|
21
|
+
if (typeof requestedSurface === "object") {
|
|
22
|
+
return requestedSurface;
|
|
23
|
+
}
|
|
24
|
+
if (typeof contextSurface === "object") {
|
|
25
|
+
if (requestedSurface === "auto") {
|
|
26
|
+
return "0";
|
|
27
|
+
}
|
|
28
|
+
return requestedSurface;
|
|
29
|
+
}
|
|
30
|
+
if (requestedSurface === "auto") {
|
|
31
|
+
return incrementSurface(contextSurface);
|
|
32
|
+
}
|
|
33
|
+
return requestedSurface;
|
|
34
|
+
}
|
|
35
|
+
function resolveSurfaceForConsumer(contextSurface, requestedSurface) {
|
|
36
|
+
if (!requestedSurface) {
|
|
37
|
+
return contextSurface;
|
|
38
|
+
}
|
|
39
|
+
if (typeof requestedSurface === "object") {
|
|
40
|
+
return requestedSurface;
|
|
41
|
+
}
|
|
42
|
+
if (requestedSurface === "auto") {
|
|
43
|
+
if (typeof contextSurface === "object") {
|
|
44
|
+
return "0";
|
|
45
|
+
}
|
|
46
|
+
return contextSurface;
|
|
47
|
+
}
|
|
48
|
+
return requestedSurface;
|
|
49
|
+
}
|
|
50
|
+
const SurfaceProvider = ({
|
|
51
|
+
surface,
|
|
52
|
+
children
|
|
53
|
+
}) => {
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
SurfaceContext.Provider,
|
|
56
|
+
{
|
|
57
|
+
value: createVersionedValueMap({ 1: { surface } }),
|
|
58
|
+
children
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
};
|
|
62
|
+
const useSurface = (options) => {
|
|
63
|
+
const value = useContext(SurfaceContext)?.atVersion(1);
|
|
64
|
+
const context = value ?? { surface: void 0 };
|
|
65
|
+
const isProvider = options?.surface !== void 0;
|
|
66
|
+
const requestedSurface = options?.surface ?? options?.onSurface;
|
|
67
|
+
const resolvedSurface = isProvider ? resolveSurfaceForProvider(context.surface, requestedSurface) : resolveSurfaceForConsumer(context.surface, requestedSurface);
|
|
68
|
+
return {
|
|
69
|
+
surface: resolvedSurface
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { SurfaceProvider, resolveSurfaceForProvider, useSurface };
|
|
74
|
+
//# sourceMappingURL=useSurface.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSurface.esm.js","sources":["../../src/hooks/useSurface.tsx"],"sourcesContent":["/*\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\nimport { useContext, ReactNode } from 'react';\nimport {\n createVersionedContext,\n createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { Surface, Responsive } from '../types';\n\n/** @public */\nexport interface SurfaceContextValue {\n surface: Responsive<Surface> | undefined;\n}\n\n/** @public */\nexport interface SurfaceProviderProps {\n surface: Responsive<Surface>;\n children: ReactNode;\n}\n\n/** @public */\nexport interface UseSurfaceOptions {\n /**\n * The surface value this component CREATES for its children (container behavior).\n * When 'auto', increments from parent surface.\n *\n * Use this for components like Box, Flex, Grid that establish surface context.\n */\n surface?: Responsive<Surface>;\n /**\n * The surface value this component is ON for styling (leaf behavior).\n * When 'auto', inherits from current surface.\n *\n * Use this for leaf components like Button that consume surface for styling.\n */\n onSurface?: Responsive<Surface>;\n}\n\nconst SurfaceContext = createVersionedContext<{\n 1: SurfaceContextValue;\n}>('surface-context');\n\n/**\n * Increments a surface level by one, capping at '3'.\n * Intent surfaces (danger, warning, success) remain unchanged.\n *\n * @internal\n */\nfunction incrementSurface(surface: Surface | undefined): Surface {\n if (!surface) return '0'; // no context = root level\n if (surface === '0') return '1';\n if (surface === '1') return '2';\n if (surface === '2' || surface === '3') return '3'; // cap at max\n // Intent surfaces remain unchanged\n if (surface === 'danger') return 'danger';\n if (surface === 'warning') return 'warning';\n if (surface === 'success') return 'success';\n // 'auto' should not appear here, but handle it defensively\n if (surface === 'auto') return '1';\n return surface;\n}\n\n/**\n * Resolves a surface value for containers (SurfaceProvider).\n * When 'auto' is used, increments from the parent surface.\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nexport function resolveSurfaceForProvider(\n contextSurface: Responsive<Surface> | undefined,\n requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n if (!requestedSurface) {\n return contextSurface;\n }\n\n // If requestedSurface is a responsive object (breakpoint-based), return as-is\n if (typeof requestedSurface === 'object') {\n return requestedSurface;\n }\n\n // If contextSurface is a responsive object, we can't auto-increment from it\n // Return the requested surface as-is or default to '0' for auto\n if (typeof contextSurface === 'object') {\n if (requestedSurface === 'auto') {\n return '0'; // fallback to root when context is responsive\n }\n return requestedSurface;\n }\n\n // For containers, 'auto' means increment to create a new elevated context\n if (requestedSurface === 'auto') {\n return incrementSurface(contextSurface);\n }\n\n return requestedSurface;\n}\n\n/**\n * Resolves a surface value for leaf components (useSurface hook).\n * When 'auto' is used, inherits the current surface (doesn't increment).\n * For responsive surfaces (objects), returns them as-is without resolution.\n *\n * @param contextSurface - The surface from context\n * @param requestedSurface - The requested surface value (may be 'auto')\n * @returns The resolved surface value\n * @internal\n */\nfunction resolveSurfaceForConsumer(\n contextSurface: Responsive<Surface> | undefined,\n requestedSurface: Responsive<Surface> | undefined,\n): Responsive<Surface> | undefined {\n if (!requestedSurface) {\n return contextSurface;\n }\n\n // If requestedSurface is a responsive object (breakpoint-based), return as-is\n if (typeof requestedSurface === 'object') {\n return requestedSurface;\n }\n\n // For leaf components, 'auto' means inherit the current surface\n if (requestedSurface === 'auto') {\n // If context is responsive, fallback to '0'\n if (typeof contextSurface === 'object') {\n return '0';\n }\n return contextSurface;\n }\n\n return requestedSurface;\n}\n\n/**\n * Provider component that establishes the surface context for child components.\n * This allows components to adapt their styling based on their background surface.\n *\n * Note: The surface value should already be resolved before passing to this provider.\n * Container components should use useSurface with the surface parameter.\n *\n * @internal\n */\nexport const SurfaceProvider = ({\n surface,\n children,\n}: SurfaceProviderProps) => {\n return (\n <SurfaceContext.Provider\n value={createVersionedValueMap({ 1: { surface } })}\n >\n {children}\n </SurfaceContext.Provider>\n );\n};\n\n/**\n * Hook to access the current surface context.\n * Returns the current surface level, or undefined if no provider is present.\n *\n * The parameter name determines the behavior:\n * - `surface`: Container behavior - 'auto' increments from parent\n * - `onSurface`: Leaf behavior - 'auto' inherits from parent\n *\n * @param options - Optional configuration for surface resolution\n * @internal\n */\nexport const useSurface = (\n options?: UseSurfaceOptions,\n): SurfaceContextValue => {\n const value = useContext(SurfaceContext)?.atVersion(1);\n const context = value ?? { surface: undefined };\n\n // Infer behavior from which parameter is provided\n // 'surface' = provider behavior (increment)\n // 'onSurface' = consumer behavior (inherit)\n const isProvider = options?.surface !== undefined;\n const requestedSurface = options?.surface ?? options?.onSurface;\n\n const resolvedSurface = isProvider\n ? resolveSurfaceForProvider(context.surface, requestedSurface)\n : resolveSurfaceForConsumer(context.surface, requestedSurface);\n\n return {\n surface: resolvedSurface,\n };\n};\n"],"names":[],"mappings":";;;;AAoDA,MAAM,cAAA,GAAiB,uBAEpB,iBAAiB,CAAA;AAQpB,SAAS,iBAAiB,OAAA,EAAuC;AAC/D,EAAA,IAAI,CAAC,SAAS,OAAO,GAAA;AACrB,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,KAAK,OAAO,GAAA;AAC5B,EAAA,IAAI,OAAA,KAAY,GAAA,IAAO,OAAA,KAAY,GAAA,EAAK,OAAO,GAAA;AAE/C,EAAA,IAAI,OAAA,KAAY,UAAU,OAAO,QAAA;AACjC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAClC,EAAA,IAAI,OAAA,KAAY,WAAW,OAAO,SAAA;AAElC,EAAA,IAAI,OAAA,KAAY,QAAQ,OAAO,GAAA;AAC/B,EAAA,OAAO,OAAA;AACT;AAYO,SAAS,yBAAA,CACd,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAIA,EAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,IAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAC/B,IAAA,OAAO,iBAAiB,cAAc,CAAA;AAAA,EACxC;AAEA,EAAA,OAAO,gBAAA;AACT;AAYA,SAAS,yBAAA,CACP,gBACA,gBAAA,EACiC;AACjC,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,IAAA,OAAO,cAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,qBAAqB,QAAA,EAAU;AACxC,IAAA,OAAO,gBAAA;AAAA,EACT;AAGA,EAAA,IAAI,qBAAqB,MAAA,EAAQ;AAE/B,IAAA,IAAI,OAAO,mBAAmB,QAAA,EAAU;AACtC,MAAA,OAAO,GAAA;AAAA,IACT;AACA,IAAA,OAAO,cAAA;AAAA,EACT;AAEA,EAAA,OAAO,gBAAA;AACT;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA;AACF,CAAA,KAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,OAAO,uBAAA,CAAwB,EAAE,GAAG,EAAE,OAAA,IAAW,CAAA;AAAA,MAEhD;AAAA;AAAA,GACH;AAEJ;AAaO,MAAM,UAAA,GAAa,CACxB,OAAA,KACwB;AACxB,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,cAAc,CAAA,EAAG,UAAU,CAAC,CAAA;AACrD,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,EAAE,OAAA,EAAS,MAAA,EAAU;AAK9C,EAAA,MAAM,UAAA,GAAa,SAAS,OAAA,KAAY,MAAA;AACxC,EAAA,MAAM,gBAAA,GAAmB,OAAA,EAAS,OAAA,IAAW,OAAA,EAAS,SAAA;AAEtD,EAAA,MAAM,eAAA,GAAkB,UAAA,GACpB,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA,GAC3D,yBAAA,CAA0B,OAAA,CAAQ,OAAA,EAAS,gBAAgB,CAAA;AAE/D,EAAA,OAAO;AAAA,IACL,OAAA,EAAS;AAAA,GACX;AACF;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -91,6 +91,15 @@ interface ComponentDefinition {
|
|
|
91
91
|
dataAttributes?: DataAttributesMap;
|
|
92
92
|
utilityProps?: string[];
|
|
93
93
|
}
|
|
94
|
+
/**
|
|
95
|
+
* Surface type
|
|
96
|
+
*
|
|
97
|
+
* Supports absolute levels ('0'-'3'), intent surfaces ('danger', 'warning', 'success'),
|
|
98
|
+
* and 'auto' which increments from the parent surface context.
|
|
99
|
+
*
|
|
100
|
+
* @public
|
|
101
|
+
*/
|
|
102
|
+
type Surface = '0' | '1' | '2' | '3' | 'danger' | 'warning' | 'success' | 'auto';
|
|
94
103
|
|
|
95
104
|
/** @public */
|
|
96
105
|
interface BoxProps extends SpaceProps {
|
|
@@ -106,6 +115,7 @@ interface BoxProps extends SpaceProps {
|
|
|
106
115
|
children?: React.ReactNode;
|
|
107
116
|
className?: string;
|
|
108
117
|
style?: React.CSSProperties;
|
|
118
|
+
surface?: Responsive<Surface>;
|
|
109
119
|
}
|
|
110
120
|
|
|
111
121
|
/** @public */
|
|
@@ -120,6 +130,9 @@ declare const BoxDefinition: {
|
|
|
120
130
|
readonly root: "bui-Box";
|
|
121
131
|
};
|
|
122
132
|
readonly utilityProps: ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "position", "display", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"];
|
|
133
|
+
readonly dataAttributes: {
|
|
134
|
+
readonly surface: readonly ["0", "1", "2", "3", "danger", "warning", "success"];
|
|
135
|
+
};
|
|
123
136
|
};
|
|
124
137
|
|
|
125
138
|
/** @public */
|
|
@@ -129,6 +142,7 @@ interface GridProps extends SpaceProps {
|
|
|
129
142
|
columns?: Responsive<Columns>;
|
|
130
143
|
gap?: Responsive<Space>;
|
|
131
144
|
style?: React.CSSProperties;
|
|
145
|
+
surface?: Responsive<Surface>;
|
|
132
146
|
}
|
|
133
147
|
/** @public */
|
|
134
148
|
interface GridItemProps {
|
|
@@ -139,6 +153,7 @@ interface GridItemProps {
|
|
|
139
153
|
colStart?: Responsive<Columns>;
|
|
140
154
|
rowSpan?: Responsive<Columns>;
|
|
141
155
|
style?: React.CSSProperties;
|
|
156
|
+
surface?: Responsive<Surface>;
|
|
142
157
|
}
|
|
143
158
|
|
|
144
159
|
/** @public */
|
|
@@ -156,6 +171,9 @@ declare const GridDefinition: {
|
|
|
156
171
|
readonly root: "bui-Grid";
|
|
157
172
|
};
|
|
158
173
|
readonly utilityProps: ["columns", "gap", "m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py"];
|
|
174
|
+
readonly dataAttributes: {
|
|
175
|
+
readonly surface: readonly ["0", "1", "2", "3", "danger", "warning", "success"];
|
|
176
|
+
};
|
|
159
177
|
};
|
|
160
178
|
/**
|
|
161
179
|
* Component definition for GridItem
|
|
@@ -166,6 +184,9 @@ declare const GridItemDefinition: {
|
|
|
166
184
|
readonly root: "bui-GridItem";
|
|
167
185
|
};
|
|
168
186
|
readonly utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"];
|
|
187
|
+
readonly dataAttributes: {
|
|
188
|
+
readonly surface: readonly ["0", "1", "2", "3", "danger", "warning", "success"];
|
|
189
|
+
};
|
|
169
190
|
};
|
|
170
191
|
|
|
171
192
|
/** @public */
|
|
@@ -177,6 +198,7 @@ interface FlexProps extends SpaceProps {
|
|
|
177
198
|
direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
|
|
178
199
|
className?: string;
|
|
179
200
|
style?: React.CSSProperties;
|
|
201
|
+
surface?: Responsive<Surface>;
|
|
180
202
|
}
|
|
181
203
|
|
|
182
204
|
/** @public */
|
|
@@ -191,6 +213,9 @@ declare const FlexDefinition: {
|
|
|
191
213
|
readonly root: "bui-Flex";
|
|
192
214
|
};
|
|
193
215
|
readonly utilityProps: ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "gap", "align", "justify", "direction"];
|
|
216
|
+
readonly dataAttributes: {
|
|
217
|
+
readonly surface: readonly ["0", "1", "2", "3", "danger", "warning", "success"];
|
|
218
|
+
};
|
|
194
219
|
};
|
|
195
220
|
|
|
196
221
|
/** @public */
|
|
@@ -274,9 +299,40 @@ interface ButtonProps extends ButtonProps$1 {
|
|
|
274
299
|
iconEnd?: ReactElement;
|
|
275
300
|
children?: ReactNode;
|
|
276
301
|
loading?: boolean;
|
|
302
|
+
/** Surface the button is placed on. Defaults to context surface if available */
|
|
303
|
+
onSurface?: Responsive<Surface>;
|
|
277
304
|
}
|
|
278
305
|
|
|
279
|
-
/**
|
|
306
|
+
/**
|
|
307
|
+
* A button component built on React Aria Components that provides accessible
|
|
308
|
+
* interactive elements for triggering actions.
|
|
309
|
+
*
|
|
310
|
+
* @remarks
|
|
311
|
+
* The Button component supports multiple variants (primary, secondary, tertiary, danger),
|
|
312
|
+
* sizes (small, medium), and states including loading and disabled. It automatically
|
|
313
|
+
* handles keyboard navigation, focus management, and ARIA attributes for accessibility.
|
|
314
|
+
*
|
|
315
|
+
* @example
|
|
316
|
+
* Basic usage:
|
|
317
|
+
* ```tsx
|
|
318
|
+
* <Button>Click me</Button>
|
|
319
|
+
* ```
|
|
320
|
+
*
|
|
321
|
+
* @example
|
|
322
|
+
* With icons and loading state:
|
|
323
|
+
* ```tsx
|
|
324
|
+
* <Button
|
|
325
|
+
* variant="primary"
|
|
326
|
+
* size="medium"
|
|
327
|
+
* iconStart={<IconComponent />}
|
|
328
|
+
* loading={isSubmitting}
|
|
329
|
+
* >
|
|
330
|
+
* Submit
|
|
331
|
+
* </Button>
|
|
332
|
+
* ```
|
|
333
|
+
*
|
|
334
|
+
* @public
|
|
335
|
+
*/
|
|
280
336
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
281
337
|
|
|
282
338
|
/**
|
|
@@ -1467,4 +1523,4 @@ declare const useBreakpoint: () => {
|
|
|
1467
1523
|
};
|
|
1468
1524
|
|
|
1469
1525
|
export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
|
|
1470
|
-
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnProps, Columns, ComponentDefinition, ContainerProps, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, Option, RadioGroupProps, RadioProps, Responsive, SearchFieldProps, SelectProps, SkeletonProps, Space, SpaceProps, SubmenuTriggerProps, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TablePaginationProps, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, TooltipProps, UseTableConfig, UseTablePagination, UseTablePaginationConfig, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
|
1526
|
+
export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnProps, Columns, ComponentDefinition, ContainerProps, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, Option, RadioGroupProps, RadioProps, Responsive, SearchFieldProps, SelectProps, SkeletonProps, Space, SpaceProps, SubmenuTriggerProps, Surface, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TablePaginationProps, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, TooltipProps, UseTableConfig, UseTablePagination, UseTablePaginationConfig, UseTableResult, UtilityProps, VisuallyHiddenProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20260108025012",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -40,17 +40,18 @@
|
|
|
40
40
|
"test": "backstage-cli package test"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
+
"@backstage/version-bridge": "1.0.11",
|
|
43
44
|
"@remixicon/react": "^4.6.0",
|
|
44
45
|
"@tanstack/react-table": "^8.21.3",
|
|
45
46
|
"clsx": "^2.1.1",
|
|
46
47
|
"react-aria-components": "^1.13.0"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
|
-
"@backstage/cli": "0.0.0-nightly-
|
|
50
|
+
"@backstage/cli": "0.0.0-nightly-20260108025012",
|
|
50
51
|
"@types/react": "^18.0.0",
|
|
51
52
|
"@types/react-dom": "^18.0.0",
|
|
52
53
|
"chalk": "^5.4.1",
|
|
53
|
-
"eslint-plugin-storybook": "^10.
|
|
54
|
+
"eslint-plugin-storybook": "^10.2.0-alpha.7",
|
|
54
55
|
"glob": "^11.0.1",
|
|
55
56
|
"globals": "^15.11.0",
|
|
56
57
|
"lightningcss": "^1.29.1",
|
|
@@ -58,7 +59,7 @@
|
|
|
58
59
|
"react": "^18.0.2",
|
|
59
60
|
"react-dom": "^18.0.2",
|
|
60
61
|
"react-router-dom": "^6.3.0",
|
|
61
|
-
"storybook": "^10.
|
|
62
|
+
"storybook": "^10.2.0-alpha.7"
|
|
62
63
|
},
|
|
63
64
|
"peerDependencies": {
|
|
64
65
|
"@types/react": "^17.0.0 || ^18.0.0",
|