Skip to content

Fix disabled: Tailwind variant #2302

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

Merged
merged 3 commits into from
Jul 11, 2024
Merged

Fix disabled: Tailwind variant #2302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae46a97
fix disabled variant in the tw config
david-crespo Jul 1, 2024
1a02d57
eliminate svg: variant
david-crespo Jul 1, 2024
005e12d
delete unused between: variant
david-crespo Jul 1, 2024
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
4 changes: 2 additions & 2 deletions app/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Button } from '~/ui/lib/Button'
import { Truncate } from '~/ui/lib/Truncate'

const linkStyles =
'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover svg:mr-2 svg:text-quinary text-secondary'
'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quinary text-secondary'

// TODO: this probably doesn't go to the docs root. maybe it even opens a
// menu with links to several relevant docs for the page
Expand Down Expand Up @@ -97,7 +97,7 @@ export const NavLinkItem = (props: {
to={props.to}
className={({ isActive }) =>
cn(linkStyles, {
'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover [&>svg]:!text-accent-tertiary':
isActive || currentPathIsCreateForm,
'pointer-events-none text-disabled': props.disabled,
})
Expand Down
6 changes: 3 additions & 3 deletions app/ui/lib/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ export type ButtonSize = (typeof buttonSizes)[number]
export type Variant = (typeof variants)[number]

const sizeStyle: Record<ButtonSize, string> = {
sm: 'h-8 px-3 text-mono-sm svg:w-4',
sm: 'h-8 px-3 text-mono-sm [&>svg]:w-4',
// meant for buttons that only contain a single icon
icon: 'h-8 w-8 text-mono-sm svg:w-4',
base: 'h-10 px-4 text-mono-sm svg:w-5',
icon: 'h-8 w-8 text-mono-sm [&>svg]:w-4',
base: 'h-10 px-4 text-mono-sm [&>svg]:w-5',
}

type ButtonStyleProps = {
Expand Down
4 changes: 3 additions & 1 deletion app/ui/lib/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export const Message = ({
className
)}
>
<div className="mt-[2px] flex svg:h-3 svg:w-3">{icon || defaultIcon[variant]}</div>
<div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">
{icon || defaultIcon[variant]}
</div>
<div className="flex-1 pl-2.5">
{title && <div className="text-sans-semi-md">{title}</div>}
<div
Expand Down
2 changes: 1 addition & 1 deletion app/ui/lib/TipIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function TipIcon({ children, className }: TipIconProps) {
return (
<Tooltip content={children} placement="top">
<button
className={cn('inline-flex svg:pointer-events-none', className)}
className={cn('inline-flex [&>svg]:pointer-events-none', className)}
type="button"
>
<Question12Icon className="text-quinary" />
Expand Down
2 changes: 1 addition & 1 deletion app/ui/lib/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const Toast = ({
textColor[variant]
)}
>
<div className="mt-[2px] flex svg:h-3 svg:w-3">{icon[variant]}</div>
<div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">{icon[variant]}</div>
<div className="flex-1 pl-2.5">
<div className="text-sans-semi-md">{title || defaultTitle[variant]}</div>
<div className={cn('text-sans-md', secondaryTextColor[variant])}>{content}</div>
Expand Down
6 changes: 1 addition & 5 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,9 @@ module.exports = {
},
plugins: [
plugin(({ addVariant, addUtilities, variants }) => {
// imitation of the twin.macro svg: variant. svg:text-green-500 puts green
// on an SVG that's an immediate child of the element
addVariant('svg', '& > svg')
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think when we added this, you couldn't do it inline as an arbitrary value. Now you can.

addVariant('children', '& > *')
addVariant('between', '& > * + *')
addVariant('selected', '.is-selected &')
addVariant('disabled', '&.visually-disabled, &:disabled')
addVariant('disabled', ['&.visually-disabled', '&:disabled'])
addUtilities(
Array.from({ length: 12 }, (_, i) => i)
.map((i) => ({
Expand Down