This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch console_warnings in repository https://gitbox.apache.org/repos/asf/superset.git
commit d8fe397372feaf826cbc3d1a6f77720eece62eb3 Author: Maxime Beauchemin <[email protected]> AuthorDate: Mon Jan 13 22:29:50 2025 -0800 chore: bump @ant-design/icons to fix fill-rule console warning Noticed this console warning about importing svg and some conversion issue, bumping the icon lib seems to address it. reviewed the storybook and toured the app to make sure things looked good. Added a search input box to the storybook too --- superset-frontend/package-lock.json | 34 +++++++++---- .../src/components/Icons/Icons.stories.tsx | 57 ++++++++++++++++------ 2 files changed, 65 insertions(+), 26 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 18041a1f25..337ee7a842 100644 --- a/superset-frontend/package-lock.json +++ b/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": { diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx index 5a21daf5fb..1fa9c9014f 100644 --- a/superset-frontend/src/components/Icons/Icons.stories.tsx +++ b/superset-frontend/src/components/Icons/Icons.stories.tsx @@ -16,7 +16,9 @@ * specific language governing permissions and limitations * under the License. */ +import React, { 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-auto-rows: 100px; + grid-template-columns: repeat(auto-fit, 180px); + 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 }) => ( - <IconSet> - {Object.keys(Icons).map(k => { - const IconComponent = Icons[k]; - return ( - <IconBlock key={k}> - <IconComponent {...rest} /> - {showNames && <span>{k}</span>} - </IconBlock> - ); - })} - </IconSet> -); +}: IconType & { showNames: boolean }) => { + const [searchTerm, setSearchTerm] = useState(''); + + // Filter icons based on the search term + const filteredIcons = Object.keys(Icons).filter(k => + k.toLowerCase().includes(searchTerm.toLowerCase()), + ); + + return ( + <div> + <SearchBox + 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: {
