moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change classNames "svg-icon--backspace" and "search__icon" in "search" component to use only Tailwind and change "search__icon" to custom Tailwind

This commit is contained in:
danidfra 2024-11-05 23:14:39 -03:00
parent 3345b24451
commit f476d6c78c
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/aliases/components/search.tsx
View File

@ -3,8 +3,8 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases'; import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
import Icon from 'soapbox/components/icon';
import { Button } from 'soapbox/components/ui'; import { Button } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
const messages = defineMessages({ const messages = defineMessages({
@ -53,7 +53,7 @@ const Search: React.FC = () => {
/> />
<div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}> <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} /> <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-default text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
</div> </div>
</label> </label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button> <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

4
src/features/list-editor/components/search.tsx
View File

@ -3,8 +3,8 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists'; import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
import Icon from 'soapbox/components/icon';
import { Button, Form, HStack, Input } from 'soapbox/components/ui'; import { Button, Form, HStack, Input } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({ const messages = defineMessages({
@ -45,7 +45,7 @@ const Search = () => {
placeholder={intl.formatMessage(messages.search)} placeholder={intl.formatMessage(messages.search)}
/> />
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}> <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} /> <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-pointer text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
</div> </div>
</label> </label>

11
src/styles/tailwind.css
View File

@ -3,6 +3,17 @@
@tailwind utilities; @tailwind utilities;
@layer utilities { @layer utilities {
.search__icon {
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus {
outline: 0 !important;
}
}
.focusable:focus, .focusable:focus,
.focusable-within:focus-within { .focusable-within:focus-within {
outline: 0; outline: 0;