fix(scene-composer): add scroll bar to show all tag icons by default

awslabs · Oct 20, 2023 · 15c5dee · 15c5dee
1 parent 699b6ba
commit 15c5dee
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/...scene-composer/src/components/panels/scene-components/tag-style/IconPicker/IconPicker.tsx b/...scene-composer/src/components/panels/scene-components/tag-style/IconPicker/IconPicker.tsx
@@ -27,11 +27,10 @@ export const IconPicker = ({
   });
   const [showPicker, setShowPicker] = useState<boolean>(false);
   const iconsPerPage = 8; // Number of icons per page
-  const defaultRows = 3; // Number of rows to display by default
   const icons: IconDefinition[] = Object.values(fas); // Array of all Font Awesome Solid icons
   const totalPages = Math.ceil(icons.length / iconsPerPage); // Calculate the total number of pages
   const [currentPage] = useState<number>(1);
-  const [numRows, setNumRows] = useState(defaultRows);
+  const [numRows, setNumRows] = useState(totalPages);
   const generateRandomString = Math.random().toString(16).slice(2);
   const [randomDomId] = useState<string>(generateRandomString);
   // Calculate the starting and ending index of icons for the current page
@@ -63,6 +62,12 @@ export const IconPicker = ({
     };
   }, [showPicker, handleOutsideClick]);
 
+  useEffect(() => {
+    if (filteringText)
+      setNumRows(0); //This will confine the popover to show only search results when user starts typing
+    else setNumRows(totalPages); // restore default when no text in search field.
+  }, [filteringText]);
+
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
     if (scrollTop + clientHeight === scrollHeight && numRows < totalPages) {

diff --git a/...mponents/panels/scene-components/tag-style/IconPicker/IconPickerUtils/IconPickerStyles.ts b/...mponents/panels/scene-components/tag-style/IconPicker/IconPickerUtils/IconPickerStyles.ts
@@ -6,6 +6,7 @@ export const tmIconPickerPopover: CSSProperties = {
   zIndex: 1,
   top: '100%',
   left: '80%',
+  width: '170%', //this to not allow the container to shrink when search results are less than 8 and keep the min width equal to the width for 8 icons which is the chosen # of icons per row.
   transform: 'translateX(-40%)',
   background: colorBackgroundHomeHeader,
   borderRadius: '25px',