matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: remove old icon-button component

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-27 17:43:15 +01:00
parent b2ab33d1c9
commit b48a955581
11 changed files with 54 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/pl-fe/src/components/birthday-input.tsx
View File

@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { defineMessages, FormattedDate, useIntl } from 'react-intl';
import IconButton from 'pl-fe/components/icon-button';
import IconButton from 'pl-fe/components/ui/icon-button';
import { DatePicker } from 'pl-fe/features/ui/util/async-components';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useInstance } from 'pl-fe/hooks/use-instance';
@ -69,7 +69,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex flex-col gap-2'>
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button rtl:rotate-180'
className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
iconClassName='size-4'
src={require('@phosphor-icons/core/regular/caret-left.svg')}
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
@ -78,7 +79,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
/>
<FormattedDate value={date} month='long' />
<IconButton
className='datepicker__button rtl:rotate-180'
className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
iconClassName='size-4'
src={require('@phosphor-icons/core/regular/caret-right.svg')}
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
@ -88,7 +90,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
</div>
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button rtl:rotate-180'
className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
iconClassName='size-4'
src={require('@phosphor-icons/core/regular/caret-left.svg')}
onClick={decreaseYear}
disabled={prevYearButtonDisabled}
@ -97,7 +100,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
/>
<FormattedDate value={date} year='numeric' />
<IconButton
className='datepicker__button rtl:rotate-180'
className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
iconClassName='size-4'
src={require('@phosphor-icons/core/regular/caret-right.svg')}
onClick={increaseYear}
disabled={nextYearButtonDisabled}

97
packages/pl-fe/src/components/icon-button.tsx
View File

@ -1,97 +0,0 @@
import clsx from 'clsx';
import React from 'react';
import Icon from 'pl-fe/components/icon';
interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
active?: boolean;
expanded?: boolean;
iconClassName?: string;
pressed?: boolean;
src: string;
text?: React.ReactNode;
}
const IconButton: React.FC<IIconButton> = ({
active,
className,
disabled,
expanded,
iconClassName,
onClick,
onKeyDown,
onKeyUp,
onKeyPress,
onMouseDown,
onMouseEnter,
onMouseLeave,
pressed,
src,
tabIndex = 0,
text,
title,
}) => {
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
if (!disabled && onClick) {
onClick(e);
}
};
const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!disabled && onMouseDown) {
onMouseDown(e);
}
};
const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!disabled && onKeyDown) {
onKeyDown(e);
}
};
const handleKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!disabled && onKeyUp) {
onKeyUp(e);
}
};
const handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (onKeyPress && !disabled) {
onKeyPress(e);
}
};
const classes = clsx(className, 'icon-button', {
active,
'opacity-20 cursor-default': disabled,
});
return (
<button
aria-label={title}
aria-pressed={pressed}
aria-expanded={expanded}
title={title}
className={classes}
onClick={handleClick}
onMouseDown={handleMouseDown}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onKeyPress={handleKeyPress}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
tabIndex={tabIndex}
disabled={disabled}
type='button'
>
<div className='flex items-center justify-center'>
<Icon className={iconClassName} src={src} aria-hidden='true' />
</div>
{text && <span className='pl-0.5'>{text}</span>}
</button>
);
};
export { IconButton as default };

2
packages/pl-fe/src/components/ui/icon-button.tsx
View File

@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
<Component
ref={ref}
type='button'
className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
className={clsx('⁂-icon-button flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
'bg-white dark:bg-transparent': theme === 'seamless',
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',

19
packages/pl-fe/src/features/compose/components/schedule-form.tsx
View File

@ -3,11 +3,8 @@ import React, { Suspense, useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { setSchedule, removeSchedule } from 'pl-fe/actions/compose';
import IconButton from 'pl-fe/components/icon-button';
import HStack from 'pl-fe/components/ui/hstack';
import IconButton from 'pl-fe/components/ui/icon-button';
import Input from 'pl-fe/components/ui/input';
import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import { DatePicker } from 'pl-fe/features/ui/util/async-components';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useCompose } from 'pl-fe/hooks/use-compose';
@ -58,11 +55,11 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
}
return (
<Stack space={2}>
<Text theme='muted'>
<div className='⁂-compose-form__schedule'>
<p className='⁂-compose-form__schedule__hint'>
<FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
</Text>
<HStack space={2} alignItems='center'>
</p>
<div className='⁂-compose-form__schedule__date'>
<Suspense fallback={<Input type='text' disabled />}>
<DatePicker
selected={scheduledAt}
@ -81,14 +78,12 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
/>
</Suspense>
<IconButton
iconClassName='h-4 w-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@phosphor-icons/core/regular/x.svg')}
onClick={handleRemove}
title={intl.formatMessage(messages.remove)}
/>
</HStack>
</Stack>
</div>
</div>
);
};

6
packages/pl-fe/src/features/reply-mentions/account.tsx
View File

@ -5,7 +5,7 @@ import { fetchAccount } from 'pl-fe/actions/accounts';
import { addToMentions, removeFromMentions } from 'pl-fe/actions/compose';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
import AccountComponent from 'pl-fe/components/account';
import IconButton from 'pl-fe/components/icon-button';
import IconButton from 'pl-fe/components/ui/icon-button';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useCompose } from 'pl-fe/hooks/use-compose';
@ -42,9 +42,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
let button;
if (added) {
button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (

6
packages/pl-fe/src/modals/list-adder-modal/components/list.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import Icon from 'pl-fe/components/icon';
import IconButton from 'pl-fe/components/icon-button';
import IconButton from 'pl-fe/components/ui/icon-button';
import { useAddAccountsToList, useList, useRemoveAccountsFromList } from 'pl-fe/queries/accounts/use-lists';
const messages = defineMessages({
@ -32,9 +32,9 @@ const List: React.FC<IList> = ({ listId, accountId, added }) => {
let button;
if (added) {
button = <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (

6
packages/pl-fe/src/modals/list-editor-modal/components/account.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import IconButton from 'pl-fe/components/icon-button';
import HStack from 'pl-fe/components/ui/hstack';
import IconButton from 'pl-fe/components/ui/icon-button';
import AccountContainer from 'pl-fe/containers/account-container';
const messages = defineMessages({
@ -23,9 +23,9 @@ const Account: React.FC<IAccount> = ({ accountId, added, onAdd, onRemove }) => {
let button;
if (added) {
button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={() => onRemove(accountId)} />;
button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={() => onRemove(accountId)} />;
} else {
button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={() => onAdd(accountId)} />;
button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={() => onAdd(accountId)} />;
}
return (

4
packages/pl-fe/src/pages/search/search.tsx
View File

@ -5,9 +5,9 @@ import { useSearchParams } from 'react-router-dom-v5-compat';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
import SearchColumn from 'pl-fe/columns/search';
import IconButton from 'pl-fe/components/icon-button';
import Column from 'pl-fe/components/ui/column';
import HStack from 'pl-fe/components/ui/hstack';
import IconButton from 'pl-fe/components/ui/icon-button';
import Input from 'pl-fe/components/ui/input';
import SvgIcon from 'pl-fe/components/ui/svg-icon';
import Tabs from 'pl-fe/components/ui/tabs';
@ -172,7 +172,7 @@ const SearchResults = () => {
<>
{accountId ? (
<HStack className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800' alignItems='center' space={2}>
<IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleUnsetAccount} />
<IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleUnsetAccount} />
<Text truncate>
<FormattedMessage
id='search_results.filter_message'

4
packages/pl-fe/src/pages/settings/aliases.tsx
View File

@ -5,12 +5,12 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
import AccountComponent from 'pl-fe/components/account';
import Icon from 'pl-fe/components/icon';
import IconButton from 'pl-fe/components/icon-button';
import ScrollableList from 'pl-fe/components/scrollable-list';
import Button from 'pl-fe/components/ui/button';
import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
import Column from 'pl-fe/components/ui/column';
import HStack from 'pl-fe/components/ui/hstack';
import IconButton from 'pl-fe/components/ui/icon-button';
import Text from 'pl-fe/components/ui/text';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useFeatures } from 'pl-fe/hooks/use-features';
@ -55,7 +55,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
if (!added && accountId !== me) {
button = (
<IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
<IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
);
}

4
packages/pl-fe/src/pages/timelines/remote-timeline.tsx
View File

@ -4,9 +4,9 @@ import { useHistory } from 'react-router-dom';
import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
import { useRemoteStream } from 'pl-fe/api/hooks/streaming/use-remote-stream';
import IconButton from 'pl-fe/components/icon-button';
import Column from 'pl-fe/components/ui/column';
import HStack from 'pl-fe/components/ui/hstack';
import IconButton from 'pl-fe/components/ui/icon-button';
import Text from 'pl-fe/components/ui/text';
import PinnedHostsPicker from 'pl-fe/features/remote-timeline/components/pinned-hosts-picker';
import Timeline from 'pl-fe/features/ui/components/timeline';
@ -52,7 +52,7 @@ const RemoteTimelinePage: React.FC<IRemoteTimelinePage> = ({ params }) => {
{!pinned && (
<HStack className='mb-4 px-2' space={2}>
<IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleCloseClick} />
<IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleCloseClick} />
<Text>
<FormattedMessage
id='remote_timeline.filter_message'

22
packages/pl-fe/src/styles/new/compose.scss
View File

@ -1,3 +1,5 @@
@use 'mixins';
.⁂-compose-form {
@apply flex flex-col gap-y-4 w-full;
@ -64,4 +66,24 @@
@apply h-full cursor-pointer py-2.5 pl-1 pr-3 last:rounded-r-full inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600;
}
}
&__schedule {
@apply flex flex-col gap-2;
&__hint {
@include mixins.text($theme: muted);
}
&__date {
@apply flex items-center gap-2;
}
.⁂-icon-button {
@apply bg-transparent text-gray-400 hover:text-gray-600;
svg {
@apply size-4;
}
}
}
}