From e0861b92ffd3435deb02288e1cf3d34ea309a121 Mon Sep 17 00:00:00 2001 From: James Turley Date: Thu, 4 Nov 2021 16:35:15 +0000 Subject: [PATCH 1/7] Add prop to override color selection in gauge components Signed-off-by: James Turley --- .changeset/grumpy-pugs-report.md | 23 +++++++++++++++++++ .../components/ProgressBars/Gauge.stories.tsx | 6 +++++ .../src/components/ProgressBars/Gauge.tsx | 20 ++++++++++++++-- .../ProgressBars/GaugeCard.stories.tsx | 21 +++++++++++++++++ .../src/components/ProgressBars/GaugeCard.tsx | 14 ++++++++--- .../ProgressBars/LinearGauge.stories.tsx | 6 +++++ .../components/ProgressBars/LinearGauge.tsx | 14 +++++++---- 7 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 .changeset/grumpy-pugs-report.md diff --git a/.changeset/grumpy-pugs-report.md b/.changeset/grumpy-pugs-report.md new file mode 100644 index 0000000000..6ee56f2bf7 --- /dev/null +++ b/.changeset/grumpy-pugs-report.md @@ -0,0 +1,23 @@ +--- +'@backstage/core-components': patch +--- + +Add new way to override color selection to progress bar/gauge components. + +`Gauge`, `LinearGauge` and `GaugeCard` all accept a `getColor` prop, +which is a function of the type: + +```ts +export type GetColor = (args: { + palette: Palette; + value: number; + inverse?: boolean; + max?: number; +}) => string | PaletteColor; +``` + +Either return a standard Material UI palette color object or a CSS color +string (e.g. "red", "#f02020"), and the gauge will be set to that color. + +If the prop is omitted, the default implementation is unchanged from previous +versions. diff --git a/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx b/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx index 3481c48cef..401f502697 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.stories.tsx @@ -53,3 +53,9 @@ export const AbsoluteProgress = () => ( ); + +export const StaticColor = () => ( +
+ '#f0f'} value={0.5} /> +
+); diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 83e8d05b16..097fc9419d 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -52,8 +52,16 @@ type Props = { inverse?: boolean; unit?: string; max?: number; + getColor?: GetColor; }; +export type GetColor = (args: { + palette: BackstageTheme['palette']; + value: number; + inverse?: boolean; + max?: number; +}) => string | BackstageTheme['palette']['error']; + const defaultProps = { fractional: true, inverse: false, @@ -83,10 +91,18 @@ export function getProgressColor( return palette.status.ok; } +export const defaultGetProgressColor: GetColor = ({ + palette, + value, + inverse, + max, +}) => getProgressColor(palette, value, inverse, max); + /** @public */ export function Gauge(props: Props) { + const { getColor = defaultGetProgressColor } = props; const classes = useStyles(props); - const theme = useTheme(); + const { palette } = useTheme(); const { value, fractional, inverse, unit, max } = { ...defaultProps, ...props, @@ -102,7 +118,7 @@ export function Gauge(props: Props) { percent={asPercentage} strokeWidth={12} trailWidth={12} - strokeColor={getProgressColor(theme.palette, asActual, inverse, max)} + strokeColor={getColor({ palette, value: asActual, inverse, max })} className={classes.circle} />
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx index ad3323f8d3..f2aad14cd9 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx @@ -97,3 +97,24 @@ export const LinkInFooter = () => ( ); + +export const StaticColor = () => ( + + + '#f00'} title="Red" progress={0.5} /> + + + '#0f0'} title="Green" progress={0.5} /> + + + '#00f'} title="Blue" progress={0.5} /> + + + palette.error} + title="palette.error" + progress={0.5} + /> + + +); diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx index fe17de30cd..f1fd281b35 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { InfoCard, InfoCardVariants } from '../../layout/InfoCard'; import { BottomLinkProps } from '../../layout/BottomLink'; -import { Gauge } from './Gauge'; +import { Gauge, GetColor } from './Gauge'; type Props = { title: string; @@ -28,6 +28,7 @@ type Props = { progress: number; inverse?: boolean; deepLink?: BottomLinkProps; + getColor?: GetColor; }; /** @public */ @@ -46,7 +47,14 @@ const useStyles = makeStyles( /** @public */ export function GaugeCard(props: Props) { const classes = useStyles(props); - const { title, subheader, progress, inverse, deepLink, variant } = props; + const { title, subheader, progress, inverse, deepLink, variant, getColor } = + props; + + const gaugeProps = { + inverse, + getColor, + value: progress, + }; return (
@@ -56,7 +64,7 @@ export function GaugeCard(props: Props) { deepLink={deepLink} variant={variant} > - +
); diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx index ee2ed2eae6..5d36ea9178 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.stories.tsx @@ -41,3 +41,9 @@ export const LowProgress = () => (
); + +export const StaticColor = () => ( +
+ '#f0f'} value={0.5} /> +
+); diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index afc93fd337..ac6097195d 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -20,18 +20,19 @@ import Tooltip from '@material-ui/core/Tooltip'; // @ts-ignore import { Line } from 'rc-progress'; import { BackstageTheme } from '@backstage/theme'; -import { getProgressColor } from './Gauge'; +import { defaultGetProgressColor, GetColor } from './Gauge'; type Props = { /** * Progress value between 0.0 - 1.0. */ value: number; + getColor?: GetColor; }; export function LinearGauge(props: Props) { - const { value } = props; - const theme = useTheme(); + const { value, getColor = defaultGetProgressColor } = props; + const { palette } = useTheme(); if (isNaN(value)) { return null; } @@ -39,7 +40,12 @@ export function LinearGauge(props: Props) { if (percent > 100) { percent = 100; } - const strokeColor = getProgressColor(theme.palette, percent, false, 100); + const strokeColor = getColor({ + palette, + value: percent, + inverse: false, + max: 100, + }); return ( From 6df5e58f7b86ce476a768794492f482fff5c72fe Mon Sep 17 00:00:00 2001 From: James Turley Date: Fri, 5 Nov 2021 12:46:49 +0000 Subject: [PATCH 2/7] Modify exported getProgressColor to accept arguments object Signed-off-by: James Turley --- .../components/ProgressBars/Gauge.test.tsx | 26 +++++++++++----- .../src/components/ProgressBars/Gauge.tsx | 31 +++++++++---------- .../components/ProgressBars/LinearGauge.tsx | 4 +-- 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx index 066e1233a0..2d9e852e6c 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.test.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.test.tsx @@ -56,16 +56,26 @@ describe('', () => { }; it('colors the progress correctly', () => { - expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd'); - expect(getProgressColor(palette, 10)).toBe(error); - expect(getProgressColor(palette, 50)).toBe(warning); - expect(getProgressColor(palette, 90)).toBe(ok); + expect(getProgressColor({ palette, value: 'Not a Number' as any })).toBe( + '#ddd', + ); + expect(getProgressColor({ palette, value: 10 })).toBe(error); + expect(getProgressColor({ palette, value: 50 })).toBe(warning); + expect(getProgressColor({ palette, value: 90 })).toBe(ok); }); it('colors the inverse progress correctly', () => { - expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd'); - expect(getProgressColor(palette, 10, true)).toBe(ok); - expect(getProgressColor(palette, 50, true)).toBe(warning); - expect(getProgressColor(palette, 90, true)).toBe(error); + expect( + getProgressColor({ + palette, + value: 'Not a Number' as any, + inverse: true, + }), + ).toBe('#ddd'); + expect(getProgressColor({ palette, value: 10, inverse: true })).toBe(ok); + expect(getProgressColor({ palette, value: 50, inverse: true })).toBe( + warning, + ); + expect(getProgressColor({ palette, value: 90, inverse: true })).toBe(error); }); }); diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 097fc9419d..2bcc0c3976 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -55,12 +55,16 @@ type Props = { getColor?: GetColor; }; -export type GetColor = (args: { +type GetColorArgs = { palette: BackstageTheme['palette']; value: number; inverse?: boolean; max?: number; -}) => string | BackstageTheme['palette']['error']; +}; + +export type GetColor = ( + args: GetColorArgs, +) => string | BackstageTheme['palette']['error']; const defaultProps = { fractional: true, @@ -69,12 +73,12 @@ const defaultProps = { max: 100, }; -export function getProgressColor( - palette: BackstageTheme['palette'], - value: number, - inverse?: boolean, - max?: number, -) { +export const getProgressColor: GetColor = ({ + palette, + value, + inverse, + max, +}) => { if (isNaN(value)) { return '#ddd'; } @@ -89,18 +93,11 @@ export function getProgressColor( } return palette.status.ok; -} - -export const defaultGetProgressColor: GetColor = ({ - palette, - value, - inverse, - max, -}) => getProgressColor(palette, value, inverse, max); +}; /** @public */ export function Gauge(props: Props) { - const { getColor = defaultGetProgressColor } = props; + const { getColor = getProgressColor } = props; const classes = useStyles(props); const { palette } = useTheme(); const { value, fractional, inverse, unit, max } = { diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index ac6097195d..e331ed1fa5 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -20,7 +20,7 @@ import Tooltip from '@material-ui/core/Tooltip'; // @ts-ignore import { Line } from 'rc-progress'; import { BackstageTheme } from '@backstage/theme'; -import { defaultGetProgressColor, GetColor } from './Gauge'; +import { getProgressColor, GetColor } from './Gauge'; type Props = { /** @@ -31,7 +31,7 @@ type Props = { }; export function LinearGauge(props: Props) { - const { value, getColor = defaultGetProgressColor } = props; + const { value, getColor = getProgressColor } = props; const { palette } = useTheme(); if (isNaN(value)) { return null; From 60f5d96953210a320934c8b248b0f0f41a02a42e Mon Sep 17 00:00:00 2001 From: James Turley Date: Wed, 10 Nov 2021 14:43:24 +0000 Subject: [PATCH 3/7] Rename gauge props to GaugeProps and export Signed-off-by: James Turley --- packages/core-components/api-report.md | 24 +++++++++---------- .../src/components/ProgressBars/Gauge.tsx | 10 ++++---- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index cc884c9e8f..13929db7a3 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -100,7 +100,7 @@ export type BottomLinkProps = { // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function Breadcrumbs(props: Props_21): JSX.Element; +export function Breadcrumbs(props: Props_20): JSX.Element; // @public (undocumented) export type BreadcrumbsClickableTextClassKey = 'root'; @@ -157,7 +157,7 @@ export interface CodeSnippetProps { // Warning: (ae-missing-release-tag) "Content" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Content(props: PropsWithChildren): JSX.Element; +export function Content(props: PropsWithChildren): JSX.Element; // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts // @@ -368,10 +368,10 @@ export function FeatureCalloutCircular( // @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-forgotten-export) The symbol "GaugeProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function Gauge(props: Props_11): JSX.Element; +export function Gauge(props: GaugeProps): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // @@ -393,7 +393,7 @@ 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 // // @public (undocumented) -export function Header(props: PropsWithChildren): JSX.Element; +export function Header(props: PropsWithChildren): JSX.Element; // @public (undocumented) export type HeaderClassKey = @@ -484,7 +484,7 @@ export type IconLinkVerticalProps = { // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function InfoCard(props: Props_16): JSX.Element; +export function InfoCard(props: Props_15): JSX.Element; // @public (undocumented) export type InfoCardClassKey = @@ -565,7 +565,7 @@ export type LifecycleClassKey = 'alpha' | 'beta'; // Warning: (ae-missing-release-tag) "LinearGauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function LinearGauge(props: Props_12): JSX.Element | null; +export function LinearGauge(props: Props_11): JSX.Element | null; // Warning: (ae-missing-release-tag) "LinkType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -666,7 +666,7 @@ export type OverflowTooltipClassKey = 'container'; // 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): JSX.Element; +export function Page(props: PropsWithChildren): 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) // @@ -771,7 +771,7 @@ export type SelectInputBaseClassKey = 'root' | 'input'; // Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Sidebar(props: PropsWithChildren): JSX.Element; +export function Sidebar(props: PropsWithChildren): JSX.Element; // Warning: (ae-missing-release-tag) "SIDEBAR_INTRO_LOCAL_STORAGE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1961,7 +1961,7 @@ export const SidebarSpacer: React_2.ComponentType< // Warning: (ae-missing-release-tag) "SignInPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function SignInPage(props: Props_19): JSX.Element; +export function SignInPage(props: Props_18): 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) // @@ -2050,7 +2050,7 @@ export function StatusWarning(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StructuredMetadataTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function StructuredMetadataTable(props: Props_13): JSX.Element; +export function StructuredMetadataTable(props: Props_12): 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) // @@ -2132,7 +2132,7 @@ export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root'; // 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): JSX.Element; +export function TabbedCard(props: PropsWithChildren): 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) // diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 2bcc0c3976..98d5a8a000 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -46,7 +46,7 @@ const useStyles = makeStyles( { name: 'BackstageGauge' }, ); -type Props = { +export type GaugeProps = { value: number; fractional?: boolean; inverse?: boolean; @@ -66,7 +66,7 @@ export type GetColor = ( args: GetColorArgs, ) => string | BackstageTheme['palette']['error']; -const defaultProps = { +const defaultGaugeProps = { fractional: true, inverse: false, unit: '%', @@ -83,7 +83,7 @@ export const getProgressColor: GetColor = ({ return '#ddd'; } - const actualMax = max ? max : defaultProps.max; + const actualMax = max ? max : defaultGaugeProps.max; const actualValue = inverse ? actualMax - value : value; if (actualValue < actualMax / 3) { @@ -96,12 +96,12 @@ export const getProgressColor: GetColor = ({ }; /** @public */ -export function Gauge(props: Props) { +export function Gauge(props: GaugeProps) { const { getColor = getProgressColor } = props; const classes = useStyles(props); const { palette } = useTheme(); const { value, fractional, inverse, unit, max } = { - ...defaultProps, + ...defaultGaugeProps, ...props, }; From 2e641b622b02b256240f5664a782a820e20cc617 Mon Sep 17 00:00:00 2001 From: James Turley Date: Wed, 10 Nov 2021 14:49:15 +0000 Subject: [PATCH 4/7] Only return string from color getter type Signed-off-by: James Turley --- .../core-components/src/components/ProgressBars/Gauge.tsx | 4 +--- .../src/components/ProgressBars/GaugeCard.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 98d5a8a000..ef39a81d4e 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -62,9 +62,7 @@ type GetColorArgs = { max?: number; }; -export type GetColor = ( - args: GetColorArgs, -) => string | BackstageTheme['palette']['error']; +export type GetColor = (args: GetColorArgs) => string; const defaultGaugeProps = { fractional: true, diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx index f2aad14cd9..64a6cc1b16 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx @@ -111,8 +111,8 @@ export const StaticColor = () => ( palette.error} - title="palette.error" + getColor={({ palette }) => palette.status.error} + title="palette.status.error" progress={0.5} /> From 1e3388a0f47843fabbb1b80515514145f5879845 Mon Sep 17 00:00:00 2001 From: James Turley Date: Wed, 10 Nov 2021 15:13:03 +0000 Subject: [PATCH 5/7] Fixup and rename Gauge color getter function types Signed-off-by: James Turley --- .../src/components/ProgressBars/Gauge.tsx | 12 ++++++------ .../src/components/ProgressBars/GaugeCard.tsx | 4 ++-- .../src/components/ProgressBars/LinearGauge.tsx | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index ef39a81d4e..ef8ec08378 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -15,7 +15,7 @@ */ import { makeStyles, useTheme } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; +import { BackstagePalette, BackstageTheme } from '@backstage/theme'; import { Circle } from 'rc-progress'; import React from 'react'; @@ -52,17 +52,17 @@ export type GaugeProps = { inverse?: boolean; unit?: string; max?: number; - getColor?: GetColor; + getColor?: GaugePropsGetColor; }; -type GetColorArgs = { - palette: BackstageTheme['palette']; +export type GaugePropsGetColorOptions = { + palette: BackstagePalette; value: number; inverse?: boolean; max?: number; }; -export type GetColor = (args: GetColorArgs) => string; +export type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string; const defaultGaugeProps = { fractional: true, @@ -71,7 +71,7 @@ const defaultGaugeProps = { max: 100, }; -export const getProgressColor: GetColor = ({ +export const getProgressColor: GaugePropsGetColor = ({ palette, value, inverse, diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx index f1fd281b35..0fa51b3919 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { InfoCard, InfoCardVariants } from '../../layout/InfoCard'; import { BottomLinkProps } from '../../layout/BottomLink'; -import { Gauge, GetColor } from './Gauge'; +import { Gauge, GaugePropsGetColor } from './Gauge'; type Props = { title: string; @@ -28,7 +28,7 @@ type Props = { progress: number; inverse?: boolean; deepLink?: BottomLinkProps; - getColor?: GetColor; + getColor?: GaugePropsGetColor; }; /** @public */ diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index e331ed1fa5..f1e4fb3334 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -20,14 +20,14 @@ import Tooltip from '@material-ui/core/Tooltip'; // @ts-ignore import { Line } from 'rc-progress'; import { BackstageTheme } from '@backstage/theme'; -import { getProgressColor, GetColor } from './Gauge'; +import { getProgressColor, GaugePropsGetColor } from './Gauge'; type Props = { /** * Progress value between 0.0 - 1.0. */ value: number; - getColor?: GetColor; + getColor?: GaugePropsGetColor; }; export function LinearGauge(props: Props) { From f5e5c297ceb396cb87a3ad0fba734d461da225fb Mon Sep 17 00:00:00 2001 From: James Turley Date: Wed, 10 Nov 2021 15:19:58 +0000 Subject: [PATCH 6/7] Update changeset to reflect naming changes Signed-off-by: James Turley --- .changeset/grumpy-pugs-report.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.changeset/grumpy-pugs-report.md b/.changeset/grumpy-pugs-report.md index 6ee56f2bf7..db915b7a79 100644 --- a/.changeset/grumpy-pugs-report.md +++ b/.changeset/grumpy-pugs-report.md @@ -8,16 +8,16 @@ Add new way to override color selection to progress bar/gauge components. which is a function of the type: ```ts -export type GetColor = (args: { +export type GaugePropsGetColor = (args: { palette: Palette; value: number; inverse?: boolean; max?: number; -}) => string | PaletteColor; +}) => string; ``` -Either return a standard Material UI palette color object or a CSS color -string (e.g. "red", "#f02020"), and the gauge will be set to that color. +Return a standard CSS color string (e.g. "red", "#f02020"), and the gauge will +be set to that color. If the prop is omitted, the default implementation is unchanged from previous versions. From 36099bf941649d26b591007978337a7d15a7b7f3 Mon Sep 17 00:00:00 2001 From: James Turley Date: Wed, 10 Nov 2021 16:18:34 +0000 Subject: [PATCH 7/7] Update API report Signed-off-by: James Turley --- packages/core-components/api-report.md | 24 +++++++++++++++++-- .../src/components/ProgressBars/Gauge.tsx | 3 +++ .../src/components/ProgressBars/index.ts | 5 ++++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 13929db7a3..0f1e3510ae 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -7,6 +7,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; +import { BackstagePalette } from '@backstage/theme'; import { BackstageTheme } from '@backstage/theme'; import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button'; import { CardHeaderProps } from '@material-ui/core/CardHeader'; @@ -368,8 +369,6 @@ export function FeatureCalloutCircular( // @public (undocumented) export type FiltersContainerClassKey = 'root' | 'title'; -// Warning: (ae-forgotten-export) The symbol "GaugeProps" needs to be exported by the entry point index.d.ts -// // @public (undocumented) export function Gauge(props: GaugeProps): JSX.Element; @@ -384,6 +383,27 @@ export type GaugeCardClassKey = 'root'; // @public (undocumented) export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown'; +// @public (undocumented) +export type GaugeProps = { + value: number; + fractional?: boolean; + inverse?: boolean; + unit?: string; + max?: number; + getColor?: GaugePropsGetColor; +}; + +// @public (undocumented) +export type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string; + +// @public (undocumented) +export type GaugePropsGetColorOptions = { + palette: BackstagePalette; + value: number; + inverse?: boolean; + max?: number; +}; + // @public (undocumented) export function GitHubIcon(props: IconComponentProps): JSX.Element; diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index ef8ec08378..00e7b3257b 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -46,6 +46,7 @@ const useStyles = makeStyles( { name: 'BackstageGauge' }, ); +/** @public */ export type GaugeProps = { value: number; fractional?: boolean; @@ -55,6 +56,7 @@ export type GaugeProps = { getColor?: GaugePropsGetColor; }; +/** @public */ export type GaugePropsGetColorOptions = { palette: BackstagePalette; value: number; @@ -62,6 +64,7 @@ export type GaugePropsGetColorOptions = { max?: number; }; +/** @public */ export type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string; const defaultGaugeProps = { diff --git a/packages/core-components/src/components/ProgressBars/index.ts b/packages/core-components/src/components/ProgressBars/index.ts index 3d821eaac2..5e588ea696 100644 --- a/packages/core-components/src/components/ProgressBars/index.ts +++ b/packages/core-components/src/components/ProgressBars/index.ts @@ -17,5 +17,10 @@ export { GaugeCard } from './GaugeCard'; export type { GaugeCardClassKey } from './GaugeCard'; export { Gauge } from './Gauge'; +export type { + GaugeProps, + GaugePropsGetColor, + GaugePropsGetColorOptions, +} from './Gauge'; export type { GaugeClassKey } from './Gauge'; export { LinearGauge } from './LinearGauge';