Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-09-01 19:48:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: set explicit sizes on migrated Button icons

Browse Source 
Lucide defaults to 24px and published Button no longer injects glyph
size. Pass size-3.5 for xs/sm and size-4 for md/lg, including cloneElement
on dynamic icon props.
This commit is contained in:
anmolsinghbhatia
2026-08-31 14:37:00 +05:30
parent 550b46a1b5
commit 8b4ea6dc93
16 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
View File

@@ -44,7 +44,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
size="md"
stretch="auto"
onClick={() => toggleWidgetSettings(true)}
icon={<Shapes />}
icon={<Shapes className="size-4" />}
label={t("home.manage_widgets")}
/>
</span>
@@ -53,7 +53,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
variant="secondary"
size="md"
aria-label={t("home.manage_widgets")}
icon={<Shapes />}
icon={<Shapes className="size-4" />}
onClick={() => toggleWidgetSettings(true)}
/>
</span>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
View File

@@ -100,7 +100,11 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
variant="ghost"
size="md"
aria-label="Toggle profile sidebar"
icon={<PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />}
icon={
<PanelRight
className={`size-4 ${!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"}`}
/>
}
onClick={() => toggleProfileSidebar()}
/>
</div>

10
apps/web/core/components/common/empty-state.tsx
View File

@@ -4,10 +4,16 @@
* See the LICENSE file for details.
*/
import React from "react";
import React, { cloneElement, isValidElement } from "react";
// ui
import { Button } from "@makeplane/propel/components/button";
import { cn } from "@plane/utils";
function withIconSize(icon: React.ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
title: string;
@@ -36,7 +42,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
size="sm"
stretch="auto"
label={primaryButton.text}
icon={primaryButton.icon}
icon={withIconSize(primaryButton.icon, "size-3.5")}
onClick={primaryButton.onClick}
disabled={disabled}
/>

10
apps/web/core/components/common/new-empty-state.tsx
View File

@@ -4,10 +4,16 @@
* See the LICENSE file for details.
*/
import React, { useState } from "react";
import React, { cloneElement, isValidElement, useState } from "react";
// ui
import { Button } from "@makeplane/propel/components/button";
import { cn } from "@plane/utils";
function withIconSize(icon: React.ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
title: string;
@@ -57,7 +63,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
onClick={primaryButton.onClick}
disabled={disabled}
label={primaryButton.text}
icon={primaryButton.icon}
icon={withIconSize(primaryButton.icon, "size-4")}
/>
<div
onMouseEnter={handleMouseEnter}

2
apps/web/core/components/cycles/transfer-issues.tsx
View File

@@ -32,7 +32,7 @@ export function TransferIssues(props: Props) {
size="md"
stretch="auto"
label="Transfer work items"
icon={<TransferIcon />}
icon={<TransferIcon className="size-4 fill-current" />}
onClick={handleClick}
disabled={disabled}
/>

12
apps/web/core/components/empty-state/comic-box-button.tsx
View File

@@ -4,12 +4,18 @@
* See the LICENSE file for details.
*/
import type { Ref } from "react";
import { Fragment, useState } from "react";
import type { ReactNode, Ref } from "react";
import { cloneElement, Fragment, isValidElement, useState } from "react";
import { usePopper } from "react-popper";
import { Popover } from "@headlessui/react";
// plane imports
import { Button } from "@makeplane/propel/components/button";
import { cn } from "@plane/utils";
function withIconSize(icon: ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
label: string;
@@ -56,7 +62,7 @@ export function ComicBoxButton(props: Props) {
stretch="auto"
onClick={onClick}
disabled={disabled}
icon={icon}
icon={withIconSize(icon, "size-4")}
label={label}
/>
<span className="relative h-2 w-2">

9
apps/web/core/components/empty-state/detailed-empty-state-root.tsx
View File

@@ -4,13 +4,18 @@
* See the LICENSE file for details.
*/
import React from "react";
import React, { cloneElement, isValidElement } from "react";
import { observer } from "mobx-react";
// ui
import { Button } from "@makeplane/propel/components/button";
// utils
import { cn } from "@plane/utils";
function withIconSize(icon: React.ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type EmptyStateSize = "sm" | "base" | "lg";
type ButtonConfig = {
@@ -54,7 +59,7 @@ function CustomButton({
size="sm"
stretch="auto"
label={config.text}
icon={icon}
icon={withIconSize(icon, "size-3.5")}
iconPosition={config.prependIcon ? "start" : "end"}
onClick={config.onClick}
disabled={config.disabled}

2
apps/web/core/components/estimates/points/create-root.tsx
View File

@@ -175,7 +175,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
variant="ghost"
size="sm"
stretch="auto"
icon={<PlusIcon />}
icon={<PlusIcon className="size-3.5" />}
onClick={handleCreate}
label={`Add ${estimateType}`}
/>

4
apps/web/core/components/exporter/prev-exports.tsx
View File

@@ -96,7 +96,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
size="xs"
stretch="auto"
label={t("prev")}
icon={<MoveLeft />}
icon={<MoveLeft className="size-3.5" />}
disabled={!exporterServices?.prev_page_results}
onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
/>
@@ -105,7 +105,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
size="xs"
stretch="auto"
label={t("next")}
icon={<MoveRight />}
icon={<MoveRight className="size-3.5" />}
iconPosition="end"
disabled={!exporterServices?.next_page_results}
onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}

2
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View File

@@ -132,7 +132,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
size="xs"
stretch="auto"
label={label}
icon={<PlusIcon />}
icon={<PlusIcon className="size-3.5" />}
ref={setReferenceElement}
type="button"
onClick={() => !projectLabels && fetchLabels()}

2
apps/web/core/components/issues/issue-detail/subscription.tsx
View File

@@ -82,7 +82,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
return (
<div>
<Button
icon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
icon={isSubscribed ? <BellOff className="size-4" /> : <Bell className="size-4" />}
variant="secondary"
size="md"
stretch="auto"

12
apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View File

@@ -4,7 +4,7 @@
* See the LICENSE file for details.
*/
import React, { Fragment, useState } from "react";
import React, { cloneElement, Fragment, isValidElement, useState } from "react";
import type { Placement } from "@popperjs/core";
import { usePopper } from "react-popper";
// headless ui
@@ -12,6 +12,12 @@ import { Popover, Transition } from "@headlessui/react";
// ui
import { Button } from "@makeplane/propel/components/button";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { cn } from "@plane/utils";
function withIconSize(icon: React.ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
children: React.ReactNode;
@@ -62,7 +68,7 @@ export function FiltersDropdown(props: Props) {
variant="secondary"
size="md"
stretch="auto"
icon={icon}
icon={withIconSize(icon, "size-4")}
tabIndex={tabIndex}
label={title ?? ""}
/>
@@ -76,7 +82,7 @@ export function FiltersDropdown(props: Props) {
variant="secondary"
size="md"
aria-label={typeof title === "string" ? title : "Filters"}
icon={miniIcon}
icon={withIconSize(miniIcon, "size-4")}
disabled={disabled}
tabIndex={tabIndex}
/>

10
apps/web/core/components/project/empty-state.tsx
View File

@@ -4,9 +4,15 @@
* See the LICENSE file for details.
*/
import React from "react";
import React, { cloneElement, isValidElement } from "react";
// ui
import { Button } from "@makeplane/propel/components/button";
import { cn } from "@plane/utils";
function withIconSize(icon: React.ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
title: string;
@@ -37,7 +43,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
size="lg"
stretch="auto"
label={primaryButton.text}
icon={primaryButton.icon}
icon={withIconSize(primaryButton.icon, "size-4")}
onClick={primaryButton.onClick}
disabled={disabled}
/>

9
apps/web/core/components/sidebar/add-button.tsx
View File

@@ -5,7 +5,14 @@
*/
import type { MouseEventHandler, ReactNode } from "react";
import { cloneElement, isValidElement } from "react";
import { Button } from "@makeplane/propel/components/button";
import { cn } from "@plane/utils";
function withIconSize(icon: ReactNode, sizeClass: string) {
if (!isValidElement<{ className?: string }>(icon)) return icon;
return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
}
type Props = {
label: string;
@@ -25,7 +32,7 @@ export function SidebarAddButton(props: Props) {
size="lg"
stretch="full"
label={label}
icon={icon}
icon={withIconSize(icon, "size-4")}
onClick={onClick}
disabled={disabled}
/>

2
apps/web/core/components/web-hooks/form/secret-key.tsx
View File

@@ -138,7 +138,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
size="md"
stretch="auto"
label={isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
icon={<RefreshCw />}
icon={<RefreshCw className="size-4" />}
onClick={handleRegenerateSecretKey}
loading={isRegenerating}
/>

4
apps/web/core/components/workspace/billing/comparison/base.tsx
View File

@@ -130,7 +130,9 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
size="sm"
stretch="auto"
label={isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
icon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
icon={
isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />
}
iconPosition="end"
onClick={() => {
setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);