feat!: removes stale product colors from palette (#1794)

Author: geotrev

docs/migration.md

@@ -58,6 +58,8 @@ consider additional positioning prop support on a case-by-case basis.
 - Removed `Sidebar` and `Subnav`: UI no longer recommended by Garden
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
 - Removed `hasFooter` prop for `Body` (no replacement needed)
+- Removed `message` and `connect` values from `product` prop in `Header.Item` and `Nav.Item`
+  Typings have been updated accordingly
 - The following React component types have changed:
   - Removed `IBodyProps` type export.
   - `Header.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
@@ -192,6 +194,7 @@ consider additional positioning prop support on a case-by-case basis.
 - The `focusVisibleRef` prop (and the resulting scoping `<div>`) has been
   removed from `<ThemeProvider>`. Current browser support obviates the need for a
   `:focus-visible` polyfill.
+- Removed `message` and `connect` values from `PALETTE.product`
 - Utility function `getColor` has been refactored with a signature that supports
   v9 light/dark modes. Replace usage with `getColorV8` until custom components can
   be upgraded to utilize the new `getColor` function.

packages/chrome/README.md

@@ -16,17 +16,17 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
-import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
+import SupportIcon from '@zendeskgarden/icons/src/26/relationshape-support.svg';
 import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
 
 <ThemeProvider>
   <Chrome>
     <Nav isExpanded>
-      <Nav.Item hasLogo product="connect" title="Zendesk Connect">
+      <Nav.Item hasLogo product="support" title="Zendesk Support">
         <Nav.ItemIcon>
-          <ConnectIcon />
+          <SupportIcon />
         </Nav.ItemIcon>
-        <NavItemText>Zendesk Connect</NavItemText>
+        <NavItemText>Zendesk Support</NavItemText>
       </Nav.Item>
       <Nav.List>
         <Nav.Item isCurrent>

packages/chrome/demo/stories/ChromeStory.tsx

@@ -8,10 +8,8 @@
 import React, { MouseEventHandler, ReactElement, useState } from 'react';
 import { Story } from '@storybook/react';
 import ChatIcon from '@zendeskgarden/svg-icons/src/26/relationshape-chat.svg';
-import ConnectIcon from '@zendeskgarden/svg-icons/src/26/relationshape-connect.svg';
 import ExploreIcon from '@zendeskgarden/svg-icons/src/26/relationshape-explore.svg';
 import GuideIcon from '@zendeskgarden/svg-icons/src/26/relationshape-guide.svg';
-import MessageIcon from '@zendeskgarden/svg-icons/src/26/relationshape-message.svg';
 import SupportIcon from '@zendeskgarden/svg-icons/src/26/relationshape-support.svg';
 import TalkIcon from '@zendeskgarden/svg-icons/src/26/relationshape-talk.svg';
 import ProductIcon from '@zendeskgarden/svg-icons/src/26/garden.svg';
@@ -64,10 +62,8 @@ const NAV_ICONS = [
 
 const PRODUCT_ICONS: Record<Product, ReactElement<SVGElement>> = {
   chat: <ChatIcon />,
-  connect: <ConnectIcon />,
   explore: <ExploreIcon />,
   guide: <GuideIcon />,
-  message: <MessageIcon />,
   support: <SupportIcon />,
   talk: <TalkIcon />
 };

packages/chrome/src/elements/header/HeaderItem.spec.tsx

@@ -46,10 +46,8 @@ describe('HeaderItem', () => {
   describe('Products', () => {
     const VALID_COLOR_MAP: Record<Product, string> = {
       chat: PALETTE.product.chat,
-      connect: PALETTE.product.connect,
       explore: PALETTE.product.explore,
       guide: PALETTE.product.guide,
-      message: PALETTE.product.message,
       support: PALETTE.product.support,
       talk: PALETTE.product.talk
     };

packages/chrome/src/elements/nav/NavItem.spec.tsx

@@ -177,10 +177,8 @@ describe('NavItem', () => {
   describe('Products', () => {
     const VALID_COLOR_MAP: Record<Product, string> = {
       chat: PALETTE.product.chat,
-      connect: PALETTE.product.connect,
       explore: PALETTE.product.explore,
       guide: PALETTE.product.guide,
-      message: PALETTE.product.message,
       support: PALETTE.product.support,
       talk: PALETTE.product.talk
     };

packages/chrome/src/styled/header/StyledLogoHeaderItem.ts

@@ -28,14 +28,10 @@ const retrieveProductColor = (props: IStyledLogoHeaderItemProps) => {
   switch (props.product) {
     case 'chat':
       return PALETTE.product.chat;
-    case 'connect':
-      return PALETTE.product.connect;
     case 'explore':
       return PALETTE.product.explore;
     case 'guide':
       return PALETTE.product.guide;
-    case 'message':
-      return PALETTE.product.message;
     case 'support':
       return PALETTE.product.support;
     case 'talk':

packages/chrome/src/styled/nav/StyledLogoNavItem.ts

@@ -16,14 +16,10 @@ const retrieveProductColor = (product?: Product) => {
   switch (product) {
     case 'chat':
       return PALETTE.product.chat;
-    case 'connect':
-      return PALETTE.product.connect;
     case 'explore':
       return PALETTE.product.explore;
     case 'guide':
       return PALETTE.product.guide;
-    case 'message':
-      return PALETTE.product.message;
     case 'support':
       return PALETTE.product.support;
     case 'talk':

packages/chrome/src/types/index.ts

@@ -9,15 +9,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'reac
 
 export const PLACEMENT = ['end', 'start'] as const;
 
-export const PRODUCTS = [
-  'chat',
-  'connect',
-  'explore',
-  'guide',
-  'message',
-  'support',
-  'talk'
-] as const;
+export const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'] as const;
 
 export type Product = (typeof PRODUCTS)[number];
 

packages/theming/src/elements/palette/__snapshots__/index.spec.ts.snap

@@ -173,11 +173,9 @@ exports[`PALETTE matches snapshot 1`] = `
   },
   "product": {
     "chat": "#f79a3e",
-    "connect": "#ff6224",
     "explore": "#30aabc",
     "gather": "#f6c8be",
     "guide": "#eb4962",
-    "message": "#37b8af",
     "sell": "#c38f00",
     "support": "#00a656",
     "talk": "#efc93d",

packages/theming/src/elements/palette/index.ts

@@ -10,11 +10,9 @@ const PALETTE = {
   white: '#fff',
   product: {
     support: '#00a656',
-    message: '#37b8af',
     explore: '#30aabc',
     gather: '#f6c8be',
     guide: '#eb4962',
-    connect: '#ff6224',
     chat: '#f79a3e',
     talk: '#efc93d',
     sell: '#c38f00'