[UXPT]: Update select to use pointer on hover (#1475)

common/changes/pcln-design-system/chore-update-select-hover-cursor_2024-03-25-15-27.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Updated Select to use pointer while hovering",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/FormField/__snapshots__/FormField.spec.tsx.snap

@@ -306,6 +306,10 @@ exports[`FormField disabled state renders select with icon - disabled 1`] = `
   display: none;
 }
 
+.c10:hover {
+  cursor: pointer;
+}
+
 .c10:disabled {
   background-color: #f4f6f8;
   color: #4f6f8f;
@@ -1048,6 +1052,10 @@ exports[`FormField renders with Select  1`] = `
   display: none;
 }
 
+.c4:hover {
+  cursor: pointer;
+}
+
 .c4:disabled {
   background-color: #f4f6f8;
   color: #4f6f8f;
@@ -1251,6 +1259,10 @@ exports[`FormField renders with Select and Icon 1`] = `
   display: none;
 }
 
+.c8:hover {
+  cursor: pointer;
+}
+
 .c8:disabled {
   background-color: #f4f6f8;
   color: #4f6f8f;

packages/core/src/Select/Select.spec.tsx

@@ -6,12 +6,12 @@ import { getPaletteColor } from '../utils/utils'
 import { Select } from './Select'
 
 describe('Select', () => {
-  test('renders', () => {
+  it('renders', () => {
     const json = rendererCreateWithTheme(<Select />).toJSON()
     expect(json).toMatchSnapshot()
   })
 
-  test('it renders disabled', () => {
+  it('renders disabled', () => {
     const paletteTheme = createTheme(theme)
     render(
       <Select data-testId='disabled-select' defaultValue='Premium Economy' disabled>
@@ -38,7 +38,7 @@ describe('Select', () => {
       it('should render correctly', () => {
         const paletteTheme = createTheme(theme)
         render(
-          <Select data-testId='select' defaultValue='Premium Economy' variation='subtle'>
+          <Select data-testId='select' defaultValue='Premium Economy' variation='subtle' size='lg'>
             <option>Premium Economy</option>
           </Select>
         )
@@ -54,6 +54,7 @@ describe('Select', () => {
         )
         expect(select).toHaveStyleRule('color', getPaletteColor('primary.base')({ theme: paletteTheme }))
         expect(select).toHaveStyleRule('font-weight', 'bold')
+        expect(select).toHaveStyleRule('border-radius', '12px')
         expect(select).toHaveStyleRule(
           'background-color',
           getPaletteColor('background.tint')({ theme: paletteTheme }),
@@ -87,6 +88,17 @@ describe('Select', () => {
         )
       })
 
+      it('should render with round border in small or medium sizes', () => {
+        render(
+          <Select data-testId='select' defaultValue='Premium Economy' variation='subtle' size='md'>
+            <option>Premium Economy</option>
+          </Select>
+        )
+
+        const select = screen.getByTestId('select')
+        expect(select).toHaveStyleRule('border-radius', '9999px')
+      })
+
       it('should render correctly when disabled', () => {
         const paletteTheme = createTheme(theme)
         render(

packages/core/src/Select/Select.tsx

@@ -103,6 +103,10 @@ const SelectBase: React.FC<SelectProps> = styled.select.attrs(borderRadiusAttrs)
     display: none;
   }
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &:disabled {
     background-color: ${getPaletteColor('background.light')};
     color: ${getPaletteColor('text.light')};

packages/core/src/Select/__snapshots__/Select.spec.tsx.snap

@@ -57,6 +57,10 @@ exports[`Select renders 1`] = `
   display: none;
 }
 
+.c2:hover {
+  cursor: pointer;
+}
+
 .c2:disabled {
   background-color: #f4f6f8;
   color: #4f6f8f;