vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-08-08 05:12:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix input clearable button styles

Browse Source
This commit is contained in:
jeffvli
2026-07-29 21:13:12 -07:00
parent 77ea7f9c75
commit 75c43d6724
14 changed files with 229 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/autocomplete/autocomplete.module.css
+21
View File
@@ -17,6 +17,10 @@
color: var(--theme-colors-foreground);
background: var(--theme-colors-background);
}
&.clearable {
padding-right: 4rem;
}
}
.input:focus,
@@ -53,3 +57,20 @@
.option:hover {
background: lighten(var(--theme-colors-surface), 5%);
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/autocomplete/autocomplete.tsx
+11 -1
View File
@@ -1,6 +1,7 @@
import type { AutocompleteProps as MantineAutocompleteProps } from '@mantine/core';
import { Autocomplete as MantineAutocomplete } from '@mantine/core';
import clsx from 'clsx';
import { CSSProperties, forwardRef } from 'react';
import styles from './autocomplete.module.css';
@@ -14,6 +15,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
(
{
classNames,
clearable = false,
maxWidth,
size = 'sm',
style,
@@ -28,13 +30,21 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
classNames={{
description: styles.description,
dropdown: styles.dropdown,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
option: styles.option,
root: styles.root,
section: styles.section,
...classNames,
}}
clearable={clearable}
clearButtonProps={{
classNames: {
root: styles.clearButton,
},
}}
ref={ref}
size={size}
spellCheck={false}
src/shared/components/date-picker/date-picker.module.css
+21
View File
@@ -8,6 +8,10 @@
color: var(--theme-colors-surface-foreground);
background: var(--theme-colors-surface);
border: 1px solid transparent;
&.clearable {
padding-right: 4rem;
}
}
.section {
@@ -27,3 +31,20 @@
font-size: var(--theme-font-size-xs);
color: var(--theme-colors-foreground-muted);
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/date-picker/date-picker.tsx
+17 -2
View File
@@ -7,6 +7,7 @@ import {
DateInput as MantineDateInput,
DateTimePicker as MantineDateTimeInput,
} from '@mantine/dates';
import clsx from 'clsx';
import styles from './date-picker.module.css';
@@ -17,6 +18,7 @@ interface DateInputProps extends MantineDateInputProps {
export const DateInput = ({
classNames,
clearable = false,
maxWidth,
size = 'sm',
style,
@@ -27,13 +29,19 @@ export const DateInput = ({
<MantineDateInput
classNames={{
description: styles.description,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
required: styles.required,
root: styles.root,
section: styles.section,
...classNames,
}}
clearable={clearable}
clearButtonProps={{
className: styles.clearButton,
}}
size={size}
style={{ maxWidth, width, ...style }}
{...props}
@@ -48,6 +56,7 @@ interface DateTimeInputProps extends MantineDateTimeInputProps {
export const DateTimeInput = ({
classNames,
clearable = false,
maxWidth,
size = 'sm',
style,
@@ -58,13 +67,19 @@ export const DateTimeInput = ({
<MantineDateTimeInput
classNames={{
description: styles.description,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
required: styles.required,
root: styles.root,
section: styles.section,
...classNames,
}}
clearable={clearable}
clearButtonProps={{
className: styles.clearButton,
}}
size={size}
style={{ maxWidth, width, ...style }}
{...props}
src/shared/components/date-time-picker/date-time-picker.module.css
+21
View File
@@ -8,6 +8,10 @@
color: var(--theme-colors-surface-foreground);
background: var(--theme-colors-surface);
border: 1px solid transparent;
&.clearable {
padding-right: 4rem;
}
}
.section {
@@ -27,3 +31,20 @@
font-size: var(--theme-font-size-xs);
color: var(--theme-colors-foreground-muted);
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/date-time-picker/date-time-picker.tsx
+9 -1
View File
@@ -1,6 +1,7 @@
import type { DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates';
import { DateTimePicker as MantineDateTimePicker } from '@mantine/dates';
import clsx from 'clsx';
import styles from './date-time-picker.module.css';
@@ -11,6 +12,7 @@ interface DateTimePickerProps extends MantineDateTimePickerProps {
export const DateTimePicker = ({
classNames,
clearable = false,
maxWidth,
popoverProps,
size = 'sm',
@@ -22,13 +24,19 @@ export const DateTimePicker = ({
<MantineDateTimePicker
classNames={{
description: styles.description,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
required: styles.required,
root: styles.root,
section: styles.section,
...classNames,
}}
clearable={clearable}
clearButtonProps={{
className: styles.clearButton,
}}
popoverProps={{ withinPortal: true, ...popoverProps }}
size={size}
style={{ maxWidth, width, ...style }}
src/shared/components/file-input/file-input.module.css
+21
View File
@@ -19,6 +19,10 @@
color: var(--theme-colors-foreground);
background: var(--theme-colors-background);
}
&.clearable {
padding-right: 4rem;
}
}
.input:focus,
@@ -44,3 +48,20 @@
font-size: var(--theme-font-size-xs);
color: var(--theme-colors-foreground-muted);
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/file-input/file-input.tsx
+9 -1
View File
@@ -2,6 +2,7 @@ import {
FileInput as MantineFileInput,
FileInputProps as MantineFileInputProps,
} from '@mantine/core';
import clsx from 'clsx';
import { CSSProperties, forwardRef } from 'react';
import styles from './file-input.module.css';
@@ -16,6 +17,7 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
{
children,
classNames,
clearable = false,
maxWidth,
size = 'sm',
style,
@@ -29,7 +31,9 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
<MantineFileInput
classNames={{
description: styles.description,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
required: styles.required,
root: styles.root,
@@ -37,6 +41,10 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
wrapper: styles.wrapper,
...classNames,
}}
clearable={clearable}
clearButtonProps={{
className: styles.clearButton,
}}
ref={ref}
size={size}
style={{ maxWidth, width, ...style }}
src/shared/components/multi-select/multi-select.module.css
+17
View File
@@ -34,6 +34,10 @@
color: var(--theme-colors-foreground);
background: var(--theme-colors-background);
}
&.clearable {
padding-right: 4rem;
}
}
.input:focus,
@@ -75,5 +79,18 @@
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/multi-select/multi-select.tsx
+17 -14
View File
@@ -2,6 +2,7 @@ import {
MultiSelect as MantineMultiSelect,
MultiSelectProps as MantineMultiSelectProps,
} from '@mantine/core';
import clsx from 'clsx';
import { CSSProperties, useMemo } from 'react';
import styles from './multi-select.module.css';
@@ -11,34 +12,35 @@ export interface MultiSelectProps extends MantineMultiSelectProps {
width?: CSSProperties['width'];
}
const defaultClassNames = {
description: styles.description,
dropdown: styles.dropdown,
input: styles.input,
label: styles.label,
option: styles.option,
pill: styles.pill,
pillsList: styles.pillsList,
root: styles.root,
};
const defaultClearButtonProps = {
classNames: {
root: styles.clearButton,
},
variant: 'transparent' as const,
};
export const MultiSelect = ({
classNames,
clearable = false,
maxWidth,
variant = 'default',
width,
...props
}: MultiSelectProps) => {
const mergedClassNames = useMemo(
() => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
[classNames],
() => ({
description: styles.description,
dropdown: styles.dropdown,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
option: styles.option,
pill: styles.pill,
pillsList: styles.pillsList,
root: styles.root,
...classNames,
}),
[classNames, clearable],
);
const style = useMemo(
@@ -49,6 +51,7 @@ export const MultiSelect = ({
return (
<MantineMultiSelect
classNames={mergedClassNames}
clearable={clearable}
clearButtonProps={defaultClearButtonProps}
style={style}
variant={variant}
src/shared/components/select/select.module.css
+21
View File
@@ -17,6 +17,10 @@
color: var(--theme-colors-foreground);
background: var(--theme-colors-background);
}
&.clearable {
padding-right: 4rem;
}
}
.input:focus,
@@ -63,3 +67,20 @@
font-size: var(--theme-font-size-xs);
color: var(--theme-colors-foreground-muted);
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/select/select.tsx
+9 -1
View File
@@ -1,6 +1,7 @@
import type { SelectProps as MantineSelectProps } from '@mantine/core';
import { Select as MantineSelect } from '@mantine/core';
import clsx from 'clsx';
import { CSSProperties } from 'react';
import styles from './select.module.css';
@@ -25,7 +26,9 @@ export const Select = ({
classNames={{
description: styles.description,
dropdown: styles.dropdown,
input: styles.input,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
label: styles.label,
option: styles.option,
root: styles.root,
@@ -33,6 +36,11 @@ export const Select = ({
...classNames,
}}
clearable={clearable}
clearButtonProps={{
classNames: {
root: styles.clearButton,
},
}}
spellCheck={false}
style={{ maxWidth, width }}
variant={variant}
src/shared/components/tags-input/tags-input.module.css
+17
View File
@@ -38,6 +38,10 @@
background: var(--theme-colors-surface);
}
}
&.clearable {
padding-right: 4rem;
}
}
.input:focus-within {
@@ -68,5 +72,18 @@
}
.clear-button {
color: var(--theme-colors-foreground) !important;
background: transparent !important;
&:hover,
&:active,
&:focus-visible {
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%) !important;
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%) !important;
}
}
}
src/shared/components/tags-input/tags-input.tsx
+18 -15
View File
@@ -2,6 +2,7 @@ import {
TagsInput as MantineTagsInput,
TagsInputProps as MantineTagsInputProps,
} from '@mantine/core';
import clsx from 'clsx';
import { CSSProperties, useMemo } from 'react';
import styles from './tags-input.module.css';
@@ -11,35 +12,36 @@ export interface TagsInputProps extends MantineTagsInputProps {
width?: CSSProperties['width'];
}
const defaultClassNames = {
description: styles.description,
dropdown: styles.dropdown,
input: styles.input,
inputField: styles.inputField,
label: styles.label,
option: styles.option,
pill: styles.pill,
pillsList: styles.pillsList,
root: styles.root,
};
const defaultClearButtonProps = {
classNames: {
root: styles.clearButton,
},
variant: 'transparent' as const,
};
export const TagsInput = ({
classNames,
clearable = false,
maxWidth,
variant = 'default',
width,
...props
}: TagsInputProps) => {
const mergedClassNames = useMemo(
() => (classNames ? { ...defaultClassNames, ...classNames } : defaultClassNames),
[classNames],
() => ({
description: styles.description,
dropdown: styles.dropdown,
input: clsx(styles.input, {
[styles.clearable]: clearable,
}),
inputField: styles.inputField,
label: styles.label,
option: styles.option,
pill: styles.pill,
pillsList: styles.pillsList,
root: styles.root,
...classNames,
}),
[classNames, clearable],
);
const style = useMemo(
@@ -50,6 +52,7 @@ export const TagsInput = ({
return (
<MantineTagsInput
classNames={mergedClassNames}
clearable={clearable}
clearButtonProps={defaultClearButtonProps}
style={style}
variant={variant}