Skip to content

Remove wby- Prefix From Tailwind Classes #4737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
Open

Remove wby- Prefix From Tailwind Classes #4737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb88354
wip
adrians5j Oct 13, 2025
1a3e691
wip
adrians5j Oct 13, 2025
f158f10
wip
adrians5j Oct 13, 2025
2e7e379
wip
adrians5j Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
8 changes: 4 additions & 4 deletions packages/admin-ui/src/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const meta: Meta<typeof Accordion> = {
argTypes: {},
decorators: [
Story => (
<div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px] wby-bg-[#f6f7f8]">
<div className="w-[750px] p-[50px] min-h-[500px] bg-[#f6f7f8]">
<Story />
</div>
)
Expand Down Expand Up @@ -248,7 +248,7 @@ export const WithControlledOpenedItem: Story = {
onOpenChange={open => setOpenThirdItem(open)}
/>
</Accordion>
<div className={"wby-flex wby-justify-center wby-mt-lg wby-gap-md"}>
<div className={"flex justify-center mt-lg gap-md"}>
<Button
onClick={() => setOpenFirstItem(!openFirstItem)}
text={"Toggle First Item"}
Expand Down Expand Up @@ -292,7 +292,7 @@ export const LightBackground: Story = {
...Default,
decorators: [
Story => (
<div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px]">
<div className="w-[750px] p-[50px] min-h-[500px]">
<Story />
</div>
)
Expand Down Expand Up @@ -320,7 +320,7 @@ export const ContainerVariantWithLightBackground: Story = {
...Default,
decorators: [
Story => (
<div className="wby-w-[750px] wby-p-[50px] wby-min-h-[500px]">
<div className="w-[750px] p-[50px] min-h-[500px]">
<Story />
</div>
)
Expand Down
12 changes: 6 additions & 6 deletions packages/admin-ui/src/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from "~/
import type { AccordionRoot } from "./components/AccordionRoot.js";
import { AccordionItem, type AccordionItemProps } from "./components/AccordionItem.js";

const accordionVariants = cva("wby-group wby-w-full", {
const accordionVariants = cva("group w-full", {
variants: {
variant: {
container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
underline: "wby-accordion-variant-underline "
container: "accordion-variant-container gap-xs flex flex-col",
underline: "accordion-variant-underline "
},
background: {
base: "wby-accordion-background-base",
light: "wby-accordion-background-light",
transparent: "wby-accordion-background-transparent"
base: "accordion-background-base",
light: "accordion-background-light",
transparent: "accordion-background-transparent"
}
},
defaultVariants: {
Expand Down
12 changes: 6 additions & 6 deletions packages/admin-ui/src/Accordion/components/AccordionContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@ import { cva, type VariantProps, cn } from "~/utils.js";

const accordionContentVariants = cva(
[
"wby-overflow-hidden wby-text-md",
"wby-transition-all data-[state=closed]:wby-animate-collapsible-up data-[state=open]:wby-animate-collapsible-down"
"overflow-hidden text-md",
"transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
],
{
// Using pixel values here because of non-existing design tokens.
variants: {
withIcon: {
true: "wby-pl-9"
true: "pl-9"
},
withHandle: {
true: "wby-pl-5"
true: "pl-5"
}
},
compoundVariants: [
{
withIcon: true,
withHandle: true,
className: "wby-pl-14"
className: "pl-14"
}
],
defaultVariants: {
Expand All @@ -41,7 +41,7 @@ const AccordionContent = ({ children, withIcon, withHandle, ...props }: Accordio
{...props}
className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
>
<div className={"wby-pt-sm wby-pb-lg wby-px-md"}>{children}</div>
<div className={"pt-sm pb-lg px-md"}>{children}</div>
</CollapsiblePrimitive.Content>
);
};
Expand Down
10 changes: 5 additions & 5 deletions packages/admin-ui/src/Accordion/components/AccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ const AccordionItemBase = (props: AccordionItemProps) => {
{...itemProps}
className={cn(
[
"wby-group-item wby-border-b-sm wby-border-b-neutral-dimmed data-[state=open]:wby-rounded-bl-lg data-[state=open]:wby-rounded-br-lg",
"group-[.wby-accordion-variant-container]:wby-rounded-lg",
"group-[.wby-accordion-background-base]:wby-bg-neutral-base",
"group-[.wby-accordion-background-light]:wby-bg-neutral-light",
"data-[disabled]:wby-pointer-events-none data-[disabled]:wby-opacity-50"
"group-item border-b-sm border-b-neutral-dimmed data-[state=open]:rounded-bl-lg data-[state=open]:rounded-br-lg",
"group-[.accordion-variant-container]:rounded-lg",
"group-[.accordion-background-base]:bg-neutral-base",
"group-[.accordion-background-light]:bg-neutral-light",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
],
itemProps.className
)}
Expand Down
6 changes: 3 additions & 3 deletions packages/admin-ui/src/Accordion/components/AccordionItemDragHandle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const AccordionItemDragHandle = ({
<span
className={cn(
[
"wby-absolute wby-top-1/2 -wby-left-sm -wby-translate-y-sm",
"wby-invisible group-hover/trigger:wby-visible"
"absolute top-1/2 -left-sm -translate-y-sm",
"invisible group-hover/trigger:visible"
],
className
)}
Expand All @@ -42,7 +42,7 @@ const AccordionItemDragHandle = ({
size={"xs"}
iconSize={"default"}
variant={"secondary"}
className={"wby-cursor-grab"}
className={"cursor-grab"}
icon={
<Icon
size={"sm"}
Expand Down
2 changes: 1 addition & 1 deletion packages/admin-ui/src/Accordion/components/AccordionItemSeparator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Separator, type SeparatorProps } from "~/Separator/index.js";
type AccordionItemSeparatorProps = SeparatorProps;

const AccordionItemSeparatorBase = (props: AccordionItemSeparatorProps) => {
return <Separator orientation={"vertical"} className={"wby-h-lg wby-mx-sm-plus"} {...props} />;
return <Separator orientation={"vertical"} className={"h-lg mx-sm-plus"} {...props} />;
};

export const AccordionItemSeparator = makeDecoratable(
Expand Down
34 changes: 13 additions & 21 deletions packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,32 +44,24 @@ const AccordionTrigger = ({
<div
{...divAsButtonProps}
className={cn(
"wby-group/trigger wby-w-full wby-flex wby-items-center wby-cursor-pointer wby-relative",
"focus-visible:wby-outline-none focus-visible:wby-border-none focus-visible:wby-ring-sm focus-visible:wby-ring-primary-dimmed",
"hover:wby-bg-neutral-dimmed",
"group-[.wby-accordion-variant-container]:wby-rounded-lg",
"[&[data-state=open]_[data-role=open-close-indicator]]:wby-rotate-180",
interactive ? "wby-cursor-pointer" : "wby-cursor-default"
"group/trigger w-full flex items-center cursor-pointer relative",
"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed",
"hover:bg-neutral-dimmed",
"group-[.accordion-variant-container]:rounded-lg",
"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180",
interactive ? "cursor-pointer" : "cursor-default"
)}
>
{draggable ? <AccordionItemDragHandle /> : null}
<div
className={
"wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra"
}
>
{icon && <div className={"wby-mr-md"}>{icon}</div>}
<div
className={"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"}
>
<div
className={"wby-text-md wby-font-semibold webiny_accordion-item-title"}
>
<div className={"w-full flex justify-between items-center px-md py-sm-extra"}>
{icon && <div className={"mr-md"}>{icon}</div>}
<div className={"flex flex-col gap-xxs flex-grow text-left"}>
<div className={"text-md font-semibold webiny_accordion-item-title"}>
{title}
</div>
<div className={"wby-text-sm wby-text-neutral-strong"}>{description}</div>
<div className={"text-sm text-neutral-strong"}>{description}</div>
</div>
<div className={"wby-flex wby-gap-xs"}>
<div className={"flex gap-xs"}>
{actions}

{/* No need to show the separator if there are no actions and the item is not interactive. */}
Expand All @@ -78,7 +70,7 @@ const AccordionTrigger = ({
{interactive && (
<Icon
size={"lg"}
className={"wby-transition"}
className={"transition"}
color={"neutral-strong"}
data-role={"open-close-indicator"}
label={"Open/close indicator"}
Expand Down
2 changes: 1 addition & 1 deletion packages/admin-ui/src/Alert/Alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const meta: Meta<typeof Alert> = {
argTypes: {},
decorators: [
Story => (
<div className="wby-w-[700px]">
<div className="w-[700px]">
<Story />
</div>
)
Expand Down
48 changes: 20 additions & 28 deletions packages/admin-ui/src/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,75 +28,67 @@ const defaultVariants = {
} as const;

const alertVariants = cva(
"wby-flex wby-gap-sm-plus wby-items-start wby-w-full wby-rounded-lg wby-text-md wby-py-sm-extra wby-pl-md wby-pr-sm-plus [&_a]:wby-font-semibold [&_a]:wby-underline",
"flex gap-sm-plus items-start w-full rounded-lg text-md py-sm-extra pl-md pr-sm-plus [&_a]:font-semibold [&_a]:underline",
{
variants,
defaultVariants,
compoundVariants: [
{
type: "info",
variant: "strong",
className:
"wby-bg-neutral-dark wby-text-neutral-light [&_a]:!wby-text-neutral-light"
className: "bg-neutral-dark text-neutral-light [&_a]:!text-neutral-light"
},
{
type: "info",
variant: "subtle",
className:
"wby-bg-neutral-dimmed wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
className: "bg-neutral-dimmed text-neutral-primary [&_a]:!text-neutral-primary"
},
{
type: "success",
variant: "strong",
className:
"wby-bg-secondary-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
className: "bg-secondary-default text-neutral-light [&_a]:!text-neutral-light"
},
{
type: "success",
variant: "subtle",
className:
"wby-bg-success-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
className: "bg-success-subtle text-neutral-primary [&_a]:!text-neutral-primary"
},
{
type: "warning",
variant: "strong",
className:
"wby-bg-warning-default wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
className: "bg-warning-default text-neutral-primary [&_a]:!text-neutral-primary"
},
{
type: "warning",
variant: "subtle",
className:
"wby-bg-warning-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
className: "bg-warning-subtle text-neutral-primary [&_a]:!text-neutral-primary"
},
{
type: "danger",
variant: "strong",
className:
"wby-bg-destructive-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
className: "bg-destructive-default text-neutral-light [&_a]:!text-neutral-light"
},
{
type: "danger",
variant: "subtle",
className:
"wby-bg-destructive-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
className: "bg-destructive-subtle text-neutral-primary [&_a]:!text-neutral-primary"
}
]
}
);

const alertIconVariants = cva("wby-size-md", {
const alertIconVariants = cva("size-md", {
variants,
defaultVariants,
compoundVariants: [
{ type: "info", variant: "strong", className: "wby-fill-neutral-base" },
{ type: "info", variant: "subtle", className: "wby-fill-neutral-xstrong" },
{ type: "success", variant: "strong", className: "wby-fill-neutral-base" },
{ type: "success", variant: "subtle", className: "wby-fill-success" },
{ type: "warning", variant: "strong", className: "wby-fill-neutral-xstrong" },
{ type: "warning", variant: "subtle", className: "wby-fill-warning" },
{ type: "danger", variant: "strong", className: "wby-fill-neutral-base" },
{ type: "danger", variant: "subtle", className: "wby-fill-destructive" }
{ type: "info", variant: "strong", className: "fill-neutral-base" },
{ type: "info", variant: "subtle", className: "fill-neutral-xstrong" },
{ type: "success", variant: "strong", className: "fill-neutral-base" },
{ type: "success", variant: "subtle", className: "fill-success" },
{ type: "warning", variant: "strong", className: "fill-neutral-xstrong" },
{ type: "warning", variant: "subtle", className: "fill-warning" },
{ type: "danger", variant: "strong", className: "fill-neutral-base" },
{ type: "danger", variant: "subtle", className: "fill-destructive" }
]
});

Expand Down Expand Up @@ -156,10 +148,10 @@ const AlertBase = ({
className={cn(alertVariants({ type, variant }), className)}
{...props}
>
<div className={"wby-py-xs"}>
<div className={"py-xs"}>
<IconComponent className={alertIconVariants({ type, variant })} />
</div>
<div className={"wby-flex-grow wby-py-xxs"}>{children}</div>
<div className={"flex-grow py-xxs"}>{children}</div>
{actions && <div>{actions}</div>}
{showCloseButton && (
<IconButton
Expand Down
2 changes: 1 addition & 1 deletion packages/admin-ui/src/AutoComplete/AutoComplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const DecoratableAutoComplete = ({
}, []);

return (
<div className={"wby-w-full"}>
<div className={"w-full"}>
<FormComponentLabel
text={label}
required={required}
Expand Down
22 changes: 11 additions & 11 deletions packages/admin-ui/src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const meta: Meta<typeof AutoCompletePrimitive> = {
render: args => {
const [value, setValue] = useState(args.value);
return (
<div className={"wby-w-full"}>
<div className={"w-full"}>
<AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />
<div className={"wby-mt-4 wby-text-center"}>
<div className={"mt-4 text-center"}>
Current selected value: <pre>{value}</pre>
</div>
</div>
Expand Down Expand Up @@ -169,7 +169,7 @@ export const GhostNegativeVariant: Story = {
},
decorators: [
Story => (
<div className="wby-bg-neutral-dark wby-text-neutral-light wby-p-xl">
<div className="bg-neutral-dark text-neutral-light p-xl">
<Story />
</div>
)
Expand All @@ -183,7 +183,7 @@ export const GhostNegativeVariantDisabled: Story = {
},
decorators: [
Story => (
<div className="wby-bg-neutral-dark wby-text-neutral-light wby-p-xl">
<div className="bg-neutral-dark text-neutral-light p-xl">
<Story />
</div>
)
Expand All @@ -197,7 +197,7 @@ export const GhostNegativeVariantInvalid: Story = {
},
decorators: [
Story => (
<div className="wby-bg-neutral-dark wby-text-neutral-light wby-p-xl">
<div className="bg-neutral-dark text-neutral-light p-xl">
<Story />
</div>
)
Expand Down Expand Up @@ -398,12 +398,12 @@ export const WithCustomOptionRenderer: Story = {
],
optionRenderer: item => {
return (
<div className={"wby-w-full wby-flex wby-justify-between wby-align-middle"}>
<div className={"w-full flex justify-between align-middle"}>
<div>
<span className={"wby-mr-sm"}>{item.flag}</span>
<span className={"mr-sm"}>{item.flag}</span>
{item.name}
</div>
<div className={"wby-text-sm"}>{item.time_difference}</div>
<div className={"text-sm"}>{item.time_difference}</div>
</div>
);
}
Expand Down Expand Up @@ -479,18 +479,18 @@ export const WithExternalValueControl: Story = {
render: args => {
const [value, setValue] = useState(args.value);
return (
<div className={"wby-w-full"}>
<div className={"w-full"}>
<div>
<AutoCompletePrimitive
{...args}
value={value}
onValueChange={value => setValue(value)}
/>
</div>
<div className={"wby-mt-4 wby-text-center"}>
<div className={"mt-4 text-center"}>
<Button text={"Reset"} onClick={() => setValue("")} />
</div>
<div className={"wby-mt-4 wby-text-center"}>
<div className={"mt-4 text-center"}>
Current selected value: <pre>{value}</pre>
</div>
</div>
Expand Down
Loading
Loading