Skip to content

[code-infra] Fix prettier formatting of tailwind classes #2911

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

Closed
wants to merge 1 commit into from
Closed

[code-infra] Fix prettier formatting of tailwind classes #2911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions docs/src/app/(private)/experiments/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ export default function ContextMenuExperiment() {
</p>

<ContextMenu.Root>
<ContextMenu.Trigger className="rounded-lg border-2 border-blue-300 bg-blue-50 p-8">
<ContextMenu.Trigger className="border-blue-300 bg-blue-50 rounded-lg border-2 p-8">
<div className="text-center">
<span className="block font-medium text-blue-700">Outer Context Menu</span>
<span className="block text-sm text-blue-600">Right-click me</span>
<span className="text-blue-700 block font-medium">Outer Context Menu</span>
<span className="text-blue-600 block text-sm">Right-click me</span>

<ContextMenu.Root>
<ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-red-300 bg-red-50 p-4">
<span className="block font-medium text-red-700">Inner Context Menu</span>
<span className="block text-sm text-red-600">Right-click me too!</span>
<ContextMenu.Trigger className="border-red-300 bg-red-50 mt-4 inline-block rounded border-2 p-4">
<span className="text-red-700 block font-medium">Inner Context Menu</span>
<span className="text-red-600 block text-sm">Right-click me too!</span>
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Positioner className="outline-none">
Expand Down Expand Up @@ -72,19 +72,19 @@ export default function ContextMenuExperiment() {
<p className="text-gray-600">Right-click on either box and explore the submenu options.</p>

<ContextMenu.Root>
<ContextMenu.Trigger className="rounded-lg border-2 border-green-300 bg-green-50 p-8">
<ContextMenu.Trigger className="border-green-300 bg-green-50 rounded-lg border-2 p-8">
<div className="text-center">
<span className="block font-medium text-green-700">
<span className="text-green-700 block font-medium">
Outer Context Menu with Submenu
</span>
<span className="block text-sm text-green-600">Right-click me</span>
<span className="text-green-600 block text-sm">Right-click me</span>

<ContextMenu.Root>
<ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-purple-300 bg-purple-50 p-4">
<span className="block font-medium text-purple-700">
<ContextMenu.Trigger className="border-purple-300 bg-purple-50 mt-4 inline-block rounded border-2 p-4">
<span className="text-purple-700 block font-medium">
Inner Context Menu with Submenu
</span>
<span className="block text-sm text-purple-600">Right-click me too!</span>
<span className="text-purple-600 block text-sm">Right-click me too!</span>
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Positioner className="outline-none">
Expand Down Expand Up @@ -166,10 +166,10 @@ export default function ContextMenuExperiment() {
</p>

<ContextMenu.Root>
<ContextMenu.Trigger className="rounded-lg border-2 border-orange-300 bg-orange-50 p-8">
<ContextMenu.Trigger className="border-orange-300 bg-orange-50 rounded-lg border-2 p-8">
<div className="text-center">
<span className="block font-medium text-orange-700">Complex Context Menu</span>
<span className="block text-sm text-orange-600">
<span className="text-orange-700 block font-medium">Complex Context Menu</span>
<span className="text-orange-600 block text-sm">
Right-click me, then right-click "Special Item"
</span>
</div>
Expand Down Expand Up @@ -229,7 +229,7 @@ export default function ContextMenuExperiment() {
Deep Action 2
</Menu.Item>
<Menu.Separator className="my-1 h-px bg-gray-200" />
<Menu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
<Menu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
Deep Delete
</Menu.Item>
</Menu.Popup>
Expand All @@ -238,7 +238,7 @@ export default function ContextMenuExperiment() {
</Menu.SubmenuRoot>

<ContextMenu.Separator className="my-1 h-px bg-gray-200" />
<ContextMenu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
<ContextMenu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
Nested Delete
</ContextMenu.Item>
</ContextMenu.Popup>
Expand All @@ -247,7 +247,7 @@ export default function ContextMenuExperiment() {
</ContextMenu.Root>

<ContextMenu.Separator className="my-1 h-px bg-gray-200" />
<ContextMenu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
<ContextMenu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
Delete
</ContextMenu.Item>
</ContextMenu.Popup>
Expand All @@ -268,16 +268,16 @@ export default function ContextMenuExperiment() {
</p>

<ContextMenu.Root>
<ContextMenu.Trigger className="rounded-lg border-2 border-cyan-300 bg-cyan-50 p-8">
<ContextMenu.Trigger className="border-cyan-300 bg-cyan-50 rounded-lg border-2 p-8">
<div className="text-center">
<span className="block font-medium text-cyan-700">Outer Context Menu</span>
<span className="block text-sm text-cyan-600">Right-click me</span>
<span className="text-cyan-700 block font-medium">Outer Context Menu</span>
<span className="text-cyan-600 block text-sm">Right-click me</span>

<ContextMenu.Root>
<ContextMenu.Trigger className="mt-4 flex flex-col items-center justify-center rounded-lg border-2 border-cyan-300 bg-cyan-50 p-8">
<ContextMenu.Trigger className="border-cyan-300 bg-cyan-50 mt-4 flex flex-col items-center justify-center rounded-lg border-2 p-8">
<div className="text-center">
<span className="block font-medium text-cyan-700">Inner Context Menu</span>
<span className="block text-sm text-cyan-600">Right-click me</span>
<span className="text-cyan-700 block font-medium">Inner Context Menu</span>
<span className="text-cyan-600 block text-sm">Right-click me</span>

<Popover.Root>
<Popover.Trigger className="mt-2 flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 p-4 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
Expand All @@ -303,11 +303,11 @@ export default function ContextMenuExperiment() {
</Menu.Root>

<ContextMenu.Root>
<ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-red-300 bg-red-50 p-4">
<span className="block font-medium text-red-700">
<ContextMenu.Trigger className="border-red-300 bg-red-50 mt-4 inline-block rounded border-2 p-4">
<span className="text-red-700 block font-medium">
Popover Context Menu
</span>
<span className="block text-sm text-red-600">
<span className="text-red-600 block text-sm">
Right-click me!
</span>
</ContextMenu.Trigger>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(private)/experiments/menu/complex-nesting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default function MenuComplexNestingExperiment() {
<Dialog.Close className="rounded px-4 py-2 text-gray-600 hover:bg-gray-100">
Cancel
</Dialog.Close>
<Dialog.Close className="rounded bg-blue-600 px-4 py-2 hover:bg-blue-700">
<Dialog.Close className="bg-blue-600 hover:bg-blue-700 rounded px-4 py-2">
Save
</Dialog.Close>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...src/app/(public)/(content)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
</NavigationMenu.Trigger>

<NavigationMenu.Content className={contentClassName}>
<ul className="xs:grid-cols-[12rem_12rem] grid list-none grid-cols-1 gap-0">
<ul className="grid list-none grid-cols-1 gap-0 xs:grid-cols-[12rem_12rem]">
{overviewLinks.map((item) => (
<li key={item.href}>
<Link href={item.href} className={linkCardClassName}>
Expand Down Expand Up @@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
}}
>
<NavigationMenu.Popup className="data-[ending-style]:easing-[ease] xs:w-[var(--popup-width)] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
<NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
<NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
<ArrowSvg />
</NavigationMenu.Arrow>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function ToastButton() {
return (
<button
type="button"
className="focus-visible:outline-blue box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 active:bg-gray-100"
className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
onClick={createToast}
>
Create toast
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(public)/(content)/react/components/toast/demos/position/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function ToastButton() {
return (
<button
type="button"
className="focus-visible:outline-blue box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 active:bg-gray-100"
className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
onClick={createToast}
>
Create toast
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(public)/careers/design-engineer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Homepage() {
<Header />
<div className="ContentLayoutMain">
<h1 className="mb-4 text-3xl font-bold text-balance">Design Engineer</h1>
<p className="text-gray -mt-2 mb-5 text-lg text-pretty">
<p className="-mt-2 mb-5 text-lg text-pretty text-gray">
Help us make Base UI the most intuitive, accessible, and powerful open-source UI library
for React.
</p>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function Header() {
<NextLink href="/" className="HeaderLogoLink">
<Logo aria-label="Base UI" />
</NextLink>
<div className="max-show-side-nav:hidden flex gap-6">
<div className="flex gap-6 max-show-side-nav:hidden">
<a
className="HeaderLink"
href="https://www.npmjs.com/package/@base-ui-components/react"
Expand All @@ -31,7 +31,7 @@ export function Header() {
GitHub
</a>
</div>
<div className="show-side-nav:hidden flex">
<div className="flex show-side-nav:hidden">
<MobileNav.Root>
<MobileNav.Trigger className="HeaderButton">
<span className="flex w-4 flex-col items-center gap-1">
Expand Down
10 changes: 5 additions & 5 deletions docs/src/components/ReferenceTable/AttributesReferenceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,26 +48,26 @@ export async function AttributesReferenceTable({ data, ...props }: AttributesRef
</svg>
</Accordion.Trigger>
<Accordion.Panel>
<Accordion.Content className="text-md flex flex-col gap-3 p-4 text-pretty">
<Accordion.Content className="flex flex-col gap-3 p-4 text-md text-pretty">
<AttributeDescription />
</Accordion.Content>
</Accordion.Panel>
</Accordion.Item>
);
})}
</Accordion.Root>
<Table.Root {...props} className={clsx('xs:block hidden', props.className)}>
<Table.Root {...props} className={clsx('hidden xs:block', props.className)}>
<Table.Head>
<Table.Row>
{/* widths must match the props table grid layout */}
<Table.ColumnHeader className="xs:w-48 w-full sm:w-56 md:w-[calc(5/16.5*100%)]">
<Table.ColumnHeader className="w-full xs:w-48 sm:w-56 md:w-[calc(5/16.5*100%)]">
Attribute
</Table.ColumnHeader>
<Table.ColumnHeader className="xs:w-2/3 md:w-[calc(11.5/16.5*100%)]">
<div className="xs:not-sr-only xs:contents sr-only">Description</div>
<div className="sr-only xs:not-sr-only xs:contents">Description</div>
</Table.ColumnHeader>
{/* A cell to maintain a layout consistent with the props table */}
<Table.ColumnHeader className="max-xs:hidden w-10" aria-hidden role="presentation" />
<Table.ColumnHeader className="w-10 max-xs:hidden" aria-hidden role="presentation" />
</Table.Row>
</Table.Head>
<Table.Body>
Expand Down
10 changes: 5 additions & 5 deletions docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export async function CssVariablesReferenceTable({
</svg>
</Accordion.Trigger>
<Accordion.Panel>
<Accordion.Content className="text-md flex flex-col gap-3 p-4 text-pretty">
<Accordion.Content className="flex flex-col gap-3 p-4 text-md text-pretty">
<AttributeDescription />
</Accordion.Content>
</Accordion.Panel>
Expand All @@ -60,18 +60,18 @@ export async function CssVariablesReferenceTable({
})}
</Accordion.Root>

<Table.Root {...props} className={clsx('xs:block hidden', props.className)}>
<Table.Root {...props} className={clsx('hidden xs:block', props.className)}>
<Table.Head>
<Table.Row>
{/* widths must match the props table grid layout */}
<Table.ColumnHeader className="xs:w-48 w-full sm:w-56 md:w-[calc(5/16.5*100%)]">
<Table.ColumnHeader className="w-full xs:w-48 sm:w-56 md:w-[calc(5/16.5*100%)]">
CSS Variable
</Table.ColumnHeader>
<Table.ColumnHeader className="xs:w-2/3 md:w-[calc(11.5/16.5*100%)]">
<div className="xs:not-sr-only xs:contents sr-only">Description</div>
<div className="sr-only xs:not-sr-only xs:contents">Description</div>
</Table.ColumnHeader>
{/* A cell to maintain a layout consistent with the props table */}
<Table.ColumnHeader className="max-xs:hidden w-10" aria-hidden role="presentation" />
<Table.ColumnHeader className="w-10 max-xs:hidden" aria-hidden role="presentation" />
</Table.Row>
</Table.Head>
<Table.Body>
Expand Down
8 changes: 4 additions & 4 deletions docs/src/components/ReferenceTable/PropsReferenceAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,13 +176,13 @@ export async function PropsReferenceAccordion({
className={clsx('min-h-min scroll-mt-12 p-0 md:scroll-mt-0', TRIGGER_GRID_LAYOUT)}
>
<Accordion.Scrollable className="px-3">
<TableCode className="text-navy whitespace-nowrap">
<TableCode className="whitespace-nowrap text-navy">
{name}
{prop.required ? <sup className="top-[-0.3em] text-xs text-red-800">*</sup> : ''}
</TableCode>
</Accordion.Scrollable>
{prop.type && (
<Accordion.Scrollable className="max-xs:hidden flex items-baseline px-3 text-sm leading-none break-keep whitespace-nowrap">
<Accordion.Scrollable className="flex items-baseline px-3 text-sm leading-none break-keep whitespace-nowrap max-xs:hidden">
{hasExpandedType || detailedType ? (
<ReferenceTableTooltip.Root delay={300} hoverable={false}>
<ReferenceTableTooltip.Trigger render={<ShortPropType />} />
Expand All @@ -202,7 +202,7 @@ export async function PropsReferenceAccordion({
<PropDefault />
)}
</Accordion.Scrollable>
<div className="max-xs:ml-auto max-xs:mr-3 flex justify-center">
<div className="flex justify-center max-xs:mr-3 max-xs:ml-auto">
<svg
className="AccordionIcon translate-y-px"
width="10"
Expand All @@ -218,7 +218,7 @@ export async function PropsReferenceAccordion({
<Accordion.Panel>
<Accordion.Content>
<DescriptionList.Root
className={clsx('max-xs:py-3 text-gray-600', PANEL_GRID_LAYOUT)}
className={clsx('text-gray-600 max-xs:py-3', PANEL_GRID_LAYOUT)}
aria-label="Info"
>
<DescriptionList.Item>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/ReferenceTable/ReferenceTableTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function Popup({ children, ...props }: Tooltip.Popup.Props) {
collisionPadding={16}
>
<Tooltip.Popup
render={<BasePopup className="text-md overflow-visible px-3 py-2" />}
render={<BasePopup className="overflow-visible px-3 py-2 text-md" />}
{...props}
>
<div className="flex max-w-120 flex-col gap-3 text-pretty">{children}</div>
Expand Down
Loading
Loading