paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 39 Packages Projects Releases Wiki Activity

Merge branch 'backstage:master' into topic/add-badges-to-plugin-marketplace

Browse Source
This commit is contained in:
Andre Wanlin
2021-09-29 17:26:36 -05:00
committed by GitHub
parent 304cc1153d ced8c457c4
commit 1643e5e22b
118 changed files with 2583 additions and 1198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/calm-buckets-relax.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-azure-devops-backend': patch
---
Marked all configuration values as required in the schema.
.changeset/olive-lamps-deny.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-kubernetes': patch
---
Enhanced deployment accordion to display the namespace of the deployment.
.changeset/rotten-dryers-bathe.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-kubernetes': patch
---
Exported `KubernetesApi`, `kubernetesApiRef`, and `KubernetesAuthProvidersApi`.
.changeset/spicy-crabs-breathe.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-tech-radar': patch
---
Added documentation for exported symbols.
.changeset/spicy-pumas-mate.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/core-components': patch
---
Support `material-ui` overrides in Backstage internal components
.changeset/techdocs-sad-songs-waltzes.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/techdocs-common': patch
---
Locks the version of the default docker image used to generate TechDocs. As of
this changelog entry, it is v0.3.2!
app-config.yaml
+1 -1
View File
@@ -430,5 +430,5 @@ jenkins:
azureDevOps:
host: dev.azure.com
token: ${AZURE_TOKEN}
token: my-token
organization: my-company
docs/getting-started/app-custom-theme.md
+74 -3
View File
@@ -37,9 +37,7 @@ exported by [@backstage/theme](https://www.npmjs.com/package/@backstage/theme)
in combination with
[createTheme](https://material-ui.com/customization/theming/#createmuitheme-options-args-theme)
from [@material-ui/core](https://www.npmjs.com/package/@material-ui/core). See
the
[@backstage/theme source](https://github.com/backstage/backstage/tree/master/packages/theme/src)
and the implementation of the `createTheme` function for how this is done.
the "Overriding Backstage and Material UI css rules" section below.
You can also create a theme from scratch that matches the `BackstageTheme` type
exported by [@backstage/theme](https://www.npmjs.com/package/@backstage/theme).
@@ -136,6 +134,79 @@ const themeOptions = createThemeOptions({
});
```
## Overriding Backstage and Material UI components styles
When creating a custom theme you would be applying different values to
component's css rules that use the theme object. For example, a Backstage
component's styles might look like this:
```ts
const useStyles = makeStyles<BackstageTheme>(
theme => ({
header: {
padding: theme.spacing(3),
boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
backgroundImage: theme.page.backgroundImage,
},
}),
{ name: 'BackstageHeader' },
);
```
Notice how the `padding` is getting its value from `theme.spacing`, that means
that setting a value for spacing in your custom theme would affect this
component padding property and the same goes for `backgroundImage` which uses
`theme.page.backgroundImage`. However, the `boxShadow` property doesn't
reference any value from the theme, that means that creating a custom theme
wouldn't be enough to alter the `box-shadow` property or to add css rules that
aren't already defined like a margin. For these cases you should also create an
override.
```ts
import { createApp } from '@backstage/core-app-api';
import { BackstageTheme, lightTheme } from '@backstage/theme';
/**
* The `@backstage/core-components` package exposes this type that
* contains all Backstage and `material-ui` components that can be
* overridden along with the classes key those components use.
*/
import { BackstageOverrides } from '@backstage/core-components';
export const createCustomThemeOverrides = (
theme: BackstageTheme,
): BackstageOverrides => {
return {
BackstageHeader: {
header: {
width: 'auto',
margin: '20px',
boxShadow: 'none',
borderBottom: `4px solid ${theme.palette.primary.main}`,
},
},
};
};
const app = createApp({
apis: ...,
plugins: ...,
themes: [{
id: 'my-theme',
title: 'My Custom Theme',
variant: 'light',
theme: {
...lightTheme,
overrides: {
// These are the overrides that Backstage applies to `material-ui` components
...lightTheme.overrides,
// These are your custom overrides, either to `material-ui` or Backstage components.
...createCustomThemeOverrides(lightTheme),
},
},
}]
});
```
## Custom Logo
In addition to a custom theme, you can also customize the logo displayed at the
packages/core-components/api-report.md
+469 -1
View File
@@ -26,6 +26,7 @@ import { LinkProps as LinkProps_2 } from '@material-ui/core';
import { LinkProps as LinkProps_3 } from 'react-router-dom';
import { MaterialTableProps } from '@material-table/core';
import { NavLinkProps } from 'react-router-dom';
import { Overrides } from '@material-ui/core/styles/overrides';
import { ProfileInfoApi } from '@backstage/core-plugin-api';
import { PropsWithChildren } from 'react';
import PropTypes from 'prop-types';
@@ -39,6 +40,7 @@ import { SparklinesLineProps } from 'react-sparklines';
import { SparklinesProps } from 'react-sparklines';
import { StyledComponentProps } from '@material-ui/core';
import { StyleRules } from '@material-ui/styles';
import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles';
import { TabProps } from '@material-ui/core';
import { TextTruncateProps } from 'react-text-truncate';
import { Theme } from '@material-ui/core';
@@ -70,12 +72,66 @@ enum Alignment {
// @public (undocumented)
export function Avatar(props: AvatarProps): JSX.Element;
// Warning: (ae-missing-release-tag) "AvatarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type AvatarClassKey = 'avatar';
// Warning: (ae-missing-release-tag) "BackstageContentClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
// Warning: (ae-forgotten-export) The symbol "BackstageComponentsNameToClassKey" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "BackstageOverrides" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BackstageOverrides = Overrides & {
[Name in keyof BackstageComponentsNameToClassKey]?: Partial<
StyleRules_2<BackstageComponentsNameToClassKey[Name]>
>;
};
// Warning: (ae-missing-release-tag) "BoldHeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BoldHeaderClassKey = 'root' | 'title' | 'subheader';
// Warning: (ae-missing-release-tag) "BottomLink" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function BottomLink(props: BottomLinkProps): JSX.Element;
// Warning: (ae-missing-release-tag) "BottomLinkClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
// Warning: (ae-missing-release-tag) "BottomLinkProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BottomLinkProps = {
link: string;
title: string;
onClick?: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
};
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Breadcrumbs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function Breadcrumbs(props: Props_24): JSX.Element;
// Warning: (ae-missing-release-tag) "BreadcrumbsClickableTextClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BreadcrumbsClickableTextClassKey = 'root';
// Warning: (ae-missing-release-tag) "BreadcrumbsStyledBoxClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type BreadcrumbsStyledBoxClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "IconComponentProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "BrokenImageIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -88,12 +144,22 @@ export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
// @public (undocumented)
export function Button(props: Props): JSX.Element;
// Warning: (ae-missing-release-tag) "CardActionsTopRightClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type CardActionsTopRightClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "CardTabProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "CardTab" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function CardTab(props: PropsWithChildren<CardTabProps>): JSX.Element;
// Warning: (ae-missing-release-tag) "CardTabClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type CardTabClassKey = 'root' | 'selected';
// Warning: (ae-missing-release-tag) "CatalogIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -104,6 +170,11 @@ export function CatalogIcon(props: IconComponentProps): JSX.Element;
// @public (undocumented)
export function ChatIcon(props: IconComponentProps): JSX.Element;
// Warning: (ae-missing-release-tag) "ClosedDropdownClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ClosedDropdownClassKey = 'icon';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "CodeSnippet" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -124,6 +195,16 @@ export function ContentHeader(
props: PropsWithChildren<ContentHeaderProps>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "ContentHeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ContentHeaderClassKey =
| 'container'
| 'leftItemsBox'
| 'rightItemsBox'
| 'description'
| 'title';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
// Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -147,6 +228,11 @@ export namespace CopyTextButton {
// @public (undocumented)
export function CreateButton(props: CreateButtonProps): JSX.Element | null;
// Warning: (ae-missing-release-tag) "CustomProviderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type CustomProviderClassKey = 'form' | 'button';
// Warning: (ae-missing-release-tag) "DashboardIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -167,6 +253,26 @@ type DependencyEdge<T = CustomType> = T & {
// @public (undocumented)
export function DependencyGraph(props: DependencyGraphProps): JSX.Element;
// Warning: (ae-missing-release-tag) "DependencyGraphDefaultLabelClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type DependencyGraphDefaultLabelClassKey = 'text';
// Warning: (ae-missing-release-tag) "DependencyGraphDefaultNodeClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
// Warning: (ae-missing-release-tag) "DependencyGraphEdgeClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type DependencyGraphEdgeClassKey = 'path' | 'label';
// Warning: (ae-missing-release-tag) "DependencyGraphNodeClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type DependencyGraphNodeClassKey = 'node';
// Warning: (ae-missing-release-tag) "DependencyGraphProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -238,6 +344,18 @@ enum Direction {
// @public (undocumented)
export const DismissableBanner: (props: Props_4) => JSX.Element;
// Warning: (ae-missing-release-tag) "DismissbleBannerClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type DismissbleBannerClassKey =
| 'root'
| 'topPosition'
| 'icon'
| 'content'
| 'message'
| 'info'
| 'error';
// Warning: (ae-missing-release-tag) "DocsIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -268,6 +386,16 @@ export function EmailIcon(props: IconComponentProps): JSX.Element;
// @public (undocumented)
export function EmptyState(props: Props_5): JSX.Element;
// Warning: (ae-missing-release-tag) "EmptyStateClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
// Warning: (ae-missing-release-tag) "EmptyStateImageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type EmptyStateImageClassKey = 'generalImg';
// Warning: (ae-forgotten-export) The symbol "State" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "ErrorBoundary" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -288,6 +416,11 @@ export type ErrorBoundaryProps = {
// @public (undocumented)
export function ErrorPage(props: IErrorPageProps): JSX.Element;
// Warning: (ae-missing-release-tag) "ErrorPageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
// Warning: (ae-missing-release-tag) "ErrorPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
@@ -295,6 +428,11 @@ export function ErrorPanel(
props: PropsWithChildren<ErrorPanelProps>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "ErrorPanelClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ErrorPanelClassKey = 'text' | 'divider';
// Warning: (ae-missing-release-tag) "ErrorPanelProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -304,6 +442,18 @@ export type ErrorPanelProps = {
title?: string;
};
// Warning: (ae-missing-release-tag) "FeatureCalloutCircleClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type FeatureCalloutCircleClassKey =
| '@keyframes pulsateSlightly'
| '@keyframes pulsateAndFade'
| 'featureWrapper'
| 'backdrop'
| 'dot'
| 'pulseCircle'
| 'text';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "FeatureCalloutCircular" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -312,6 +462,11 @@ export function FeatureCalloutCircular(
props: PropsWithChildren<Props_7>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "FiltersContainerClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type FiltersContainerClassKey = 'root' | 'title';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Gauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -324,6 +479,16 @@ export function Gauge(props: Props_14): JSX.Element;
// @public (undocumented)
export function GaugeCard(props: Props_13): JSX.Element;
// Warning: (ae-missing-release-tag) "GaugeCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type GaugeCardClassKey = 'root';
// Warning: (ae-missing-release-tag) "GaugeClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
// Warning: (ae-missing-release-tag) "GitHubIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -352,24 +517,57 @@ export function GroupIcon(props: IconComponentProps): JSX.Element;
// @public (undocumented)
export function Header(props: PropsWithChildren<Props_18>): JSX.Element;
// Warning: (ae-missing-release-tag) "HeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type HeaderClassKey =
| 'header'
| 'leftItemsBox'
| 'rightItemsBox'
| 'title'
| 'subtitle'
| 'type'
| 'breadcrumb'
| 'breadcrumbType'
| 'breadcrumbTitle';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "HeaderIconLinkRow" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function HeaderIconLinkRow(props: Props_8): JSX.Element;
// Warning: (ae-missing-release-tag) "HeaderIconLinkRowClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type HeaderIconLinkRowClassKey = 'links';
// Warning: (ae-forgotten-export) The symbol "HeaderLabelProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "HeaderLabel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function HeaderLabel(props: HeaderLabelProps): JSX.Element;
// Warning: (ae-missing-release-tag) "HeaderLabelClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type HeaderLabelClassKey = 'root' | 'label' | 'value';
// Warning: (ae-forgotten-export) The symbol "HeaderTabsProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "HeaderTabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function HeaderTabs(props: HeaderTabsProps): JSX.Element;
// Warning: (ae-missing-release-tag) "HeaderTabsClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type HeaderTabsClassKey =
| 'tabsWrapper'
| 'defaultTab'
| 'selected'
| 'tabRoot';
// Warning: (ae-missing-release-tag) "HelpIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -388,6 +586,30 @@ export function HorizontalScrollGrid(
props: PropsWithChildren<Props_9>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "HorizontalScrollGridClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type HorizontalScrollGridClassKey =
| 'root'
| 'container'
| 'fade'
| 'fadeLeft'
| 'fadeRight'
| 'fadeHidden'
| 'button'
| 'buttonLeft'
| 'buttonRight';
// Warning: (ae-missing-release-tag) "IconLinkVerticalClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type IconLinkVerticalClassKey =
| 'link'
| 'disabled'
| 'primary'
| 'secondary'
| 'label';
// Warning: (ae-missing-release-tag) "IconLinkVerticalProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -407,6 +629,18 @@ export type IconLinkVerticalProps = {
// @public (undocumented)
export function InfoCard(props: Props_19): JSX.Element;
// Warning: (ae-missing-release-tag) "InfoCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type InfoCardClassKey =
| 'noPadding'
| 'header'
| 'headerTitle'
| 'headerSubheader'
| 'headerAvatar'
| 'headerAction'
| 'headerContent';
// Warning: (ae-missing-release-tag) "InfoCardVariants" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -437,6 +671,11 @@ export function ItemCard(props: ItemCardProps): JSX.Element;
// @public
export function ItemCardGrid(props: ItemCardGridProps): JSX.Element;
// Warning: (ae-missing-release-tag) "ItemCardGridClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ItemCardGridClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "styles" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "ItemCardGridProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -456,6 +695,11 @@ export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
// @public
export function ItemCardHeader(props: ItemCardHeaderProps): JSX.Element;
// Warning: (ae-missing-release-tag) "ItemCardHeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ItemCardHeaderClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "styles" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "ItemCardHeaderProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -484,6 +728,11 @@ enum LabelPosition {
// @public (undocumented)
export function Lifecycle(props: Props_10): JSX.Element;
// Warning: (ae-missing-release-tag) "LifecycleClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type LifecycleClassKey = 'alpha' | 'beta';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "LinearGauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -503,35 +752,99 @@ export type LinkProps = LinkProps_2 &
component?: ElementType<any>;
};
// Warning: (ae-missing-release-tag) "LoginRequestListItemClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type LoginRequestListItemClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "MarkdownContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
export function MarkdownContent(props: Props_11): JSX.Element;
// Warning: (ae-missing-release-tag) "MarkdownContentClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MarkdownContentClassKey = 'markdown';
// Warning: (ae-missing-release-tag) "MetadataTableCellClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MetadataTableCellClassKey = 'root';
// Warning: (ae-missing-release-tag) "MetadataTableListClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MetadataTableListClassKey = 'root';
// Warning: (ae-missing-release-tag) "MetadataTableListItemClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MetadataTableListItemClassKey = 'root' | 'random';
// Warning: (ae-missing-release-tag) "MetadataTableTitleCellClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MetadataTableTitleCellClassKey = 'root';
// Warning: (ae-missing-release-tag) "MicDropClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MicDropClassKey = 'micDrop';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "MissingAnnotationEmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function MissingAnnotationEmptyState(props: Props_6): JSX.Element;
// Warning: (ae-missing-release-tag) "MissingAnnotationEmptyStateClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type MissingAnnotationEmptyStateClassKey = 'code';
// Warning: (ae-missing-release-tag) "OAuthRequestDialog" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function OAuthRequestDialog(_props: {}): JSX.Element;
// Warning: (ae-missing-release-tag) "OAuthRequestDialogClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type OAuthRequestDialogClassKey =
| 'dialog'
| 'title'
| 'contentList'
| 'actionButtons';
// Warning: (ae-missing-release-tag) "OpenedDropdownClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type OpenedDropdownClassKey = 'icon';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "OverflowTooltip" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function OverflowTooltip(props: Props_12): JSX.Element;
// Warning: (ae-missing-release-tag) "OverflowTooltipClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type OverflowTooltipClassKey = 'container';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Page" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function Page(props: PropsWithChildren<Props_20>): JSX.Element;
// Warning: (ae-missing-release-tag) "PageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type PageClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "PageWithHeaderProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "PageWithHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -588,6 +901,11 @@ type RenderNodeProps<T = CustomType> = {
// @public
export function ResponseErrorPanel(props: ErrorPanelProps): JSX.Element;
// Warning: (ae-missing-release-tag) "ResponseErrorPanelClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type ResponseErrorPanelClassKey = 'text' | 'divider';
// Warning: (ae-missing-release-tag) "RoutedTabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -599,6 +917,22 @@ export function RoutedTabs(props: { routes: SubRoute_2[] }): JSX.Element;
// @public (undocumented)
export function Select(props: SelectProps): JSX.Element;
// Warning: (ae-missing-release-tag) "SelectClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SelectClassKey =
| 'formControl'
| 'label'
| 'chips'
| 'chip'
| 'checkbox'
| 'root';
// Warning: (ae-missing-release-tag) "SelectInputBaseClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SelectInputBaseClassKey = 'root' | 'input';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -611,6 +945,11 @@ export function Sidebar(props: PropsWithChildren<Props_21>): JSX.Element;
export const SIDEBAR_INTRO_LOCAL_STORAGE =
'@backstage/core/sidebar-intro-dismissed';
// Warning: (ae-missing-release-tag) "SidebarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
// Warning: (ae-missing-release-tag) "sidebarConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -915,6 +1254,16 @@ export const SidebarDivider: React_2.ComponentType<
// @public (undocumented)
export function SidebarIntro(_props: {}): JSX.Element | null;
// Warning: (ae-missing-release-tag) "SidebarIntroClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SidebarIntroClassKey =
| 'introCard'
| 'introDismiss'
| 'introDismissLink'
| 'introDismissText'
| 'introDismissIcon';
// Warning: (ae-forgotten-export) The symbol "SidebarItemProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "SidebarItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -923,11 +1272,33 @@ export const SidebarItem: React_2.ForwardRefExoticComponent<
SidebarItemProps & React_2.RefAttributes<any>
>;
// Warning: (ae-missing-release-tag) "SidebarItemClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SidebarItemClassKey =
| 'root'
| 'buttonItem'
| 'closed'
| 'open'
| 'label'
| 'iconContainer'
| 'searchRoot'
| 'searchField'
| 'searchFieldHTMLInput'
| 'searchContainer'
| 'secondaryAction'
| 'selected';
// Warning: (ae-missing-release-tag) "SidebarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function SidebarPage(props: PropsWithChildren<{}>): JSX.Element;
// Warning: (ae-missing-release-tag) "SidebarPageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SidebarPageClassKey = 'root';
// Warning: (ae-missing-release-tag) "SidebarPinStateContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1760,6 +2131,11 @@ export const SidebarSpacer: React_2.ComponentType<
// @public (undocumented)
export function SignInPage(props: Props_22): JSX.Element;
// Warning: (ae-missing-release-tag) "SignInPageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SignInPageClassKey = 'container' | 'item';
// Warning: (ae-missing-release-tag) "SignInProviderConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1778,6 +2154,11 @@ export function SimpleStepper(
props: PropsWithChildren<StepperProps>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "SimpleStepperFooterClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SimpleStepperFooterClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "StepProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "SimpleStepperStep" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -1786,11 +2167,28 @@ export function SimpleStepperStep(
props: PropsWithChildren<StepProps>,
): JSX.Element;
// Warning: (ae-missing-release-tag) "SimpleStepperStepClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SimpleStepperStepClassKey = 'end';
// Warning: (ae-missing-release-tag) "StatusAborted" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function StatusAborted(props: PropsWithChildren<{}>): JSX.Element;
// Warning: (ae-missing-release-tag) "StatusClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type StatusClassKey =
| 'status'
| 'ok'
| 'warning'
| 'error'
| 'pending'
| 'running'
| 'aborted';
// Warning: (ae-missing-release-tag) "StatusError" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1822,18 +2220,38 @@ export function StatusWarning(props: PropsWithChildren<{}>): JSX.Element;
// @public (undocumented)
export function StructuredMetadataTable(props: Props_16): JSX.Element;
// Warning: (ae-missing-release-tag) "StructuredMetadataTableListClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type StructuredMetadataTableListClassKey = 'root';
// Warning: (ae-missing-release-tag) "StructuredMetadataTableNestedListClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type StructuredMetadataTableNestedListClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "SubvalueCellProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "SubvalueCell" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function SubvalueCell(props: SubvalueCellProps): JSX.Element;
// Warning: (ae-missing-release-tag) "SubvalueCellClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SubvalueCellClassKey = 'value' | 'subvalue';
// Warning: (ae-forgotten-export) The symbol "SupportButtonProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "SupportButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function SupportButton(props: SupportButtonProps): JSX.Element;
// Warning: (ae-missing-release-tag) "SupportButtonClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type SupportButtonClassKey = 'popoverList';
// Warning: (ae-missing-release-tag) "SupportConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1873,12 +2291,22 @@ export type Tab = {
>;
};
// Warning: (ae-missing-release-tag) "TabBarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root';
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "TabbedCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function TabbedCard(props: PropsWithChildren<Props_23>): JSX.Element;
// Warning: (ae-missing-release-tag) "TabbedCardClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TabbedCardClassKey = 'root' | 'indicator';
// Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
// Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -1893,11 +2321,21 @@ export namespace TabbedLayout {
Route: (props: SubRoute) => null;
}
// Warning: (ae-missing-release-tag) "TabIconClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TabIconClassKey = 'root';
// Warning: (ae-missing-release-tag) "Table" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function Table<T extends object = {}>(props: TableProps<T>): JSX.Element;
// Warning: (ae-missing-release-tag) "TableClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TableClassKey = 'root';
// Warning: (ae-missing-release-tag) "TableColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1916,6 +2354,16 @@ export type TableFilter = {
type: 'select' | 'multiple-select';
};
// Warning: (ae-missing-release-tag) "TableFiltersClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
// Warning: (ae-missing-release-tag) "TableHeaderClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TableHeaderClassKey = 'header';
// Warning: (ae-missing-release-tag) "TableProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -1944,12 +2392,22 @@ export type TableState = {
filters?: SelectedFilters;
};
// Warning: (ae-missing-release-tag) "TableToolbarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TableToolbarClassKey = 'root' | 'title' | 'searchField';
// Warning: (ae-forgotten-export) The symbol "TabsProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Tabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export function Tabs(props: TabsProps): JSX.Element;
// Warning: (ae-missing-release-tag) "TabsClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type TabsClassKey = 'root' | 'styledTabs' | 'appbar';
// Warning: (ae-missing-release-tag) "TrendLine" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
@@ -2002,9 +2460,19 @@ export function WarningIcon(props: IconComponentProps): JSX.Element;
// @public
export function WarningPanel(props: WarningProps): JSX.Element;
// Warning: (ae-missing-release-tag) "WarningPanelClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type WarningPanelClassKey =
| 'panel'
| 'summary'
| 'summaryText'
| 'message'
| 'details';
// Warnings were encountered during analysis:
//
// src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute" needs to be exported by the entry point index.d.ts
// src/components/Table/Table.d.ts:15:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts
// src/components/Table/Table.d.ts:19:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts
// src/layout/ErrorBoundary/ErrorBoundary.d.ts:7:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts
```
packages/core-components/src/components/Avatar/Avatar.tsx
+15 -11
View File
@@ -22,17 +22,21 @@ import {
} from '@material-ui/core';
import { extractInitials, stringToColor } from './utils';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
avatar: {
width: '4rem',
height: '4rem',
color: '#fff',
fontWeight: theme.typography.fontWeightBold,
letterSpacing: '1px',
textTransform: 'uppercase',
},
}),
export type AvatarClassKey = 'avatar';
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({
avatar: {
width: '4rem',
height: '4rem',
color: '#fff',
fontWeight: theme.typography.fontWeightBold,
letterSpacing: '1px',
textTransform: 'uppercase',
},
}),
{ name: 'BackstageAvatar' },
);
export type AvatarProps = {
packages/core-components/src/components/Avatar/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { Avatar } from './Avatar';
export type { AvatarClassKey } from './Avatar';
packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx
+10 -5
View File
@@ -19,11 +19,16 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
import { BackstageTheme } from '@backstage/theme';
import { RenderLabelProps } from './types';
const useStyles = makeStyles((theme: BackstageTheme) => ({
text: {
fill: theme.palette.textContrast,
},
}));
export type DependencyGraphDefaultLabelClassKey = 'text';
const useStyles = makeStyles(
(theme: BackstageTheme) => ({
text: {
fill: theme.palette.textContrast,
},
}),
{ name: 'BackstageDependencyGraphDefaultLabel' },
);
export function DefaultLabel({ edge: { label } }: RenderLabelProps) {
const classes = useStyles();
packages/core-components/src/components/DependencyGraph/DefaultNode.tsx
+14 -9
View File
@@ -19,15 +19,20 @@ import { makeStyles } from '@material-ui/core/styles';
import { BackstageTheme } from '@backstage/theme';
import { RenderNodeProps } from './types';
const useStyles = makeStyles((theme: BackstageTheme) => ({
node: {
fill: theme.palette.primary.light,
stroke: theme.palette.primary.light,
},
text: {
fill: theme.palette.primary.contrastText,
},
}));
export type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
const useStyles = makeStyles(
(theme: BackstageTheme) => ({
node: {
fill: theme.palette.primary.light,
stroke: theme.palette.primary.light,
},
text: {
fill: theme.palette.primary.contrastText,
},
}),
{ name: 'BackstageDependencyGraphDefaultNode' },
);
export function DefaultNode({ node: { id } }: RenderNodeProps) {
const classes = useStyles();
packages/core-components/src/components/DependencyGraph/Edge.tsx
+16 -11
View File
@@ -28,17 +28,22 @@ import {
import { ARROW_MARKER_ID, EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
import { DefaultLabel } from './DefaultLabel';
const useStyles = makeStyles((theme: BackstageTheme) => ({
path: {
strokeWidth: 2,
stroke: theme.palette.textSubtle,
fill: 'none',
transition: `${theme.transitions.duration.shortest}ms`,
},
label: {
transition: `${theme.transitions.duration.shortest}ms`,
},
}));
export type DependencyGraphEdgeClassKey = 'path' | 'label';
const useStyles = makeStyles(
(theme: BackstageTheme) => ({
path: {
strokeWidth: 2,
stroke: theme.palette.textSubtle,
fill: 'none',
transition: `${theme.transitions.duration.shortest}ms`,
},
label: {
transition: `${theme.transitions.duration.shortest}ms`,
},
}),
{ name: 'BackstageDependencyGraphEdge' },
);
type EdgePoint = dagre.GraphEdge['points'][0];
packages/core-components/src/components/DependencyGraph/Node.tsx
+10 -5
View File
@@ -20,11 +20,16 @@ import { DefaultNode } from './DefaultNode';
import { RenderNodeFunction, RenderNodeProps, GraphNode } from './types';
import { NODE_TEST_ID } from './constants';
const useStyles = makeStyles(theme => ({
node: {
transition: `${theme.transitions.duration.shortest}ms`,
},
}));
export type DependencyGraphNodeClassKey = 'node';
const useStyles = makeStyles(
theme => ({
node: {
transition: `${theme.transitions.duration.shortest}ms`,
},
}),
{ name: 'BackstageDependencyGraphNode' },
);
export type NodeComponentProps<T = any> = {
node: GraphNode<T>;
packages/core-components/src/components/DependencyGraph/index.ts
+5
View File
@@ -19,3 +19,8 @@ import * as DependencyGraphTypes from './types';
export { DependencyGraph } from './DependencyGraph';
export type { DependencyGraphProps } from './DependencyGraph';
export { DependencyGraphTypes };
export type { DependencyGraphDefaultLabelClassKey } from './DefaultLabel';
export type { DependencyGraphDefaultNodeClassKey } from './DefaultNode';
export type { DependencyGraphEdgeClassKey } from './Edge';
export type { DependencyGraphNodeClassKey } from './Node';
packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx
+48 -36
View File
@@ -25,43 +25,55 @@ import SnackbarContent from '@material-ui/core/SnackbarContent';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
const useStyles = makeStyles((theme: BackstageTheme) => ({
root: {
padding: theme.spacing(0),
marginBottom: theme.spacing(0),
marginTop: theme.spacing(0),
display: 'flex',
flexFlow: 'row nowrap',
},
// showing on top
topPosition: {
position: 'relative',
marginBottom: theme.spacing(6),
marginTop: -theme.spacing(3),
zIndex: 'unset',
},
icon: {
fontSize: 20,
},
content: {
width: '100%',
maxWidth: 'inherit',
},
message: {
display: 'flex',
alignItems: 'center',
color: theme.palette.banner.text,
'& a': {
color: theme.palette.banner.link,
export type DismissbleBannerClassKey =
| 'root'
| 'topPosition'
| 'icon'
| 'content'
| 'message'
| 'info'
| 'error';
const useStyles = makeStyles(
(theme: BackstageTheme) => ({
root: {
padding: theme.spacing(0),
marginBottom: theme.spacing(0),
marginTop: theme.spacing(0),
display: 'flex',
flexFlow: 'row nowrap',
},
},
info: {
backgroundColor: theme.palette.banner.info,
},
error: {
backgroundColor: theme.palette.banner.error,
},
}));
// showing on top
topPosition: {
position: 'relative',
marginBottom: theme.spacing(6),
marginTop: -theme.spacing(3),
zIndex: 'unset',
},
icon: {
fontSize: 20,
},
content: {
width: '100%',
maxWidth: 'inherit',
},
message: {
display: 'flex',
alignItems: 'center',
color: theme.palette.banner.text,
'& a': {
color: theme.palette.banner.link,
},
},
info: {
backgroundColor: theme.palette.banner.info,
},
error: {
backgroundColor: theme.palette.banner.error,
},
}),
{ name: 'BackstageDismissableBanner' },
);
type Props = {
variant: 'info' | 'error';
packages/core-components/src/components/DismissableBanner/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { DismissableBanner } from './DismissableBanner';
export type { DismissbleBannerClassKey } from './DismissableBanner';
packages/core-components/src/components/EmptyState/EmptyState.tsx
+17 -12
View File
@@ -18,18 +18,23 @@ import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';
import { EmptyStateImage } from './EmptyStateImage';
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.background.default,
padding: theme.spacing(2, 0, 0, 0),
},
action: {
marginTop: theme.spacing(2),
},
imageContainer: {
position: 'relative',
},
}));
export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
const useStyles = makeStyles(
theme => ({
root: {
backgroundColor: theme.palette.background.default,
padding: theme.spacing(2, 0, 0, 0),
},
action: {
marginTop: theme.spacing(2),
},
imageContainer: {
position: 'relative',
},
}),
{ name: 'BackstageEmptyState' },
);
type Props = {
title: string;
packages/core-components/src/components/EmptyState/EmptyStateImage.tsx
+14 -9
View File
@@ -25,16 +25,21 @@ type Props = {
missing: 'field' | 'info' | 'content' | 'data';
};
const useStyles = makeStyles({
generalImg: {
width: '95%',
zIndex: 2,
position: 'relative',
left: '50%',
top: '50%',
transform: 'translate(-50%, 15%)',
export type EmptyStateImageClassKey = 'generalImg';
const useStyles = makeStyles(
{
generalImg: {
width: '95%',
zIndex: 2,
position: 'relative',
left: '50%',
top: '50%',
transform: 'translate(-50%, 15%)',
},
},
});
{ name: 'BackstageEmptyStateImage' },
);
export const EmptyStateImage = ({ missing }: Props) => {
const classes = useStyles();
packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
+12 -7
View File
@@ -37,13 +37,18 @@ type Props = {
annotation: string;
};
const useStyles = makeStyles<BackstageTheme>(theme => ({
code: {
borderRadius: 6,
margin: `${theme.spacing(2)}px 0px`,
background: theme.palette.type === 'dark' ? '#444' : '#fff',
},
}));
export type MissingAnnotationEmptyStateClassKey = 'code';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
code: {
borderRadius: 6,
margin: `${theme.spacing(2)}px 0px`,
background: theme.palette.type === 'dark' ? '#444' : '#fff',
},
}),
{ name: 'BackstageMissingAnnotationEmptyState' },
);
export function MissingAnnotationEmptyState(props: Props) {
const { annotation } = props;
packages/core-components/src/components/EmptyState/index.ts
+3
View File
@@ -15,4 +15,7 @@
*/
export { EmptyState } from './EmptyState';
export type { EmptyStateClassKey } from './EmptyState';
export type { EmptyStateImageClassKey } from './EmptyStateImage';
export { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState';
export type { MissingAnnotationEmptyStateClassKey } from './MissingAnnotationEmptyState';
packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx
+16 -11
View File
@@ -19,17 +19,22 @@ import React, { PropsWithChildren } from 'react';
import { CopyTextButton } from '../CopyTextButton';
import { WarningPanel } from '../WarningPanel';
const useStyles = makeStyles(theme => ({
text: {
fontFamily: 'monospace',
whiteSpace: 'pre',
overflowX: 'auto',
marginRight: theme.spacing(2),
},
divider: {
margin: theme.spacing(2),
},
}));
export type ErrorPanelClassKey = 'text' | 'divider';
const useStyles = makeStyles(
theme => ({
text: {
fontFamily: 'monospace',
whiteSpace: 'pre',
overflowX: 'auto',
marginRight: theme.spacing(2),
},
divider: {
margin: theme.spacing(2),
},
}),
{ name: 'BackstageErrorPanel' },
);
type ErrorListProps = {
error: string;
packages/core-components/src/components/ErrorPanel/index.ts
+1 -1
View File
@@ -15,4 +15,4 @@
*/
export { ErrorPanel } from './ErrorPanel';
export type { ErrorPanelProps } from './ErrorPanel';
export type { ErrorPanelProps, ErrorPanelClassKey } from './ErrorPanel';
packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+60 -48
View File
@@ -27,55 +27,67 @@ import { createPortal } from 'react-dom';
import { usePortal } from './lib/usePortal';
import { useShowCallout } from './lib/useShowCallout';
const useStyles = makeStyles({
'@keyframes pulsateSlightly': {
'0%': { transform: 'scale(1.0)' },
'100%': { transform: 'scale(1.1)' },
export type FeatureCalloutCircleClassKey =
| '@keyframes pulsateSlightly'
| '@keyframes pulsateAndFade'
| 'featureWrapper'
| 'backdrop'
| 'dot'
| 'pulseCircle'
| 'text';
const useStyles = makeStyles(
{
'@keyframes pulsateSlightly': {
'0%': { transform: 'scale(1.0)' },
'100%': { transform: 'scale(1.1)' },
},
'@keyframes pulsateAndFade': {
'0%': { transform: 'scale(1.0)', opacity: 0.9 },
'100%': { transform: 'scale(1.5)', opacity: 0 },
},
featureWrapper: {
position: 'relative',
},
backdrop: {
zIndex: 2000,
position: 'fixed',
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
dot: {
position: 'absolute',
backgroundColor: 'transparent',
borderRadius: '100%',
border: '1px solid rgba(103, 146, 180, 0.98)',
boxShadow: '0px 0px 0px 20000px rgba(0, 0, 0, 0.5)',
zIndex: 2001,
transformOrigin: 'center center',
animation:
'$pulsateSlightly 1744ms 1.2s cubic-bezier(0.4, 0, 0.2, 1) alternate infinite',
},
pulseCircle: {
width: '100%',
height: '100%',
backgroundColor: 'transparent',
borderRadius: '100%',
border: '2px solid white',
zIndex: 2001,
transformOrigin: 'center center',
animation:
'$pulsateAndFade 872ms 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite',
},
text: {
position: 'absolute',
color: 'white',
zIndex: 2003,
},
},
'@keyframes pulsateAndFade': {
'0%': { transform: 'scale(1.0)', opacity: 0.9 },
'100%': { transform: 'scale(1.5)', opacity: 0 },
},
featureWrapper: {
position: 'relative',
},
backdrop: {
zIndex: 2000,
position: 'fixed',
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
dot: {
position: 'absolute',
backgroundColor: 'transparent',
borderRadius: '100%',
border: '1px solid rgba(103, 146, 180, 0.98)',
boxShadow: '0px 0px 0px 20000px rgba(0, 0, 0, 0.5)',
zIndex: 2001,
transformOrigin: 'center center',
animation:
'$pulsateSlightly 1744ms 1.2s cubic-bezier(0.4, 0, 0.2, 1) alternate infinite',
},
pulseCircle: {
width: '100%',
height: '100%',
backgroundColor: 'transparent',
borderRadius: '100%',
border: '2px solid white',
zIndex: 2001,
transformOrigin: 'center center',
animation:
'$pulsateAndFade 872ms 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite',
},
text: {
position: 'absolute',
color: 'white',
zIndex: 2003,
},
});
{ name: 'BackstageFeatureCalloutCircular' },
);
export type Props = {
featureId: string;
packages/core-components/src/components/FeatureDiscovery/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { FeatureCalloutCircular } from './FeatureCalloutCircular';
export type { FeatureCalloutCircleClassKey } from './FeatureCalloutCircular';
packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
+14 -9
View File
@@ -17,15 +17,20 @@ import React from 'react';
import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
links: {
margin: theme.spacing(2, 0),
display: 'grid',
gridAutoFlow: 'column',
gridAutoColumns: 'min-content',
gridGap: theme.spacing(3),
},
}));
export type HeaderIconLinkRowClassKey = 'links';
const useStyles = makeStyles(
theme => ({
links: {
margin: theme.spacing(2, 0),
display: 'grid',
gridAutoFlow: 'column',
gridAutoColumns: 'min-content',
gridGap: theme.spacing(3),
},
}),
{ name: 'BackstageHeaderIconLinkRow' },
);
type Props = {
links: IconLinkVerticalProps[];
packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
+34 -24
View File
@@ -29,30 +29,40 @@ export type IconLinkVerticalProps = {
title?: string;
};
const useIconStyles = makeStyles(theme => ({
link: {
display: 'grid',
justifyItems: 'center',
gridGap: 4,
textAlign: 'center',
},
disabled: {
color: 'gray',
cursor: 'default',
},
primary: {
color: theme.palette.primary.main,
},
secondary: {
color: theme.palette.secondary.main,
},
label: {
fontSize: '0.7rem',
textTransform: 'uppercase',
fontWeight: 600,
letterSpacing: 1.2,
},
}));
export type IconLinkVerticalClassKey =
| 'link'
| 'disabled'
| 'primary'
| 'secondary'
| 'label';
const useIconStyles = makeStyles(
theme => ({
link: {
display: 'grid',
justifyItems: 'center',
gridGap: 4,
textAlign: 'center',
},
disabled: {
color: 'gray',
cursor: 'default',
},
primary: {
color: theme.palette.primary.main,
},
secondary: {
color: theme.palette.secondary.main,
},
label: {
fontSize: '0.7rem',
textTransform: 'uppercase',
fontWeight: 600,
letterSpacing: 1.2,
},
}),
{ name: 'BackstageIconLinkVertical' },
);
export function IconLinkVertical({
color = 'primary',
packages/core-components/src/components/HeaderIconLinkRow/index.ts
+5 -2
View File
@@ -15,5 +15,8 @@
*/
export { HeaderIconLinkRow } from './HeaderIconLinkRow';
export type { IconLinkVerticalProps } from './IconLinkVertical';
export type { HeaderIconLinkRowClassKey } from './HeaderIconLinkRow';
export type {
IconLinkVerticalProps,
IconLinkVerticalClassKey,
} from './IconLinkVertical';
packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+59 -45
View File
@@ -54,52 +54,66 @@ type Props = {
minScrollDistance?: number; // limits how small steps the scroll can take in px
};
const useStyles = makeStyles<Theme>(theme => ({
root: {
position: 'relative',
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
},
container: {
overflow: 'auto',
scrollbarWidth: 0 as any, // hide in FF
'&::-webkit-scrollbar': {
display: 'none', // hide in Chrome
export type HorizontalScrollGridClassKey =
| 'root'
| 'container'
| 'fade'
| 'fadeLeft'
| 'fadeRight'
| 'fadeHidden'
| 'button'
| 'buttonLeft'
| 'buttonRight';
const useStyles = makeStyles<Theme>(
theme => ({
root: {
position: 'relative',
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
},
},
fade: {
position: 'absolute',
width: fadeSize,
height: `calc(100% + ${fadePadding}px)`,
transition: 'opacity 300ms',
pointerEvents: 'none',
},
fadeLeft: {
left: -fadePadding,
background: `linear-gradient(90deg, ${generateGradientStops(
theme.palette.type,
)})`,
},
fadeRight: {
right: -fadePadding,
background: `linear-gradient(270deg, ${generateGradientStops(
theme.palette.type,
)})`,
},
fadeHidden: {
opacity: 0,
},
button: {
position: 'absolute',
},
buttonLeft: {
left: -theme.spacing(2),
},
buttonRight: {
right: -theme.spacing(2),
},
}));
container: {
overflow: 'auto',
scrollbarWidth: 0 as any, // hide in FF
'&::-webkit-scrollbar': {
display: 'none', // hide in Chrome
},
},
fade: {
position: 'absolute',
width: fadeSize,
height: `calc(100% + ${fadePadding}px)`,
transition: 'opacity 300ms',
pointerEvents: 'none',
},
fadeLeft: {
left: -fadePadding,
background: `linear-gradient(90deg, ${generateGradientStops(
theme.palette.type,
)})`,
},
fadeRight: {
right: -fadePadding,
background: `linear-gradient(270deg, ${generateGradientStops(
theme.palette.type,
)})`,
},
fadeHidden: {
opacity: 0,
},
button: {
position: 'absolute',
},
buttonLeft: {
left: -theme.spacing(2),
},
buttonRight: {
right: -theme.spacing(2),
},
}),
{ name: 'BackstageHorizontalScrollGrid' },
);
// Returns scroll distance from left and right
function useScrollDistance(
packages/core-components/src/components/HorizontalScrollGrid/index.tsx
+1
View File
@@ -15,3 +15,4 @@
*/
export { HorizontalScrollGrid } from './HorizontalScrollGrid';
export type { HorizontalScrollGridClassKey } from './HorizontalScrollGrid';
packages/core-components/src/components/Lifecycle/Lifecycle.tsx
+18 -13
View File
@@ -23,20 +23,25 @@ type Props = CSS.Properties & {
alpha?: boolean;
};
const useStyles = makeStyles({
alpha: {
color: '#ffffff',
fontFamily: 'serif',
fontWeight: 'normal',
fontStyle: 'italic',
export type LifecycleClassKey = 'alpha' | 'beta';
const useStyles = makeStyles(
{
alpha: {
color: '#ffffff',
fontFamily: 'serif',
fontWeight: 'normal',
fontStyle: 'italic',
},
beta: {
color: '#4d65cc',
fontFamily: 'serif',
fontWeight: 'normal',
fontStyle: 'italic',
},
},
beta: {
color: '#4d65cc',
fontFamily: 'serif',
fontWeight: 'normal',
fontStyle: 'italic',
},
});
{ name: 'BackstageLifecycle' },
);
export function Lifecycle(props: Props) {
const classes = useStyles(props);
packages/core-components/src/components/Lifecycle/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { Lifecycle } from './Lifecycle';
export type { LifecycleClassKey } from './Lifecycle';
packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
+40 -35
View File
@@ -21,43 +21,48 @@ import React from 'react';
import { BackstageTheme } from '@backstage/theme';
import { CodeSnippet } from '../CodeSnippet';
const useStyles = makeStyles<BackstageTheme>(theme => ({
markdown: {
'& table': {
borderCollapse: 'collapse',
border: `1px solid ${theme.palette.border}`,
},
'& th, & td': {
border: `1px solid ${theme.palette.border}`,
padding: theme.spacing(1),
},
'& td': {
wordBreak: 'break-word',
overflow: 'hidden',
verticalAlign: 'middle',
lineHeight: '1',
margin: 0,
padding: theme.spacing(3, 2, 3, 2.5),
borderBottom: 0,
},
'& th': {
backgroundColor: theme.palette.background.paper,
},
'& tr': {
backgroundColor: theme.palette.background.paper,
},
'& tr:nth-child(odd)': {
backgroundColor: theme.palette.background.default,
},
export type MarkdownContentClassKey = 'markdown';
'& a': {
color: theme.palette.link,
const useStyles = makeStyles<BackstageTheme>(
theme => ({
markdown: {
'& table': {
borderCollapse: 'collapse',
border: `1px solid ${theme.palette.border}`,
},
'& th, & td': {
border: `1px solid ${theme.palette.border}`,
padding: theme.spacing(1),
},
'& td': {
wordBreak: 'break-word',
overflow: 'hidden',
verticalAlign: 'middle',
lineHeight: '1',
margin: 0,
padding: theme.spacing(3, 2, 3, 2.5),
borderBottom: 0,
},
'& th': {
backgroundColor: theme.palette.background.paper,
},
'& tr': {
backgroundColor: theme.palette.background.paper,
},
'& tr:nth-child(odd)': {
backgroundColor: theme.palette.background.default,
},
'& a': {
color: theme.palette.link,
},
'& img': {
maxWidth: '100%',
},
},
'& img': {
maxWidth: '100%',
},
},
}));
}),
{ name: 'BackstageMarkdownContent' },
);
type Props = {
content: string;
packages/core-components/src/components/MarkdownContent/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { MarkdownContent } from './MarkdownContent';
export type { MarkdownContentClassKey } from './MarkdownContent';
packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
+10 -5
View File
@@ -26,11 +26,16 @@ import {
import React, { useState } from 'react';
import { PendingAuthRequest } from '@backstage/core-plugin-api';
const useItemStyles = makeStyles<Theme>(theme => ({
root: {
paddingLeft: theme.spacing(3),
},
}));
export type LoginRequestListItemClassKey = 'root';
const useItemStyles = makeStyles<Theme>(
theme => ({
root: {
paddingLeft: theme.spacing(3),
},
}),
{ name: 'BackstageLoginRequestListItem' },
);
type RowProps = {
request: PendingAuthRequest;
packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
+23 -14
View File
@@ -29,20 +29,29 @@ import { useObservable } from 'react-use';
import LoginRequestListItem from './LoginRequestListItem';
import { useApi, oauthRequestApiRef } from '@backstage/core-plugin-api';
const useStyles = makeStyles<Theme>(theme => ({
dialog: {
paddingTop: theme.spacing(1),
},
title: {
minWidth: 0,
},
contentList: {
padding: 0,
},
actionButtons: {
padding: theme.spacing(2, 0),
},
}));
export type OAuthRequestDialogClassKey =
| 'dialog'
| 'title'
| 'contentList'
| 'actionButtons';
const useStyles = makeStyles<Theme>(
theme => ({
dialog: {
paddingTop: theme.spacing(1),
},
title: {
minWidth: 0,
},
contentList: {
padding: 0,
},
actionButtons: {
padding: theme.spacing(2, 0),
},
}),
{ name: 'OAuthRequestDialog' },
);
export function OAuthRequestDialog(_props: {}) {
const classes = useStyles();
packages/core-components/src/components/OAuthRequestDialog/index.ts
+2
View File
@@ -15,3 +15,5 @@
*/
export { OAuthRequestDialog } from './OAuthRequestDialog';
export type { OAuthRequestDialogClassKey } from './OAuthRequestDialog';
export type { LoginRequestListItemClassKey } from './LoginRequestListItem';
packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx
+9 -4
View File
@@ -26,11 +26,16 @@ type Props = {
placement?: TooltipProps['placement'];
};
const useStyles = makeStyles({
container: {
overflow: 'visible !important',
export type OverflowTooltipClassKey = 'container';
const useStyles = makeStyles(
{
container: {
overflow: 'visible !important',
},
},
});
{ name: 'BackstageOverflowTooltip' },
);
export function OverflowTooltip(props: Props) {
const [hover, setHover] = useState(false);
packages/core-components/src/components/OverflowTooltip/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { OverflowTooltip } from './OverflowTooltip';
export type { OverflowTooltipClassKey } from './OverflowTooltip';
packages/core-components/src/components/ProgressBars/Gauge.tsx
+25 -20
View File
@@ -19,26 +19,31 @@ import { BackstageTheme } from '@backstage/theme';
import { Circle } from 'rc-progress';
import React from 'react';
const useStyles = makeStyles<BackstageTheme>(theme => ({
root: {
position: 'relative',
lineHeight: 0,
},
overlay: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -60%)',
fontSize: 45,
fontWeight: 'bold',
color: theme.palette.textContrast,
},
circle: {
width: '80%',
transform: 'translate(10%, 0)',
},
colorUnknown: {},
}));
export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
root: {
position: 'relative',
lineHeight: 0,
},
overlay: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -60%)',
fontSize: 45,
fontWeight: 'bold',
color: theme.palette.textContrast,
},
circle: {
width: '80%',
transform: 'translate(10%, 0)',
},
colorUnknown: {},
}),
{ name: 'BackstageGauge' },
);
type Props = {
value: number;
packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+10 -5
View File
@@ -30,12 +30,17 @@ type Props = {
deepLink?: BottomLinkProps;
};
const useStyles = makeStyles({
root: {
height: '100%',
width: 250,
export type GaugeCardClassKey = 'root';
const useStyles = makeStyles(
{
root: {
height: '100%',
width: 250,
},
},
});
{ name: 'BackstageGaugeCard' },
);
export function GaugeCard(props: Props) {
const classes = useStyles(props);
packages/core-components/src/components/ProgressBars/index.ts
+2
View File
@@ -15,5 +15,7 @@
*/
export { GaugeCard } from './GaugeCard';
export type { GaugeCardClassKey } from './GaugeCard';
export { Gauge } from './Gauge';
export type { GaugeClassKey } from './Gauge';
export { LinearGauge } from './LinearGauge';
packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx
+16 -11
View File
@@ -21,17 +21,22 @@ import { CodeSnippet } from '../CodeSnippet';
import { CopyTextButton } from '../CopyTextButton';
import { ErrorPanel, ErrorPanelProps } from '../ErrorPanel';
const useStyles = makeStyles(theme => ({
text: {
fontFamily: 'monospace',
whiteSpace: 'pre',
overflowX: 'auto',
marginRight: theme.spacing(2),
},
divider: {
margin: theme.spacing(2),
},
}));
export type ResponseErrorPanelClassKey = 'text' | 'divider';
const useStyles = makeStyles(
theme => ({
text: {
fontFamily: 'monospace',
whiteSpace: 'pre',
overflowX: 'auto',
marginRight: theme.spacing(2),
},
divider: {
margin: theme.spacing(2),
},
}),
{ name: 'BackstageResponseErrorPanel' },
);
/**
* Renders a warning panel as the effect of a failed server request.
packages/core-components/src/components/ResponseErrorPanel/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { ResponseErrorPanel } from './ResponseErrorPanel';
export type { ResponseErrorPanelClassKey } from './ResponseErrorPanel';
packages/core-components/src/components/Select/Select.tsx
+61 -47
View File
@@ -34,59 +34,73 @@ import React, { useEffect, useState } from 'react';
import ClosedDropdown from './static/ClosedDropdown';
import OpenedDropdown from './static/OpenedDropdown';
const BootstrapInput = withStyles((theme: Theme) =>
createStyles({
root: {
'label + &': {
marginTop: theme.spacing(3),
export type SelectInputBaseClassKey = 'root' | 'input';
const BootstrapInput = withStyles(
(theme: Theme) =>
createStyles({
root: {
'label + &': {
marginTop: theme.spacing(3),
},
},
},
input: {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.background.paper,
border: '1px solid #ced4da',
fontSize: 16,
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
fontFamily: 'Helvetica Neue',
'&:focus': {
background: theme.palette.background.paper,
input: {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.background.paper,
border: '1px solid #ced4da',
fontSize: 16,
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
fontFamily: 'Helvetica Neue',
'&:focus': {
background: theme.palette.background.paper,
borderRadius: 4,
},
},
},
}),
}),
{ name: 'BackstageSelectInputBase' },
)(InputBase);
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: `${theme.spacing(1)} 0px`,
maxWidth: 300,
},
label: {
transform: 'initial',
fontWeight: 'bold',
fontSize: 14,
fontFamily: theme.typography.fontFamily,
color: theme.palette.text.primary,
'&.Mui-focused': {
color: theme.palette.text.primary,
export type SelectClassKey =
| 'formControl'
| 'label'
| 'chips'
| 'chip'
| 'checkbox'
| 'root';
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({
formControl: {
margin: `${theme.spacing(1)} 0px`,
maxWidth: 300,
},
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: 2,
},
checkbox: {},
root: {
display: 'flex',
flexDirection: 'column',
},
}),
label: {
transform: 'initial',
fontWeight: 'bold',
fontSize: 14,
fontFamily: theme.typography.fontFamily,
color: theme.palette.text.primary,
'&.Mui-focused': {
color: theme.palette.text.primary,
},
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: 2,
},
checkbox: {},
root: {
display: 'flex',
flexDirection: 'column',
},
}),
{ name: 'BackstageSelect' },
);
type Item = {
packages/core-components/src/components/Select/index.tsx
+3
View File
@@ -15,3 +15,6 @@
*/
export { SelectComponent as Select } from './Select';
export type { SelectClassKey, SelectInputBaseClassKey } from './Select';
export type { ClosedDropdownClassKey } from './static/ClosedDropdown';
export type { OpenedDropdownClassKey } from './static/OpenedDropdown';
packages/core-components/src/components/Select/static/ClosedDropdown.tsx
+12 -8
View File
@@ -16,14 +16,18 @@
import React from 'react';
import { SvgIcon, makeStyles, createStyles } from '@material-ui/core';
const useStyles = makeStyles(() =>
createStyles({
icon: {
position: 'absolute',
right: '4px',
pointerEvents: 'none',
},
}),
export type ClosedDropdownClassKey = 'icon';
const useStyles = makeStyles(
() =>
createStyles({
icon: {
position: 'absolute',
right: '4px',
pointerEvents: 'none',
},
}),
{ name: 'BackstageClosedDropdown' },
);
const ClosedDropdown = () => {
packages/core-components/src/components/Select/static/OpenedDropdown.tsx
+12 -8
View File
@@ -16,14 +16,18 @@
import React from 'react';
import { SvgIcon, makeStyles, createStyles } from '@material-ui/core';
const useStyles = makeStyles(() =>
createStyles({
icon: {
position: 'absolute',
right: '4px',
pointerEvents: 'none',
},
}),
export type OpenedDropdownClassKey = 'icon';
const useStyles = makeStyles(
() =>
createStyles({
icon: {
position: 'absolute',
right: '4px',
pointerEvents: 'none',
},
}),
{ name: 'BackstageOpenedDropdown' },
);
const OpenedDropdown = () => {
packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx
+12 -7
View File
@@ -18,14 +18,19 @@ import { Button, makeStyles } from '@material-ui/core';
import { StepActions } from './types';
import { VerticalStepperContext } from './SimpleStepper';
const useStyles = makeStyles(theme => ({
root: {
marginTop: theme.spacing(3),
'& button': {
marginRight: theme.spacing(1),
export type SimpleStepperFooterClassKey = 'root';
const useStyles = makeStyles(
theme => ({
root: {
marginTop: theme.spacing(3),
'& button': {
marginRight: theme.spacing(1),
},
},
},
}));
}),
{ name: 'BackstageSimpleStepperFooter' },
);
interface CommonBtnProps {
text?: string;
packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx
+10 -5
View File
@@ -24,11 +24,16 @@ import {
import { SimpleStepperFooter } from './SimpleStepperFooter';
import { StepProps } from './types';
const useStyles = makeStyles(theme => ({
end: {
padding: theme.spacing(3),
},
}));
export type SimpleStepperStepClassKey = 'end';
const useStyles = makeStyles(
theme => ({
end: {
padding: theme.spacing(3),
},
}),
{ name: 'SimpleStepperStep' },
);
export function SimpleStepperStep(props: PropsWithChildren<StepProps>) {
const { title, children, end, actions, ...muiProps } = props;
packages/core-components/src/components/SimpleStepper/index.ts
+2
View File
@@ -15,4 +15,6 @@
*/
export { SimpleStepper } from './SimpleStepper';
export type { SimpleStepperFooterClassKey } from './SimpleStepperFooter';
export { SimpleStepperStep } from './SimpleStepperStep';
export type { SimpleStepperStepClassKey } from './SimpleStepperStep';
packages/core-components/src/components/Status/Status.tsx
+48 -36
View File
@@ -19,49 +19,61 @@ import { BackstageTheme } from '@backstage/theme';
import classNames from 'classnames';
import React, { PropsWithChildren } from 'react';
const useStyles = makeStyles<BackstageTheme>(theme => ({
status: {
fontWeight: 500,
'&::before': {
width: '0.7em',
height: '0.7em',
display: 'inline-block',
marginRight: 8,
borderRadius: '50%',
content: '""',
export type StatusClassKey =
| 'status'
| 'ok'
| 'warning'
| 'error'
| 'pending'
| 'running'
| 'aborted';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
status: {
fontWeight: 500,
'&::before': {
width: '0.7em',
height: '0.7em',
display: 'inline-block',
marginRight: 8,
borderRadius: '50%',
content: '""',
},
},
},
ok: {
'&::before': {
backgroundColor: theme.palette.status.ok,
ok: {
'&::before': {
backgroundColor: theme.palette.status.ok,
},
},
},
warning: {
'&::before': {
backgroundColor: theme.palette.status.warning,
warning: {
'&::before': {
backgroundColor: theme.palette.status.warning,
},
},
},
error: {
'&::before': {
backgroundColor: theme.palette.status.error,
error: {
'&::before': {
backgroundColor: theme.palette.status.error,
},
},
},
pending: {
'&::before': {
backgroundColor: theme.palette.status.pending,
pending: {
'&::before': {
backgroundColor: theme.palette.status.pending,
},
},
},
running: {
'&::before': {
backgroundColor: theme.palette.status.running,
running: {
'&::before': {
backgroundColor: theme.palette.status.running,
},
},
},
aborted: {
'&::before': {
backgroundColor: theme.palette.status.aborted,
aborted: {
'&::before': {
backgroundColor: theme.palette.status.aborted,
},
},
},
}));
}),
{ name: 'BackstageStatus' },
);
export function StatusOK(props: PropsWithChildren<{}>) {
const classes = useStyles(props);
packages/core-components/src/components/Status/index.ts
+2
View File
@@ -22,3 +22,5 @@ export {
StatusRunning,
StatusWarning,
} from './Status';
export type { StatusClassKey } from './Status';
packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx
+24 -12
View File
@@ -26,6 +26,8 @@ import {
Theme,
} from '@material-ui/core';
export type MetadataTableTitleCellClassKey = 'root';
const tableTitleCellStyles = (theme: Theme) =>
createStyles({
root: {
@@ -37,6 +39,8 @@ const tableTitleCellStyles = (theme: Theme) =>
},
});
export type MetadataTableCellClassKey = 'root';
const tableContentCellStyles = {
root: {
border: '0',
@@ -44,6 +48,8 @@ const tableContentCellStyles = {
},
};
export type MetadataTableListClassKey = 'root';
const listStyles = (theme: Theme) =>
createStyles({
root: {
@@ -53,6 +59,8 @@ const listStyles = (theme: Theme) =>
},
});
export type MetadataTableListItemClassKey = 'root' | 'random';
const listItemStyles = (theme: Theme) =>
createStyles({
root: {
@@ -61,8 +69,12 @@ const listItemStyles = (theme: Theme) =>
random: {},
});
const TitleCell = withStyles(tableTitleCellStyles)(TableCell);
const ContentCell = withStyles(tableContentCellStyles)(TableCell);
const TitleCell = withStyles(tableTitleCellStyles, {
name: 'BackstageMetadataTableTitleCell',
})(TableCell);
const ContentCell = withStyles(tableContentCellStyles, {
name: 'BackstageMetadataTableCell',
})(TableCell);
export const MetadataTable = ({
dense,
@@ -96,14 +108,14 @@ interface StyleProps extends WithStyles {
children?: React.ReactNode;
}
export const MetadataList = withStyles(listStyles)(
({ classes, children }: StyleProps) => (
<ul className={classes.root}>{children}</ul>
),
);
export const MetadataList = withStyles(listStyles, {
name: 'BackstageMetadataTableList',
})(({ classes, children }: StyleProps) => (
<ul className={classes.root}>{children}</ul>
));
export const MetadataListItem = withStyles(listItemStyles)(
({ classes, children }: StyleProps) => (
<li className={classes.root}>{children}</li>
),
);
export const MetadataListItem = withStyles(listItemStyles, {
name: 'BackstageMetadataTableListItem',
})(({ classes, children }: StyleProps) => (
<li className={classes.root}>{children}</li>
));
packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
+14 -10
View File
@@ -25,6 +25,8 @@ import {
MetadataListItem,
} from './MetadataTable';
export type StructuredMetadataTableListClassKey = 'root';
const listStyle = createStyles({
root: {
margin: '0 0',
@@ -32,6 +34,8 @@ const listStyle = createStyles({
},
});
export type StructuredMetadataTableNestedListClassKey = 'root';
const nestedListStyle = (theme: Theme) =>
createStyles({
root: {
@@ -44,16 +48,16 @@ interface StyleProps extends WithStyles {
children?: React.ReactNode;
}
// Sub Components
const StyledList = withStyles(listStyle)(
({ classes, children }: StyleProps) => (
<MetadataList classes={classes}>{children}</MetadataList>
),
);
const StyledNestedList = withStyles(nestedListStyle)(
({ classes, children }: StyleProps) => (
<MetadataList classes={classes}>{children}</MetadataList>
),
);
const StyledList = withStyles(listStyle, {
name: 'BackstageStructuredMetadataTableList',
})(({ classes, children }: StyleProps) => (
<MetadataList classes={classes}>{children}</MetadataList>
));
const StyledNestedList = withStyles(nestedListStyle, {
name: 'BackstageStructuredMetadataTableNestedList',
})(({ classes, children }: StyleProps) => (
<MetadataList classes={classes}>{children}</MetadataList>
));
function renderList(list: Array<any>, nested?: boolean) {
const values = list.map((item: any, index: number) => (
packages/core-components/src/components/StructuredMetadataTable/index.tsx
+10
View File
@@ -14,4 +14,14 @@
* limitations under the License.
*/
export type {
MetadataTableCellClassKey,
MetadataTableTitleCellClassKey,
MetadataTableListClassKey,
MetadataTableListItemClassKey,
} from './MetadataTable';
export { StructuredMetadataTable } from './StructuredMetadataTable';
export type {
StructuredMetadataTableListClassKey,
StructuredMetadataTableNestedListClassKey,
} from './StructuredMetadataTable';
packages/core-components/src/components/SupportButton/SupportButton.tsx
+10 -5
View File
@@ -40,12 +40,17 @@ type SupportButtonProps = {
children?: React.ReactNode;
};
const useStyles = makeStyles({
popoverList: {
minWidth: 260,
maxWidth: 400,
export type SupportButtonClassKey = 'popoverList';
const useStyles = makeStyles(
{
popoverList: {
minWidth: 260,
maxWidth: 400,
},
},
});
{ name: 'BackstageSupportButton' },
);
const SupportIcon = ({ icon }: { icon: string | undefined }) => {
const app = useApp();
packages/core-components/src/components/SupportButton/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { SupportButton } from './SupportButton';
export type { SupportButtonClassKey } from './SupportButton';
packages/core-components/src/components/Table/Filters.tsx
+32 -27
View File
@@ -20,33 +20,38 @@ import { Button, makeStyles } from '@material-ui/core';
import { Select } from '../Select';
import { SelectProps } from '../Select/Select';
const useSubvalueCellStyles = makeStyles<BackstageTheme>(theme => ({
root: {
height: '100%',
width: '315px',
display: 'flex',
flexDirection: 'column',
marginRight: theme.spacing(3),
},
value: {
fontWeight: 'bold',
fontSize: 18,
},
header: {
display: 'flex',
alignItems: 'center',
height: '60px',
justifyContent: 'space-between',
borderBottom: `1px solid ${theme.palette.grey[500]}`,
},
filters: {
display: 'flex',
flexDirection: 'column',
'& > *': {
marginTop: theme.spacing(2),
export type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
const useFilterStyles = makeStyles<BackstageTheme>(
theme => ({
root: {
height: '100%',
width: '315px',
display: 'flex',
flexDirection: 'column',
marginRight: theme.spacing(3),
},
},
}));
value: {
fontWeight: 'bold',
fontSize: 18,
},
header: {
display: 'flex',
alignItems: 'center',
height: '60px',
justifyContent: 'space-between',
borderBottom: `1px solid ${theme.palette.grey[500]}`,
},
filters: {
display: 'flex',
flexDirection: 'column',
'& > *': {
marginTop: theme.spacing(2),
},
},
}),
{ name: 'BackstageTableFilters' },
);
export type Without<T, K> = Pick<T, Exclude<keyof T, K>>;
@@ -66,7 +71,7 @@ type Props = {
};
export const Filters = (props: Props) => {
const classes = useSubvalueCellStyles();
const classes = useFilterStyles();
const { onChangeFilters } = props;
packages/core-components/src/components/Table/SubvalueCell.tsx
+14 -9
View File
@@ -18,15 +18,20 @@ import React from 'react';
import { BackstageTheme } from '@backstage/theme';
import { makeStyles } from '@material-ui/core';
const useSubvalueCellStyles = makeStyles<BackstageTheme>(theme => ({
value: {
marginBottom: '6px',
},
subvalue: {
color: theme.palette.textSubtle,
fontWeight: 'normal',
},
}));
export type SubvalueCellClassKey = 'value' | 'subvalue';
const useSubvalueCellStyles = makeStyles<BackstageTheme>(
theme => ({
value: {
marginBottom: '6px',
},
subvalue: {
color: theme.palette.textSubtle,
fontWeight: 'normal',
},
}),
{ name: 'BackstageSubvalueCell' },
);
type SubvalueCellProps = {
value: React.ReactNode;
packages/core-components/src/components/Table/Table.tsx
+62 -42
View File
@@ -100,52 +100,72 @@ function extractValueByField(data: any, field: string): any | undefined {
return value;
}
const StyledMTableHeader = withStyles(theme => ({
header: {
padding: theme.spacing(1, 2, 1, 2.5),
borderTop: `1px solid ${theme.palette.grey.A100}`,
borderBottom: `1px solid ${theme.palette.grey.A100}`,
// withStyles hasn't a generic overload for theme
color: (theme as BackstageTheme).palette.textSubtle,
fontWeight: theme.typography.fontWeightBold,
position: 'static',
wordBreak: 'normal',
},
}))(MTableHeader);
export type TableHeaderClassKey = 'header';
const StyledMTableToolbar = withStyles(theme => ({
root: {
padding: theme.spacing(3, 0, 2.5, 2.5),
},
title: {
'& > h6': {
fontWeight: 'bold',
const StyledMTableHeader = withStyles(
theme => ({
header: {
padding: theme.spacing(1, 2, 1, 2.5),
borderTop: `1px solid ${theme.palette.grey.A100}`,
borderBottom: `1px solid ${theme.palette.grey.A100}`,
// withStyles hasn't a generic overload for theme
color: (theme as BackstageTheme).palette.textSubtle,
fontWeight: theme.typography.fontWeightBold,
position: 'static',
wordBreak: 'normal',
},
},
searchField: {
paddingRight: theme.spacing(2),
},
}))(MTableToolbar);
}),
{ name: 'BackstageTableHeader' },
)(MTableHeader);
const useFilterStyles = makeStyles<BackstageTheme>(() => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
title: {
fontWeight: 'bold',
fontSize: 18,
whiteSpace: 'nowrap',
},
}));
export type TableToolbarClassKey = 'root' | 'title' | 'searchField';
const useTableStyles = makeStyles<BackstageTheme>(() => ({
root: {
display: 'flex',
alignItems: 'start',
},
}));
const StyledMTableToolbar = withStyles(
theme => ({
root: {
padding: theme.spacing(3, 0, 2.5, 2.5),
},
title: {
'& > h6': {
fontWeight: 'bold',
},
},
searchField: {
paddingRight: theme.spacing(2),
},
}),
{ name: 'BackstageTableToolbar' },
)(MTableToolbar);
export type FiltersContainerClassKey = 'root' | 'title';
const useFilterStyles = makeStyles<BackstageTheme>(
() => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
title: {
fontWeight: 'bold',
fontSize: 18,
whiteSpace: 'nowrap',
},
}),
{ name: 'BackstageTableFiltersContainer' },
);
export type TableClassKey = 'root';
const useTableStyles = makeStyles<BackstageTheme>(
() => ({
root: {
display: 'flex',
alignItems: 'start',
},
}),
{ name: 'BackstageTable' },
);
function convertColumns<T extends object>(
columns: TableColumn<T>[],
packages/core-components/src/components/Table/index.ts
+12 -1
View File
@@ -14,6 +14,17 @@
* limitations under the License.
*/
export type { TableFiltersClassKey } from './Filters';
export { SubvalueCell } from './SubvalueCell';
export type { SubvalueCellClassKey } from './SubvalueCell';
export { Table } from './Table';
export type { TableColumn, TableFilter, TableProps, TableState } from './Table';
export type {
TableColumn,
TableFilter,
TableProps,
TableState,
TableClassKey,
FiltersContainerClassKey,
TableHeaderClassKey,
TableToolbarClassKey,
} from './Table';
packages/core-components/src/components/Tabs/TabBar.tsx
+20 -15
View File
@@ -24,22 +24,27 @@ interface StyledTabsProps {
onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
}
const useStyles = makeStyles<BackstageTheme>(theme => ({
indicator: {
display: 'flex',
justifyContent: 'center',
backgroundColor: theme.palette.tabbar.indicator,
height: '4px',
},
flexContainer: {
alignItems: 'center',
},
root: {
'&:last-child': {
marginLeft: 'auto',
export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
indicator: {
display: 'flex',
justifyContent: 'center',
backgroundColor: theme.palette.tabbar.indicator,
height: '4px',
},
},
}));
flexContainer: {
alignItems: 'center',
},
root: {
'&:last-child': {
marginLeft: 'auto',
},
},
}),
{ name: 'BackstageTabBar' },
);
export const StyledTabs = (props: PropsWithChildren<StyledTabsProps>) => {
const classes = useStyles(props);
packages/core-components/src/components/Tabs/TabIcon.tsx
+19 -14
View File
@@ -25,22 +25,27 @@ interface StyledIconProps {
onClick: any;
}
const useStyles = makeStyles<BackstageTheme, StyledIconProps>(() => ({
root: {
color: '#6E6E6E',
overflow: 'visible',
fontSize: '1.5rem',
textAlign: 'center',
borderRadius: '50%',
backgroundColor: '#E6E6E6',
marginLeft: props => (props.isNext ? 'auto' : '0'),
marginRight: props => (props.isNext ? '0' : '10px'),
'&:hover': {
export type TabIconClassKey = 'root';
const useStyles = makeStyles<BackstageTheme, StyledIconProps>(
() => ({
root: {
color: '#6E6E6E',
overflow: 'visible',
fontSize: '1.5rem',
textAlign: 'center',
borderRadius: '50%',
backgroundColor: '#E6E6E6',
opacity: '1',
marginLeft: props => (props.isNext ? 'auto' : '0'),
marginRight: props => (props.isNext ? '0' : '10px'),
'&:hover': {
backgroundColor: '#E6E6E6',
opacity: '1',
},
},
},
}));
}),
{ name: 'BackstageTabIcon' },
);
export const StyledIcon = (props: StyledIconProps) => {
const classes = useStyles(props);
packages/core-components/src/components/Tabs/Tabs.tsx
+20 -15
View File
@@ -42,21 +42,26 @@ export interface TabsProps {
tabs: TabProps[];
}
const useStyles = makeStyles<BackstageTheme>(theme => ({
root: {
flexGrow: 1,
width: '100%',
},
styledTabs: {
backgroundColor: theme.palette.background.paper,
},
appbar: {
boxShadow: 'none',
backgroundColor: theme.palette.background.paper,
paddingLeft: '10px',
paddingRight: '10px',
},
}));
export type TabsClassKey = 'root' | 'styledTabs' | 'appbar';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
root: {
flexGrow: 1,
width: '100%',
},
styledTabs: {
backgroundColor: theme.palette.background.paper,
},
appbar: {
boxShadow: 'none',
backgroundColor: theme.palette.background.paper,
paddingLeft: '10px',
paddingRight: '10px',
},
}),
{ name: 'BackstageTabs' },
);
export function Tabs(props: TabsProps) {
const { tabs } = props;
packages/core-components/src/components/Tabs/index.ts
+4
View File
@@ -15,3 +15,7 @@
*/
export { Tabs } from './Tabs';
export type { TabsClassKey } from './Tabs';
export type { TabBarClassKey } from './TabBar';
export type { TabIconClassKey } from './TabIcon';
packages/core-components/src/components/WarningPanel/WarningPanel.tsx
+60 -50
View File
@@ -64,56 +64,66 @@ const ExpandMoreIconStyled = ({ severity }: Pick<WarningProps, 'severity'>) => {
return <ExpandMoreIcon classes={classes} />;
};
const useStyles = makeStyles<BackstageTheme>(theme => ({
panel: {
backgroundColor: ({ severity }: WarningProps) =>
getWarningBackgroundColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
verticalAlign: 'middle',
},
summary: {
display: 'flex',
flexDirection: 'row',
},
summaryText: {
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
fontWeight: 'bold',
},
message: {
width: '100%',
display: 'block',
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
backgroundColor: ({ severity }: WarningProps) =>
getWarningBackgroundColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
},
details: {
width: '100%',
display: 'block',
color: theme.palette.textContrast,
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.border}`,
padding: theme.spacing(2.0),
fontFamily: 'sans-serif',
},
}));
export type WarningPanelClassKey =
| 'panel'
| 'summary'
| 'summaryText'
| 'message'
| 'details';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
panel: {
backgroundColor: ({ severity }: WarningProps) =>
getWarningBackgroundColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
verticalAlign: 'middle',
},
summary: {
display: 'flex',
flexDirection: 'row',
},
summaryText: {
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
fontWeight: 'bold',
},
message: {
width: '100%',
display: 'block',
color: ({ severity }: WarningProps) =>
getWarningTextColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
backgroundColor: ({ severity }: WarningProps) =>
getWarningBackgroundColor(
severity as NonNullable<WarningProps['severity']>,
theme,
),
},
details: {
width: '100%',
display: 'block',
color: theme.palette.textContrast,
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.border}`,
padding: theme.spacing(2.0),
fontFamily: 'sans-serif',
},
}),
{ name: 'BackstageWarningPanel' },
);
export type WarningProps = {
title?: string;
packages/core-components/src/components/WarningPanel/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { WarningPanel } from './WarningPanel';
export type { WarningPanelClassKey } from './WarningPanel';
packages/core-components/src/index.ts
+1
View File
@@ -24,3 +24,4 @@ export * from './components';
export * from './hooks';
export * from './icons';
export * from './layout';
export * from './overridableComponents';
packages/core-components/src/layout/BottomLink/BottomLink.tsx
+18 -13
View File
@@ -21,19 +21,24 @@ import { BackstageTheme } from '@backstage/theme';
import Box from '@material-ui/core/Box';
import { Link } from '../../components/Link';
const useStyles = makeStyles<BackstageTheme>(theme => ({
root: {
maxWidth: 'fit-content',
padding: theme.spacing(2, 2, 2, 2.5),
},
boxTitle: {
margin: 0,
color: theme.palette.textSubtle,
},
arrow: {
color: theme.palette.textSubtle,
},
}));
export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
root: {
maxWidth: 'fit-content',
padding: theme.spacing(2, 2, 2, 2.5),
},
boxTitle: {
margin: 0,
color: theme.palette.textSubtle,
},
arrow: {
color: theme.palette.textSubtle,
},
}),
{ name: 'BackstageBottomLink' },
);
export type BottomLinkProps = {
link: string;
packages/core-components/src/layout/BottomLink/index.ts
+1 -1
View File
@@ -15,4 +15,4 @@
*/
export { BottomLink } from './BottomLink';
export type { BottomLinkProps } from './BottomLink';
export type { BottomLinkClassKey, BottomLinkProps } from './BottomLink';
packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
+21 -11
View File
@@ -27,19 +27,29 @@ import React, { ComponentProps, Fragment } from 'react';
type Props = ComponentProps<typeof MaterialBreadcrumbs>;
const ClickableText = withStyles({
root: {
textDecoration: 'underline',
cursor: 'pointer',
},
})(Typography);
export type BreadcrumbsClickableTextClassKey = 'root';
const StyledBox = withStyles({
root: {
textDecoration: 'underline',
color: 'inherit',
const ClickableText = withStyles(
{
root: {
textDecoration: 'underline',
cursor: 'pointer',
},
},
})(Box);
{ name: 'BackstageBreadcrumbsClickableText' },
)(Typography);
export type BreadcrumbsStyledBoxClassKey = 'root';
const StyledBox = withStyles(
{
root: {
textDecoration: 'underline',
color: 'inherit',
},
},
{ name: 'BackstageBreadcrumbsStyledBox' },
)(Box);
export function Breadcrumbs(props: Props) {
const { children, ...restProps } = props;
packages/core-components/src/layout/Breadcrumbs/index.ts
+4
View File
@@ -15,3 +15,7 @@
*/
export { Breadcrumbs } from './Breadcrumbs';
export type {
BreadcrumbsClickableTextClassKey,
BreadcrumbsStyledBoxClassKey,
} from './Breadcrumbs';
packages/core-components/src/layout/Content/Content.tsx
+26 -21
View File
@@ -18,28 +18,33 @@ import React, { PropsWithChildren } from 'react';
import classNames from 'classnames';
import { Theme, makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) => ({
root: {
gridArea: 'pageContent',
minWidth: 0,
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
const useStyles = makeStyles(
(theme: Theme) => ({
root: {
gridArea: 'pageContent',
minWidth: 0,
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
},
},
},
stretch: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
},
noPadding: {
padding: 0,
},
}));
stretch: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
},
noPadding: {
padding: 0,
},
}),
{ name: 'BackstageContent' },
);
type Props = {
stretch?: boolean;
packages/core-components/src/layout/Content/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { Content } from './Content';
export type { BackstageContentClassKey } from './Content';
packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+42 -32
View File
@@ -22,39 +22,49 @@ import React, { PropsWithChildren, ReactNode } from 'react';
import { Typography, makeStyles } from '@material-ui/core';
import { Helmet } from 'react-helmet';
export type ContentHeaderClassKey =
| 'container'
| 'leftItemsBox'
| 'rightItemsBox'
| 'description'
| 'title';
const useStyles = (props: ContentHeaderProps) =>
makeStyles(theme => ({
container: {
width: '100%',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-end',
alignItems: 'center',
marginBottom: theme.spacing(2),
textAlign: props.textAlign,
},
leftItemsBox: {
flex: '1 1 auto',
minWidth: 0,
overflow: 'visible',
},
rightItemsBox: {
flex: '0 1 auto',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginLeft: theme.spacing(1),
minWidth: 0,
overflow: 'visible',
},
description: {},
title: {
display: 'inline-flex',
marginBottom: 0,
},
}));
makeStyles(
theme => ({
container: {
width: '100%',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-end',
alignItems: 'center',
marginBottom: theme.spacing(2),
textAlign: props.textAlign,
},
leftItemsBox: {
flex: '1 1 auto',
minWidth: 0,
overflow: 'visible',
},
rightItemsBox: {
flex: '0 1 auto',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginLeft: theme.spacing(1),
minWidth: 0,
overflow: 'visible',
},
description: {},
title: {
display: 'inline-flex',
marginBottom: 0,
},
}),
{ name: 'BackstageContentHeader' },
);
type ContentHeaderTitleProps = {
title?: string;
packages/core-components/src/layout/ContentHeader/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { ContentHeader } from './ContentHeader';
export type { ContentHeaderClassKey } from './ContentHeader';
packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+21 -16
View File
@@ -28,24 +28,29 @@ interface IErrorPageProps {
additionalInfo?: string;
}
const useStyles = makeStyles<BackstageTheme>(theme => ({
container: {
padding: theme.spacing(8),
[theme.breakpoints.down('xs')]: {
padding: theme.spacing(2),
export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
container: {
padding: theme.spacing(8),
[theme.breakpoints.down('xs')]: {
padding: theme.spacing(2),
},
},
},
title: {
paddingBottom: theme.spacing(5),
[theme.breakpoints.down('xs')]: {
paddingBottom: theme.spacing(4),
fontSize: 32,
title: {
paddingBottom: theme.spacing(5),
[theme.breakpoints.down('xs')]: {
paddingBottom: theme.spacing(4),
fontSize: 32,
},
},
},
subtitle: {
color: theme.palette.textSubtle,
},
}));
subtitle: {
color: theme.palette.textSubtle,
},
}),
{ name: 'BackstageErrorPage' },
);
export function ErrorPage(props: IErrorPageProps) {
const { status, statusMessage, additionalInfo } = props;
packages/core-components/src/layout/ErrorPage/MicDrop.tsx
+19 -14
View File
@@ -18,21 +18,26 @@ import React from 'react';
import { makeStyles } from '@material-ui/core';
import MicDropSvgUrl from './mic-drop.svg';
const useStyles = makeStyles(theme => ({
micDrop: {
maxWidth: '60%',
position: 'absolute',
bottom: theme.spacing(2),
right: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
maxWidth: '96%',
position: 'relative',
bottom: 'unset',
right: 'unset',
margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
const useStyles = makeStyles(
theme => ({
micDrop: {
maxWidth: '60%',
position: 'absolute',
bottom: theme.spacing(2),
right: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
maxWidth: '96%',
position: 'relative',
bottom: 'unset',
right: 'unset',
margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
},
},
},
}));
}),
{ name: 'BackstageErrorPageMicDrop' },
);
export type MicDropClassKey = 'micDrop';
export const MicDrop = () => {
const classes = useStyles();
packages/core-components/src/layout/ErrorPage/index.ts
+2
View File
@@ -15,3 +15,5 @@
*/
export { ErrorPage } from './ErrorPage';
export type { ErrorPageClassKey } from './ErrorPage';
export type { MicDropClassKey } from './MicDrop';
packages/core-components/src/layout/Header/Header.tsx
+72 -58
View File
@@ -22,64 +22,78 @@ import { Helmet } from 'react-helmet';
import { Link } from '../../components/Link';
import { Breadcrumbs } from '../Breadcrumbs';
const useStyles = makeStyles<BackstageTheme>(theme => ({
header: {
gridArea: 'pageHeader',
padding: theme.spacing(3),
width: '100%',
boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
position: 'relative',
zIndex: 100,
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
backgroundImage: theme.page.backgroundImage,
backgroundPosition: 'center',
backgroundSize: 'cover',
},
leftItemsBox: {
maxWidth: '100%',
flexGrow: 1,
},
rightItemsBox: {
width: 'auto',
},
title: {
color: theme.palette.bursts.fontColor,
wordBreak: 'break-all',
fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
marginBottom: 0,
},
subtitle: {
color: 'rgba(255, 255, 255, 0.8)',
lineHeight: '1.0em',
display: 'inline-block', // prevents margin collapse of adjacent siblings
marginTop: theme.spacing(1),
},
type: {
textTransform: 'uppercase',
fontSize: 11,
opacity: 0.8,
marginBottom: theme.spacing(1),
color: theme.palette.bursts.fontColor,
},
breadcrumb: {
fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))',
color: theme.palette.bursts.fontColor,
},
breadcrumbType: {
fontSize: 'inherit',
opacity: 0.7,
marginRight: -theme.spacing(0.3),
marginBottom: theme.spacing(0.3),
},
breadcrumbTitle: {
fontSize: 'inherit',
marginLeft: -theme.spacing(0.3),
marginBottom: theme.spacing(0.3),
},
}));
export type HeaderClassKey =
| 'header'
| 'leftItemsBox'
| 'rightItemsBox'
| 'title'
| 'subtitle'
| 'type'
| 'breadcrumb'
| 'breadcrumbType'
| 'breadcrumbTitle';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
header: {
gridArea: 'pageHeader',
padding: theme.spacing(3),
width: '100%',
boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
position: 'relative',
zIndex: 100,
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
backgroundImage: theme.page.backgroundImage,
backgroundPosition: 'center',
backgroundSize: 'cover',
},
leftItemsBox: {
maxWidth: '100%',
flexGrow: 1,
},
rightItemsBox: {
width: 'auto',
},
title: {
color: theme.palette.bursts.fontColor,
wordBreak: 'break-all',
fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
marginBottom: 0,
},
subtitle: {
color: 'rgba(255, 255, 255, 0.8)',
lineHeight: '1.0em',
display: 'inline-block', // prevents margin collapse of adjacent siblings
marginTop: theme.spacing(1),
},
type: {
textTransform: 'uppercase',
fontSize: 11,
opacity: 0.8,
marginBottom: theme.spacing(1),
color: theme.palette.bursts.fontColor,
},
breadcrumb: {
fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))',
color: theme.palette.bursts.fontColor,
},
breadcrumbType: {
fontSize: 'inherit',
opacity: 0.7,
marginRight: -theme.spacing(0.3),
marginBottom: theme.spacing(0.3),
},
breadcrumbTitle: {
fontSize: 'inherit',
marginLeft: -theme.spacing(0.3),
marginBottom: theme.spacing(0.3),
},
}),
{ name: 'BackstageHeader' },
);
type HeaderStyles = ReturnType<typeof useStyles>;
packages/core-components/src/layout/Header/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { Header } from './Header';
export type { HeaderClassKey } from './Header';
packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+23 -18
View File
@@ -17,24 +17,29 @@
import { Link, makeStyles, Typography, Grid } from '@material-ui/core';
import React from 'react';
const useStyles = makeStyles(theme => ({
root: {
textAlign: 'left',
},
label: {
color: theme.palette.common.white,
fontWeight: 'bold',
letterSpacing: 0,
fontSize: theme.typography.fontSize,
marginBottom: theme.spacing(1) / 2,
lineHeight: 1,
},
value: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: theme.typography.fontSize,
lineHeight: 1,
},
}));
export type HeaderLabelClassKey = 'root' | 'label' | 'value';
const useStyles = makeStyles(
theme => ({
root: {
textAlign: 'left',
},
label: {
color: theme.palette.common.white,
fontWeight: 'bold',
letterSpacing: 0,
fontSize: theme.typography.fontSize,
marginBottom: theme.spacing(1) / 2,
lineHeight: 1,
},
value: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: theme.typography.fontSize,
lineHeight: 1,
},
}),
{ name: 'BackstageHeaderLabel' },
);
type HeaderLabelContentProps = {
value: React.ReactNode;
packages/core-components/src/layout/HeaderLabel/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { HeaderLabel } from './HeaderLabel';
export type { HeaderLabelClassKey } from './HeaderLabel';
packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+30 -21
View File
@@ -20,29 +20,38 @@
import React, { useState, useEffect } from 'react';
import { makeStyles, Tabs, Tab as TabUI, TabProps } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
tabsWrapper: {
gridArea: 'pageSubheader',
backgroundColor: theme.palette.background.paper,
paddingLeft: theme.spacing(3),
},
defaultTab: {
padding: theme.spacing(3, 3),
...theme.typography.caption,
textTransform: 'uppercase',
fontWeight: 'bold',
color: theme.palette.text.secondary,
},
selected: {
color: theme.palette.text.primary,
},
tabRoot: {
'&:hover': {
backgroundColor: theme.palette.background.default,
export type HeaderTabsClassKey =
| 'tabsWrapper'
| 'defaultTab'
| 'selected'
| 'tabRoot';
const useStyles = makeStyles(
theme => ({
tabsWrapper: {
gridArea: 'pageSubheader',
backgroundColor: theme.palette.background.paper,
paddingLeft: theme.spacing(3),
},
defaultTab: {
padding: theme.spacing(3, 3),
...theme.typography.caption,
textTransform: 'uppercase',
fontWeight: 'bold',
color: theme.palette.text.secondary,
},
selected: {
color: theme.palette.text.primary,
},
},
}));
tabRoot: {
'&:hover': {
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
},
},
}),
{ name: 'BackstageHeaderTabs' },
);
export type Tab = {
id: string;
packages/core-components/src/layout/HeaderTabs/index.tsx
+1 -1
View File
@@ -14,5 +14,5 @@
* limitations under the License.
*/
export type { Tab } from './HeaderTabs';
export type { Tab, HeaderTabsClassKey } from './HeaderTabs';
export { HeaderTabs } from './HeaderTabs';
packages/core-components/src/layout/InfoCard/InfoCard.tsx
+44 -27
View File
@@ -29,34 +29,51 @@ import classNames from 'classnames';
import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
import { BottomLink, BottomLinkProps } from '../BottomLink';
const useStyles = makeStyles(theme => ({
noPadding: {
padding: 0,
'&:last-child': {
paddingBottom: 0,
},
},
header: {
padding: theme.spacing(2, 2, 2, 2.5),
},
headerTitle: {
fontWeight: 700,
},
headerSubheader: {
paddingTop: theme.spacing(1),
},
headerAvatar: {},
headerAction: {},
headerContent: {},
}));
export type InfoCardClassKey =
| 'noPadding'
| 'header'
| 'headerTitle'
| 'headerSubheader'
| 'headerAvatar'
| 'headerAction'
| 'headerContent';
const CardActionsTopRight = withStyles(theme => ({
root: {
display: 'inline-block',
padding: theme.spacing(8, 8, 0, 0),
float: 'right',
},
}))(CardActions);
const useStyles = makeStyles(
theme => ({
noPadding: {
padding: 0,
'&:last-child': {
paddingBottom: 0,
},
},
header: {
padding: theme.spacing(2, 2, 2, 2.5),
},
headerTitle: {
fontWeight: 700,
},
headerSubheader: {
paddingTop: theme.spacing(1),
},
headerAvatar: {},
headerAction: {},
headerContent: {},
}),
{ name: 'BackstageInfoCard' },
);
export type CardActionsTopRightClassKey = 'root';
const CardActionsTopRight = withStyles(
theme => ({
root: {
display: 'inline-block',
padding: theme.spacing(8, 8, 0, 0),
float: 'right',
},
}),
{ name: 'BackstageInfoCardCardActionsTopRight' },
)(CardActions);
const VARIANT_STYLES = {
card: {
packages/core-components/src/layout/InfoCard/index.ts
+5 -1
View File
@@ -15,4 +15,8 @@
*/
export { InfoCard } from './InfoCard';
export type { InfoCardVariants } from './InfoCard';
export type {
InfoCardVariants,
InfoCardClassKey,
CardActionsTopRightClassKey,
} from './InfoCard';
packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
+3 -1
View File
@@ -17,6 +17,8 @@
import { createStyles, makeStyles, Theme, WithStyles } from '@material-ui/core';
import React from 'react';
export type ItemCardGridClassKey = 'root';
const styles = (theme: Theme) =>
createStyles({
root: {
@@ -27,7 +29,7 @@ const styles = (theme: Theme) =>
},
});
const useStyles = makeStyles(styles);
const useStyles = makeStyles(styles, { name: 'BackstageItemCardGrid' });
export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
/**
packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
+3 -1
View File
@@ -23,6 +23,8 @@ import {
import React from 'react';
import { BackstageTheme } from '@backstage/theme';
export type ItemCardHeaderClassKey = 'root';
const styles = (theme: BackstageTheme) =>
createStyles({
root: {
@@ -34,7 +36,7 @@ const styles = (theme: BackstageTheme) =>
},
});
const useStyles = makeStyles(styles);
const useStyles = makeStyles(styles, { name: 'BackstageItemCardHeader' });
export type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
/**
packages/core-components/src/layout/ItemCard/index.ts
+5 -2
View File
@@ -16,6 +16,9 @@
export { ItemCard } from './ItemCard';
export { ItemCardGrid } from './ItemCardGrid';
export type { ItemCardGridProps } from './ItemCardGrid';
export type { ItemCardGridProps, ItemCardGridClassKey } from './ItemCardGrid';
export { ItemCardHeader } from './ItemCardHeader';
export type { ItemCardHeaderProps } from './ItemCardHeader';
export type {
ItemCardHeaderProps,
ItemCardHeaderClassKey,
} from './ItemCardHeader';
packages/core-components/src/layout/Page/Page.tsx
+16 -11
View File
@@ -18,17 +18,22 @@ import React, { PropsWithChildren } from 'react';
import { BackstageTheme } from '@backstage/theme';
import { makeStyles, ThemeProvider } from '@material-ui/core';
const useStyles = makeStyles(() => ({
root: {
display: 'grid',
gridTemplateAreas:
"'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
gridTemplateRows: 'max-content auto 1fr',
gridTemplateColumns: 'auto 1fr auto',
height: '100vh',
overflowY: 'auto',
},
}));
export type PageClassKey = 'root';
const useStyles = makeStyles(
() => ({
root: {
display: 'grid',
gridTemplateAreas:
"'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
gridTemplateRows: 'max-content auto 1fr',
gridTemplateColumns: 'auto 1fr auto',
height: '100vh',
overflowY: 'auto',
},
}),
{ name: 'BackstagePage' },
);
type Props = {
themeId: string;
packages/core-components/src/layout/Page/index.ts
+1
View File
@@ -15,4 +15,5 @@
*/
export { Page } from './Page';
export type { PageClassKey } from './Page';
export { PageWithHeader } from './PageWithHeader';
packages/core-components/src/layout/Sidebar/Bar.tsx
+44 -39
View File
@@ -21,47 +21,52 @@ import { sidebarConfig, SidebarContext } from './config';
import { BackstageTheme } from '@backstage/theme';
import { SidebarPinStateContext } from './Page';
const useStyles = makeStyles<BackstageTheme>(theme => ({
root: {
zIndex: 1000,
position: 'relative',
overflow: 'visible',
width: theme.spacing(7) + 1,
},
drawer: {
display: 'flex',
flexFlow: 'column nowrap',
alignItems: 'flex-start',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
padding: 0,
background: theme.palette.navigation.background,
overflowX: 'hidden',
msOverflowStyle: 'none',
scrollbarWidth: 'none',
width: sidebarConfig.drawerWidthClosed,
borderRight: `1px solid #383838`,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shortest,
}),
'& > *': {
flexShrink: 0,
export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
root: {
zIndex: 1000,
position: 'relative',
overflow: 'visible',
width: theme.spacing(7) + 1,
},
'&::-webkit-scrollbar': {
display: 'none',
drawer: {
display: 'flex',
flexFlow: 'column nowrap',
alignItems: 'flex-start',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
padding: 0,
background: theme.palette.navigation.background,
overflowX: 'hidden',
msOverflowStyle: 'none',
scrollbarWidth: 'none',
width: sidebarConfig.drawerWidthClosed,
borderRight: `1px solid #383838`,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shortest,
}),
'& > *': {
flexShrink: 0,
},
'&::-webkit-scrollbar': {
display: 'none',
},
},
},
drawerOpen: {
width: sidebarConfig.drawerWidthOpen,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shorter,
}),
},
}));
drawerOpen: {
width: sidebarConfig.drawerWidthOpen,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shorter,
}),
},
}),
{ name: 'BackstageSidebar' },
);
enum State {
Closed,
packages/core-components/src/layout/Sidebar/Intro.tsx
+51 -41
View File
@@ -26,48 +26,58 @@ import {
} from './config';
import { SidebarDivider } from './Items';
const useStyles = makeStyles<BackstageTheme>(theme => ({
introCard: {
color: '#b5b5b5',
// XXX (@koroeskohr): should I be using a Mui theme variable?
fontSize: 12,
width: sidebarConfig.drawerWidthOpen,
marginTop: 18,
marginBottom: 12,
paddingLeft: sidebarConfig.iconPadding,
paddingRight: sidebarConfig.iconPadding,
},
introDismiss: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
marginTop: 12,
},
introDismissLink: {
color: '#dddddd',
display: 'flex',
alignItems: 'center',
marginBottom: 4,
'&:hover': {
color: theme.palette.linkHover,
transition: theme.transitions.create('color', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shortest,
}),
export type SidebarIntroClassKey =
| 'introCard'
| 'introDismiss'
| 'introDismissLink'
| 'introDismissText'
| 'introDismissIcon';
const useStyles = makeStyles<BackstageTheme>(
theme => ({
introCard: {
color: '#b5b5b5',
// XXX (@koroeskohr): should I be using a Mui theme variable?
fontSize: 12,
width: sidebarConfig.drawerWidthOpen,
marginTop: 18,
marginBottom: 12,
paddingLeft: sidebarConfig.iconPadding,
paddingRight: sidebarConfig.iconPadding,
},
},
introDismissText: {
fontSize: '0.7rem',
fontWeight: 'bold',
textTransform: 'uppercase',
letterSpacing: 1,
},
introDismissIcon: {
width: 18,
height: 18,
marginRight: 12,
},
}));
introDismiss: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
marginTop: 12,
},
introDismissLink: {
color: '#dddddd',
display: 'flex',
alignItems: 'center',
marginBottom: 4,
'&:hover': {
color: theme.palette.linkHover,
transition: theme.transitions.create('color', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.shortest,
}),
},
},
introDismissText: {
fontSize: '0.7rem',
fontWeight: 'bold',
textTransform: 'uppercase',
letterSpacing: 1,
},
introDismissIcon: {
width: 18,
height: 18,
marginRight: 12,
},
}),
{ name: 'BackstageSidebarIntro' },
);
type IntroCardProps = {
text: string;
packages/core-components/src/layout/Sidebar/Items.tsx
+98 -81
View File
@@ -42,90 +42,107 @@ import {
} from 'react-router-dom';
import { sidebarConfig, SidebarContext } from './config';
const useStyles = makeStyles<BackstageTheme>(theme => {
const {
selectedIndicatorWidth,
drawerWidthClosed,
drawerWidthOpen,
iconContainerWidth,
} = sidebarConfig;
return {
root: {
color: theme.palette.navigation.color,
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
height: 48,
cursor: 'pointer',
},
buttonItem: {
background: 'none',
border: 'none',
width: 'auto',
margin: 0,
padding: 0,
textAlign: 'inherit',
font: 'inherit',
},
closed: {
width: drawerWidthClosed,
justifyContent: 'center',
},
open: {
width: drawerWidthOpen,
},
label: {
// XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
fontWeight: 'bold',
whiteSpace: 'nowrap',
lineHeight: 'auto',
flex: '3 1 auto',
width: '110px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
},
iconContainer: {
boxSizing: 'border-box',
height: '100%',
width: iconContainerWidth,
marginRight: -theme.spacing(2),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
searchRoot: {
marginBottom: 12,
},
searchField: {
color: '#b5b5b5',
fontWeight: 'bold',
fontSize: theme.typography.fontSize,
},
searchFieldHTMLInput: {
padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`,
},
searchContainer: {
width: drawerWidthOpen - iconContainerWidth,
},
secondaryAction: {
width: theme.spacing(6),
textAlign: 'center',
marginRight: theme.spacing(1),
},
selected: {
'&$root': {
borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
color: theme.palette.navigation.selectedColor,
export type SidebarItemClassKey =
| 'root'
| 'buttonItem'
| 'closed'
| 'open'
| 'label'
| 'iconContainer'
| 'searchRoot'
| 'searchField'
| 'searchFieldHTMLInput'
| 'searchContainer'
| 'secondaryAction'
| 'selected';
const useStyles = makeStyles<BackstageTheme>(
theme => {
const {
selectedIndicatorWidth,
drawerWidthClosed,
drawerWidthOpen,
iconContainerWidth,
} = sidebarConfig;
return {
root: {
color: theme.palette.navigation.color,
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
height: 48,
cursor: 'pointer',
},
'&$closed': {
width: drawerWidthClosed - selectedIndicatorWidth,
buttonItem: {
background: 'none',
border: 'none',
width: 'auto',
margin: 0,
padding: 0,
textAlign: 'inherit',
font: 'inherit',
},
'& $iconContainer': {
marginLeft: -selectedIndicatorWidth,
closed: {
width: drawerWidthClosed,
justifyContent: 'center',
},
},
};
});
open: {
width: drawerWidthOpen,
},
label: {
// XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
fontWeight: 'bold',
whiteSpace: 'nowrap',
lineHeight: 'auto',
flex: '3 1 auto',
width: '110px',
overflow: 'hidden',
'text-overflow': 'ellipsis',
},
iconContainer: {
boxSizing: 'border-box',
height: '100%',
width: iconContainerWidth,
marginRight: -theme.spacing(2),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
searchRoot: {
marginBottom: 12,
},
searchField: {
color: '#b5b5b5',
fontWeight: 'bold',
fontSize: theme.typography.fontSize,
},
searchFieldHTMLInput: {
padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`,
},
searchContainer: {
width: drawerWidthOpen - iconContainerWidth,
},
secondaryAction: {
width: theme.spacing(6),
textAlign: 'center',
marginRight: theme.spacing(1),
},
selected: {
'&$root': {
borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
color: theme.palette.navigation.selectedColor,
},
'&$closed': {
width: drawerWidthClosed - selectedIndicatorWidth,
},
'& $iconContainer': {
marginLeft: -selectedIndicatorWidth,
},
},
};
},
{ name: 'BackstageSidebarItem' },
);
type SidebarItemBaseProps = {
icon: IconComponent;
packages/core-components/src/layout/Sidebar/Page.tsx
+15 -10
View File
@@ -25,17 +25,22 @@ import { sidebarConfig } from './config';
import { BackstageTheme } from '@backstage/theme';
import { LocalStorage } from './localStorage';
const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>({
root: {
width: '100%',
minHeight: '100%',
transition: 'padding-left 0.1s ease-out',
paddingLeft: ({ isPinned }) =>
isPinned
? sidebarConfig.drawerWidthOpen
: sidebarConfig.drawerWidthClosed,
export type SidebarPageClassKey = 'root';
const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
{
root: {
width: '100%',
minHeight: '100%',
transition: 'padding-left 0.1s ease-out',
paddingLeft: ({ isPinned }) =>
isPinned
? sidebarConfig.drawerWidthOpen
: sidebarConfig.drawerWidthClosed,
},
},
});
{ name: 'BackstageSidebarPage' },
);
export type SidebarPinStateContextType = {
isPinned: boolean;
packages/core-components/src/layout/Sidebar/index.ts
+4 -1
View File
@@ -15,8 +15,9 @@
*/
export { Sidebar } from './Bar';
export type { SidebarClassKey } from './Bar';
export { SidebarPage, SidebarPinStateContext } from './Page';
export type { SidebarPinStateContextType } from './Page';
export type { SidebarPinStateContextType, SidebarPageClassKey } from './Page';
export {
SidebarDivider,
SidebarItem,
@@ -25,7 +26,9 @@ export {
SidebarSpacer,
SidebarScrollWrapper,
} from './Items';
export type { SidebarItemClassKey } from './Items';
export { IntroCard, SidebarIntro } from './Intro';
export type { SidebarIntroClassKey } from './Intro';
export {
SIDEBAR_INTRO_LOCAL_STORAGE,
SidebarContext,
packages/core-components/src/layout/SignInPage/customProvider.tsx
+15 -10
View File
@@ -32,16 +32,21 @@ import { GridItem } from './styles';
// accept base64url format according to RFC7515 (https://tools.ietf.org/html/rfc7515#section-3)
const ID_TOKEN_REGEX = /^[a-z0-9_\-]+\.[a-z0-9_\-]+\.[a-z0-9_\-]+$/i;
const useFormStyles = makeStyles(theme => ({
form: {
display: 'flex',
flexFlow: 'column nowrap',
},
button: {
alignSelf: 'center',
marginTop: theme.spacing(2),
},
}));
export type CustomProviderClassKey = 'form' | 'button';
const useFormStyles = makeStyles(
theme => ({
form: {
display: 'flex',
flexFlow: 'column nowrap',
},
button: {
alignSelf: 'center',
marginTop: theme.spacing(2),
},
}),
{ name: 'BackstageCustomProvider' },
);
type Data = {
userId: string;

Some files were not shown because too many files have changed in this diff Show More