diff --git a/packages/manager/.changeset/pr-11872-removed-1742318958886.md b/packages/manager/.changeset/pr-11872-removed-1742318958886.md new file mode 100644 index 0000000000..125e2b652b --- /dev/null +++ b/packages/manager/.changeset/pr-11872-removed-1742318958886.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Removed +--- + +Legacy BetaChip component ([#11872](https://github.com/linode/manager/pull/11872)) diff --git a/packages/manager/.changeset/pr-11872-upcoming-features-1742318903725.md b/packages/manager/.changeset/pr-11872-upcoming-features-1742318903725.md new file mode 100644 index 0000000000..92e160929b --- /dev/null +++ b/packages/manager/.changeset/pr-11872-upcoming-features-1742318903725.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Quotas Tab Beta Chip ([#11872](https://github.com/linode/manager/pull/11872)) diff --git a/packages/manager/cypress/component/components/beta-chip.spec.tsx b/packages/manager/cypress/component/components/beta-chip.spec.tsx index 58641a6e63..b05c7b501d 100644 --- a/packages/manager/cypress/component/components/beta-chip.spec.tsx +++ b/packages/manager/cypress/component/components/beta-chip.spec.tsx @@ -1,9 +1,8 @@ +import { BetaChip } from '@linode/ui'; import * as React from 'react'; import { checkComponentA11y } from 'support/util/accessibility'; import { componentTests, visualTests } from 'support/util/components'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; - componentTests('BetaChip', () => { visualTests((mount) => { it('renders "BETA" text indicator with primary color', () => { @@ -12,7 +11,7 @@ componentTests('BetaChip', () => { }); it('renders "BETA" text indicator with default color', () => { - mount(); + mount(); cy.findByText('beta').should('be.visible'); }); @@ -22,7 +21,7 @@ componentTests('BetaChip', () => { }); it('passes aXe check with default color', () => { - mount(); + mount(); checkComponentA11y(); }); }); diff --git a/packages/manager/src/components/BetaChip/BetaChip.stories.tsx b/packages/manager/src/components/BetaChip/BetaChip.stories.tsx deleted file mode 100644 index 3cc3a4ea93..0000000000 --- a/packages/manager/src/components/BetaChip/BetaChip.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { BetaChip } from './BetaChip'; - -import type { BetaChipProps } from './BetaChip'; -import type { Meta, StoryObj } from '@storybook/react'; - -export const Default: StoryObj = { - render: (args) => , -}; - -const meta: Meta = { - args: { color: 'default' }, - component: BetaChip, - title: 'Foundations/Chip/BetaChip', -}; -export default meta; diff --git a/packages/manager/src/components/BetaChip/BetaChip.test.tsx b/packages/manager/src/components/BetaChip/BetaChip.test.tsx deleted file mode 100644 index 39d2817864..0000000000 --- a/packages/manager/src/components/BetaChip/BetaChip.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { fireEvent } from '@testing-library/react'; -import React from 'react'; - -import { renderWithTheme } from 'src/utilities/testHelpers'; - -import { BetaChip } from './BetaChip'; - -describe('BetaChip', () => { - it('renders with default color', () => { - const { getByTestId } = renderWithTheme(); - const betaChip = getByTestId('betaChip'); - expect(betaChip).toBeInTheDocument(); - expect(betaChip).toHaveStyle('background-color: rgba(0, 0, 0, 0.08)'); - }); - - it('renders with primary color', () => { - const { getByTestId } = renderWithTheme(); - const betaChip = getByTestId('betaChip'); - expect(betaChip).toBeInTheDocument(); - expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)'); - }); - - it('triggers an onClick callback', () => { - const onClickMock = vi.fn(); - const { getByTestId } = renderWithTheme( - - ); - const betaChip = getByTestId('betaChip'); - fireEvent.click(betaChip); - expect(onClickMock).toHaveBeenCalledTimes(1); - }); -}); diff --git a/packages/manager/src/components/BetaChip/BetaChip.tsx b/packages/manager/src/components/BetaChip/BetaChip.tsx deleted file mode 100644 index d5d7f58913..0000000000 --- a/packages/manager/src/components/BetaChip/BetaChip.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Chip } from '@linode/ui'; -import { styled } from '@mui/material/styles'; -import * as React from 'react'; - -import type { ChipProps } from '@linode/ui'; - -export interface BetaChipProps - extends Omit< - ChipProps, - | 'avatar' - | 'clickable' - | 'deleteIcon' - | 'disabled' - | 'icon' - | 'label' - | 'onDelete' - | 'outlineColor' - | 'size' - | 'variant' - > { - /** - * The color of the chip. - * default renders a gray chip, primary renders a blue chip. - */ - color?: 'default' | 'primary'; -} - -/** - * ## Usage - * - * Beta chips label features that are not yet part of Cloud Manager's core supported functionality.
- * **Example:** A beta chip may appear in the [primary navigation](https://github.com/linode/manager/pull/8104#issuecomment-1309334374), - * breadcrumbs, [banners](/docs/components-notifications-dismissible-banners--beta-banners), tabs, and/or plain text to designate beta functionality.
- * **Visual style:** bold, capitalized text; reduced height, letter spacing, and font size; solid color background. - * - */ -export const BetaChip = (props: BetaChipProps) => { - const { color } = props; - - return ( - - ); -}; - -const StyledBetaChip = styled(Chip, { - label: 'StyledBetaChip', -})(({ theme }) => ({ - '& .MuiChip-label': { - padding: 0, - }, - font: theme.font.bold, - fontSize: '0.625rem', - height: 16, - letterSpacing: '.25px', - marginLeft: theme.spacing(), - padding: theme.spacing(0.5), - textTransform: 'uppercase', -})); diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx index b011cd3dca..a047349a02 100644 --- a/packages/manager/src/features/Account/AccountLanding.tsx +++ b/packages/manager/src/features/Account/AccountLanding.tsx @@ -1,4 +1,5 @@ import { useAccount, useProfile } from '@linode/queries'; +import { BetaChip } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { matchPath, useHistory, useLocation } from 'react-router-dom'; @@ -89,6 +90,7 @@ const AccountLanding = () => { ...(showQuotasTab ? [ { + chip: , routeName: '/account/quotas', title: 'Quotas', }, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index af844c1e1c..c07b8bc868 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -1,10 +1,9 @@ -import { CircleProgress, ErrorState, Notice } from '@linode/ui'; +import { BetaChip, CircleProgress, ErrorState, Notice } from '@linode/ui'; import { useEditableLabelState } from '@linode/utilities'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { matchPath, useHistory, useParams } from 'react-router-dom'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; @@ -115,7 +114,9 @@ export const DatabaseDetail = () => { if (isMonitorEnabled) { tabs.splice(1, 0, { - chip: flags.dbaasV2MonitorMetrics?.beta ? : null, + chip: flags.dbaasV2MonitorMetrics?.beta ? ( + + ) : null, routeName: `/databases/${engine}/${id}/monitor`, title: 'Monitor', }); diff --git a/packages/ui/.changeset/pr-11872-fixed-1742318981340.md b/packages/ui/.changeset/pr-11872-fixed-1742318981340.md new file mode 100644 index 0000000000..d64d3f64d4 --- /dev/null +++ b/packages/ui/.changeset/pr-11872-fixed-1742318981340.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Fixed +--- + +BetaChip `color` prop ([#11872](https://github.com/linode/manager/pull/11872)) diff --git a/packages/ui/src/components/BetaChip/BetaChip.test.tsx b/packages/ui/src/components/BetaChip/BetaChip.test.tsx index ebd06322c1..b9300601a2 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.test.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.test.tsx @@ -7,7 +7,7 @@ import { renderWithTheme } from '../../utilities/testHelpers'; import { BetaChip } from './BetaChip'; describe('BetaChip', () => { - it('renders with default color', () => { + it('renders with default color (primary)', () => { const { getByTestId } = renderWithTheme(); const betaChip = getByTestId('betaChip'); expect(betaChip).toBeInTheDocument(); @@ -15,16 +15,16 @@ describe('BetaChip', () => { }); it('renders with primary color', () => { - const { getByTestId } = renderWithTheme(); + const { getByTestId } = renderWithTheme(); const betaChip = getByTestId('betaChip'); expect(betaChip).toBeInTheDocument(); - expect(betaChip).toHaveStyle('background-color: rgb(16, 138, 214)'); + expect(betaChip).toHaveStyle('background-color: rgb(131, 131, 140)'); }); it('triggers an onClick callback', () => { const onClickMock = vi.fn(); const { getByTestId } = renderWithTheme( - + ); const betaChip = getByTestId('betaChip'); fireEvent.click(betaChip); diff --git a/packages/ui/src/components/BetaChip/BetaChip.tsx b/packages/ui/src/components/BetaChip/BetaChip.tsx index 33b67e1271..a5c870b99b 100644 --- a/packages/ui/src/components/BetaChip/BetaChip.tsx +++ b/packages/ui/src/components/BetaChip/BetaChip.tsx @@ -23,7 +23,7 @@ export interface BetaChipProps * The color of the chip. * default renders a gray chip, primary renders a blue chip. */ - color?: 'default' | 'primary'; + color?: 'primary' | 'secondary'; } /** @@ -36,7 +36,7 @@ export interface BetaChipProps * */ export const BetaChip = (props: BetaChipProps) => { - const { color } = props; + const { color = 'primary' } = props; return ( { const StyledBetaChip = styled(Chip, { label: 'StyledBetaChip', -})(({ theme }) => ({ + shouldForwardProp: (prop) => prop !== 'color', +})(({ color, theme }) => ({ '& .MuiChip-label': { padding: 0, }, - background: 'lch(77.7 28.7 275 / 0.12)', - color: theme.tokens.color.Ultramarine[50], + background: + color === 'primary' + ? 'lch(77.7 28.7 275 / 0.12)' + : theme.tokens.color.Neutrals[60], + color: + color === 'primary' + ? theme.tokens.color.Ultramarine[50] + : theme.tokens.color.Neutrals.White, + font: theme.font.bold, fontSize: '0.625rem', height: 16,