fix: dropdown divider duplicated className with divider component.

riazer-lab · Mar 7, 2023 · 720eb26 · 720eb26
1 parent 9277cf0
commit 720eb26
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/apps/experiments/src/index.html b/apps/experiments/src/index.html
@@ -1602,7 +1602,7 @@ <h2 class="text-xl">Others</h2>
             <label class="btn solid" tabindex="0">divider</label>
             <div class="menu bottom">
               <a class="item text-sm">Profile</a>
-              <div class="divider" role="separator"></div>
+              <div class="is-divider" role="separator"></div>
               <a class="item text-sm" tabindex="-1">Account settings</a>
               <a class="item text-sm" tabindex="-1">Subscriptions</a>
             </div>
@@ -1611,7 +1611,7 @@ <h2 class="text-xl">Others</h2>
             <label class="btn solid" tabindex="0">subtitle</label>
             <div class="menu bottom">
               <a class="item text-sm">Profile</a>
-              <div class="divider" role="separator"></div>
+              <div class="is-divider" role="separator"></div>
               <a class="subtitle">Settings</a>
               <a class="item text-sm" tabindex="-1">Account settings</a>
               <a class="item text-sm" tabindex="-1">Subscriptions</a>
@@ -1621,7 +1621,7 @@ <h2 class="text-xl">Others</h2>
             <label class="btn solid" tabindex="0">subtitle</label>
             <div class="menu bottom">
               <a class="item text-sm">Profile</a>
-              <div class="divider" role="separator"></div>
+              <div class="is-divider" role="separator"></div>
               <a class="subtitle">Settings</a>
               <a class="item text-sm" tabindex="-1">Account settings</a>
               <a class="item text-sm" tabindex="-1">Subscriptions</a>

diff --git a/apps/website/components/demo/dropdown.tsx b/apps/website/components/demo/dropdown.tsx
@@ -34,7 +34,7 @@ export const DropdownDemo = ({
       </label>
       <div className={`menu ${position}`}>
         <a className="item text-sm">Profile</a>
-        {divider && <div className="divider" role="separator"></div>}
+        {divider && <div className="is-divider" role="separator"></div>}
         {subtitle && <p className="subtitle">Settings</p>}
         <a className="item text-sm" tabIndex={-1}>
           Account settings

diff --git a/apps/website/pages/docs/components/dropdown.en.mdx b/apps/website/pages/docs/components/dropdown.en.mdx
@@ -41,21 +41,23 @@ Use the specified value to modify the position of the drop-down list at the `bot
   <label class="btn solid" tabindex="0">With Divider</label>
   <div class="menu bottom">
     <a class="item text-sm">Profile</a>
-    <div class="divider" role="separator"></div>
+    <div class="is-divider" role="separator"></div>
     <a class="item text-sm" tabindex="-1">Account settings</a>
     <a class="item text-sm" tabindex="-1">Subscriptions</a>
   </div>
 </div>
 ```
 
+<DropdownDemo position={'right'} labelText={'With Divider'} divider={true} />
+
 ## Subtitle
 
 ```html
 <div class="dropdown success">
   <label class="btn solid" tabindex="0">With Divider</label>
   <div class="menu bottom">
     <a class="item text-sm">Profile</a>
-    <div class="divider" role="separator"></div>
+    <div class="is-divider" role="separator"></div>
     <p class="subtitle">Settings</p>
     <a class="item text-sm" tabindex="-1">Account settings</a>
     <a class="item text-sm" tabindex="-1">Subscriptions</a>

diff --git a/apps/website/pages/docs/components/dropdown.zh.mdx b/apps/website/pages/docs/components/dropdown.zh.mdx
@@ -41,21 +41,23 @@ import { DropdownDemo } from '../../../components/demo/dropdown';
   <label class="btn solid" tabindex="0">With Divider</label>
   <div class="menu bottom">
     <a class="item text-sm">Profile</a>
-    <div class="divider" role="separator"></div>
+    <div class="is-divider" role="separator"></div>
     <a class="item text-sm" tabindex="-1">Account settings</a>
     <a class="item text-sm" tabindex="-1">Subscriptions</a>
   </div>
 </div>
 ```
 
+<DropdownDemo position={'right'} labelText={'With Divider'} divider={true} />
+
 ## 小标题
 
 ```html
 <div class="dropdown success">
   <label class="btn solid" tabindex="0">With Divider</label>
   <div class="menu bottom">
     <a class="item text-sm">Profile</a>
-    <div class="divider" role="separator"></div>
+    <div class="is-divider" role="separator"></div>
     <p class="subtitle">Settings</p>
     <a class="item text-sm" tabindex="-1">Account settings</a>
     <a class="item text-sm" tabindex="-1">Subscriptions</a>

diff --git a/packages/tailwind/src/style/components/dropdown.css b/packages/tailwind/src/style/components/dropdown.css
@@ -28,11 +28,11 @@
   color: rgba(var(--sira-color-900), var(--tw-text-opacity));
 }
 
-.dropdown > .menu > .divider {
+.dropdown > .menu > .is-divider {
   @apply relative my-2;
 }
 
-.dropdown > .menu > .divider::before {
+.dropdown > .menu > .is-divider::before {
   --tw-bg-opacity: 0.7;
   background-color: rgba(var(--sira-color-500), var(--tw-bg-opacity));
   @apply absolute top-0 right-0 h-px w-full scale-x-125 bg-opacity-70 content-[""];