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

packages/console/package.json

@@ -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/core": "2.8.0",
-    "@parcel/transformer-mdx": "2.7.0",
+    "@parcel/transformer-mdx": "2.8.0",
-    "@parcel/transformer-sass": "2.7.0",
+    "@parcel/transformer-sass": "2.8.0",
-    "@parcel/transformer-svg-react": "2.7.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",

packages/console/src/components/ActionMenu/index.module.scss

@@ -1,3 +1,10 @@
+@use '@/scss/underscore' as _;
+
 .content {
+  padding: _.unit(1);
   min-width: 200px;
 }
+
+.dropdownTitle {
+  padding: _.unit(3);
+}

packages/console/src/components/ActionMenu/index.tsx

@@ -42,6 +42,7 @@ const ActionMenu = ({
       />
       <Dropdown
         title={title}
+        titleClassName={styles.dropdownTitle}
         anchorRef={anchorReference}
         isOpen={isOpen}
         className={classNames(styles.content, dropdownClassName)}

packages/console/src/components/AppContent/components/UserInfo/index.module.scss

@@ -41,6 +41,10 @@
   }
 }
 
+.dropdown {
+  padding: _.unit(1);
+}
+
 .dropdownItem {
   min-width: 170px;
   padding: _.unit(2.5) _.unit(2);

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -58,6 +58,7 @@ const UserInfo = () => {
       </div>
       <Dropdown
         anchorRef={anchorRef}
+        className={styles.dropdown}
         isOpen={showDropdown}
         horizontalAlign="end"
         onClose={() => {

packages/console/src/components/Dropdown/index.module.scss

@@ -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;
 }

packages/console/src/components/Select/index.module.scss

@@ -78,3 +78,8 @@
     height: 36px;
   }
 }
+
+.dropdown {
+  padding: _.unit(1);
+  max-height: 288px;
+}

packages/console/src/components/Select/index.tsx

@@ -97,6 +97,7 @@ const Select = <T extends string>({
       <Dropdown
         isFullWidth
         anchorRef={anchorRef}
+        className={styles.dropdown}
         isOpen={isOpen}
         onClose={() => {
           setIsOpen(false);

packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss

@@ -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 {
+.dropdownItemWrapper {
-  padding: 0;
+  .index {
-}
+    width: 20px;
+    height: 20px;
+    font: var(--font-subhead-cap);
 
-.index {
+    > svg {
-  width: 20px;
+      width: 16px;
-  height: 20px;
+      height: 16px;
-  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;
   }
 
-  &:hover:not(:last-child) {
+  .dropdownItem {
-    border-bottom-color: var(--color-hover);
+    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 {
+    &:last-child {
-      border-top-color: transparent;
+      // 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;
+      }
     }
   }
 }

packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx

@@ -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) => (
+        <div className={styles.dropdownItemWrapper}>
-          <DropdownItem
+          {data.map(({ id, title, isComplete, onClick }, index) => (
-            key={id}
+            <DropdownItem
-            className={styles.dropdownItem}
+              key={id}
-            icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
+              className={styles.dropdownItem}
-            onClick={onClick}
+              icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
-          >
+              onClick={onClick}
-            {t(title)}
+            >
-          </DropdownItem>
+              {t(title)}
-        ))}
+            </DropdownItem>
+          ))}
+        </div>
       </Dropdown>
     </>
   );

packages/demo-app/package.json

@@ -21,8 +21,8 @@
     "@logto/phrases": "workspace:^",
     "@logto/react": "1.0.0-beta.13",
     "@logto/schemas": "workspace:^",
-    "@parcel/core": "2.7.0",
+    "@parcel/core": "2.8.0",
-    "@parcel/transformer-sass": "2.7.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",

packages/ui/package.json

@@ -22,9 +22,9 @@
     "@logto/phrases": "workspace:^",
     "@logto/phrases-ui": "workspace:^",
     "@logto/schemas": "workspace:^",
-    "@parcel/core": "2.7.0",
+    "@parcel/core": "2.8.0",
-    "@parcel/transformer-sass": "2.7.0",
+    "@parcel/transformer-sass": "2.8.0",
-    "@parcel/transformer-svg-react": "2.7.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",