rusackas commented on code in PR #37502:
URL: https://github.com/apache/superset/pull/37502#discussion_r2739276522
##########
superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx:
##########
@@ -59,55 +58,119 @@ const SIZES = {
defaultValue: undefined,
};
-export const InteractiveBadge = (args: BadgeProps) => <Badge {...args} />;
+// Count Badge - shows a number
+export const InteractiveBadge = (args: BadgeProps) => (
+ <Badge {...args}>
+ <div
+ style={{
+ width: 40,
+ height: 40,
+ background: '#eee',
+ borderRadius: 4,
+ }}
+ />
+ </Badge>
+);
InteractiveBadge.args = {
- count: undefined,
- color: undefined,
- text: 'Text',
- status: 'success',
+ count: 5,
size: 'default',
showZero: false,
overflowCount: 99,
};
InteractiveBadge.argTypes = {
- status: {
- control: {
- type: 'select',
- },
- options: [undefined, ...STATUSES],
- description:
- 'only works if `count` is `undefined` (or is set to 0) and `color` is
set to `undefined`',
+ count: {
+ description: 'Number to show in the badge.',
+ control: { type: 'number' },
},
size: {
- control: {
- type: 'select',
- },
- options: SIZES.options,
+ description: 'Size of the badge.',
+ control: { type: 'select' },
+ options: ['default', 'small'],
},
color: {
- control: {
- type: 'select',
- },
- options: [undefined, ...COLORS.options],
- },
- count: {
- control: {
- type: 'select',
- defaultValue: undefined,
- },
- options: [undefined, ...Array(100).keys()],
- defaultValue: undefined,
+ description: 'Custom background color for the badge.',
+ control: { type: 'select' },
+ options: [
+ 'pink',
+ 'red',
+ 'yellow',
+ 'orange',
+ 'cyan',
+ 'green',
+ 'blue',
+ 'purple',
+ 'geekblue',
+ 'magenta',
+ 'volcano',
+ 'gold',
+ 'lime',
+ ],
},
showZero: {
- control: 'boolean',
- defaultValue: false,
+ description: 'Whether to show badge when count is zero.',
+ control: { type: 'boolean' },
},
overflowCount: {
- control: 'number',
- description:
- 'The threshold at which the number overflows with a `+` e.g if you set
this to 10, and the value is 11, you get `11+`',
+ description: 'Max count to show. Shows count+ when exceeded (e.g., 99+).',
+ control: { type: 'number' },
+ },
+};
+
+InteractiveBadge.parameters = {
+ docs: {
+ description: {
+ story: 'Badge can show a count number or a status indicator dot.',
+ },
+ examples: [
+ {
+ title: 'Status Badge',
+ code: `function StatusBadgeDemo() {
+ const statuses = ['default', 'success', 'processing', 'warning', 'error'];
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ {statuses.map(status => (
+ <Badge key={status} status={status} text={\`Status: \${status}\`} />
Review Comment:
Fixed — the generator was reading source text without unescaping template
literal escapes. Added `.replace()` calls to unescape `\` + backtick and `\$`
after extraction in both `liveExample` and `examples` code paths. The Badge and
Popover MDX files now emit valid template literals in tsx live blocks.
##########
superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx:
##########
@@ -22,29 +22,94 @@ import type { CardProps } from './types';
export default {
title: 'Components/Card',
component: Card,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A container component for grouping related content. ' +
+ 'Supports titles, borders, loading states, and hover effects.',
+ },
+ },
+ },
};
export const InteractiveCard = (args: CardProps) => <Card {...args} />;
InteractiveCard.args = {
padded: true,
- title: 'Components/Card',
- children: 'Card content',
+ title: 'Dashboard Overview',
+ children:
+ 'This card displays a summary of your dashboard metrics and recent
activity.',
Review Comment:
Good catch — prettier was wrapping long string values to a new line, and the
generator's line-by-line parser missed them. Fixed `parseArgsContent` to detect
key-only lines (e.g., `children:`) and consume the value from the next line.
The Card `children` and TableView `summary` props now appear correctly in the
generated MDX.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
