upcoming: [M3-9539] - Quotas Tab Beta Chip

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))

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))

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(<BetaChip color="default" />);
+      mount(<BetaChip color="secondary" />);
       cy.findByText('beta').should('be.visible');
     });
 
@@ -22,7 +21,7 @@ componentTests('BetaChip', () => {
     });
 
     it('passes aXe check with default color', () => {
-      mount(<BetaChip color="default" />);
+      mount(<BetaChip color="secondary" />);
       checkComponentA11y();
     });
   });

packages/manager/src/features/Account/AccountLanding.tsx

@@ -1,3 +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';
@@ -14,7 +16,6 @@ import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/use
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { useAccount, useProfile } from '@linode/queries';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import AccountLogins from './AccountLogins';
@@ -89,6 +90,7 @@ const AccountLanding = () => {
     ...(showQuotasTab
       ? [
           {
+            chip: <BetaChip color="secondary" />,
             routeName: '/account/quotas',
             title: 'Quotas',
           },

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 ? <BetaChip /> : null,
+      chip: flags.dbaasV2MonitorMetrics?.beta ? (
+        <BetaChip color="secondary" />
+      ) : null,
       routeName: `/databases/${engine}/${id}/monitor`,
       title: 'Monitor',
     });

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))

packages/ui/src/components/BetaChip/BetaChip.test.tsx

@@ -7,24 +7,24 @@ 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(<BetaChip />);
     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(<BetaChip color="primary" />);
+    const { getByTestId } = renderWithTheme(<BetaChip color="secondary" />);
     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(
-      <BetaChip color="default" onClick={onClickMock} />
+      <BetaChip color="primary" onClick={onClickMock} />
     );
     const betaChip = getByTestId('betaChip');
     fireEvent.click(betaChip);

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 (
     <StyledBetaChip
@@ -50,12 +50,20 @@ export const BetaChip = (props: BetaChipProps) => {
 
 const StyledBetaChip = styled(Chip, {
   label: 'StyledBetaChip',
-})<BetaChipProps>(({ theme }) => ({
+  shouldForwardProp: (prop) => prop !== 'color',
+})<BetaChipProps>(({ 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,