Skip to content

Commit

Permalink
chore: bump @ant-design/icons to fix fill-rule console warning (#31831)
Browse files Browse the repository at this point in the history
  • Loading branch information
mistercrunch authored Jan 14, 2025
1 parent 8050e35 commit ef57318
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 26 deletions.
34 changes: 24 additions & 10 deletions superset-frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 41 additions & 16 deletions superset-frontend/src/components/Icons/Icons.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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`
Expand All @@ -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: {
Expand Down

0 comments on commit ef57318

Please sign in to comment.