tesseract-design
/
tesseract
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update component styles 

Improve compatibility.
master
TheoryOfNekomata 1 year ago
parent
cfb6b2e66a
commit
72a01bc83e
5 changed files with 179 additions and 151 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -6
      categories/web/blob/react/src/components/FileSelectBox/index.tsx
  2. +3
    -3
      categories/web/choice/react/src/components/ComboBox/index.tsx
  3. +1
    -2
      categories/web/choice/react/src/components/DropdownSelect/index.tsx
  4. +165
    -138
      categories/web/choice/react/src/components/MenuSelect/index.tsx
  5. +1
    -2
      categories/web/choice/react/src/components/RadioButton/index.tsx

+ 9
- 6
categories/web/blob/react/src/components/FileSelectBox/index.tsx View File

@@ -430,7 +430,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
'relative rounded ring-secondary/50 group file-select-box',
'focus-within:ring-4',
block && 'flex w-full',
!block && 'inline-flex align-top w-64 justify-center items-center',
!block && 'inline-flex align-top justify-center items-center',
className,
)}
onDragEnter={clientSide ? cancelEvent : undefined}
@@ -441,11 +441,14 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
>
<div
className={tw(
'w-full overflow-hidden min-h-16 relative pt-4 min-h-16 rounded-inherit',
'min-w-64 w-full overflow-hidden min-h-16 relative pt-4 rounded-inherit',
{
'h-4': clientSide,
'h-16': !clientSide,
'resize-y': resizable,
'min-w-64': !block,
'min-w-full': block,
'resize-y': block && resizable,
'resize': !block && resizable,
'pb-4': clientSide && filesCount > 0,
},
)}
@@ -456,7 +459,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
id={labelId}
htmlFor={id}
className={tw(
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none select-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative',
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none select-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none',
{
'sr-only': hiddenLabel,
},
@@ -586,7 +589,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
onMouseUp={handleReselectMouseUp}
tabIndex={-1}
className={tw(
'flex w-full h-full focus:outline-0 bg-negative text-primary cursor-pointer items-center justify-center leading-none gap-4 select-none',
'flex w-full h-full focus:outline-0 text-primary cursor-pointer items-center justify-center leading-none gap-4 select-none',
{
'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !aboutToSelect,
'text-tertiary': aboutToSelect,
@@ -611,7 +614,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
onMouseUp={doSetFileList}
tabIndex={-1}
className={tw(
'flex w-full h-full bg-negative text-primary disabled:text-primary items-center justify-center leading-none gap-4 select-none focus:outline-0',
'flex w-full h-full text-primary disabled:text-primary items-center justify-center leading-none gap-4 select-none focus:outline-0',
{
'group-focus-within:text-secondary group-focus-within:active:text-tertiary': !aboutToClear,
'text-tertiary': aboutToClear,


+ 3
- 3
categories/web/choice/react/src/components/ComboBox/index.tsx View File

@@ -127,7 +127,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
id={labelId}
htmlFor={id}
className={tw(
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
{
'sr-only': hiddenLabel,
},
@@ -159,7 +159,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
list={datalistId}
data-testid="input"
className={tw(
'bg-negative rounded-inherit w-full peer block font-inherit',
'rounded-inherit w-full peer block font-inherit bg-transparent box-border',
'focus:outline-0',
'disabled:opacity-50 disabled:cursor-not-allowed',
{
@@ -193,7 +193,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
<div
data-testid="hint"
className={tw(
'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
{
'bottom-0 pl-4 pb-1': variant === 'default',
'top-0.5': variant === 'alternate',


+ 1
- 2
categories/web/choice/react/src/components/DropdownSelect/index.tsx View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import { TextControl, tailwind } from '@tesseract-design/web-base';
import { useFallbackId } from '@modal-sh/react-utils';
import { PluginCreator } from 'tailwindcss/types/config';

const { tw } = tailwind;

@@ -48,7 +47,7 @@ export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelect
hiddenLabel?: boolean,
}

export const dropdownSelectPlugin: PluginCreator = ({ addComponents }) => {
export const dropdownSelectPlugin: tailwind.PluginCreator = ({ addComponents }) => {
addComponents({
'.dropdown-select': {
'& optgroup': {


+ 165
- 138
categories/web/choice/react/src/components/MenuSelect/index.tsx View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import { TextControl, tailwind } from '@tesseract-design/web-base';
import { useFallbackId } from '@modal-sh/react-utils';
import { PluginCreator } from 'tailwindcss/types/config';

const { tw } = tailwind;

@@ -54,11 +53,39 @@ export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedE
* Starting height of the component.
*/
startingHeight?: number | string,
/**
* Should the component be resizable?
*/
resizable?: boolean,
}

export const menuSelectPlugin: PluginCreator = ({ addComponents }) => {
export const menuSelectPlugin: tailwind.PluginCreator = ({ addComponents }) => {
addComponents({
'.menu-select': {
'&[data-variant="alternate"][data-size="small"]': {
'--td-padding-top': '1.25rem',
},
'&[data-variant="alternate"][data-size="medium"]': {
'--td-padding-top': '1.5rem',
},
'&[data-variant="alternate"][data-size="large"]': {
'--td-padding-top': '2rem',
},
'&[data-variant="default"][data-size="small"]': {
'--td-padding-top': '0.625rem',
'--td-padding-bottom': '0.625rem',
},
'&[data-variant="default"][data-size="medium"]': {
'--td-padding-top': '0.75rem',
'--td-padding-bottom': '0.75rem',
},
'&[data-variant="default"][data-size="large"]': {
'--td-padding-top': '1.25rem',
'--td-padding-bottom': '1.25rem',
},
'clip-path': 'inset(var(--td-padding-top, 0) 0 var(--td-padding-bottom, 0) 0)',
'padding-top': 'var(--td-padding-top, 0)',
'padding-bottom': 'var(--td-padding-bottom, 0)',
'& optgroup': {
'color': 'rgb(var(--color-positive) / 50%)',
'text-transform': 'uppercase',
@@ -87,13 +114,14 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
hint,
indicator,
size = 'medium' as const,
border = false,
block = false,
border = false as const,
block = false as const,
variant = 'default' as const,
hiddenLabel = false,
hiddenLabel = false as const,
className,
startingHeight = '15rem',
startingHeight = '15rem' as const,
id: idProp,
resizable = false as const,
...etcProps
}: MenuSelectProps,
forwardedRef,
@@ -114,138 +142,136 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
)}
data-testid="base"
>
{label && (
<>
<label
data-testid="label"
htmlFor={id}
id={labelId}
className={tw(
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
{
'sr-only': hiddenLabel,
},
{
'pr-1': !indicator,
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
)}
>
<span className="block w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
{label}
</span>
</label>
{' '}
</>
)}
<MenuSelectDerivedElementComponent
{...etcProps}
ref={forwardedRef}
id={id}
aria-labelledby={labelId}
data-testid="input"
size={2}
style={{
height: startingHeight,
}}
className={tw(
'menu-select bg-negative rounded-inherit w-full peer block overflow-auto cursor-pointer font-inherit',
'focus:outline-0',
'disabled:opacity-50 disabled:cursor-not-allowed',
{
'resize': !block,
'resize-y': block,
},
{
'text-xxs': size === 'small',
'text-xs': size === 'medium',
},
{
'pl-4': variant === 'default',
'pl-1.5': variant === 'alternate',
},
{
'pt-4': variant === 'alternate' && size === 'small',
'pt-5': variant === 'alternate' && size === 'medium',
'pt-8': variant === 'alternate' && size === 'large',
},
{
'py-2.5': variant === 'default' && size === 'small',
'py-3': variant === 'default' && size === 'medium',
'py-5': variant === 'default' && size === 'large',
},
{
'pr-4': variant === 'default' && !indicator,
'pr-1.5': variant === 'alternate' && !indicator,
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
{
'min-h-10': size === 'small',
'min-h-12': size === 'medium',
'min-h-16': size === 'large',
},
)}
/>
{hint && (
<div
data-testid="hint"
className={tw(
'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
{
'bottom-0 pl-4 pb-1': variant === 'default',
'top-0.5': variant === 'alternate',
},
{
'pt-2': variant === 'alternate' && size === 'small',
'pt-3': variant === 'alternate' && size !== 'small',
},
{
'pr-4': !indicator && variant === 'default',
'pr-1': !indicator && variant === 'alternate',
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
)}
>
<div
className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
>
{hint}
</div>
</div>
)}
{indicator && (
<div
data-testid="indicator"
className={tw(
'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
{
'w-10': size === 'small',
'w-12': size === 'medium',
'w-16': size === 'large',
},
)}
>
{indicator}
</div>
)}
{border && (
<span
data-testid="border"
className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
/>
)}
<div
className={tw(
'w-full overflow-hidden min-h-16 relativemin-h-16 rounded-inherit',
{
'resize': !block && resizable,
'resize-y': block && resizable,
},
{
'min-h-10': size === 'small',
'min-h-12': size === 'medium',
'min-h-16': size === 'large',
},
)}
style={{
height: startingHeight,
}}
>
{label && (
<>
<label
data-testid="label"
htmlFor={id}
id={labelId}
className={tw(
'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
{
'sr-only': hiddenLabel,
},
{
'pr-1': !indicator,
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
)}
>
<span className="block w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
{label}
</span>
</label>
{' '}
</>
)}
<MenuSelectDerivedElementComponent
{...etcProps}
ref={forwardedRef}
id={id}
aria-labelledby={labelId}
data-testid="input"
size={2}
data-variant={variant}
data-size={size}
className={tw(
'menu-select bg-transparent rounded-inherit w-full h-full peer block overflow-auto cursor-pointer font-inherit',
'focus:outline-0',
'disabled:opacity-50 disabled:cursor-not-allowed',
{
'text-xxs': size === 'small',
'text-xs': size === 'medium',
},
{
'pl-4': variant === 'default',
'pl-1.5': variant === 'alternate',
},
{
'pr-4': variant === 'default' && !indicator,
'pr-1.5': variant === 'alternate' && !indicator,
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
)}
/>
{hint && (
<div
data-testid="hint"
className={tw(
'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
{
'bottom-0 pl-4 pb-1': variant === 'default',
'top-0.5': variant === 'alternate',
},
{
'pt-2': variant === 'alternate' && size === 'small',
'pt-3': variant === 'alternate' && size !== 'small',
},
{
'pr-4': !indicator && variant === 'default',
'pr-1': !indicator && variant === 'alternate',
},
{
'pr-10': indicator && size === 'small',
'pr-12': indicator && size === 'medium',
'pr-16': indicator && size === 'large',
},
)}
>
<div
className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
>
{hint}
</div>
</div>
)}
{indicator && (
<div
data-testid="indicator"
className={tw(
'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
{
'w-10': size === 'small',
'w-12': size === 'medium',
'w-16': size === 'large',
},
)}
>
{indicator}
</div>
)}
{border && (
<span
data-testid="border"
className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
/>
)}
</div>
</div>
);
});
@@ -262,4 +288,5 @@ MenuSelect.defaultProps = {
variant: 'default' as const,
hiddenLabel: false as const,
startingHeight: '15rem' as const,
resizable: false as const,
};

+ 1
- 2
categories/web/choice/react/src/components/RadioButton/index.tsx View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import { Button, tailwind } from '@tesseract-design/web-base';
import { useFallbackId } from '@modal-sh/react-utils';
import { PluginCreator } from 'tailwindcss/types/config';

const { tw } = tailwind;

@@ -44,7 +43,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<RadioBu
variant?: Button.Variant;
}

export const radioButtonPlugin: PluginCreator = ({ addComponents }) => {
export const radioButtonPlugin: tailwind.PluginCreator = ({ addComponents }) => {
addComponents({
'.radio-button': {
'& + label > :first-child > :first-child': {


Write Preview
Loading…
Cancel
Save