Category widget improvements (#54)

* Fix cursor for "Others" category in Category widget * Force scroll to search field for CategoryWidget on mobile * No filtered results message for Category Widget * Update changelog
CartoDB · Dec 18, 2020 · 751c018 · 751c018
1 parent 5ae8725
commit 751c018
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Not released
 - Pass actions and options to WrapperWidgetUI from HistogramWidget and CategoryWidget [#50](https://github.com/CartoDB/carto-react-lib/pull/50)
 - Fix addSource in cartoSlice spreading layerAttributes [#52∫](https://github.com/CartoDB/carto-react-lib/pull/52)
+- Category widget UX improvements [#54](https://github.com/CartoDB/carto-react-lib/pull/54)
 
 ## 1.0.0-beta8 (2020-12-15)
 - Remove OAuthLogin component (extracted to the template project) [#44](https://github.com/CartoDB/carto-react-lib/pull/44)

diff --git a/src/ui/widgets/CategoryWidgetUI.js b/src/ui/widgets/CategoryWidgetUI.js
@@ -74,7 +74,9 @@ const useStyles = makeStyles((theme) => ({
 
   unselected: {},
 
-  rest: {},
+  rest: {
+    cursor: 'default'
+  },
 
   optionsSelectedBar: {
     marginBottom: theme.spacing(2),
@@ -199,6 +201,10 @@ function CategoryWidgetUI(props) {
     }
   };
 
+  const handleSearchFocus = (event) => {
+    event.currentTarget.scrollIntoView();
+  };
+
   const handleSearchChange = (event) => {
     setSearchValue(event.currentTarget.value);
   };
@@ -482,6 +488,7 @@ function CategoryWidgetUI(props) {
                 size='small'
                 placeholder='Search'
                 onChange={handleSearchChange}
+                onFocus={handleSearchFocus}
                 className={classes.searchInput}
                 InputProps={{
                   startAdornment: (
@@ -506,14 +513,22 @@ function CategoryWidgetUI(props) {
                     }
                   />
                 ))
-              : (data.length === 0 && !loading) && (
-                  <Alert severity='warning'>
-                    <AlertTitle>NO DATA AVAILABLE</AlertTitle>
-                    There are no results for the combination of filters applied to your
-                    data. Try tweaking your filters, or zoom and pan the map to adjust the
-                    Map View.
-                  </Alert>
-                )}
+              : (data.length === 0 && !loading)
+                ? (
+                    <Alert severity='warning'>
+                      <AlertTitle>NO DATA AVAILABLE</AlertTitle>
+                      There are no results for the combination of filters applied to your
+                      data. Try tweaking your filters, or zoom and pan the map to adjust the
+                      Map View.
+                    </Alert>
+                )
+                : (
+                  <>
+                    <Typography variant="body2">No results</Typography>
+                    <Typography variant="caption">Your search "{searchValue}" didn't match with any value.</Typography>
+                  </>
+                )
+            }
           </Grid>
           {data.length > maxItems ? (
             showAll ? (