@backstage/ui 0.7.0-next.3 → 0.7.1-next.0
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 +30 -0
- package/css/styles.css +263 -176
- package/dist/components/Avatar/Avatar.esm.js.map +1 -1
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/Box.props.esm.js.map +1 -1
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
- package/dist/components/Card/Card.esm.js +4 -4
- package/dist/components/Card/Card.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.esm.js +5 -8
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Collapsible/Collapsible.esm.js.map +1 -1
- package/dist/components/Container/Container.esm.js.map +1 -1
- package/dist/components/FieldError/FieldError.esm.js.map +1 -1
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/Flex/Flex.esm.js.map +1 -1
- package/dist/components/Flex/Flex.props.esm.js.map +1 -1
- package/dist/components/Grid/Grid.esm.js.map +1 -1
- package/dist/components/Grid/Grid.props.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +1 -10
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +3 -34
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js +30 -93
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Icon/Icon.esm.js.map +1 -1
- package/dist/components/Icon/context.esm.js.map +1 -1
- package/dist/components/Icon/icons.esm.js +1 -1
- package/dist/components/Icon/icons.esm.js.map +1 -1
- package/dist/components/Icon/provider.esm.js.map +1 -1
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +144 -202
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/Select/Select.esm.js +2 -0
- package/dist/components/Select/Select.esm.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/Table/components/Cell.esm.js.map +1 -1
- package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
- package/dist/components/Table/components/Column.esm.js.map +1 -1
- package/dist/components/Table/components/Row.esm.js.map +1 -1
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableBody.esm.js.map +1 -1
- package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
- package/dist/components/Table/hooks/useTable.esm.js.map +1 -1
- package/dist/components/TablePagination/TablePagination.esm.js +5 -8
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
- package/dist/components/TagGroup/TagGroup.esm.js +62 -0
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -0
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
- package/dist/hooks/useBreakpoint.esm.js.map +1 -1
- package/dist/hooks/useIsomorphicLayoutEffect.esm.js.map +1 -1
- package/dist/hooks/useMediaQuery.esm.js.map +1 -1
- package/dist/hooks/useStyles.esm.js.map +1 -1
- package/dist/index.d.ts +137 -72
- package/dist/index.esm.js +3 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/props/display.props.esm.js.map +1 -1
- package/dist/props/gap-props.esm.js.map +1 -1
- package/dist/props/height.props.esm.js.map +1 -1
- package/dist/props/margin.props.esm.js.map +1 -1
- package/dist/props/padding.props.esm.js.map +1 -1
- package/dist/props/position.props.esm.js.map +1 -1
- package/dist/props/prop-def.esm.js.map +1 -1
- package/dist/props/spacing.props.esm.js.map +1 -1
- package/dist/props/width.props.esm.js.map +1 -1
- package/dist/utils/componentDefinitions.esm.js +25 -26
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/dist/utils/extractProps.esm.js.map +1 -1
- package/dist/utils/isExternalLink.esm.js.map +1 -1
- package/package.json +3 -15
- package/dist/components/Menu/Combobox.esm.js +0 -214
- package/dist/components/Menu/Combobox.esm.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.7.1-next.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 7307930: Add missing class for flex: baseline
|
|
8
|
+
- 89da341: Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility.
|
|
9
|
+
|
|
10
|
+
## 0.7.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- 0615e54: We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood.
|
|
15
|
+
- b245c9d: Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible.
|
|
16
|
+
- 800f593: **Breaking change** We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance.
|
|
17
|
+
- b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- de89a3d: Fixes some styles on the Select component in BUI.
|
|
22
|
+
- a251b3e: Export CardHeader, CardBody and CardFooter from Card component index
|
|
23
|
+
- f761306: Add new TagGroup component to Backstage UI.
|
|
24
|
+
- 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
|
|
25
|
+
- e7ff178: Update styling of Tooltip element
|
|
26
|
+
- 230b410: **Breaking change** Move breadcrumb to fit in the `HeaderPage` instead of the `Header` in Backstage UI.
|
|
27
|
+
- 2f9a084: We are motion away from `motion` to use `gsap` instead to make Backstage UI backward compatible with React 17.
|
|
28
|
+
- d4e603e: Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.
|
|
29
|
+
- 8bdc491: Remove stylesheet import from Select component.
|
|
30
|
+
- 404b426: Add `startCollapsed` prop on the `SearchField` component in BUI.
|
|
31
|
+
- e0e886f: Adds onTabSelectionChange to ui header component.
|
|
32
|
+
|
|
3
33
|
## 0.7.0-next.3
|
|
4
34
|
|
|
5
35
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -8797,6 +8797,10 @@
|
|
|
8797
8797
|
align-items: end;
|
|
8798
8798
|
}
|
|
8799
8799
|
|
|
8800
|
+
.bui-align-baseline {
|
|
8801
|
+
align-items: baseline;
|
|
8802
|
+
}
|
|
8803
|
+
|
|
8800
8804
|
.bui-align-stretch {
|
|
8801
8805
|
align-items: stretch;
|
|
8802
8806
|
}
|
|
@@ -9182,7 +9186,7 @@
|
|
|
9182
9186
|
--bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
|
9183
9187
|
}
|
|
9184
9188
|
|
|
9185
|
-
[data-theme="dark"] {
|
|
9189
|
+
[data-theme-mode="dark"] {
|
|
9186
9190
|
--bui-gray-1: #191919;
|
|
9187
9191
|
--bui-gray-2: #242424;
|
|
9188
9192
|
--bui-gray-3: #373737;
|
|
@@ -9659,66 +9663,13 @@
|
|
|
9659
9663
|
margin-left: -8px;
|
|
9660
9664
|
}
|
|
9661
9665
|
|
|
9662
|
-
.bui-HeaderPageControls {
|
|
9663
|
-
align-items: center;
|
|
9664
|
-
gap: var(--bui-space-2);
|
|
9665
|
-
flex-direction: row;
|
|
9666
|
-
display: flex;
|
|
9667
|
-
}
|
|
9668
|
-
|
|
9669
|
-
.bui-HeaderPageSticky {
|
|
9670
|
-
z-index: -1;
|
|
9671
|
-
height: 0;
|
|
9672
|
-
color: var(--bui-fg-primary);
|
|
9673
|
-
position: sticky;
|
|
9674
|
-
top: 0;
|
|
9675
|
-
}
|
|
9676
|
-
|
|
9677
|
-
.bui-HeaderPageStickyWrapper {
|
|
9678
|
-
background-color: var(--bui-bg-surface-1);
|
|
9679
|
-
border-bottom: 1px solid var(--bui-border);
|
|
9680
|
-
opacity: 0;
|
|
9681
|
-
}
|
|
9682
|
-
|
|
9683
|
-
.bui-HeaderPageStickyContent {
|
|
9684
|
-
justify-content: space-between;
|
|
9685
|
-
align-items: center;
|
|
9686
|
-
height: 48px;
|
|
9687
|
-
display: flex;
|
|
9688
|
-
}
|
|
9689
|
-
|
|
9690
|
-
.bui-HeaderPageBreadcrumbs {
|
|
9691
|
-
align-items: center;
|
|
9692
|
-
gap: var(--bui-space-2);
|
|
9693
|
-
font-size: var(--bui-font-size-3);
|
|
9694
|
-
font-weight: var(--bui-font-weight-regular);
|
|
9695
|
-
flex-direction: row;
|
|
9696
|
-
display: flex;
|
|
9697
|
-
}
|
|
9698
|
-
|
|
9699
|
-
.bui-HeaderPageBreadcrumb {
|
|
9666
|
+
.bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs {
|
|
9700
9667
|
align-items: center;
|
|
9701
9668
|
gap: var(--bui-space-2);
|
|
9702
9669
|
flex-direction: row;
|
|
9703
9670
|
display: flex;
|
|
9704
9671
|
}
|
|
9705
9672
|
|
|
9706
|
-
.bui-HeaderPageBreadcrumbLink {
|
|
9707
|
-
color: var(--bui-fg-secondary);
|
|
9708
|
-
cursor: pointer;
|
|
9709
|
-
text-decoration: none;
|
|
9710
|
-
|
|
9711
|
-
&[data-active="true"] {
|
|
9712
|
-
color: var(--bui-fg-primary);
|
|
9713
|
-
}
|
|
9714
|
-
}
|
|
9715
|
-
|
|
9716
|
-
.bui-HeaderPageBreadcrumbSeparator {
|
|
9717
|
-
width: 16px;
|
|
9718
|
-
height: 16px;
|
|
9719
|
-
color: var(--bui-fg-secondary);
|
|
9720
|
-
}
|
|
9721
|
-
|
|
9722
9673
|
.bui-Icon {
|
|
9723
9674
|
width: 1rem;
|
|
9724
9675
|
height: 1rem;
|
|
@@ -9741,184 +9692,245 @@
|
|
|
9741
9692
|
}
|
|
9742
9693
|
}
|
|
9743
9694
|
|
|
9744
|
-
.bui-
|
|
9745
|
-
z-index: 100;
|
|
9746
|
-
outline: 0;
|
|
9747
|
-
}
|
|
9748
|
-
|
|
9749
|
-
.bui-MenuPopup {
|
|
9750
|
-
background-color: var(--bui-bg-surface-1);
|
|
9695
|
+
.bui-MenuPopover {
|
|
9751
9696
|
border: 1px solid var(--bui-border);
|
|
9697
|
+
border-radius: var(--bui-radius-2);
|
|
9698
|
+
background: var(--bui-bg-surface-1);
|
|
9752
9699
|
color: var(--bui-fg-primary);
|
|
9753
|
-
transform-origin: var(--transform-origin);
|
|
9754
|
-
max-width: min(var(--available-width), 340px);
|
|
9755
|
-
max-height: min(var(--available-height), 500px);
|
|
9756
|
-
padding-bottom: var(--bui-space-1);
|
|
9757
|
-
border-radius: .375rem;
|
|
9758
9700
|
outline: none;
|
|
9759
9701
|
flex-direction: column;
|
|
9760
|
-
|
|
9702
|
+
min-height: 0;
|
|
9703
|
+
transition: transform .2s, opacity .2s;
|
|
9761
9704
|
display: flex;
|
|
9762
|
-
|
|
9763
|
-
overflow: auto;
|
|
9705
|
+
overflow: hidden;
|
|
9764
9706
|
|
|
9765
|
-
&[data-
|
|
9707
|
+
&[data-entering], &[data-exiting] {
|
|
9708
|
+
transform: var(--origin);
|
|
9766
9709
|
opacity: 0;
|
|
9767
|
-
transform: scale(.9);
|
|
9768
9710
|
}
|
|
9769
|
-
}
|
|
9770
9711
|
|
|
9771
|
-
|
|
9772
|
-
|
|
9773
|
-
|
|
9774
|
-
gap: var(--bui-space-2);
|
|
9775
|
-
height: 32px;
|
|
9776
|
-
color: var(--bui-fg-primary);
|
|
9777
|
-
border-radius: var(--bui-radius-2);
|
|
9778
|
-
margin-inline: var(--bui-space-1);
|
|
9779
|
-
padding-inline: var(--bui-space-2);
|
|
9780
|
-
font-size: var(--bui-font-size-3);
|
|
9781
|
-
cursor: pointer;
|
|
9782
|
-
outline: 0;
|
|
9783
|
-
flex-shrink: 0;
|
|
9784
|
-
text-decoration: none;
|
|
9785
|
-
display: flex;
|
|
9712
|
+
&[data-placement="top"] {
|
|
9713
|
+
--origin: translateY(8px);
|
|
9714
|
+
}
|
|
9786
9715
|
|
|
9787
|
-
|
|
9788
|
-
|
|
9716
|
+
&[data-placement="bottom"] {
|
|
9717
|
+
--origin: translateY(-8px);
|
|
9789
9718
|
}
|
|
9790
9719
|
|
|
9791
|
-
&[data-
|
|
9792
|
-
|
|
9720
|
+
&[data-placement="right"] {
|
|
9721
|
+
--origin: translateX(-8px);
|
|
9722
|
+
}
|
|
9723
|
+
|
|
9724
|
+
&[data-placement="left"] {
|
|
9725
|
+
--origin: translateX(8px);
|
|
9793
9726
|
}
|
|
9794
9727
|
}
|
|
9795
9728
|
|
|
9796
|
-
.bui-
|
|
9797
|
-
|
|
9798
|
-
|
|
9799
|
-
|
|
9800
|
-
|
|
9801
|
-
|
|
9802
|
-
|
|
9803
|
-
|
|
9804
|
-
|
|
9729
|
+
.bui-MenuContent {
|
|
9730
|
+
max-height: inherit;
|
|
9731
|
+
box-sizing: border-box;
|
|
9732
|
+
padding: var(--bui-space-1);
|
|
9733
|
+
outline: none;
|
|
9734
|
+
min-width: 150px;
|
|
9735
|
+
overflow: auto;
|
|
9736
|
+
}
|
|
9737
|
+
|
|
9738
|
+
.bui-MenuPopover .bui-ScrollAreaRoot {
|
|
9739
|
+
flex-direction: column;
|
|
9740
|
+
flex: 1;
|
|
9741
|
+
height: 100%;
|
|
9742
|
+
min-height: 0;
|
|
9743
|
+
display: flex;
|
|
9744
|
+
}
|
|
9745
|
+
|
|
9746
|
+
.bui-MenuPopover .bui-ScrollAreaScrollbar {
|
|
9747
|
+
margin-inline: var(--bui-space-1_5);
|
|
9748
|
+
}
|
|
9749
|
+
|
|
9750
|
+
.bui-MenuItem {
|
|
9751
|
+
height: 2rem;
|
|
9805
9752
|
padding-inline: var(--bui-space-2);
|
|
9753
|
+
border-radius: var(--bui-radius-2);
|
|
9754
|
+
cursor: default;
|
|
9755
|
+
color: var(--bui-fg-primary);
|
|
9806
9756
|
font-size: var(--bui-font-size-3);
|
|
9807
|
-
|
|
9808
|
-
|
|
9809
|
-
|
|
9810
|
-
|
|
9757
|
+
justify-content: space-between;
|
|
9758
|
+
align-items: center;
|
|
9759
|
+
gap: var(--bui-space-6);
|
|
9760
|
+
outline: none;
|
|
9811
9761
|
display: flex;
|
|
9812
9762
|
|
|
9813
|
-
&
|
|
9814
|
-
|
|
9763
|
+
&[data-focused], &[data-open] {
|
|
9764
|
+
background: var(--bui-bg-surface-2);
|
|
9765
|
+
color: var(--bui-fg-primary);
|
|
9815
9766
|
}
|
|
9816
9767
|
|
|
9817
|
-
|
|
9818
|
-
|
|
9768
|
+
&[data-color="danger"] {
|
|
9769
|
+
color: var(--bui-fg-danger);
|
|
9819
9770
|
}
|
|
9820
9771
|
|
|
9821
|
-
&[data-
|
|
9822
|
-
background
|
|
9772
|
+
&[data-color="danger"][data-focused] {
|
|
9773
|
+
background: var(--bui-bg-danger);
|
|
9774
|
+
color: var(--bui-fg-danger);
|
|
9775
|
+
}
|
|
9823
9776
|
|
|
9824
|
-
|
|
9825
|
-
|
|
9777
|
+
&[data-has-submenu] {
|
|
9778
|
+
& > .bui-MenuItemArrow {
|
|
9779
|
+
display: block;
|
|
9826
9780
|
}
|
|
9827
9781
|
}
|
|
9828
9782
|
}
|
|
9829
9783
|
|
|
9830
|
-
.bui-
|
|
9831
|
-
|
|
9832
|
-
|
|
9833
|
-
|
|
9834
|
-
|
|
9835
|
-
|
|
9836
|
-
.bui-SubmenuComboboxSearch {
|
|
9837
|
-
padding-inline: var(--bui-space-3);
|
|
9838
|
-
border: none;
|
|
9839
|
-
border-bottom: 1px solid var(--bui-border);
|
|
9840
|
-
background-color: var(--bui-bg-surface-1);
|
|
9841
|
-
width: 100%;
|
|
9842
|
-
height: 32px;
|
|
9784
|
+
.bui-MenuItemListBox {
|
|
9785
|
+
height: 2rem;
|
|
9786
|
+
padding-inline: var(--bui-space-2);
|
|
9787
|
+
border-radius: var(--bui-radius-2);
|
|
9788
|
+
cursor: default;
|
|
9843
9789
|
color: var(--bui-fg-primary);
|
|
9844
|
-
line-height: 140%;
|
|
9845
9790
|
font-size: var(--bui-font-size-3);
|
|
9846
|
-
|
|
9791
|
+
justify-content: space-between;
|
|
9792
|
+
align-items: center;
|
|
9793
|
+
gap: var(--bui-space-6);
|
|
9847
9794
|
outline: none;
|
|
9848
|
-
|
|
9849
|
-
top: 0;
|
|
9795
|
+
display: flex;
|
|
9850
9796
|
|
|
9851
|
-
|
|
9852
|
-
|
|
9797
|
+
&:hover {
|
|
9798
|
+
background: var(--bui-bg-surface-2);
|
|
9799
|
+
color: var(--bui-fg-primary);
|
|
9853
9800
|
}
|
|
9854
9801
|
|
|
9855
|
-
|
|
9856
|
-
|
|
9857
|
-
|
|
9802
|
+
&[data-selected] .bui-MenuItemListBoxCheck {
|
|
9803
|
+
& > svg {
|
|
9804
|
+
opacity: 1;
|
|
9805
|
+
color: var(--bui-fg-primary);
|
|
9806
|
+
}
|
|
9858
9807
|
}
|
|
9859
9808
|
}
|
|
9860
9809
|
|
|
9861
|
-
.bui-
|
|
9862
|
-
|
|
9863
|
-
|
|
9864
|
-
|
|
9810
|
+
.bui-MenuItemListBoxCheck {
|
|
9811
|
+
justify-content: center;
|
|
9812
|
+
align-items: center;
|
|
9813
|
+
width: 1rem;
|
|
9814
|
+
height: 1rem;
|
|
9865
9815
|
display: flex;
|
|
9866
|
-
overflow-y: auto;
|
|
9867
|
-
}
|
|
9868
9816
|
|
|
9869
|
-
|
|
9870
|
-
|
|
9871
|
-
|
|
9872
|
-
|
|
9873
|
-
|
|
9874
|
-
font-size: var(--bui-font-size-3);
|
|
9817
|
+
& > svg {
|
|
9818
|
+
opacity: 0;
|
|
9819
|
+
width: 1rem;
|
|
9820
|
+
height: 1rem;
|
|
9821
|
+
}
|
|
9875
9822
|
}
|
|
9876
9823
|
|
|
9877
|
-
.bui-
|
|
9878
|
-
user-select: none;
|
|
9879
|
-
justify-content: space-between;
|
|
9824
|
+
.bui-MenuItemContent {
|
|
9880
9825
|
align-items: center;
|
|
9881
9826
|
gap: var(--bui-space-2);
|
|
9882
|
-
height: 32px;
|
|
9883
|
-
color: var(--bui-fg-primary);
|
|
9884
|
-
border-radius: var(--bui-radius-2);
|
|
9885
|
-
margin-inline: var(--bui-space-1);
|
|
9886
|
-
padding-inline: var(--bui-space-2);
|
|
9887
|
-
font-size: var(--bui-font-size-3);
|
|
9888
|
-
cursor: pointer;
|
|
9889
|
-
outline: 0;
|
|
9890
|
-
flex-shrink: 0;
|
|
9891
|
-
text-decoration: none;
|
|
9892
9827
|
display: flex;
|
|
9893
9828
|
|
|
9894
|
-
&
|
|
9895
|
-
|
|
9829
|
+
& > svg {
|
|
9830
|
+
width: 1rem;
|
|
9831
|
+
height: 1rem;
|
|
9832
|
+
}
|
|
9833
|
+
}
|
|
9834
|
+
|
|
9835
|
+
.bui-MenuItemArrow {
|
|
9836
|
+
width: 1rem;
|
|
9837
|
+
height: 1rem;
|
|
9838
|
+
display: none;
|
|
9839
|
+
|
|
9840
|
+
& > svg {
|
|
9841
|
+
width: 1rem;
|
|
9842
|
+
height: 1rem;
|
|
9896
9843
|
}
|
|
9844
|
+
}
|
|
9897
9845
|
|
|
9898
|
-
|
|
9899
|
-
|
|
9900
|
-
|
|
9846
|
+
.bui-MenuSection {
|
|
9847
|
+
&:first-child .bui-MenuSectionHeader {
|
|
9848
|
+
padding-top: 0;
|
|
9901
9849
|
}
|
|
9902
9850
|
}
|
|
9903
9851
|
|
|
9904
|
-
.bui-
|
|
9905
|
-
|
|
9906
|
-
|
|
9852
|
+
.bui-MenuSectionHeader {
|
|
9853
|
+
height: 2rem;
|
|
9854
|
+
padding-top: var(--bui-space-3);
|
|
9855
|
+
padding-left: var(--bui-space-2);
|
|
9907
9856
|
color: var(--bui-fg-primary);
|
|
9908
|
-
|
|
9909
|
-
|
|
9910
|
-
|
|
9857
|
+
font-size: var(--bui-font-size-1);
|
|
9858
|
+
letter-spacing: .05rem;
|
|
9859
|
+
text-transform: uppercase;
|
|
9860
|
+
align-items: center;
|
|
9861
|
+
font-weight: bold;
|
|
9862
|
+
display: flex;
|
|
9863
|
+
}
|
|
9864
|
+
|
|
9865
|
+
.bui-MenuSeparator {
|
|
9866
|
+
background: var(--bui-border);
|
|
9867
|
+
height: 1px;
|
|
9868
|
+
margin-inline: var(--bui-space-1_5);
|
|
9869
|
+
margin-block: var(--bui-space-1);
|
|
9870
|
+
}
|
|
9871
|
+
|
|
9872
|
+
.bui-MenuSearchField {
|
|
9873
|
+
font-family: var(--bui-font-regular);
|
|
9911
9874
|
flex-shrink: 0;
|
|
9875
|
+
width: 100%;
|
|
9876
|
+
position: relative;
|
|
9877
|
+
|
|
9878
|
+
&[data-empty] {
|
|
9879
|
+
& .bui-MenuSearchFieldClear {
|
|
9880
|
+
display: none;
|
|
9881
|
+
}
|
|
9882
|
+
}
|
|
9883
|
+
}
|
|
9884
|
+
|
|
9885
|
+
.bui-MenuSearchFieldInput {
|
|
9886
|
+
padding: 0 var(--bui-space-3);
|
|
9887
|
+
border: none;
|
|
9888
|
+
border-bottom: 1px solid var(--bui-border);
|
|
9889
|
+
background-color: var(--bui-bg-surface-1);
|
|
9890
|
+
font-size: var(--bui-font-size-3);
|
|
9891
|
+
font-family: var(--bui-font-regular);
|
|
9892
|
+
font-weight: var(--bui-font-weight-regular);
|
|
9893
|
+
color: var(--bui-fg-primary);
|
|
9894
|
+
width: 100%;
|
|
9895
|
+
height: 2rem;
|
|
9896
|
+
cursor: inherit;
|
|
9897
|
+
outline: none;
|
|
9898
|
+
align-items: center;
|
|
9899
|
+
display: flex;
|
|
9900
|
+
|
|
9901
|
+
&::-webkit-search-cancel-button, &::-webkit-search-decoration {
|
|
9902
|
+
-webkit-appearance: none;
|
|
9903
|
+
}
|
|
9904
|
+
}
|
|
9905
|
+
|
|
9906
|
+
.bui-MenuSearchFieldClear {
|
|
9907
|
+
right: var(--bui-space-2);
|
|
9908
|
+
cursor: pointer;
|
|
9909
|
+
color: var(--bui-fg-secondary);
|
|
9910
|
+
background-color: #0000;
|
|
9911
|
+
border: none;
|
|
9912
9912
|
justify-content: center;
|
|
9913
9913
|
align-items: center;
|
|
9914
|
+
margin: 0;
|
|
9915
|
+
padding: 0;
|
|
9916
|
+
transition: color .2s ease-in-out;
|
|
9914
9917
|
display: flex;
|
|
9918
|
+
position: absolute;
|
|
9919
|
+
top: 0;
|
|
9920
|
+
bottom: 0;
|
|
9921
|
+
|
|
9922
|
+
& > svg {
|
|
9923
|
+
width: 1rem;
|
|
9924
|
+
height: 1rem;
|
|
9925
|
+
}
|
|
9915
9926
|
}
|
|
9916
9927
|
|
|
9917
|
-
.bui-
|
|
9918
|
-
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9928
|
+
.bui-MenuEmptyState {
|
|
9929
|
+
padding: var(--bui-space-1);
|
|
9930
|
+
color: var(--bui-fg-secondary);
|
|
9931
|
+
font-size: var(--bui-font-size-3);
|
|
9932
|
+
font-family: var(--bui-font-regular);
|
|
9933
|
+
font-weight: var(--bui-font-weight-regular);
|
|
9922
9934
|
}
|
|
9923
9935
|
|
|
9924
9936
|
.bui-Popover {
|
|
@@ -10252,6 +10264,81 @@
|
|
|
10252
10264
|
padding-top: var(--bui-space-4);
|
|
10253
10265
|
}
|
|
10254
10266
|
|
|
10267
|
+
.bui-TagList {
|
|
10268
|
+
gap: var(--bui-space-2);
|
|
10269
|
+
flex-wrap: wrap;
|
|
10270
|
+
display: flex;
|
|
10271
|
+
}
|
|
10272
|
+
|
|
10273
|
+
.bui-Tag {
|
|
10274
|
+
color: var(--bui-fg-primary);
|
|
10275
|
+
background-color: var(--bui-gray-2);
|
|
10276
|
+
border-radius: var(--bui-radius-2);
|
|
10277
|
+
font-weight: var(--bui-font-weight-regular);
|
|
10278
|
+
justify-content: center;
|
|
10279
|
+
align-items: center;
|
|
10280
|
+
gap: var(--bui-space-1);
|
|
10281
|
+
box-sizing: border-box;
|
|
10282
|
+
transition-property: background-color, box-shadow, color;
|
|
10283
|
+
transition-duration: .2s;
|
|
10284
|
+
transition-timing-function: ease-in-out;
|
|
10285
|
+
display: flex;
|
|
10286
|
+
}
|
|
10287
|
+
|
|
10288
|
+
.bui-Tag[data-size="small"] {
|
|
10289
|
+
height: 26px;
|
|
10290
|
+
padding: 0 var(--bui-space-2);
|
|
10291
|
+
font-size: var(--bui-font-size-1);
|
|
10292
|
+
}
|
|
10293
|
+
|
|
10294
|
+
.bui-Tag[data-size="medium"] {
|
|
10295
|
+
height: 32px;
|
|
10296
|
+
padding: 0 var(--bui-space-2);
|
|
10297
|
+
font-size: var(--bui-font-size-2);
|
|
10298
|
+
}
|
|
10299
|
+
|
|
10300
|
+
.bui-Tag[data-hovered] {
|
|
10301
|
+
background-color: var(--bui-gray-3);
|
|
10302
|
+
cursor: pointer;
|
|
10303
|
+
}
|
|
10304
|
+
|
|
10305
|
+
.bui-Tag[data-focus-visible] {
|
|
10306
|
+
outline: 2px solid var(--bui-ring);
|
|
10307
|
+
outline-offset: 1px;
|
|
10308
|
+
}
|
|
10309
|
+
|
|
10310
|
+
.bui-Tag[data-selected] {
|
|
10311
|
+
box-shadow: inset 0 0 0 1px var(--bui-gray-8);
|
|
10312
|
+
}
|
|
10313
|
+
|
|
10314
|
+
.bui-Tag[data-disabled] {
|
|
10315
|
+
color: var(--bui-fg-disabled);
|
|
10316
|
+
cursor: not-allowed;
|
|
10317
|
+
}
|
|
10318
|
+
|
|
10319
|
+
.bui-TagRemoveButton {
|
|
10320
|
+
cursor: pointer;
|
|
10321
|
+
color: var(--bui-fg-primary);
|
|
10322
|
+
background-color: #0000;
|
|
10323
|
+
border: none;
|
|
10324
|
+
width: 1rem;
|
|
10325
|
+
height: 1rem;
|
|
10326
|
+
margin: 0;
|
|
10327
|
+
padding: 0;
|
|
10328
|
+
}
|
|
10329
|
+
|
|
10330
|
+
.bui-TagIcon {
|
|
10331
|
+
justify-content: center;
|
|
10332
|
+
align-items: center;
|
|
10333
|
+
transition: color .2s ease-in-out;
|
|
10334
|
+
display: flex;
|
|
10335
|
+
|
|
10336
|
+
& svg {
|
|
10337
|
+
width: 1rem;
|
|
10338
|
+
height: 1rem;
|
|
10339
|
+
}
|
|
10340
|
+
}
|
|
10341
|
+
|
|
10255
10342
|
.bui-Text {
|
|
10256
10343
|
font-family: var(--bui-font-regular);
|
|
10257
10344
|
margin: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 { forwardRef, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { className, src, name, size = 'medium', ...rest } = props;\n const { classNames } = useStyles('Avatar', {\n size,\n });\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n data-size={size}\n {...rest}\n >\n <AvatarPrimitive.Image className={classNames.image} src={src} />\n <AvatarPrimitive.Fallback className={classNames.fallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,
|
|
1
|
+
{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 { forwardRef, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { className, src, name, size = 'medium', ...rest } = props;\n const { classNames } = useStyles('Avatar', {\n size,\n });\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n data-size={size}\n {...rest}\n >\n <AvatarPrimitive.Image className={classNames.image} src={src} />\n <AvatarPrimitive.Fallback className={classNames.fallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,OAAO,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAA,EAAU;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAW,UAAA,CAAW,OAAO,GAAA,EAAU,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAA,CAAW,QAAA,EAC5C,QAAA,EAAA,CAAA,IAAA,IAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EACf;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
|
|
@@ -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 { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { children } = props;\n\n const propDefs = {\n ...spacingPropDefs,\n ...widthPropDefs,\n ...heightPropDefs,\n ...positionPropDefs,\n ...displayPropDefs,\n ...boxPropDefs,\n };\n\n const { classNames } = useStyles('Box');\n const { className, style } = extractProps(props, propDefs);\n\n return createElement(props.as || 'div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAM,
|
|
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 { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { children } = props;\n\n const propDefs = {\n ...spacingPropDefs,\n ...widthPropDefs,\n ...heightPropDefs,\n ...positionPropDefs,\n ...displayPropDefs,\n ...boxPropDefs,\n };\n\n const { classNames } = useStyles('Box');\n const { className, style } = extractProps(props, propDefs);\n\n return createElement(props.as || 'div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,aAAA,CAAc,KAAA,CAAM,EAAA,IAAM,KAAA,EAAO;AAAA,IACtC,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"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 type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,
|
|
1
|
+
{"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"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 type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAA,GAAc;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAA,EAAQ,EAAA,EAAI,SAAS,KAAA;AAC3C;;;;"}
|
|
@@ -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 } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n return (\n <RAButton\n className={clsx(classNames.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,
|
|
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 } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n return (\n <RAButton\n className={clsx(classNames.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n icon,\n className,\n style,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n return (\n <RAButton\n className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n icon,\n className,\n style,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n return (\n <RAButton\n className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n return (\n <RALink\n className={clsx(classNames.root, classNamesButtonLink.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,
|
|
1
|
+
{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n return (\n <RALink\n className={clsx(classNames.root, classNamesButtonLink.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|