Remove expand section (#88)

* Remove expand section in IconSetPreview * Remove arrow-down icon * Remove expand section styles
aykutkardas · Jul 30, 2022 · 82b2114 · 82b2114
1 parent 9bef105
commit 82b2114
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 55 deletions.
diff --git a/src/components/Icon/selection.json b/src/components/Icon/selection.json
@@ -155,18 +155,6 @@
         "name": "import"
       }
     },
-    {
-      "icon": {
-        "paths": [
-          "M877.248 621.248l-320 320c-24.992 24.992-65.504 24.992-90.496 0l-320-320c-24.992-24.992-24.992-65.504 0-90.496s65.504-24.992 90.496 0l210.752 210.752v-613.504c0-35.36 28.64-64 64-64s64 28.64 64 64v613.504l210.752-210.752c12.48-12.48 28.864-18.752 45.248-18.752s32.768 6.24 45.248 18.752c24.992 24.992 24.992 65.504 0 90.496z"
-        ],
-        "attrs": [{}],
-        "width": 1024
-      },
-      "properties": {
-        "name": "arrow-down"
-      }
-    },
     {
       "icon": {
         "paths": [

diff --git a/src/components/IconSetPreview/IconSetPreview.module.css b/src/components/IconSetPreview/IconSetPreview.module.css
@@ -75,31 +75,6 @@
   background: var(--neutral-900);
 }
 
-.ShowMore {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  font-size: 12px;
-  color: var(--neutral-500);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.ShowMore svg {
-  margin-right: 3px;
-  transition: 0.3s;
-  transform: rotate(0deg);
-}
-
-.ShowMore:hover {
-  opacity: 0.8;
-}
-
-.IconSetPreviewExpanded .ShowMore svg {
-  transform: rotate(180deg);
-}
-
 @media only screen and (max-width: 500px) {
   .Actions button {
     font-size: 12px;

diff --git a/src/components/IconSetPreview/index.tsx b/src/components/IconSetPreview/index.tsx
@@ -1,5 +1,4 @@
 import { useContext, useState } from "react";
-import cx from "classnames";
 
 import IconBox from "src/components/IconBox";
 import Button, { ButtonVariants } from "src/components/Button";
@@ -14,20 +13,14 @@ import { IconSetItem } from "src/types";
 import styles from "./IconSetPreview.module.css";
 
 const IconSetPreview = () => {
-  const EXPAND_LIMIT = 8;
   const { icons, setIcons } = useContext(IconsContext);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [expand, setExpand] = useState(false);
   const [search, setSearch] = useState("");
   const [filteredIcons, setFilteredIcons] = useState<IconSetItem[]>([]);
   const selectedIcons = icons.filter((icon) => icon.__meta?._selected);
   const selectionCount = selectedIcons.length;
   const hasIcons = icons.length;
 
-  let iconsList = !search && expand ? icons : icons.slice(0, EXPAND_LIMIT);
-
-  const toggleExpand = () => setExpand(!expand);
-
   const handleSearch = ({ target }) => {
     const searchKey = target.value;
     let newIcons = [];
@@ -59,11 +52,7 @@ const IconSetPreview = () => {
   }
 
   return (
-    <div
-      className={cx(styles.IconSetPreview, {
-        [styles.IconSetPreviewExpanded]: expand,
-      })}
-    >
+    <div className={styles.IconSetPreview}>
       <div className={styles.IconSetPreviewHeader}>
         <div className={styles.Search}>
           <Icon icon="search" size={12} />
@@ -76,15 +65,10 @@ const IconSetPreview = () => {
         <div className={styles.SelectionCount}>{`${icons.length} Icons`}</div>
       </div>
       <div className={styles.IconList}>
-        {(search ? filteredIcons : iconsList).map((icon) => (
+        {(search ? filteredIcons : icons).map((icon) => (
           <IconBox key={icon.__meta?.id} icon={icon} />
         ))}
         <NewIconBox />
-        {!search && (
-          <span className={styles.ShowMore} onClick={toggleExpand}>
-            <Icon icon="arrow-down" size={13} /> Show {expand ? "Less" : "More"}
-          </span>
-        )}
       </div>
       <Dialog
         onConfirm={clearAll}