acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix bugs with dropdown item styles of dropdown and breadcrumb

This commit is contained in:
jinhojang6 2023-04-12 03:34:36 +09:00 committed by jeangovil
parent 7ebdd00ff5
commit 05dfde00f8
16 changed files with 73 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts
View File

@ -6,7 +6,6 @@ export const autocompleteClasses = {
input: `lsd-autocomplete__input`,
icon: `lsd-autocomplete__icon`,
dropdownItem: `lsd-autocomplete__dropdown-item`,
dropdownItemPlaceholder: `lsd-autocomplete__dropdown-item-placeholder`,
disabled: `lsd-autocomplete--disabled`,

8
packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts
View File

@ -119,14 +119,6 @@ export const AutocompleteStyles = css`
border-bottom: 1px solid rgb(var(--lsd-border-primary));
}
.${autocompleteClasses.dropdownItem} {
border: 0;
&:not(:last-child) {
border-bottom: 1px solid rgb(var(--lsd-border-primary));
}
}
.${autocompleteClasses.dropdownItemPlaceholder} {
opacity: 0.5;
white-space: pre;

1
packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx
View File

@ -155,7 +155,6 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
</span>
</>
}
className={autocompleteClasses.dropdownItem}
onClick={() => handleDropdownClick(opt[0])}
onKeyDown={(e) =>
e.key === 'Enter' && handleDropdownClick(opt[0])

9
packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx
View File

@ -4,6 +4,14 @@ import { Breadcrumb, BreadcrumbProps } from './Breadcrumb'
export default {
title: 'Breadcrumb',
component: Breadcrumb,
argTypes: {
size: {
type: {
name: 'enum',
value: ['small', 'large'],
},
},
},
} as Meta
export const Root: Story<BreadcrumbProps> = (args) => (
@ -22,4 +30,5 @@ Root.args = {
})),
ellipsis: false,
maxItems: 6,
size: 'large',
}

9
packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts
View File

@ -25,11 +25,9 @@ export const BreadcrumbStyles = css`
.${breadcrumbClasses.listBox} {
display: flex;
flex-direction: column;
max-height: 400px;
overflow: auto;
border: 1px solid rgb(var(--lsd-border-primary));
margin-top: 10px;
margin-left: 20px;
position: absolute;
width: auto !important;
}
@ -38,7 +36,7 @@ export const BreadcrumbStyles = css`
&:not(:last-child) {
border-bottom: 1px solid rgb(var(--lsd-border-primary));
}
padding: 6px 10px 6px 12px;
cursor: pointer;
&:hover,
&:focus {
@ -46,4 +44,9 @@ export const BreadcrumbStyles = css`
text-decoration-color: rgb(var(--lsd-border-primary));
}
}
.${breadcrumbClasses.listBox} li > a {
width: 164px;
padding: 5px 11px;
}
`

8
packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx
View File

@ -25,15 +25,16 @@ export type BreadcrumbProps = Omit<
options?: BreadcrumbOption[]
value?: string | string[]
onChange?: (value: string | string[]) => void
size?: 'small' | 'large'
}
export const Breadcrumb: React.FC<BreadcrumbProps> & {
classes: typeof breadcrumbClasses
} = ({
size = 'large',
disabled = false,
ellipsis = false,
maxItems,
value = [],
onChange,
options = [],
@ -56,10 +57,11 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
items.map((item, idx) => (
<BreadcrumbItem
key={idx}
current={idx === visible.length - 1 && item !== root}
outlined={idx === visible.length - 1 && item !== root}
label={item.value}
link={item.link}
linkComponent={item?.linkComponent}
size={size}
/>
))
@ -88,6 +90,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
ellipsisRef={ellipsisRef}
label={'...'}
onClick={onTrigger}
size={size}
/>
)}
{renderItems(visible)}
@ -99,6 +102,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
open={open}
onClose={() => setOpen(false)}
className={clsx(breadcrumbClasses.listBox)}
size={size}
>
{collapsed.map((opt, idx) => (
<BreadcrumbItem

7
packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts
View File

@ -1,6 +1,9 @@
export const breadcrumbItemClasses = {
root: `lsd-breadcrumb-item`,
itemCurrentPage: `lsd-breadcrumb-item--current-page`,
itemLink: `lsd-breadcrumb-item-link`,
outlined: `lsd-breadcrumb-item--outlined`,
itemLink: `lsd-breadcrumb__item-link`,
large: `lsd-breadcrumb-item--large`,
small: `lsd-breadcrumb-item--small`,
}

11
packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.stories.tsx
View File

@ -4,6 +4,14 @@ import { BreadcrumbItem, BreadcrumbItemProps } from './BreadcrumbItem'
export default {
title: 'BreadcrumbItem',
component: BreadcrumbItem,
argTypes: {
size: {
type: {
name: 'enum',
value: ['small', 'large'],
},
},
},
} as Meta
export const Root: Story<BreadcrumbItemProps> = (args) => (
@ -14,5 +22,6 @@ export const Root: Story<BreadcrumbItemProps> = (args) => (
Root.args = {
label: 'label',
current: true,
outlined: true,
size: 'large',
}

14
packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts
View File

@ -9,9 +9,9 @@ export const BreadcrumbItemStyles = css`
align-items: center;
}
.${breadcrumbClasses.list} li + li::before {
.${breadcrumbClasses.list} > li:not(:last-child)::after {
display: inline-block;
margin-inline: 10px;
margin-inline: 12px;
content: '/';
}
@ -20,9 +20,15 @@ export const BreadcrumbItemStyles = css`
cursor: pointer;
}
.${breadcrumbItemClasses.itemCurrentPage} {
.${breadcrumbItemClasses.outlined} {
padding: 3px 11px;
border: 1px solid rgb(var(--lsd-border-primary));
padding: 4px 12px;
}
${breadcrumbItemClasses.large} {
}
${breadcrumbItemClasses.small} {
}
.${breadcrumbClasses.root}:not(.${breadcrumbClasses.disabled}) {

22
packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx
View File

@ -8,20 +8,22 @@ export type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement> & {
linkComponent?: React.ComponentType<
React.AnchorHTMLAttributes<HTMLAnchorElement>
>
current?: boolean
outlined?: boolean
disabled?: boolean
selected?: boolean
ellipsisRef?: React.RefObject<HTMLLIElement>
onClick?: () => void
size?: 'small' | 'large'
}
export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
classes: typeof breadcrumbItemClasses
} = ({
size = 'large',
label,
link,
linkComponent: LinkComponent = (props) => <a {...props}>{props.children}</a>,
current,
outlined,
selected,
ellipsisRef,
onClick,
@ -30,20 +32,28 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
}) => {
return (
<li
className={clsx(breadcrumbItemClasses.root, className)}
{...props}
className={clsx(
breadcrumbItemClasses.root,
breadcrumbItemClasses[size],
className,
)}
aria-selected={selected ? 'true' : 'false'}
onClick={onClick}
ref={ellipsisRef}
{...props}
>
<LinkComponent
href={link}
className={clsx(
breadcrumbItemClasses.itemLink,
current && breadcrumbItemClasses.itemCurrentPage,
outlined && breadcrumbItemClasses.outlined,
)}
>
<Typography color="primary" component="span" variant={'label1'}>
<Typography
color="primary"
component="span"
variant={size === 'large' ? 'label1' : 'label2'}
>
{label}
</Typography>
</LinkComponent>

2
packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts
View File

@ -12,8 +12,6 @@ export const dropdownClasses = {
supportingText: 'lsd-dropdown__supporting-text',
listBox: 'lsd-dropdown__list-box',
open: 'lsd-dropdown--open',
error: 'lsd-dropdown--error',
disabled: 'lsd-dropdown--disabled',

16
packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts
View File

@ -1,5 +1,4 @@
import { css } from '@emotion/react'
import { dropdownItemClasses } from '../DropdownItem/DropdownItem.classes'
import { dropdownClasses } from './Dropdown.classes'
export const DropdownStyles = css`
@ -82,21 +81,6 @@ export const DropdownStyles = css`
cursor: initial;
}
.${dropdownClasses.listBox} {
max-height: 400px;
overflow: auto;
border: 1px solid rgb(var(--lsd-border-primary));
border-top: 0;
& .${dropdownItemClasses.root} {
border: 0;
&:not(:last-child) {
border-bottom: 1px solid rgb(var(--lsd-border-primary));
}
}
}
.${dropdownClasses.large} {
width: 208px;

1
packages/lsd-react/src/components/Dropdown/Dropdown.tsx
View File

@ -142,6 +142,7 @@ export const Dropdown: React.FC<DropdownProps> & {
handleRef={containerRef}
open={open}
onClose={() => setOpen(false)}
size={size}
>
{options.map((opt) => (
<DropdownItem

2
packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx
View File

@ -35,6 +35,7 @@ export const DropdownItem: React.FC<DropdownItemProps> & {
<div
role="option"
aria-selected={selected ? 'true' : 'false'}
{...props}
className={clsx(
className,
dropdownItemClasses.root,
@ -42,7 +43,6 @@ export const DropdownItem: React.FC<DropdownItemProps> & {
withIcon && dropdownItemClasses.withIcon,
disabled && dropdownItemClasses.disabled,
)}
{...props}
>
{withIcon &&
(selected ? (

8
packages/lsd-react/src/components/DropdownMenu/DropdownMenu.styles.ts
View File

@ -17,6 +17,14 @@ export const DropdownMenuStyles = css`
border-top: 0;
}
.${dropdownMenuClasses.root} > div {
border: 0;
&:not(:last-child) {
border-bottom: 1px solid rgb(var(--lsd-border-primary));
}
}
.${dropdownMenuClasses.open} {
opacity: 1;
visibility: visible;

2
packages/lsd-react/src/components/DropdownMenu/DropdownMenu.tsx
View File

@ -53,7 +53,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> & {
<ul
{...props}
ref={ref}
role="dropdownMenu"
role="listbox"
aria-label={label}
style={{ ...style, ...(props.style ?? {}) }}
className={clsx(