chore: bump @ant-design/icons to fix fill-rule console warning (#31831)

superset-frontend/package-lock.json

@@ -362,12 +362,14 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.3.7",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.5.2.tgz",
+      "integrity": "sha512-xc53rjVBl9v2BqFxUjZGti/RfdDeA8/6KYglmInM2PNqSXc/WfuGDTifJI/ZsokJK0aeKvOIbXc9y2g8ILAhEA==",
       "license": "MIT",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons-svg": "^4.4.0",
-        "@babel/runtime": "^7.11.2",
+        "@babel/runtime": "^7.24.8",
         "classnames": "^2.2.6",
         "rc-util": "^5.31.1"
       },
@@ -3385,7 +3387,9 @@
       "license": "MIT"
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.7",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -16559,13 +16563,16 @@
       }
     },
     "node_modules/antd/node_modules/@ant-design/icons": {
-      "version": "4.8.0",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.8.3.tgz",
+      "integrity": "sha512-HGlIQZzrEbAhpJR6+IGdzfbPym94Owr6JZkJ2QCCnOkPVIWMO2xgIVcOKnl8YcpijIo39V7l2qQL5fmtw56cMw==",
       "license": "MIT",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-svg": "^4.2.1",
+        "@ant-design/icons-svg": "^4.3.0",
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
+        "lodash": "^4.17.15",
         "rc-util": "^5.9.4"
       },
       "engines": {
@@ -59297,11 +59304,13 @@
       }
     },
     "@ant-design/icons": {
-      "version": "5.3.7",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.5.2.tgz",
+      "integrity": "sha512-xc53rjVBl9v2BqFxUjZGti/RfdDeA8/6KYglmInM2PNqSXc/WfuGDTifJI/ZsokJK0aeKvOIbXc9y2g8ILAhEA==",
       "requires": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons-svg": "^4.4.0",
-        "@babel/runtime": "^7.11.2",
+        "@babel/runtime": "^7.24.8",
         "classnames": "^2.2.6",
         "rc-util": "^5.31.1"
       }
@@ -61190,7 +61199,9 @@
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.24.7",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -72565,12 +72576,15 @@
           }
         },
         "@ant-design/icons": {
-          "version": "4.8.0",
+          "version": "4.8.3",
+          "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.8.3.tgz",
+          "integrity": "sha512-HGlIQZzrEbAhpJR6+IGdzfbPym94Owr6JZkJ2QCCnOkPVIWMO2xgIVcOKnl8YcpijIo39V7l2qQL5fmtw56cMw==",
           "requires": {
             "@ant-design/colors": "^6.0.0",
-            "@ant-design/icons-svg": "^4.2.1",
+            "@ant-design/icons-svg": "^4.3.0",
             "@babel/runtime": "^7.11.2",
             "classnames": "^2.2.6",
+            "lodash": "^4.17.15",
             "rc-util": "^5.9.4"
           },
           "dependencies": {

superset-frontend/src/components/Icons/Icons.stories.tsx

@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { useState } from 'react';
 import { styled, supersetTheme } from '@superset-ui/core';
+import { Input } from 'antd-v5';
 import Icons from '.';
 import IconType from './IconType';
 import Icon from './Icon';
@@ -35,8 +37,9 @@ Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
 
 const IconSet = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, 200px);
+  grid-template-columns: repeat(auto-fit, 180px);
-  grid-auto-rows: 100px;
+  grid-auto-rows: 90px;
+  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
 const IconBlock = styled.div`
@@ -49,28 +52,50 @@ const IconBlock = styled.div`
     margin-top: ${({ theme }) =>
       2 * theme.gridUnit}px; // Add spacing between icon and name
     font-size: ${({ theme }) =>
-      theme.typography.sizes.m}; // Optional: adjust font size for elegance
+      theme.typography.sizes.s}; // Optional: adjust font size for elegance
     color: ${({ theme }) =>
       theme.colors.grayscale.base}; // Optional: subtle color for the name
   }
 `;
 
+const SearchBox = styled(Input.Search)`
+  margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  width: 100%;
+  max-width: 400px;
+`;
+
 export const InteractiveIcons = ({
   showNames = true,
   ...rest
-}: IconType & { showNames: boolean }) => (
+}: IconType & { showNames: boolean }) => {
-  <IconSet>
+  const [searchTerm, setSearchTerm] = useState('');
-    {Object.keys(Icons).map(k => {
+
-      const IconComponent = Icons[k];
+  // Filter icons based on the search term
-      return (
+  const filteredIcons = Object.keys(Icons).filter(k =>
-        <IconBlock key={k}>
+    k.toLowerCase().includes(searchTerm.toLowerCase()),
-          <IconComponent {...rest} />
+  );
-          {showNames && <span>{k}</span>}
+
-        </IconBlock>
+  return (
-      );
+    <div>
-    })}
+      <SearchBox
-  </IconSet>
+        placeholder="Search icons..."
-);
+        onChange={e => setSearchTerm(e.target.value)}
+        allowClear
+      />
+      <IconSet>
+        {filteredIcons.map(k => {
+          const IconComponent = Icons[k];
+          return (
+            <IconBlock key={k}>
+              <IconComponent {...rest} />
+              {showNames && <span>{k}</span>}
+            </IconBlock>
+          );
+        })}
+      </IconSet>
+    </div>
+  );
+};
 
 InteractiveIcons.argTypes = {
   showNames: {