exchange css selectors for bem named classes

inovex · Sep 17, 2024 · 1e03e23 · 1e03e23
1 parent e6d0649
commit 1e03e23
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
@@ -14,12 +14,12 @@
   margin-top: auto;
   border-radius: $rounded--full;
 
-  > li {
+  &__item {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    > button {
+    &__button {
       cursor: pointer;
       border: none;
       background: none;
@@ -44,18 +44,19 @@
   }
 
   > ul > li {
-    padding: 0;
   }
 }
 
 [theme="dark"] {
   .color-picker {
     background-color: $navy--600;
 
-    > li > button {
-      &:focus-visible {
-        border-radius: $rounded--full;
-        outline: none;
+    &__item {
+      &__button {
+        &:focus-visible {
+          border-radius: $rounded--full;
+          outline: none;
+        }
       }
     }
   }

diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
@@ -37,7 +37,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
   return (
     <ReactFocusLock autoFocus={false} className="fix-focus-lock-placement">
       <ul className="color-picker">
-        <li className={getColorClassName(props.color)}>
+        <li className={`${getColorClassName(props.color)} color-picker__item`}>
           <button
             id={primColorAnchor}
             aria-label={formatColorName(props.color)}
@@ -46,6 +46,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
               props.onClose?.();
               dispatch(Actions.editColumn(props.id, {name: props.name, color: props.color, index: props.index, visible: props.visible}));
             }}
+            className="color-picker__item__button"
           >
             <div className="column__header-color-option column__header-color-option--selected" />
           </button>
@@ -54,7 +55,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
         {colorsWithoutSelectedColor.map((item) => {
           const anchor = uniqueId(`color-picker-${item.toString()}`);
           return (
-            <li className={getColorClassName(item)}>
+            <li className={`${getColorClassName(item)} color-picker__item`}>
               <button
                 id={anchor}
                 aria-label={formatColorName(item)}
@@ -63,7 +64,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
                   props.onClose?.();
                   dispatch(Actions.editColumn(props.id, {name: props.name, color: item, index: props.index, visible: props.visible}));
                 }}
-                className={item.toString()}
+                className={`${item.toString()} color-picker__item__button`}
               >
                 <div className={`column__header-color-option column__header-color-option--${item.toString()}`} />
               </button>