Merge pull request #2642 from teamleadercrm/select-pointer

Make cursor a pointer on select inputs

CHANGELOG.md

@@ -12,6 +12,13 @@
 
 ### Dependency updates
 
+## [21.1.0] - 2023-05-08
+
+### Changed
+
+- `Select`: Added pointer cursor on hover ([@BeirlaenAaron](https://https://github.com/BeirlaenAaron) in [#2642](https://github.com/teamleadercrm/ui/pull/2642))
+- `FilterSelection`: Added pointer cursor on hover ([@BeirlaenAaron](https://https://github.com/BeirlaenAaron) in [#2642](https://github.com/teamleadercrm/ui/pull/2642))
+
 ## [21.0.2] - 2023-04-25
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "21.0.2",
+  "version": "21.1.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/filterSelection/FilterSelection.tsx

@@ -101,7 +101,11 @@ const FilterSelection: GenericComponent<FilterSelectionProps> = forwardRef<HTMLE
       <Box
         ref={ref}
         data-teamleader-ui="filter-selection"
-        className={cx(theme['select-control'], status === STATUS.DEFAULT && theme['select-control--hovered'])}
+        className={cx(
+          theme['select-control'],
+          status === STATUS.DEFAULT && theme['select-control--hovered'],
+          status === STATUS.DISABLED && theme['select-control--disabled'],
+        )}
         role="button"
         tabIndex={0}
         display="flex"

src/components/filterSelection/theme.css

@@ -1,7 +1,7 @@
 .select-control {
   height: 36px;
   width: max-content;
-  cursor: default;
+  cursor: pointer;
 
   &--hovered {
     &:hover {
@@ -12,6 +12,10 @@
       }
     }
   }
+
+  &--disabled {
+    cursor: default;
+  }
 }
 
 .select-clear {
@@ -55,6 +59,10 @@
 
 .select-clear-icon {
   cursor: pointer;
+
+  &--disabled {
+    cursor: default;
+  }
 }
 
 .select-dropdown-indicator--focused {

src/components/select/Select.tsx

@@ -140,6 +140,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
     width = '100%',
     truncateOptionText,
     options,
+    isSearchable,
     ...otherProps
   }: SelectProps<Option, IsMulti, IsClearable>,
   ref: ForwardedRef<SelectRef<Option, IsMulti>>,
@@ -181,6 +182,8 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
       width,
     };
 
+    const cursor = isDisabled ? 'default' : isSearchable || isSearchable === undefined ? 'text' : 'pointer';
+
     if (inverse) {
       return {
         ...commonStyles,
@@ -208,6 +211,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
           : isFocused
           ? `0 0 0 1px ${COLOR.TEAL.LIGHT}`
           : 'none',
+        cursor,
       };
     }
 
@@ -237,6 +241,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
         : isFocused
         ? `0 0 0 1px ${COLOR.NEUTRAL.DARKEST}`
         : 'none',
+      cursor,
     };
   };
 
@@ -365,6 +370,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
       paddingLeft: size === 'tiny' ? '3px' : '6px',
       paddingRight: size === 'tiny' ? '3px' : '6px',
       transition: 'background-color .35s cubic-bezier(.4, 0, .2, 1)',
+      cursor: 'pointer',
     };
   };
 
@@ -383,6 +389,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
             wordBreak: 'break-word',
           }),
       padding: '8px 12px',
+      cursor: isDisabled ? 'default' : 'pointer',
     };
 
     if (inverse) {
@@ -496,6 +503,7 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
         menuShouldBlockScroll
         styles={getStyles()}
         options={options || []}
+        isSearchable={isSearchable}
         {...restProps}
       />
       <ValidationText error={error} help={helpText} inverse={inverse} success={success} warning={warning} />

src/components/select/__tests__/__snapshots__/Select.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`Component - Select does not render a clear button when no value is prov
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-zylvh4-control"
+        class=" css-8v26ep-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -104,7 +104,7 @@ exports[`Component - Select renders 1`] = `
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-zylvh4-control"
+        class=" css-8v26ep-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -188,7 +188,7 @@ exports[`Component - Select renders a clear button when a value is provided 1`]
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-zylvh4-control"
+        class=" css-8v26ep-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -291,7 +291,7 @@ exports[`Component - Select renders a help text 1`] = `
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-zylvh4-control"
+        class=" css-8v26ep-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -381,7 +381,7 @@ exports[`Component - Select renders a success message 1`] = `
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-14enqk9-control"
+        class=" css-1ecujp2-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -473,7 +473,7 @@ exports[`Component - Select renders a warning message 1`] = `
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-5mjksy-control"
+        class=" css-1qn4nre-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"
@@ -565,7 +565,7 @@ exports[`Component - Select renders an error message 1`] = `
         class="css-1f43avz-a11yText-A11yText"
       />
       <div
-        class=" css-sg9y4q-control"
+        class=" css-153luwj-control"
       >
         <div
           class=" css-1og2pl5-ValueContainer"