This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new ef57318259 chore: bump @ant-design/icons to fix fill-rule console
warning (#31831)
ef57318259 is described below
commit ef5731825998ef922d68e5d1e0f1861ed4fe06be
Author: Maxime Beauchemin <[email protected]>
AuthorDate: Tue Jan 14 12:42:09 2025 -0800
chore: bump @ant-design/icons to fix fill-rule console warning (#31831)
---
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..1774176767 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 { 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: {
