Merge pull request #7749 from backstage/freben/very-public

fix some of the ae-missing-release-tag warnings in core-components

.changeset/unlucky-hotels-roll.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Deprecated `DismissbleBannerClassKey` and fixed the typo to make `DismissableBannerClassKey`

packages/core-components/api-report.md

@@ -45,13 +45,9 @@ import { Theme } from '@material-ui/core/styles';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { WithStyles } from '@material-ui/core/styles';
 
-// Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function AlertDisplay(_props: {}): JSX.Element | null;
 
-// Warning: (ae-missing-release-tag) "Alignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 enum Alignment {
   DOWN_LEFT = 'DL',
@@ -60,18 +56,12 @@ enum Alignment {
   UP_RIGHT = 'UR',
 }
 
-// Warning: (ae-missing-release-tag) "Avatar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 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) "AvatarProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export interface AvatarProps {
   customStyles?: CSSProperties;
@@ -79,13 +69,10 @@ export interface AvatarProps {
   picture?: string;
 }
 
-// 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 & {
@@ -94,23 +81,15 @@ export type BackstageOverrides = Overrides & {
   >;
 };
 
-// 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;
@@ -119,75 +98,50 @@ export type BottomLinkProps = {
 };
 
 // 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_21): 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)
 //
 // @public (undocumented)
 export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "ButtonType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function Button(props: ButtonProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "ButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export type ButtonProps = ButtonProps_2 & Omit<LinkProps, 'variant' | 'color'>;
 
-// 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)
 export function CatalogIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "ChatIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @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-missing-release-tag) "CodeSnippet" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function CodeSnippet(props: CodeSnippetProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "CodeSnippetProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export interface CodeSnippetProps {
   customStyle?: any;
@@ -206,15 +160,12 @@ export interface CodeSnippetProps {
 export function Content(props: PropsWithChildren<Props_14>): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "ContentHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 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'
@@ -223,13 +174,9 @@ export type ContentHeaderClassKey =
   | 'description'
   | 'title';
 
-// Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function CopyTextButton(props: CopyTextButtonProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "CopyTextButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export interface CopyTextButtonProps {
   text: string;
@@ -237,30 +184,20 @@ export interface CopyTextButtonProps {
   tooltipText?: string;
 }
 
-// Warning: (ae-missing-release-tag) "CreateButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function CreateButton(props: CreateButtonProps): JSX.Element | null;
 
-// Warning: (ae-missing-release-tag) "CreateButtonProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export type CreateButtonProps = {
   title: string;
 } & Partial<Pick<LinkProps_3, 'to'>>;
 
-// 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)
 export function DashboardIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "DependencyEdge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 type DependencyEdge<T = {}> = T & {
   from: string;
@@ -268,35 +205,23 @@ type DependencyEdge<T = {}> = T & {
   label?: string;
 };
 
-// Warning: (ae-missing-release-tag) "DependencyGraph" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 export function DependencyGraph<NodeData, EdgeData>(
   props: DependencyGraphProps<NodeData, EdgeData>,
 ): 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
 export interface DependencyGraphProps<NodeData, EdgeData>
   extends React_2.SVGProps<SVGSVGElement> {
@@ -341,15 +266,11 @@ declare namespace DependencyGraphTypes {
 }
 export { DependencyGraphTypes };
 
-// Warning: (ae-missing-release-tag) "DependencyNode" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 type DependencyNode<T = {}> = T & {
   id: string;
 };
 
-// Warning: (ae-missing-release-tag) "Direction" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 enum Direction {
   BOTTOM_TOP = 'BT',
@@ -359,15 +280,12 @@ enum Direction {
 }
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "DismissableBanner" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export const DismissableBanner: (props: Props) => 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 =
+export type DismissableBannerClassKey =
   | 'root'
   | 'topPosition'
   | 'icon'
@@ -376,40 +294,31 @@ export type DismissbleBannerClassKey =
   | '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 @deprecated (undocumented)
+export type DismissbleBannerClassKey = DismissableBannerClassKey;
+
 // @public (undocumented)
 export function DocsIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "EmailIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export function EmailIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "EmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function EmptyState(props: Props_2): 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)
 //
 // @public (undocumented)
 export const ErrorBoundary: ComponentClass<ErrorBoundaryProps, State>;
 
-// Warning: (ae-missing-release-tag) "ErrorBoundaryProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export type ErrorBoundaryProps = {
   slackChannel?: string | SlackChannel;
@@ -417,30 +326,21 @@ export type ErrorBoundaryProps = {
 };
 
 // Warning: (ae-forgotten-export) The symbol "IErrorPageProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "ErrorPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @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
 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)
 export type ErrorPanelProps = {
   error: Error;
@@ -448,8 +348,6 @@ 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'
@@ -461,58 +359,42 @@ export type FeatureCalloutCircleClassKey =
   | '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)
 //
 // @public (undocumented)
 export function FeatureCalloutCircular(
   props: PropsWithChildren<Props_4>,
 ): 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)
 //
 // @public (undocumented)
 export function Gauge(props: Props_11): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "GaugeCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function GaugeCard(props: Props_10): 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)
 export function GitHubIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "GroupIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export function GroupIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "Header" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function Header(props: PropsWithChildren<Props_15>): 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'
@@ -526,35 +408,26 @@ export type HeaderClassKey =
   | '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_5): 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'
@@ -562,26 +435,19 @@ export type HeaderTabsClassKey =
   | '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)
 export function HelpIcon(props: IconComponentProps): JSX.Element;
 
-// Warning: (ae-missing-release-tag) "HomepageTimer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public @deprecated
 export function HomepageTimer(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "HorizontalScrollGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function HorizontalScrollGrid(
   props: PropsWithChildren<Props_6>,
 ): 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'
@@ -594,8 +460,6 @@ export type HorizontalScrollGridClassKey =
   | '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'
@@ -618,13 +482,10 @@ export type IconLinkVerticalProps = {
 };
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "InfoCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function InfoCard(props: Props_16): 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'
@@ -635,13 +496,10 @@ export type InfoCardClassKey =
   | '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)
 export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 // Warning: (ae-forgotten-export) The symbol "IntroCardProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "IntroCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function IntroCard(props: IntroCardProps): JSX.Element;
@@ -654,48 +512,26 @@ export function IntroCard(props: IntroCardProps): JSX.Element;
 // @public @deprecated
 export function ItemCard(props: ItemCardProps): JSX.Element;
 
-// Warning: (tsdoc-escape-greater-than) The ">" character should be escaped using a backslash to avoid confusion with an HTML tag
-// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
-// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
-// Warning: (tsdoc-html-tag-missing-string) The HTML element has an invalid attribute: Expecting an HTML string starting with a single-quote or double-quote character
-// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
-// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
-// Warning: (ae-missing-release-tag) "ItemCardGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @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)
 //
 // @public (undocumented)
 export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
   children?: React_2.ReactNode;
 };
 
-// Warning: (tsdoc-escape-greater-than) The ">" character should be escaped using a backslash to avoid confusion with an HTML tag
-// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
-// Warning: (tsdoc-escape-right-brace) The "}" character should be escaped using a backslash to avoid confusion with a TSDoc inline tag
-// Warning: (tsdoc-html-tag-missing-string) The HTML element has an invalid attribute: Expecting an HTML string starting with a single-quote or double-quote character
-// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
-// Warning: (tsdoc-malformed-inline-tag) Expecting a TSDoc tag starting with "{@"
-// Warning: (ae-missing-release-tag) "ItemCardHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @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)
 //
 // @public (undocumented)
 export type ItemCardHeaderProps = Partial<WithStyles<typeof styles_2>> & {
@@ -704,8 +540,6 @@ export type ItemCardHeaderProps = Partial<WithStyles<typeof styles_2>> & {
   children?: React_2.ReactNode;
 };
 
-// Warning: (ae-missing-release-tag) "LabelPosition" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
 enum LabelPosition {
   // (undocumented)
@@ -1254,8 +1088,6 @@ 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'
@@ -2427,8 +2259,6 @@ export function useQueryParamState<T>(
   debounceTime?: number,
 ): [T | undefined, SetQueryParams<T>];
 
-// Warning: (ae-missing-release-tag) "UserIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export function UserIcon(props: IconComponentProps): JSX.Element;
 
@@ -2437,8 +2267,6 @@ export function UserIcon(props: IconComponentProps): JSX.Element;
 // @public (undocumented)
 export function useSupportConfig(): SupportConfig;
 
-// Warning: (ae-missing-release-tag) "WarningIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export function WarningIcon(props: IconComponentProps): JSX.Element;
 
@@ -2472,9 +2300,9 @@ export type WarningPanelClassKey =
 
 // Warnings were encountered during analysis:
 //
-// src/components/DependencyGraph/types.d.ts:14:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
-// src/components/DependencyGraph/types.d.ts:18:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
+// src/components/DependencyGraph/types.d.ts:16:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
+// src/components/DependencyGraph/types.d.ts:20:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
 // 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: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
+// src/components/Table/Table.d.ts:20:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts
+// src/layout/ErrorBoundary/ErrorBoundary.d.ts:8:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts
 ```

packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx

@@ -25,6 +25,7 @@ import pluralize from 'pluralize';
 /**
  * Displays alerts from {@link @backstage/core-plugin-api#AlertApi}
  *
+ * @public
  * @remarks
  *
  * Shown as SnackBar at the top of the page

packages/core-components/src/components/Avatar/Avatar.tsx

@@ -18,6 +18,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import MaterialAvatar from '@material-ui/core/Avatar';
 import { extractInitials, stringToColor } from './utils';
 
+/** @public */
 export type AvatarClassKey = 'avatar';
 
 const useStyles = makeStyles(
@@ -36,7 +37,9 @@ const useStyles = makeStyles(
 );
 
 /**
- * Properties for {@link Avatar}
+ * Properties for {@link Avatar}.
+ *
+ * @public
  */
 export interface AvatarProps {
   /**
@@ -56,9 +59,10 @@ export interface AvatarProps {
 /**
  *  Component rendering an Avatar
  *
- *  @remarks
+ * @public
+ * @remarks
  *
- *  Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials
+ * Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials
  */
 export function Avatar(props: AvatarProps) {
   const { displayName, picture, customStyles } = props;

packages/core-components/src/components/Button/Button.tsx

@@ -23,6 +23,7 @@ import { Link, LinkProps } from '../Link';
 /**
  * Properties for {@link Button}
  *
+ * @public
  * @remarks
  *
  * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties
@@ -33,6 +34,7 @@ export type ButtonProps = MaterialButtonProps &
 /**
  * Thin wrapper on top of material-ui's {@link https://v4.mui.com/components/buttons/ | Button} component
  *
+ * @public
  * @remarks
  *
  * Makes the Button to utilise react-router
@@ -46,6 +48,7 @@ const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
   <Link ref={ref} {...props} color="initial" />
 ));
 
+/** @public */
 const ActualButton = React.forwardRef<any, ButtonProps>((props, ref) => (
   <MaterialButton ref={ref} component={LinkWrapper} {...props} />
 )) as { (props: ButtonProps): JSX.Element };

packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx

@@ -24,6 +24,8 @@ import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';
 
 /**
  * Properties for {@link CodeSnippet}
+ *
+ * @public
  */
 export interface CodeSnippetProps {
   /**
@@ -67,6 +69,8 @@ export interface CodeSnippetProps {
 /**
  * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}
  * providing consistent theming and copy code button
+ *
+ * @public
  */
 export function CodeSnippet(props: CodeSnippetProps) {
   const {

packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx

@@ -23,6 +23,8 @@ import { useCopyToClipboard } from 'react-use';
 
 /**
  * Properties for {@link CopyTextButton}
+ *
+ * @public
  */
 export interface CopyTextButtonProps {
   /**
@@ -50,6 +52,7 @@ export interface CopyTextButtonProps {
 /**
  * Copy text button with visual feedback
  *
+ * @public
  * @remarks
  *
  * Visual feedback takes form of:

packages/core-components/src/components/CreateButton/CreateButton.tsx

@@ -24,6 +24,8 @@ import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
 
 /**
  * Properties for {@link CreateButton}
+ *
+ * @public
  */
 export type CreateButtonProps = {
   title: string;
@@ -31,6 +33,8 @@ export type CreateButtonProps = {
 
 /**
  * Responsive Button giving consistent UX for creation of different things
+ *
+ * @public
  */
 export function CreateButton(props: CreateButtonProps) {
   const { title, to } = props;

packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx

@@ -19,6 +19,7 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
 import { BackstageTheme } from '@backstage/theme';
 import { RenderLabelProps } from './types';
 
+/** @public */
 export type DependencyGraphDefaultLabelClassKey = 'text';
 
 const useStyles = makeStyles(
@@ -30,6 +31,7 @@ const useStyles = makeStyles(
   { name: 'BackstageDependencyGraphDefaultLabel' },
 );
 
+/** @public */
 export function DefaultLabel({ edge: { label } }: RenderLabelProps) {
   const classes = useStyles();
   return (

packages/core-components/src/components/DependencyGraph/DefaultNode.tsx

@@ -19,6 +19,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import { RenderNodeProps } from './types';
 
+/** @public */
 export type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
 
 const useStyles = makeStyles(
@@ -34,6 +35,7 @@ const useStyles = makeStyles(
   { name: 'BackstageDependencyGraphDefaultNode' },
 );
 
+/** @public */
 export function DefaultNode({ node: { id } }: RenderNodeProps) {
   const classes = useStyles();
   const [width, setWidth] = React.useState(0);

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -38,6 +38,7 @@ import { ARROW_MARKER_ID } from './constants';
 /**
  * Properties of {@link DependencyGraph}
  *
+ * @public
  * @remarks
  * <NodeData> and <EdgeData> are useful when rendering custom or edge labels
  */
@@ -167,6 +168,8 @@ const WORKSPACE_ID = 'workspace';
 
 /**
  * Graph component used to visualize relations between entities
+ *
+ * @public
  */
 export function DependencyGraph<NodeData, EdgeData>(
   props: DependencyGraphProps<NodeData, EdgeData>,

packages/core-components/src/components/DependencyGraph/Edge.tsx

@@ -41,6 +41,7 @@ export type EdgeProperties = {
 };
 export type GraphEdge<T> = DependencyEdge<T> & dagre.GraphEdge & EdgeProperties;
 
+/** @public */
 export type DependencyGraphEdgeClassKey = 'path' | 'label';
 
 const useStyles = makeStyles(
@@ -60,6 +61,7 @@ const useStyles = makeStyles(
 
 type EdgePoint = dagre.GraphEdge['points'][0];
 
+/** @public */
 export type EdgeComponentProps<T = unknown> = {
   id: dagre.Edge;
   edge: GraphEdge<T>;

packages/core-components/src/components/DependencyGraph/Node.tsx

@@ -21,6 +21,7 @@ import { RenderNodeFunction, RenderNodeProps, DependencyNode } from './types';
 import { NODE_TEST_ID } from './constants';
 import dagre from 'dagre';
 
+/** @public */
 export type DependencyGraphNodeClassKey = 'node';
 
 const useStyles = makeStyles(

packages/core-components/src/components/DependencyGraph/types.ts

@@ -24,6 +24,8 @@ import React from 'react';
 
 /**
  * Edge of {@link DependencyGraph}
+ *
+ * @public
  */
 export type DependencyEdge<T = {}> = T & {
   /**
@@ -54,6 +56,8 @@ export type RenderLabelFunction<T = {}> = (
 
 /**
  * Node of {@link DependencyGraph}
+ *
+ * @public
  */
 export type DependencyNode<T = {}> = T & {
   id: string;
@@ -73,6 +77,8 @@ export type RenderNodeFunction<T = {}> = (
 
 /**
  * Graph direction
+ *
+ * @public
  */
 export enum Direction {
   /**
@@ -95,6 +101,8 @@ export enum Direction {
 
 /**
  * Node alignment
+ *
+ * @public
  */
 export enum Alignment {
   /**
@@ -139,6 +147,8 @@ export enum Ranker {
 
 /**
  * Position of label in relation to the edge
+ *
+ * @public
  */
 export enum LabelPosition {
   LEFT = 'l',

packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx

@@ -25,7 +25,8 @@ import SnackbarContent from '@material-ui/core/SnackbarContent';
 import IconButton from '@material-ui/core/IconButton';
 import Close from '@material-ui/icons/Close';
 
-export type DismissbleBannerClassKey =
+/** @public */
+export type DismissableBannerClassKey =
   | 'root'
   | 'topPosition'
   | 'icon'
@@ -34,6 +35,12 @@ export type DismissbleBannerClassKey =
   | 'info'
   | 'error';
 
+/**
+ * @public
+ * @deprecated This type contained a typo, please use DismissableBannerClassKey instead
+ */
+export type DismissbleBannerClassKey = DismissableBannerClassKey;
+
 const useStyles = makeStyles(
   (theme: BackstageTheme) => ({
     root: {
@@ -83,6 +90,7 @@ type Props = {
   fixed?: boolean;
 };
 
+/** @public */
 export const DismissableBanner = (props: Props) => {
   const { variant, message, id, fixed = false } = props;
   const classes = useStyles();

packages/core-components/src/components/DismissableBanner/index.ts

@@ -15,4 +15,7 @@
  */
 
 export { DismissableBanner } from './DismissableBanner';
-export type { DismissbleBannerClassKey } from './DismissableBanner';
+export type {
+  DismissableBannerClassKey,
+  DismissbleBannerClassKey,
+} from './DismissableBanner';

packages/core-components/src/components/EmptyState/EmptyState.tsx

@@ -20,6 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { EmptyStateImage } from './EmptyStateImage';
 
+/** @public */
 export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
 
 const useStyles = makeStyles(
@@ -45,6 +46,7 @@ type Props = {
   action?: JSX.Element;
 };
 
+/** @public */
 export function EmptyState(props: Props) {
   const { title, description, missing, action } = props;
   const classes = useStyles();

packages/core-components/src/components/EmptyState/EmptyStateImage.tsx

@@ -25,6 +25,7 @@ type Props = {
   missing: 'field' | 'info' | 'content' | 'data';
 };
 
+/** @public */
 export type EmptyStateImageClassKey = 'generalImg';
 
 const useStyles = makeStyles(
@@ -41,6 +42,7 @@ const useStyles = makeStyles(
   { name: 'BackstageEmptyStateImage' },
 );
 
+/** @public */
 export const EmptyStateImage = ({ missing }: Props) => {
   const classes = useStyles();
   switch (missing) {

packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx

@@ -22,6 +22,7 @@ import React, { PropsWithChildren } from 'react';
 import { CopyTextButton } from '../CopyTextButton';
 import { WarningPanel } from '../WarningPanel';
 
+/** @public */
 export type ErrorPanelClassKey = 'text' | 'divider';
 
 const useStyles = makeStyles(
@@ -91,6 +92,7 @@ const ErrorList = ({
   );
 };
 
+/** @public */
 export type ErrorPanelProps = {
   error: Error;
   defaultExpanded?: boolean;
@@ -99,6 +101,8 @@ export type ErrorPanelProps = {
 
 /**
  * Renders a warning panel as the effect of an error.
+ *
+ * @public
  */
 export function ErrorPanel(props: PropsWithChildren<ErrorPanelProps>) {
   const { title, error, defaultExpanded, children } = props;

packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx

@@ -29,6 +29,7 @@ import { createPortal } from 'react-dom';
 import { usePortal } from './lib/usePortal';
 import { useShowCallout } from './lib/useShowCallout';
 
+/** @public */
 export type FeatureCalloutCircleClassKey =
   | '@keyframes pulsateSlightly'
   | '@keyframes pulsateAndFade'
@@ -107,6 +108,7 @@ type Placement = {
   textWidth: number;
 };
 
+/** @public */
 export function FeatureCalloutCircular(props: PropsWithChildren<Props>) {
   const { featureId, title, description, children } = props;
   const { show, hide } = useShowCallout(featureId);

packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
 import { makeStyles } from '@material-ui/core/styles';
 
+/** @public */
 export type HeaderIconLinkRowClassKey = 'links';
 
 const useStyles = makeStyles(
@@ -36,6 +37,7 @@ type Props = {
   links: IconLinkVerticalProps[];
 };
 
+/** @public */
 export function HeaderIconLinkRow(props: Props) {
   const { links } = props;
   const classes = useStyles();

packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx

@@ -30,6 +30,7 @@ export type IconLinkVerticalProps = {
   title?: string;
 };
 
+/** @public */
 export type IconLinkVerticalClassKey =
   | 'link'
   | 'disabled'
@@ -65,6 +66,7 @@ const useIconStyles = makeStyles(
   { name: 'BackstageIconLinkVertical' },
 );
 
+/** @public */
 export function IconLinkVertical({
   color = 'primary',
   disabled = false,

packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx

@@ -56,6 +56,7 @@ type Props = {
   minScrollDistance?: number; // limits how small steps the scroll can take in px
 };
 
+/** @public */
 export type HorizontalScrollGridClassKey =
   | 'root'
   | 'container'
@@ -197,6 +198,7 @@ function useSmoothScroll(
   return setScrollTarget;
 }
 
+/** @public */
 export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
   const {
     scrollStep = 100,

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -19,6 +19,7 @@ import { BackstageTheme } from '@backstage/theme';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
+/** @public */
 export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
 
 const useStyles = makeStyles<BackstageTheme>(
@@ -82,6 +83,7 @@ export function getProgressColor(
   return palette.status.ok;
 }
 
+/** @public */
 export function Gauge(props: Props) {
   const classes = useStyles(props);
   const theme = useTheme<BackstageTheme>();

packages/core-components/src/components/ProgressBars/GaugeCard.tsx

@@ -30,6 +30,7 @@ type Props = {
   deepLink?: BottomLinkProps;
 };
 
+/** @public */
 export type GaugeCardClassKey = 'root';
 
 const useStyles = makeStyles(
@@ -42,6 +43,7 @@ const useStyles = makeStyles(
   { name: 'BackstageGaugeCard' },
 );
 
+/** @public */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
   const { title, subheader, progress, inverse, deepLink, variant } = props;

packages/core-components/src/components/Select/static/ClosedDropdown.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+/** @public */
 export type ClosedDropdownClassKey = 'icon';
 
 const useStyles = makeStyles(

packages/core-components/src/components/Table/Table.tsx

@@ -132,6 +132,7 @@ const StyledMTableToolbar = withStyles(
   { name: 'BackstageTableToolbar' },
 )(MTableToolbar);
 
+/** @public */
 export type FiltersContainerClassKey = 'root' | 'title';
 
 const useFilterStyles = makeStyles<BackstageTheme>(

packages/core-components/src/icons/icons.tsx

@@ -27,36 +27,47 @@ function useSystemIcon(key: string, props: IconComponentProps) {
 }
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
+/** @public */
 export function BrokenImageIcon(props: IconComponentProps) {
   return useSystemIcon('brokenImage', props);
 }
+/** @public */
 export function CatalogIcon(props: IconComponentProps) {
   return useSystemIcon('catalog', props);
 }
+/** @public */
 export function ChatIcon(props: IconComponentProps) {
   return useSystemIcon('chat', props);
 }
+/** @public */
 export function DashboardIcon(props: IconComponentProps) {
   return useSystemIcon('dashboard', props);
 }
+/** @public */
 export function DocsIcon(props: IconComponentProps) {
   return useSystemIcon('docs', props);
 }
+/** @public */
 export function EmailIcon(props: IconComponentProps) {
   return useSystemIcon('email', props);
 }
+/** @public */
 export function GitHubIcon(props: IconComponentProps) {
   return useSystemIcon('github', props);
 }
+/** @public */
 export function GroupIcon(props: IconComponentProps) {
   return useSystemIcon('group', props);
 }
+/** @public */
 export function HelpIcon(props: IconComponentProps) {
   return useSystemIcon('help', props);
 }
+/** @public */
 export function UserIcon(props: IconComponentProps) {
   return useSystemIcon('user', props);
 }
+/** @public */
 export function WarningIcon(props: IconComponentProps) {
   return useSystemIcon('warning', props);
 }

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -23,6 +23,7 @@ import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import { Link } from '../../components/Link';
 
+/** @public */
 export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
 
 const useStyles = makeStyles<BackstageTheme>(
@@ -42,12 +43,14 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageBottomLink' },
 );
 
+/** @public */
 export type BottomLinkProps = {
   link: string;
   title: string;
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 
+/** @public */
 export function BottomLink(props: BottomLinkProps) {
   const { link, title, onClick } = props;
   const classes = useStyles();

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ import React, { ComponentProps, Fragment } from 'react';
 
 type Props = ComponentProps<typeof MaterialBreadcrumbs>;
 
+/** @public */
 export type BreadcrumbsClickableTextClassKey = 'root';
 
 const ClickableText = withStyles(
@@ -37,6 +38,7 @@ const ClickableText = withStyles(
   { name: 'BackstageBreadcrumbsClickableText' },
 )(Typography);
 
+/** @public */
 export type BreadcrumbsStyledBoxClassKey = 'root';
 
 const StyledBox = withStyles(
@@ -49,6 +51,7 @@ const StyledBox = withStyles(
   { name: 'BackstageBreadcrumbsStyledBox' },
 )(Box);
 
+/** @public */
 export function Breadcrumbs(props: Props) {
   const { children, ...restProps } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(

packages/core-components/src/layout/Content/Content.tsx

@@ -18,6 +18,7 @@ import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import { Theme, makeStyles } from '@material-ui/core/styles';
 
+/** @public */
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
 
 const useStyles = makeStyles(

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -23,6 +23,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { Helmet } from 'react-helmet';
 
+/** @public */
 export type ContentHeaderClassKey =
   | 'container'
   | 'leftItemsBox'
@@ -93,6 +94,7 @@ type ContentHeaderProps = {
   textAlign?: 'left' | 'right' | 'center';
 };
 
+/** @public */
 export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
   const {
     description,
@@ -108,6 +110,7 @@ export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
   ) : (
     <ContentHeaderTitle title={title} className={classes.title} />
   );
+
   return (
     <>
       <Helmet title={title} />

packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -23,6 +23,7 @@ type SlackChannel = {
   href?: string;
 };
 
+/** @public */
 export type ErrorBoundaryProps = {
   slackChannel?: string | SlackChannel;
   onError?: (error: Error, errorInfo: string) => null;
@@ -51,6 +52,7 @@ const SlackLink = (props: { slackChannel?: string | SlackChannel }) => {
   );
 };
 
+/** @public */
 export const ErrorBoundary: ComponentClass<
   ErrorBoundaryProps,
   State

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -30,6 +30,7 @@ interface IErrorPageProps {
   additionalInfo?: string;
 }
 
+/** @public */
 export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
 
 const useStyles = makeStyles<BackstageTheme>(
@@ -54,6 +55,7 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageErrorPage' },
 );
 
+/** @public */
 export function ErrorPage(props: IErrorPageProps) {
   const { status, statusMessage, additionalInfo } = props;
   const classes = useStyles();

packages/core-components/src/layout/Header/Header.tsx

@@ -26,6 +26,7 @@ import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
 import { Breadcrumbs } from '../Breadcrumbs';
 
+/** @public */
 export type HeaderClassKey =
   | 'header'
   | 'leftItemsBox'
@@ -190,6 +191,7 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
   );
 };
 
+/** @public */
 export function Header(props: PropsWithChildren<Props>) {
   const {
     children,

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -20,6 +20,7 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
 
+/** @public */
 export type HeaderLabelClassKey = 'root' | 'label' | 'value';
 
 const useStyles = makeStyles(
@@ -59,6 +60,7 @@ type HeaderLabelProps = {
   url?: string;
 };
 
+/** @public */
 export function HeaderLabel(props: HeaderLabelProps) {
   const { label, value, url } = props;
   const classes = useStyles();

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -22,6 +22,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 
+/** @public */
 export type HeaderTabsClassKey =
   | 'tabsWrapper'
   | 'defaultTab'
@@ -66,6 +67,8 @@ type HeaderTabsProps = {
   onChange?: (index: number) => void;
   selectedIndex?: number;
 };
+
+/** @public */
 export function HeaderTabs(props: HeaderTabsProps) {
   const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);

packages/core-components/src/layout/HomepageTimer/HomepageTimer.tsx

@@ -69,6 +69,8 @@ function getTimes(configApi: ConfigApi) {
 
 /**
  * Please use the HeaderWorldClock in the home plugin
+ *
+ * @public
  * @deprecated in favor of the HeaderWorldClock which is found in the to home plugin
  */
 export function HomepageTimer(_props: {}) {

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -25,6 +25,7 @@ import classNames from 'classnames';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 
+/** @public */
 export type InfoCardClassKey =
   | 'noPadding'
   | 'header'
@@ -58,6 +59,7 @@ const useStyles = makeStyles(
   { name: 'BackstageInfoCard' },
 );
 
+/** @public */
 export type CardActionsTopRightClassKey = 'root';
 
 const CardActionsTopRight = withStyles(
@@ -99,6 +101,7 @@ const VARIANT_STYLES = {
   },
 };
 
+/** @public */
 export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 /**
@@ -117,7 +120,7 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
  * When the InfoCard is displayed as a grid item within a grid, you may want items to have the same height for all items.
  * Set to the 'gridItem' variant to display the InfoCard with full height suitable for Grid:
  *
- *   <InfoCard variant="gridItem">...</InfoCard>
+ * `<InfoCard variant="gridItem">...</InfoCard>`
  */
 type Props = {
   title?: ReactNode;
@@ -141,6 +144,7 @@ type Props = {
   titleTypographyProps?: object;
 };
 
+/** @public */
 export function InfoCard(props: Props): JSX.Element {
   const {
     title,

packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx

@@ -22,6 +22,7 @@ import {
 } from '@material-ui/core/styles';
 import React from 'react';
 
+/** @public */
 export type ItemCardGridClassKey = 'root';
 
 const styles = (theme: Theme) =>
@@ -36,6 +37,7 @@ const styles = (theme: Theme) =>
 
 const useStyles = makeStyles(styles, { name: 'BackstageItemCardGrid' });
 
+/** @public */
 export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
   /**
    * The Card items of the grid.
@@ -51,12 +53,12 @@ export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & {
  *
  * Styles for the grid can be overridden using the `classes` prop, e.g.:
  *
- * <code>
- *   <ItemCardGrid title="Hello" classes={{ root: myClassName }} />
- * </code>
+ * `<ItemCardGrid title="Hello" classes={{ root: myClassName }} />`
  *
  * This can be useful for e.g. overriding gridTemplateColumns to adapt the
  * minimum size of the cells to fit the content better.
+ *
+ * @public
  */
 export function ItemCardGrid(props: ItemCardGridProps) {
   const { children, ...otherProps } = props;

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -19,6 +19,7 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
 
+/** @public */
 export type ItemCardHeaderClassKey = 'root';
 
 const styles = (theme: BackstageTheme) =>
@@ -34,6 +35,7 @@ const styles = (theme: BackstageTheme) =>
 
 const useStyles = makeStyles(styles, { name: 'BackstageItemCardHeader' });
 
+/** @public */
 export type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
   /**
    * A large title to show in the header, providing the main heading.
@@ -66,9 +68,9 @@ export type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
  *
  * Styles for the header can be overridden using the `classes` prop, e.g.:
  *
- * <code>
- *   <ItemCardHeader title="Hello" classes={{ root: myClassName }} />
- * </code>
+ * `<ItemCardHeader title="Hello" classes={{ root: myClassName }} />`
+ *
+ * @public
  */
 export function ItemCardHeader(props: ItemCardHeaderProps) {
   const { title, subtitle, children } = props;

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -29,6 +29,7 @@ import {
 } from './config';
 import { SidebarDivider } from './Items';
 
+/** @public */
 export type SidebarIntroClassKey =
   | 'introCard'
   | 'introDismiss'
@@ -87,6 +88,7 @@ type IntroCardProps = {
   onClose: () => void;
 };
 
+/** @public */
 export function IntroCard(props: IntroCardProps) {
   const classes = useStyles();
   const { text, onClose } = props;

packages/core-components/src/layout/SignInPage/customProvider.tsx

@@ -30,6 +30,7 @@ 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;
 
+/** @public */
 export type CustomProviderClassKey = 'form' | 'button';
 
 const useFormStyles = makeStyles(
@@ -58,6 +59,7 @@ const asInputRef = (renderResult: UseFormRegisterReturn) => {
     ...rest,
   };
 };
+
 const Component: ProviderComponent = ({ onResult }) => {
   const classes = useFormStyles();
   const { register, handleSubmit, formState } = useForm<Data>({

packages/core-components/src/layout/TabbedCard/TabbedCard.tsx

@@ -46,6 +46,7 @@ const useTabsStyles = makeStyles(
   { name: 'BackstageTabbedCard' },
 );
 
+/** @public */
 export type BoldHeaderClassKey = 'root' | 'title' | 'subheader';
 
 const BoldHeader = withStyles(
@@ -120,6 +121,7 @@ export function TabbedCard(props: PropsWithChildren<Props>) {
   );
 }
 
+/** @public */
 export type CardTabClassKey = 'root' | 'selected';
 
 const useCardTabStyles = makeStyles(
@@ -147,6 +149,7 @@ type CardTabProps = TabProps & {
   children: ReactNode;
 };
 
+/** @public */
 export function CardTab(props: PropsWithChildren<CardTabProps>) {
   const { children, ...restProps } = props;
   const classes = useCardTabStyles();

packages/core-components/src/overridableComponents.ts

@@ -22,7 +22,7 @@ import {
   DependencyGraphDefaultNodeClassKey,
   DependencyGraphEdgeClassKey,
   DependencyGraphNodeClassKey,
-  DismissbleBannerClassKey,
+  DismissableBannerClassKey,
   EmptyStateClassKey,
   EmptyStateImageClassKey,
   MissingAnnotationEmptyStateClassKey,
@@ -98,7 +98,7 @@ type BackstageComponentsNameToClassKey = {
   BackstageDependencyGraphDefaultNode: DependencyGraphDefaultNodeClassKey;
   BackstageDependencyGraphEdge: DependencyGraphEdgeClassKey;
   BackstageDependencyGraphNode: DependencyGraphNodeClassKey;
-  BackstageDismissableBanner: DismissbleBannerClassKey;
+  BackstageDismissableBanner: DismissableBannerClassKey;
   BackstageEmptyState: EmptyStateClassKey;
   BackstageEmptyStateImage: EmptyStateImageClassKey;
   BackstageMissingAnnotationEmptyState: MissingAnnotationEmptyStateClassKey;
@@ -165,6 +165,7 @@ type BackstageComponentsNameToClassKey = {
   BackstageCardTab: CardTabClassKey;
 };
 
+/** @public */
 export type BackstageOverrides = Overrides & {
   [Name in keyof BackstageComponentsNameToClassKey]?: Partial<
     StyleRules<BackstageComponentsNameToClassKey[Name]>