Skip to content

refactor(v4): collapse redundant size classes #10939

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
alihamasdev wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactor(v4): collapse redundant size classes #10939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c1973e
refactor(v4): collapse redundant size classes
alihamasdev Jun 14, 2026
801f540
Merge branch 'main' into codex/collapse-redundant-size-axes
alihamasdev Jun 15, 2026
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
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function UIElements() {
<Skeleton className="h-9 w-24 rounded-lg" />
<div className="flex">
<Skeleton className="h-9 w-28 rounded-l-lg rounded-r-none" />
<Skeleton className="ml-px h-9 w-9 rounded-l-none rounded-r-lg" />
<Skeleton className="ml-px size-9 rounded-l-none rounded-r-lg" />
</div>
<Skeleton className="ml-auto hidden h-5 w-9 rounded-full 4xl:block" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function UserAuthForm({
</form>
<FieldSeparator>Or continue with</FieldSeparator>
<Button variant="outline" type="button" disabled={isLoading}>
{isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 h-4 w-4" />}{" "}
{isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 size-4" />}{" "}
GitHub
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/app/(app)/examples/authentication/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function AuthenticationPage() {
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-6 w-6"
className="mr-2 size-6"
>
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
</svg>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,7 +567,7 @@ export function DataTable({
<div className="ml-auto flex items-center gap-2 lg:ml-0">
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
className="hidden size-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function NavUser({
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg grayscale">
<Avatar className="size-8 rounded-lg grayscale">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand All @@ -70,7 +70,7 @@ export function NavUser({
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/app/(app)/examples/playground/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default function PlaygroundPage() {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="none"
className="h-5 w-5"
className="size-5"
>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -198,7 +198,7 @@ export default function PlaygroundPage() {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="none"
className="h-5 w-5"
className="size-5"
>
<rect
x="4"
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function UserNav() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
<Avatar className="h-9 w-9">
<Button variant="ghost" className="relative size-8 rounded-full">
<Avatar className="size-9">
<AvatarImage src="/avatars/03.png" alt="@shadcn" />
<AvatarFallback>SC</AvatarFallback>
</Avatar>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/components/block-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,7 @@ function Tree({ item, index }: { item: FileTree; index: number }) {
}
>
<ChevronRight className="invisible" />
<File className="h-4 w-4" />
<File className="size-4" />
{item.name}
</SidebarMenuButton>
</SidebarMenuItem>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/components/chart-copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function ChartCopyButton({
size="icon"
variant="ghost"
className={cn(
"[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
"[&_svg]-h-3.5 size-7 rounded-[6px] [&_svg]:w-3.5",
className
)}
onClick={() => {
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/components/chart-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function ChartToolbar({
event="copy_chart_code"
name={chart.name}
code={chart.files?.[0]?.content ?? ""}
className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
className="[&_svg]-h-3 size-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
/>
<Separator
orientation="vertical"
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/components/nav-user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function NavUser({
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand All @@ -69,7 +69,7 @@ export function NavUser({
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/components/tailwind-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function TailwindIndicator({
return (
<div
data-tailwind-indicator=""
className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
>
<div className="block sm:hidden">xs</div>
<div className="hidden sm:block md:hidden">sm</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/base/chart-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function TooltipDemo({
className={cn(
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": indicator === "dot",
"size-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/base/drawer-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function DrawerDemo() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(-10)}
disabled={goal <= 200}
>
Expand All @@ -99,7 +99,7 @@ export function DrawerDemo() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(10)}
disabled={goal >= 400}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/base/drawer-rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function DrawerRtl() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(-10)}
disabled={goal <= 200}
>
Expand All @@ -149,7 +149,7 @@ export function DrawerRtl() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(10)}
disabled={goal >= 400}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/base/sidebar-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@ function NavUser({
/>
}
>
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand All @@ -428,7 +428,7 @@ function NavUser({
<DropdownMenuGroup>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/base/skeleton-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Skeleton } from "@/styles/base-nova/ui/skeleton"
export function SkeletonDemo() {
return (
<div className="flex items-center gap-4">
<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="size-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/base/skeleton-rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function SkeletonRtl() {

return (
<div className="flex items-center gap-4" dir={dir}>
<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="size-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/radix/chart-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function TooltipDemo({
className={cn(
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": indicator === "dot",
"size-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/radix/drawer-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function DrawerDemo() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(-10)}
disabled={goal <= 200}
>
Expand All @@ -99,7 +99,7 @@ export function DrawerDemo() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(10)}
disabled={goal >= 400}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/radix/drawer-rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export function DrawerRtl() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(-10)}
disabled={goal <= 200}
>
Expand All @@ -149,7 +149,7 @@ export function DrawerRtl() {
<Button
variant="outline"
size="icon"
className="h-8 w-8 shrink-0 rounded-full"
className="size-8 shrink-0 rounded-full"
onClick={() => onClick(10)}
disabled={goal >= 400}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/v4/examples/radix/sidebar-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ function NavUser({
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand All @@ -435,7 +435,7 @@ function NavUser({
<DropdownMenuGroup>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<Avatar className="size-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/radix/skeleton-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Skeleton } from "@/styles/radix-nova/ui/skeleton"
export function SkeletonDemo() {
return (
<div className="flex items-center gap-4">
<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="size-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/examples/radix/skeleton-rtl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function SkeletonRtl() {

return (
<div className="flex items-center gap-4" dir={dir}>
<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="size-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
Expand Down
Loading
Loading