mirror of
https://github.com/logto-io/logto.git
synced 2025-01-20 21:32:31 -05:00
Merge pull request #2564 from logto-io/charles-log-4848-fix-dropdown-component-css-specificity-issues
fix: upgrade parcel and fix dropdown component css specificity issues
This commit is contained in:
Charles Zhao
GitHub
commit
31814ad351
13 changed files with 489 additions and 475 deletions
|
|
@ -26,10 +26,10 @@
|
|||
"@logto/react": "1.0.0-beta.13",
|
||||
"@logto/schemas": "workspace:^",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@parcel/core": "2.7.0",
|
||||
"@parcel/transformer-mdx": "2.7.0",
|
||||
"@parcel/transformer-sass": "2.7.0",
|
||||
"@parcel/transformer-svg-react": "2.7.0",
|
||||
"@parcel/core": "2.8.0",
|
||||
"@parcel/transformer-mdx": "2.8.0",
|
||||
"@parcel/transformer-sass": "2.8.0",
|
||||
"@parcel/transformer-svg-react": "2.8.0",
|
||||
"@silverhand/eslint-config": "1.3.0",
|
||||
"@silverhand/eslint-config-react": "1.3.0",
|
||||
"@silverhand/essentials": "^1.3.0",
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
"lodash.get": "^4.4.2",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"nanoid": "^3.1.23",
|
||||
"parcel": "2.7.0",
|
||||
"parcel": "2.8.0",
|
||||
"postcss": "^8.4.6",
|
||||
"postcss-modules": "^4.3.0",
|
||||
"prettier": "^2.7.1",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.content {
|
||||
padding: _.unit(1);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.dropdownTitle {
|
||||
padding: _.unit(3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ const ActionMenu = ({
|
|||
/>
|
||||
<Dropdown
|
||||
title={title}
|
||||
titleClassName={styles.dropdownTitle}
|
||||
anchorRef={anchorReference}
|
||||
isOpen={isOpen}
|
||||
className={classNames(styles.content, dropdownClassName)}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
padding: _.unit(1);
|
||||
}
|
||||
|
||||
.dropdownItem {
|
||||
min-width: 170px;
|
||||
padding: _.unit(2.5) _.unit(2);
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ const UserInfo = () => {
|
|||
</div>
|
||||
<Dropdown
|
||||
anchorRef={anchorRef}
|
||||
className={styles.dropdown}
|
||||
isOpen={showDropdown}
|
||||
horizontalAlign="end"
|
||||
onClose={() => {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
|
||||
.title {
|
||||
@include _.subhead-cap;
|
||||
padding: _.unit(3);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -33,7 +32,5 @@
|
|||
|
||||
.list {
|
||||
margin: 0;
|
||||
padding: _.unit(1);
|
||||
max-height: 288px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,3 +78,8 @@
|
|||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
padding: _.unit(1);
|
||||
max-height: 288px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ const Select = <T extends string>({
|
|||
<Dropdown
|
||||
isFullWidth
|
||||
anchorRef={anchorRef}
|
||||
className={styles.dropdown}
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
setIsOpen(false);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: _.unit(2);
|
||||
|
|
@ -29,44 +29,46 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdownTitle {
|
||||
@include _.subhead-cap;
|
||||
padding: _.unit(3) _.unit(5) _.unit(3) _.unit(4);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
padding: 0;
|
||||
}
|
||||
.dropdownItemWrapper {
|
||||
.index {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: var(--font-subhead-cap);
|
||||
|
||||
.index {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: var(--font-subhead-cap);
|
||||
|
||||
> svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownItem {
|
||||
height: 42px;
|
||||
padding: 0 _.unit(5) 0 _.unit(4);
|
||||
border-top: 1px solid var(--color-hover);
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: unset;
|
||||
|
||||
&:last-child {
|
||||
// Note: use 7px to avoid display issue with parent border-radius
|
||||
border-bottom-left-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
> svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:last-child) {
|
||||
border-bottom-color: var(--color-hover);
|
||||
.dropdownItem {
|
||||
height: 42px;
|
||||
padding: 0 _.unit(5) 0 _.unit(4);
|
||||
border-top: 1px solid var(--color-hover);
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: unset;
|
||||
|
||||
+ .dropdownItem {
|
||||
border-top-color: transparent;
|
||||
&:last-child {
|
||||
// Note: use 7px to avoid display issue with parent border-radius
|
||||
border-bottom-left-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
}
|
||||
|
||||
&:hover:not(:last-child) {
|
||||
border-bottom-color: var(--color-hover);
|
||||
|
||||
+ .dropdownItem {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const GetStartedProgress = () => {
|
|||
ref={anchorRef}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={classNames(styles.container, showDropdown && styles.active)}
|
||||
className={classNames(styles.progress, showDropdown && styles.active)}
|
||||
onKeyDown={onKeyDownHandler({
|
||||
Esc: hideDropDown,
|
||||
Enter: showDropDown,
|
||||
|
|
@ -68,16 +68,18 @@ const GetStartedProgress = () => {
|
|||
titleClassName={styles.dropdownTitle}
|
||||
onClose={hideDropDown}
|
||||
>
|
||||
{data.map(({ id, title, isComplete, onClick }, index) => (
|
||||
<DropdownItem
|
||||
key={id}
|
||||
className={styles.dropdownItem}
|
||||
icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t(title)}
|
||||
</DropdownItem>
|
||||
))}
|
||||
<div className={styles.dropdownItemWrapper}>
|
||||
{data.map(({ id, title, isComplete, onClick }, index) => (
|
||||
<DropdownItem
|
||||
key={id}
|
||||
className={styles.dropdownItem}
|
||||
icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t(title)}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</div>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
"@logto/phrases": "workspace:^",
|
||||
"@logto/react": "1.0.0-beta.13",
|
||||
"@logto/schemas": "workspace:^",
|
||||
"@parcel/core": "2.7.0",
|
||||
"@parcel/transformer-sass": "2.7.0",
|
||||
"@parcel/core": "2.8.0",
|
||||
"@parcel/transformer-sass": "2.8.0",
|
||||
"@silverhand/eslint-config": "1.3.0",
|
||||
"@silverhand/eslint-config-react": "1.3.0",
|
||||
"@silverhand/ts-config": "1.2.1",
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
"i18next": "^21.8.16",
|
||||
"i18next-browser-languagedetector": "^6.1.4",
|
||||
"lint-staged": "^13.0.0",
|
||||
"parcel": "2.7.0",
|
||||
"parcel": "2.8.0",
|
||||
"postcss": "^8.4.6",
|
||||
"prettier": "^2.7.1",
|
||||
"react": "^18.0.0",
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
"@logto/phrases": "workspace:^",
|
||||
"@logto/phrases-ui": "workspace:^",
|
||||
"@logto/schemas": "workspace:^",
|
||||
"@parcel/core": "2.7.0",
|
||||
"@parcel/transformer-sass": "2.7.0",
|
||||
"@parcel/transformer-svg-react": "2.7.0",
|
||||
"@parcel/core": "2.8.0",
|
||||
"@parcel/transformer-sass": "2.8.0",
|
||||
"@parcel/transformer-svg-react": "2.8.0",
|
||||
"@peculiar/webcrypto": "^1.3.3",
|
||||
"@silverhand/eslint-config": "1.3.0",
|
||||
"@silverhand/eslint-config-react": "1.3.0",
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
"ky": "^0.32.0",
|
||||
"libphonenumber-js": "^1.9.49",
|
||||
"lint-staged": "^13.0.0",
|
||||
"parcel": "2.7.0",
|
||||
"parcel": "2.8.0",
|
||||
"postcss": "^8.4.6",
|
||||
"postcss-modules": "^4.3.0",
|
||||
"prettier": "^2.7.1",
|
||||
|
|
|
|||
832
pnpm-lock.yaml
generated
832
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue