Skip to content
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

Update to tailwind v4 #10949

Merged
merged 1 commit into from
Jan 30, 2025
+1,289 −1,234
Merged

Update to tailwind v4 #10949

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
3 changes: 2 additions & 1 deletion .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
"arrowParens": "avoid",
"printWidth": 120,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["clsx", "cn", "cva"]
"tailwindFunctions": ["clsx", "cn", "cva"],
"tailwindStylesheet": "./public/static/styles/app.css"
}
6 changes: 3 additions & 3 deletions components/AccountHoverCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ type InfoItemProps = {
const InfoItem = ({ Icon, info }: InfoItemProps) => (
<div className="flex items-start gap-2 overflow-hidden text-xs text-muted-foreground">
<Icon size={14} className="shrink-0" />
<span className="[&>a:hover]:text-primary [&>a]:text-foreground [&>a]:underline">{info}</span>
<span className="[&>a]:text-foreground [&>a]:underline [&>a:hover]:text-primary">{info}</span>
</div>
);

Expand Down Expand Up @@ -346,7 +346,7 @@ export const AccountHoverCard = ({
</div>

{account.description && (
<div className="line-clamp-1 whitespace-pre-wrap text-sm text-foreground">{account.description}</div>
<div className="line-clamp-1 text-sm whitespace-pre-wrap text-foreground">{account.description}</div>
)}

{(infoItems.length > 0 || asyncInfoItems.length > 0 || loading) && (
Expand All @@ -372,7 +372,7 @@ export const AccountHoverCard = ({
</div>
)}

{loading && <StyledSpinner className="absolute right-0 top-0 text-muted-foreground" />}
{loading && <StyledSpinner className="absolute top-0 right-0 text-muted-foreground" />}
</div>
</HoverCardContent>
</HoverCard>
Expand Down
6 changes: 3 additions & 3 deletions components/AccountingCategorySelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const getSelectionInfoForLabel = (
if (rolesHaveSelectedCategory.some(Boolean)) {
const rolesToDisplay = roles.filter((_, index) => rolesHaveSelectedCategory[index]);
return (
<span className="text-xs font-normal italic text-muted-foreground">
<span className="text-xs font-normal text-muted-foreground italic">
<FormattedMessage
id="accountingCategory.selectedBy"
defaultMessage="Selected by {nbRoles, select, 1 {{role1}} 2 {{role1} and {role2}} other {{role1}, {role2} and {role3}}}."
Expand Down Expand Up @@ -392,7 +392,7 @@ const AccountingCategorySelect = ({
disabled={disabled}
>
<span
className={cn('mr-3 flex-grow truncate text-start text-sm', {
className={cn('mr-3 grow truncate text-start text-sm', {
'text-gray-400': isUndefined(selectedCategory),
})}
>
Expand Down Expand Up @@ -502,7 +502,7 @@ const AccountingCategorySelect = ({
role="button"
onKeyDown={e => e.key === 'Enter' && triggerChange(option.value)}
onClick={() => triggerChange(option.value)}
className="cursor-pointer text-[--primary-color-600] underline hover:opacity-80"
className="cursor-pointer text-(--primary-color-600) underline hover:opacity-80"
aria-label={intl.formatMessage(
{ defaultMessage: 'Select {name}', id: 'G65XME' },
{ name: option.value.name },
Expand Down
2 changes: 1 addition & 1 deletion components/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const StyledAvatar = styled(Flex).attrs<StyledAvatarProps>(props => ({
overflow: hidden;
width: 64px;
height: 64px;
flex-shrink: 0;
shrink: 0;
${color}
${space}
${layout}
Expand Down
2 changes: 1 addition & 1 deletion components/ComboSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function ComboSelect(props: ComboSelectProps) {
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
<PopoverContent className="w-(--radix-popover-trigger-width) p-0">
<Command>
<CommandInput placeholder={props.inputPlaceholder || intl.formatMessage(Messages.inputPlaceholder)} />
<CommandList>
Expand Down
2 changes: 1 addition & 1 deletion components/CreateCollectiveMiniForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ const CreateCollectiveMiniForm = ({
return (
<Form data-cy="create-collective-mini-form" className="flex h-full flex-col overflow-y-hidden">
<H5 fontWeight={600}>{CreateNewMessages[type] ? formatMessage(CreateNewMessages[type]) : null}</H5>
<div className="w-full flex-grow overflow-y-auto pb-4">
<div className="w-full grow overflow-y-auto pb-4">
{(isUser || isOrganization) && !noAdminFields && (
<StyledInputField
name={isOrganization ? 'members[0].member.email' : 'email'}
Expand Down
4 changes: 2 additions & 2 deletions components/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function Drawer({
<div className="relative flex-1 overflow-y-scroll px-4 py-6 sm:px-6">
{showCloseButton && (
<StyledRoundButton
className="absolute right-5 top-5"
className="absolute top-5 right-5"
size={36}
type="button"
isBorderless
Expand All @@ -82,7 +82,7 @@ export function Drawer({
</div>
{showActionsContainer && (
<div
className="flex flex-shrink-0 flex-wrap justify-between gap-2 border-t p-4"
className="flex shrink-0 flex-wrap justify-between gap-2 border-t p-4"
ref={ref => setDrawerActionsContainer(ref)}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions components/Dropzone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const Dropzone = ({
<div
className={cn(
'group relative flex h-full w-full cursor-pointer place-items-center overflow-hidden rounded-lg border-2 border-dashed border-muted-foreground/25 text-center transition hover:bg-muted/25',
'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
'[&>img]:max-h-full [&>img]:max-w-full',
isDragActive && 'border-muted-foreground/50',
props.disabled && 'pointer-events-none opacity-60',
Expand Down Expand Up @@ -278,7 +278,7 @@ const Dropzone = ({
</div>
)}
{value && showActions && (
<div className="absolute right-3 top-3">
<div className="absolute top-3 right-3">
<Button
variant="outline"
size="xs"
Expand Down
2 changes: 1 addition & 1 deletion components/ExchangeRate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const ExchangeRate = ({
return (
<Tooltip>
<TooltipTrigger data-cy={dataCy}>
<div className={cn('flex items-center whitespace-nowrap text-xs text-neutral-700', className)}>
<div className={cn('flex items-center text-xs whitespace-nowrap text-neutral-700', className)}>
<InfoIcon
size={14}
className={cn({
Expand Down
2 changes: 1 addition & 1 deletion components/FeedbackModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export function FeedbackModal({
/>
<label
htmlFor="okToContact"
className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
</label>
Expand Down
8 changes: 4 additions & 4 deletions components/FilesViewerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export default function FilesViewerModal({
}}
>
<DialogPrimitive.Content
className="fixed left-0 top-0 z-[3000] flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
className="fixed top-0 left-0 z-3000 flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
onInteractOutside={e => {
if (allowOutsideInteraction) {
e.preventDefault();
Expand All @@ -212,13 +212,13 @@ export default function FilesViewerModal({
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
className={clsx(
'absolute inset-0 z-[1500] backdrop-blur-sm',
'absolute inset-0 z-1500 backdrop-blur-xs',
open ? 'animate-in fade-in-0' : 'animate-out fade-out-0',
)}
onClick={onClose}
/>
) : (
<DialogOverlay onClick={onClose} className="absolute z-[1500] backdrop-blur-sm" />
<DialogOverlay onClick={onClose} className="absolute z-1500 backdrop-blur-xs" />
)}

<Header>
Expand Down Expand Up @@ -300,7 +300,7 @@ export default function FilesViewerModal({

{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div
className="z-[3000] flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
className="z-3000 flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
onClick={e => {
if (e.target === e.currentTarget) {
onClose();
Expand Down
4 changes: 2 additions & 2 deletions components/GiftCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ const GiftCard = ({
</p>
</div>
)}
<div className="absolute bottom-[8px] right-[8px] md:bottom-[12px] md:right-[12px]">
<div className="absolute right-[8px] bottom-[8px] md:right-[12px] md:bottom-[12px]">
<div className="AmountCurrency flex items-start">
<span className="text-[2.5rem] font-bold leading-[2.5rem] text-[#313233]">
<span className="text-[2.5rem] leading-[2.5rem] font-bold text-[#313233]">
<Currency value={amount} currency={currency} precision="auto" />
</span>
<div className="ml-1">
Expand Down
6 changes: 3 additions & 3 deletions components/InputAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
};

return (
<div className="flex flex-auto whitespace-nowrap px-2 text-sm text-muted-foreground">
<div className="flex flex-auto px-2 text-sm whitespace-nowrap text-muted-foreground">
<span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
<input
className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
style={{ minWidth }}
name={inputId}
id={inputId}
Expand Down Expand Up @@ -210,7 +210,7 @@ const InputAmount = ({
disabled={disabled}
prepend={
!hasCurrencyPicker ? (
<div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
<div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
{formatCurrencyName(currency, currencyDisplay)}
</div>
) : (
Expand Down
4 changes: 2 additions & 2 deletions components/LanguageSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function LanguageSwitcher() {
<TooltipTrigger asChild>
<SelectTrigger data-cy="language-switcher">
<div className="flex items-center gap-2 overflow-hidden">
<LanguagesIcon className="flex-shrink-0" size={16} />
<LanguagesIcon className="shrink-0" size={16} />
<span className="truncate">
<SelectValue
aria-label={defaultLanguage.label}
Expand All @@ -50,7 +50,7 @@ export function LanguageSwitcher() {
<SelectContent className="relative max-h-80 max-w-full">
{languageOptions.map(option => (
<SelectItem key={option.value} value={option.value} data-cy="language-option">
<div className="flex max-w-[--radix-popper-anchor-width] items-center gap-1">
<div className="flex max-w-(--radix-popper-anchor-width) items-center gap-1">
<span className="truncate">{option.label}</span>
<span>({option.completion})</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/LoginBtn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class LoginBtn extends React.Component {
this.props.loadingLoggedInUser ? 'h-8 w-8' : 'h-8 px-4',
this.props.asLink
? 'inline'
: 'inline-flex items-center justify-center whitespace-nowrap rounded-full border text-sm',
: 'inline-flex items-center justify-center rounded-full border text-sm whitespace-nowrap',
)}
>
{this.props.loadingLoggedInUser ? (
Expand Down
4 changes: 2 additions & 2 deletions components/NewsAndUpdatesModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
{update.title}
</P>
</div>
<div className="flex pb-4 pt-2">
<div className="flex pt-2 pb-4">
<StyledLink
onClick={onClose}
as={Link}
Expand All @@ -82,7 +82,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
/>
</div>
</div>
<div className="flex pb-4 pt-1">
<div className="flex pt-1 pb-4">
<StyledLink
onClick={onClose}
as={Link}
Expand Down
2 changes: 1 addition & 1 deletion components/PasswordInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function PasswordInput(inputProps: Omit<React.ComponentProps<typeof Input
type="button"
variant="ghost"
size="icon"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
onClick={togglePasswordVisibility}
aria-label={showPassword ? 'Hide password' : 'Show password'}
>
Expand Down
4 changes: 2 additions & 2 deletions components/ProportionalAreaChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ const Label = styled.div`

const Area = styled.div<{ percentage: string } & ColorProps>`
padding: 12px 8px;
flex-shrink: 0;
flex-grow: 1;
shrink: 0;
grow: 1;
flex-basis: ${props => props.percentage};
${color}
`;
Expand Down
2 changes: 1 addition & 1 deletion components/RichTextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,7 +714,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,

<input id={this.state.id} value={this.state.value} type="hidden" name={inputName} disabled={disabled} />
<HTMLContent fontSize={fontSize}>
<div className="relative focus-visible:[&>_trix-editor]:outline-none">
<div className="relative [&>_trix-editor]:focus-visible:outline-hidden">
{React.createElement('trix-editor', {
ref: this.editorRef,
input: this.state.id,
Expand Down
4 changes: 2 additions & 2 deletions components/SearchTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ const SearchTrigger = ({ setShowSearchModal }) => {
const useSearchCommandMenu = LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.SEARCH_COMMAND);
return (
<button
className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-hidden focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
onClick={() => setShowSearchModal(true)}
>
<Search size={16} />
<span className={clsx('hidden whitespace-nowrap text-sm lg:block', useSearchCommandMenu && 'pr-12')}>
<span className={clsx('hidden text-sm whitespace-nowrap lg:block', useSearchCommandMenu && 'pr-12')}>
{useSearchCommandMenu ? (
<FormattedMessage
defaultMessage="Type {slash} to search..."
Expand Down
2 changes: 1 addition & 1 deletion components/SignatureInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const SignatureInput = ({ isSigned, signerName, onChange, values, error }
) : (
<div className={cn(containerClassName, 'p-2')}>
<SignatureWithCustomFont signerName={signerName} maxSize={Math.min(width, height)} />
<div className="absolute right-3 top-3">
<div className="absolute top-3 right-3">
<Button variant="outline" size="sm" onClick={() => onChange(false)}>
<FormattedMessage defaultMessage="Clear" id="/GCoTA" />
</Button>
Expand Down
2 changes: 1 addition & 1 deletion components/StackedAvatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const StackedAvatars = ({
return (
<div className="flex items-center">
{displayed.map(account => (
<div key={account.id || account.slug} className="flex items-center first:!ml-0" style={{ marginLeft }}>
<div key={account.id || account.slug} className="flex items-center first:ml-0!" style={{ marginLeft }}>
<LinkCollective
collective={account}
withHoverCard={Boolean(withHoverCard)}
Expand Down
8 changes: 4 additions & 4 deletions components/StepsProgress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ const SeparatorLine = styled(props => (
))`
height: 100%;
z-index: 1;
flex-grow: 1;
flex-shrink: 1;
grow: 1;
shrink: 1;
line {
stroke-width: 1;
stroke: #c4c7cc;
Expand Down Expand Up @@ -158,7 +158,7 @@ const StepsOuter = styled(Flex)`
`;

const StepsMobileLeft = styled(Box)`
flex-grow: 2;
grow: 2;
flex-direction: column;
`;

Expand All @@ -168,7 +168,7 @@ const StepsMobileRight = styled(Flex)`
height: 56px;
align-items: center;
justify-content: center;
flex-shrink: 0;
shrink: 0;
position: relative;
`;

Expand Down
2 changes: 1 addition & 1 deletion components/StyledButtonSet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type ButtonItemProps = {
const ButtonItem = styled(StyledButton)<ButtonItemProps>`
border-radius: 0;
line-height: 1.5;
flex-grow: 1;
grow: 1;
border-color: ${themeGet('colors.black.300')};
transition:
color 0.2s,
Expand Down
2 changes: 1 addition & 1 deletion components/StyledFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const ButtonContainer = styled.span<{ flexGrow: FlexGrowProps['flexGrow'] }>`
${props =>
props.flexGrow &&
css`
flex-grow: ${props.flexGrow};
grow: ${props.flexGrow};
`}
`;

Expand Down
6 changes: 3 additions & 3 deletions components/StyledInputAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
};

return (
<div className="flex flex-auto whitespace-nowrap px-2 text-sm text-neutral-500">
<div className="flex flex-auto px-2 text-sm whitespace-nowrap text-neutral-500">
<span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
<input
className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
style={{ minWidth }}
name={inputId}
id={inputId}
Expand Down Expand Up @@ -217,7 +217,7 @@ const StyledInputAmount = ({
>
<div className="flex flex-auto basis-1/2">
{!hasCurrencyPicker ? (
<div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
<div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
{formatCurrencyName(currency, currencyDisplay)}
</div>
) : (
Expand Down
2 changes: 1 addition & 1 deletion components/Survey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export function Survey({
/>
<label
htmlFor="okToContact"
className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
</label>
Expand Down
Loading
Loading