@wallarm-org/design-system 4.5.0 → 4.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ const generateBadgeVariants = ()=>{
|
|
|
14
14
|
secondary: 'bg-badge-slate-light text-badge-slate-dark',
|
|
15
15
|
secondaryMuted: 'bg-badge-slate-light text-badge-slate-muted',
|
|
16
16
|
outline: 'border-badge-slate-dark text-badge-slate-dark',
|
|
17
|
-
outlineMuted: 'border-
|
|
17
|
+
outlineMuted: 'border-border-primary text-badge-slate-dark',
|
|
18
18
|
text: 'text-badge-label-primary [&_svg]:text-badge-slate-strong before:bg-badge-slate-strong',
|
|
19
19
|
textMuted: 'text-badge-label-primary [&_svg]:text-badge-slate-muted before:bg-badge-slate-muted',
|
|
20
20
|
textColor: 'text-badge-slate-strong',
|
|
@@ -12,7 +12,7 @@ import { ToastDescription } from "./ToastDescription.js";
|
|
|
12
12
|
import { ToastIcon } from "./ToastIcon.js";
|
|
13
13
|
import { ToastProgress } from "./ToastProgress.js";
|
|
14
14
|
import { ToastTitle } from "./ToastTitle.js";
|
|
15
|
-
const toastVariants = cva("group relative flex min-w-[256px] max-w-[560px] items-start gap-12 rounded-16 bg-component-toast-bg p-12 pl-16 shadow-lg transition-all", {
|
|
15
|
+
const toastVariants = cva("group relative flex min-w-[256px] max-w-[560px] items-start gap-12 rounded-16 bg-component-toast-bg text-text-primary-alt p-12 pl-16 shadow-lg transition-all", {
|
|
16
16
|
variants: {
|
|
17
17
|
variant: {
|
|
18
18
|
extended: "flex-col",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "4.5.0",
|
|
3
|
+
"generatedAt": "2026-10-31T16:51:55.042Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -14537,6 +14537,13 @@
|
|
|
14537
14537
|
"storyTitle": "Status Indication/Badge",
|
|
14538
14538
|
"description": "`muted` drops the saturation for a status that is true but not worth attention — the case for\neverything that is merely fine."
|
|
14539
14539
|
},
|
|
14540
|
+
{
|
|
14541
|
+
"name": "MutedOutline",
|
|
14542
|
+
"code": "import { Badge } from '@wallarm-org/design-system/Badge';\n\nexport const MutedOutline = () => (\n <div\n className='rounded-8 bg-bg-light-danger p-16 text-text-danger'\n data-testid='muted-outline-host'\n >\n <Badge data-testid='muted-outline' type='outline' color='slate' muted>\n Muted outline\n </Badge>\n </div>\n);",
|
|
14543
|
+
"storyFile": "Badge/Badge.stories.tsx",
|
|
14544
|
+
"storyTitle": "Status Indication/Badge",
|
|
14545
|
+
"description": "A quieter outline keeps its neutral label and border inside a coloured message."
|
|
14546
|
+
},
|
|
14540
14547
|
{
|
|
14541
14548
|
"name": "ColorVariants",
|
|
14542
14549
|
"code": "import { Badge, type BadgeType } from '@wallarm-org/design-system/Badge';\nimport { BadgeColorEnum, BadgeTypeEnum } from './constants';\n\nexport const ColorVariants = () => (\n <table className='w-full'>\n <thead>\n <tr>\n {Object.keys(BadgeTypeEnum).map(type => (\n <th key={type} className='sb-annotation p-8 text-left'>\n {type}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {Object.entries(BadgeColorEnum).map(([label, color]) => (\n <tr key={color}>\n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n <td key={type} className='p-8'>\n <Badge data-testid='badge' type={type} color={color}>\n {label}\n </Badge>\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n);",
|
|
@@ -19270,10 +19277,10 @@
|
|
|
19270
19277
|
},
|
|
19271
19278
|
{
|
|
19272
19279
|
"name": "Variants",
|
|
19273
|
-
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Variants = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand'>\n Primary\n </Button>\n <Button variant='ghost' color='brand'>\n Ghost\n </Button>\n <Button variant='secondary' color='brand'>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral'>\n Outline\n </Button>\n <Button variant='ghost' color='neutral'>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral'>\n Secondary\n </Button>\n </HStack>\n <HStack
|
|
19280
|
+
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Variants = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand'>\n Primary\n </Button>\n <Button variant='ghost' color='brand'>\n Ghost\n </Button>\n <Button variant='secondary' color='brand'>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral'>\n Outline\n </Button>\n <Button variant='ghost' color='neutral'>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral'>\n Secondary\n </Button>\n </HStack>\n <HStack className='rounded-8 bg-component-toast-bg p-8'>\n <Button variant='ghost' color='neutral-alt'>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral-alt'>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='primary' color='destructive'>\n Primary\n </Button>\n <Button variant='outline' color='destructive'>\n Outline\n </Button>\n <Button variant='ghost' color='destructive'>\n Ghost\n </Button>\n <Button variant='secondary' color='destructive'>\n Secondary\n </Button>\n </HStack>\n </VStack>\n);",
|
|
19274
19281
|
"storyFile": "Button/Button.stories.tsx",
|
|
19275
19282
|
"storyTitle": "Actions/Button",
|
|
19276
|
-
"description": "`variant` sets emphasis and `color` sets meaning, and only the pairings drawn here are\ndesigned: `primary` exists for `brand` and `destructive` only
|
|
19283
|
+
"description": "`variant` sets emphasis and `color` sets meaning, and only the pairings drawn here are\ndesigned: `primary` exists for `brand` and `destructive` only. `neutral-alt` has ghost and\nsecondary variants, shown on an inverted surface so they remain readable in both themes."
|
|
19277
19284
|
},
|
|
19278
19285
|
{
|
|
19279
19286
|
"name": "Sizes",
|
|
@@ -19284,14 +19291,14 @@
|
|
|
19284
19291
|
},
|
|
19285
19292
|
{
|
|
19286
19293
|
"name": "Disabled",
|
|
19287
|
-
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Disabled = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand' disabled>\n Primary\n </Button>\n <Button variant='ghost' color='brand' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='brand' disabled>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral' disabled>\n Outline\n </Button>\n <Button variant='ghost' color='neutral' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral' disabled>\n Secondary\n </Button>\n </HStack>\n <HStack
|
|
19294
|
+
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Disabled = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand' disabled>\n Primary\n </Button>\n <Button variant='ghost' color='brand' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='brand' disabled>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral' disabled>\n Outline\n </Button>\n <Button variant='ghost' color='neutral' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral' disabled>\n Secondary\n </Button>\n </HStack>\n <HStack className='rounded-8 bg-component-toast-bg p-8'>\n <Button variant='ghost' color='neutral-alt' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral-alt' disabled>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='primary' color='destructive' disabled>\n Primary\n </Button>\n <Button variant='outline' color='destructive' disabled>\n Outline\n </Button>\n <Button variant='ghost' color='destructive' disabled>\n Ghost\n </Button>\n <Button variant='secondary' color='destructive' disabled>\n Secondary\n </Button>\n </HStack>\n </VStack>\n);",
|
|
19288
19295
|
"storyFile": "Button/Button.stories.tsx",
|
|
19289
19296
|
"storyTitle": "Actions/Button",
|
|
19290
19297
|
"description": "Every sanctioned pairing with the action unavailable. `disabled` also takes the button out\nof the tab order, so say somewhere on screen what would re-enable it rather than leaving the\nreader to guess."
|
|
19291
19298
|
},
|
|
19292
19299
|
{
|
|
19293
19300
|
"name": "Loading",
|
|
19294
|
-
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Loading = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand' loading>\n Primary\n </Button>\n <Button variant='ghost' color='brand' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='brand' loading>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral' loading>\n Outline\n </Button>\n <Button variant='ghost' color='neutral' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral' loading>\n Secondary\n </Button>\n </HStack>\n <HStack
|
|
19301
|
+
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Loading = () => (\n <VStack>\n <HStack>\n <Button variant='primary' color='brand' loading>\n Primary\n </Button>\n <Button variant='ghost' color='brand' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='brand' loading>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='outline' color='neutral' loading>\n Outline\n </Button>\n <Button variant='ghost' color='neutral' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral' loading>\n Secondary\n </Button>\n </HStack>\n <HStack className='rounded-8 bg-component-toast-bg p-8'>\n <Button variant='ghost' color='neutral-alt' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='neutral-alt' loading>\n Secondary\n </Button>\n </HStack>\n <HStack>\n <Button variant='primary' color='destructive' loading>\n Primary\n </Button>\n <Button variant='outline' color='destructive' loading>\n Outline\n </Button>\n <Button variant='ghost' color='destructive' loading>\n Ghost\n </Button>\n <Button variant='secondary' color='destructive' loading>\n Secondary\n </Button>\n </HStack>\n </VStack>\n);",
|
|
19295
19302
|
"storyFile": "Button/Button.stories.tsx",
|
|
19296
19303
|
"storyTitle": "Actions/Button",
|
|
19297
19304
|
"description": "`loading` covers the content with a spinner but keeps the label's footprint, so the button\ndoesn't resize mid-request. It disables the button on its own — passing `disabled` as well is\nredundant."
|
|
@@ -79110,7 +79117,7 @@
|
|
|
79110
79117
|
},
|
|
79111
79118
|
{
|
|
79112
79119
|
"name": "CustomTooltipContent",
|
|
79113
|
-
"code": "import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from '@wallarm-org/design-system/OverflowTooltip';\n\nexport const CustomTooltipContent = () => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <div className='font-medium text-sm'>API Endpoint</div>\n <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </code>\n <div className='text-xs text-text-secondary'>\n Method: POST\n <br />\n Auth: Bearer Token\n </div>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n user@example.com - Administrator - Last login: 2024-01-15\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='grid grid-cols-2 gap-2 text-sm'>\n <span className='font-medium'>Email:</span>\n <span>user@example.com</span>\n <span className='font-medium'>Role:</span>\n <span>Administrator</span>\n <span className='font-medium'>Last Login:</span>\n <span>2024-01-15</span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n};",
|
|
79120
|
+
"code": "import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from '@wallarm-org/design-system/OverflowTooltip';\n\nexport const CustomTooltipContent = () => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <div className='font-medium text-sm'>API Endpoint</div>\n <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </code>\n <div className='text-xs text-text-secondary-alt'>\n Method: POST\n <br />\n Auth: Bearer Token\n </div>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n user@example.com - Administrator - Last login: 2024-01-15\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='grid grid-cols-2 gap-2 text-sm'>\n <span className='font-medium'>Email:</span>\n <span>user@example.com</span>\n <span className='font-medium'>Role:</span>\n <span>Administrator</span>\n <span className='font-medium'>Last Login:</span>\n <span>2024-01-15</span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n};",
|
|
79114
79121
|
"storyFile": "OverflowTooltip/OverflowTooltip.stories.tsx",
|
|
79115
79122
|
"storyTitle": "Overlay/OverflowTooltip",
|
|
79116
79123
|
"description": "Overriding the content, for when the full value needs formatting the truncated one does not\nhave."
|
|
@@ -131202,6 +131209,13 @@
|
|
|
131202
131209
|
"storyFile": "Toast/Toast.stories.tsx",
|
|
131203
131210
|
"storyTitle": "Messaging/Toast",
|
|
131204
131211
|
"description": "A custom `icon` replaces the type’s own. It inherits the type colour unless it sets one, so the first here is deliberately purple and the second is not."
|
|
131212
|
+
},
|
|
131213
|
+
{
|
|
131214
|
+
"name": "CustomIconColors",
|
|
131215
|
+
"code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Activity, Info } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\nimport { useToast } from '@wallarm-org/design-system/Toast';\n\nexport const CustomIconColors = () => {\n const toast = useToast();\n const examples = [\n { name: 'default', label: 'Default', type: 'default' as const },\n { name: 'loading', label: 'Loading', type: 'loading' as const },\n { name: 'info', label: 'Info', type: 'info' as const },\n { name: 'own-color', label: 'Own color', type: 'success' as const },\n ];\n\n return (\n <HStack gap={8} wrap='wrap'>\n {examples.map(({ name, label, type }) => (\n <Button\n key={name}\n variant='outline'\n color='neutral'\n data-testid={`custom-icon-trigger-${name}`}\n onClick={() =>\n toast.create({\n id: `custom-icon-${name}`,\n title: `${label} custom icon`,\n type,\n duration: STATIC_DURATION,\n icon: (\n <Activity\n data-testid={`custom-icon-${name}-svg`}\n className={name === 'own-color' ? 'text-purple-500' : undefined}\n />\n ),\n })\n }\n >\n {label}\n </Button>\n ))}\n </HStack>\n );\n};",
|
|
131216
|
+
"storyFile": "Toast/Toast.stories.tsx",
|
|
131217
|
+
"storyTitle": "Messaging/Toast",
|
|
131218
|
+
"description": "Neutral custom icons follow the toast's foreground. A status supplies its colour, while an explicit icon colour takes precedence."
|
|
131205
131219
|
}
|
|
131206
131220
|
]
|
|
131207
131221
|
},
|