feat: update DS components to match unified search (#1463)

* feat(UXPT-6318): update DS components to match unified search * changelog * update popover snapshots * popover changelog * add Dialog headerContentProps * fix snapshots * fix(select): remove default prop overriding borderRadius styles * update Select borderRadius to full only on subtle sm and md sizes
priceline · Feb 29, 2024 · ded527a · ded527a
1 parent 72d1090
commit ded527a
Show file tree

Hide file tree

Showing 18 changed files with 259 additions and 53 deletions.
diff --git a/...nges/pcln-design-system/feat-UXPT-6318-update-ds-for-unified-search_2024-02-27-04-25.json b/...nges/pcln-design-system/feat-UXPT-6318-update-ds-for-unified-search_2024-02-27-04-25.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Minor Button and Select style updates",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/...on/changes/pcln-popover/feat-UXPT-6318-update-ds-for-unified-search_2024-02-27-15-28.json b/...on/changes/pcln-popover/feat-UXPT-6318-update-ds-for-unified-search_2024-02-27-15-28.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-popover",
+      "comment": "Updating snapshot",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-popover"
+}
diff --git a/packages/core/src/Button/Button.spec.tsx b/packages/core/src/Button/Button.spec.tsx
@@ -259,10 +259,10 @@ describe('Button', () => {
           modifier: ':hover',
         })
         expect(button).toHaveStyleRule('outline', `0px solid ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
         expect(button).toHaveStyleRule('box-shadow', `0 0 0 2px ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
       })
 
@@ -346,7 +346,7 @@ describe('Button', () => {
 
         const button = getByRole('button')
 
-        expect(button).toHaveStyleRule('color', theme.palette.text.light, {
+        expect(button).toHaveStyleRule('color', theme.palette.background.tone, {
           modifier: ':disabled',
         })
         expect(button).toHaveStyleRule('background-color', theme.palette.background.base, {
@@ -375,10 +375,10 @@ describe('Button', () => {
           modifier: ':hover',
         })
         expect(button).toHaveStyleRule('outline', `0px solid ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
         expect(button).toHaveStyleRule('box-shadow', `0 0 0 2px ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
       })
 
@@ -391,7 +391,7 @@ describe('Button', () => {
 
         const button = getByRole('button')
 
-        expect(button).toHaveStyleRule('color', theme.palette.text.light, {
+        expect(button).toHaveStyleRule('color', theme.palette.background.tone, {
           modifier: ':disabled',
         })
         expect(button).toHaveStyleRule('background-color', theme.palette.background.base, {
@@ -429,10 +429,10 @@ describe('Button', () => {
           modifier: ':hover',
         })
         expect(button).toHaveStyleRule('outline', `0px solid ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
         expect(button).toHaveStyleRule('box-shadow', `0 0 0 2px ${theme.palette.primary.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
       })
 
@@ -445,7 +445,7 @@ describe('Button', () => {
 
         const button = getByRole('button')
 
-        expect(button).toHaveStyleRule('color', theme.palette.text.light, {
+        expect(button).toHaveStyleRule('color', theme.palette.background.tone, {
           modifier: ':disabled',
         })
         expect(button).toHaveStyleRule('background-color', theme.palette.background.base, {
@@ -477,10 +477,10 @@ describe('Button', () => {
           modifier: ':hover',
         })
         expect(button).toHaveStyleRule('outline', `0px solid ${theme.palette.warning.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
         expect(button).toHaveStyleRule('box-shadow', `0 0 0 2px ${theme.palette.warning.dark}`, {
-          modifier: ':focus',
+          modifier: ':focus-visible',
         })
       })
 
@@ -493,7 +493,7 @@ describe('Button', () => {
 
         const button = getByRole('button')
 
-        expect(button).toHaveStyleRule('color', theme.palette.text.light, {
+        expect(button).toHaveStyleRule('color', theme.palette.background.tone, {
           modifier: ':disabled',
         })
         expect(button).toHaveStyleRule('background-color', theme.palette.background.base, {

diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
@@ -69,7 +69,7 @@ const variations = {
       background-color: ${(props) => getPaletteColor(props.disabled ? 'light' : 'dark')(props)};
       ${(props) => (props.disabled ? '' : `color: ${getTextColorOn('dark')(props)};`)}
     }
-    &:focus {
+    &:focus-visible {
       outline: ${(props) => `0px solid ${getPaletteColor(props.disabled ? '' : 'dark')(props)}`};
       box-shadow: ${(props) => ` 0 0 0 2px  ${getPaletteColor(props.disabled ? '' : 'dark')(props)}`};
     }
@@ -113,7 +113,7 @@ const variations = {
       background-color: ${getPaletteColor('background.base')};
       color: ${getPaletteColor('dark')};
     }
-    &:focus {
+    &:focus-visible {
       outline: 0px solid ${getPaletteColor('dark')};
       box-shadow: 0 0 0 2px ${getPaletteColor('dark')};
     }
@@ -125,7 +125,7 @@ const variations = {
       background-color: ${getPaletteColor('background.tint')};
       color: ${getPaletteColor('dark')};
     }
-    &:focus {
+    &:focus-visible {
       outline: 0px solid ${getPaletteColor('dark')};
       box-shadow: 0 0 0 2px ${getPaletteColor('dark')};
     }
@@ -137,7 +137,7 @@ const variations = {
       background-color: ${getPaletteColor('background.base')};
       color: ${getPaletteColor('dark')};
     }
-    &:focus {
+    &:focus-visible {
       outline: 0px solid ${getPaletteColor('dark')};
       box-shadow: 0 0 0 2px ${getPaletteColor('dark')};
     }
@@ -153,7 +153,7 @@ const variations = {
         background-color: ${getPaletteColor('light')(props)};
         color: ${getPaletteColor('dark')(props)};
       }`}
-    &:focus {
+    &:focus-visible {
       outline: ${(props) => `0px solid ${getPaletteColor(props.disabled ? '' : 'dark')(props)}`};
       box-shadow: ${(props) => ` 0 0 0 2px  ${getPaletteColor(props.disabled ? '' : 'dark')(props)}`};
     }
@@ -246,7 +246,7 @@ export const buttonStyles = css`
 
   &:disabled {
     cursor: not-allowed;
-    color: ${getPaletteColor('text.light')};
+    color: ${getPaletteColor('background.tone')};
     background-color: ${getPaletteColor('background.base')};
   }
 `

diff --git a/packages/core/src/Dialog/Dialog.stories.tsx b/packages/core/src/Dialog/Dialog.stories.tsx
@@ -10,6 +10,7 @@ import { Grid, type GridProps } from '../Grid/Grid'
 import { Text } from '../Text/Text'
 import { Dialog, type DialogProps } from './Dialog'
 import { argTypes, defaultArgs } from './Dialog.stories.args'
+import { Flex } from '../Flex/Flex'
 
 type DialogStory = StoryObj<DialogProps>
 
@@ -68,6 +69,27 @@ export const WithHeaderContent: DialogStory = {
   },
 }
 
+export const WithHeaderContentProps: DialogStory = {
+  ...Playground,
+  args: {
+    headerContent: (
+      <Flex justifyContent='space-between'>
+        <Box width={40} />
+        <Text textStyle='paragraph'>
+          <Breadcrumbs>
+            <Breadcrumbs.Link href='javascript:void(0)' label='Home' />
+            <Breadcrumbs.Link href='javascript:void(0)' label='Flights' />
+            <Breadcrumbs.Link href='javascript:void(0)' label='Settings' />
+          </Breadcrumbs>
+        </Text>
+        <Box width={40} />
+      </Flex>
+    ),
+    headerContentProps: { px: 2, py: 2, templateColumns: '1fr' },
+    headerColorScheme: 'neutralDarkOnLightest',
+  },
+}
+
 const ExampleImage = () => (
   <img
     src='https://s1.pclncdn.com/design-assets/hero/beach.jpg?opto&optimize=medium&auto=jpg&width=600&height=450&fit=crop'

diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx
@@ -155,6 +155,7 @@ export const DialogContent = ({
   fullWidth,
   headerColorScheme = 'heading',
   headerContent,
+  headerContentProps,
   headerIcon,
   headerShowCloseButton,
   hugColor,
@@ -224,6 +225,7 @@ export const DialogContent = ({
               templateColumns='auto 1fr'
               alignItems='center'
               colorScheme={headerColorScheme}
+              {...headerContentProps}
             >
               <Grid autoFlow='column' gap='2'>
                 {headerIcon}

diff --git a/packages/core/src/Dialog/Dialog.tsx b/packages/core/src/Dialog/Dialog.tsx
@@ -5,6 +5,7 @@ import { OverflowProps } from 'styled-system'
 import type { BorderRadius, ColorSchemes, PaletteColor, ZIndex } from '../theme/theme'
 import type { DialogSize } from './Dialog.styled'
 import { DialogContent, DialogOverlay } from './Dialog.styled'
+import { GridProps } from '../Grid/Grid'
 
 /**
  * @public
@@ -19,6 +20,7 @@ export type DialogProps = Omit<OverflowProps, 'overflow'> & {
   fullWidth?: boolean
   headerColorScheme?: keyof ColorSchemes
   headerContent?: string | React.ReactNode
+  headerContentProps?: GridProps
   headerIcon?: React.ReactNode
   headerShowCloseButton?: boolean
   hugColor?: PaletteColor
@@ -47,6 +49,7 @@ const PclnDialog = ({
   fullWidth = false,
   headerColorScheme = 'heading',
   headerContent,
+  headerContentProps,
   headerIcon,
   headerShowCloseButton = false,
   hugColor,
@@ -88,6 +91,7 @@ const PclnDialog = ({
               fullWidth={fullWidth}
               headerColorScheme={headerColorScheme}
               headerContent={headerContent}
+              headerContentProps={headerContentProps}
               headerIcon={headerIcon}
               headerShowCloseButton={headerShowCloseButton}
               hugColor={hugColor}

diff --git a/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap b/packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -287,17 +287,17 @@ exports[`FormField disabled state renders select with icon - disabled 1`] = `
   -moz-appearance: none;
   appearance: none;
   background-color: transparent;
-  border-radius: 12px;
   border-style: solid;
   border-width: 1px;
+  border-radius: 12px;
   color: inherit;
   display: block;
   font-family: inherit;
+  text-overflow: ellipsis;
   width: 100%;
   padding: 14px 32px 14px 12px;
   border-color: #c0cad5;
   padding-left: 40px;
-  border-radius: 12px;
   font-size: 16px;
   margin: 0px;
 }
@@ -313,6 +313,10 @@ exports[`FormField disabled state renders select with icon - disabled 1`] = `
   opacity: 1;
 }
 
+.c10:disabled ~ svg {
+  color: #4f6f8f;
+}
+
 .c10:focus {
   outline: 0;
   border-color: #0068ef;
@@ -1026,16 +1030,16 @@ exports[`FormField renders with Select  1`] = `
   -moz-appearance: none;
   appearance: none;
   background-color: transparent;
-  border-radius: 12px;
   border-style: solid;
   border-width: 1px;
+  border-radius: 12px;
   color: inherit;
   display: block;
   font-family: inherit;
+  text-overflow: ellipsis;
   width: 100%;
   padding: 14px 32px 14px 12px;
   border-color: #c0cad5;
-  border-radius: 12px;
   font-size: 16px;
   margin: 0px;
 }
@@ -1051,6 +1055,10 @@ exports[`FormField renders with Select  1`] = `
   opacity: 1;
 }
 
+.c4:disabled ~ svg {
+  color: #4f6f8f;
+}
+
 .c4:focus {
   outline: 0;
   border-color: #0068ef;
@@ -1224,17 +1232,17 @@ exports[`FormField renders with Select and Icon 1`] = `
   -moz-appearance: none;
   appearance: none;
   background-color: transparent;
-  border-radius: 12px;
   border-style: solid;
   border-width: 1px;
+  border-radius: 12px;
   color: inherit;
   display: block;
   font-family: inherit;
+  text-overflow: ellipsis;
   width: 100%;
   padding: 14px 32px 14px 12px;
   border-color: #c0cad5;
   padding-left: 40px;
-  border-radius: 12px;
   font-size: 16px;
   margin: 0px;
 }
@@ -1250,6 +1258,10 @@ exports[`FormField renders with Select and Icon 1`] = `
   opacity: 1;
 }
 
+.c8:disabled ~ svg {
+  color: #4f6f8f;
+}
+
 .c8:focus {
   outline: 0;
   border-color: #0068ef;

diff --git a/packages/core/src/IconButton/__snapshots__/IconButton.spec.tsx.snap b/packages/core/src/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -61,14 +61,14 @@ exports[`IconButton renders without props 1`] = `
   color: #fff;
 }
 
-.c0:focus {
+.c0:focus-visible {
   outline: 0px solid #049;
   box-shadow: 0 0 0 2px #049;
 }
 
 .c0:disabled {
   cursor: not-allowed;
-  color: #4f6f8f;
+  color: #879db3;
   background-color: #edf0f3;
 }