refactor: update class names of Dropdown

packages/lsd-react/src/components/Dropdown/Dropdown.classes.ts

@@ -5,10 +5,10 @@ export const dropdownClasses = {
   buttonContainer: `lsd-dropdown__button-container`,
 
   trigger: `lsd-dropdown__trigger`,
-  triggerLabel: `lsd-dropdown__trigger-label`,
-  triggerIcons: `lsd-dropdown__trigger-icons`,
-  triggerIcon: `lsd-dropdown__trigger-icons__icon`,
-  triggerMenuIcon: `lsd-dropdown__trigger-icons__menu-icon`,
+  optionLabel: `lsd-dropdown__option-label`,
+  icons: `lsd-dropdown__icons`,
+  icon: `lsd-dropdown__icon`,
+  menuIcon: `lsd-dropdown__menu-icon`,
 
   supportingText: 'lsd-dropdown__supporting-text',
 

packages/lsd-react/src/components/Dropdown/Dropdown.styles.ts

@@ -12,7 +12,7 @@ export const DropdownStyles = css`
     .${dropdownClasses.trigger} {
       &:hover,
       &:focus {
-        .${dropdownClasses.triggerLabel} {
+        .${dropdownClasses.optionLabel} {
           text-decoration: underline;
         }
       }
@@ -44,14 +44,14 @@ export const DropdownStyles = css`
     }
   }
 
-  .${dropdownClasses.triggerLabel} {
+  .${dropdownClasses.optionLabel} {
     cursor: inherit;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .${dropdownClasses.triggerIcons} {
+  .${dropdownClasses.icons} {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -59,12 +59,12 @@ export const DropdownStyles = css`
     gap: 8px;
   }
 
-  .${dropdownClasses.triggerIcon} {
+  .${dropdownClasses.icon} {
     display: flex;
     align-items: center;
   }
 
-  .${dropdownClasses.triggerMenuIcon} {
+  .${dropdownClasses.menuIcon} {
   }
 
   .${dropdownClasses.supportingText} {
@@ -72,7 +72,7 @@ export const DropdownStyles = css`
   }
 
   .${dropdownClasses.error} {
-    .${dropdownClasses.triggerLabel} {
+    .${dropdownClasses.optionLabel} {
       text-decoration: line-through;
     }
   }

packages/lsd-react/src/components/Dropdown/Dropdown.tsx

@@ -102,29 +102,26 @@ export const Dropdown: React.FC<DropdownProps> & {
             color="primary"
             component="label"
             variant={size === 'large' ? 'label1' : 'label2'}
-            className={dropdownClasses.triggerLabel}
+            className={dropdownClasses.optionLabel}
           >
             {selected.length > 0
               ? selected.map((opt) => opt.name).join(', ')
               : triggerLabel}
           </Typography>
-          <div className={dropdownClasses.triggerIcons}>
+          <div className={dropdownClasses.icons}>
             {error && (
-              <ErrorIcon
-                color="primary"
-                className={dropdownClasses.triggerIcon}
-              />
+              <ErrorIcon color="primary" className={dropdownClasses.icon} />
             )}
 
             {open ? (
               <ArrowUpIcon
                 color="primary"
-                className={dropdownClasses.triggerMenuIcon}
+                className={dropdownClasses.menuIcon}
               />
             ) : (
               <ArrowDownIcon
                 color="primary"
-                className={dropdownClasses.triggerMenuIcon}
+                className={dropdownClasses.menuIcon}
               />
             )}
           </div>