fix: saadeghi#1218 - Add missing modifiers on dropdown and tooltip (s…

…aadeghi#1232) * feat: add dropdown-bottom modifier * feat: add tooltip-top modifier * fix: dropdown styles
Avensen · Jun 5, 2023 · 4866f76 · 4866f76
1 parent 11f1c9a
commit 4866f76
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/src/components/unstyled/tooltip.css b/src/components/unstyled/tooltip.css
@@ -9,7 +9,7 @@
 .tooltip:before {
   content: attr(data-tip);
 }
-.tooltip {
+.tooltip, .tooltip-top {
   &:before {
     transform: translateX(-50%);
     top: auto;

diff --git a/src/docs/src/routes/components/dropdown.svelte.md b/src/docs/src/routes/components/dropdown.svelte.md
@@ -17,6 +17,7 @@ data="{[
   { type:'component', class: 'dropdown-content', desc: 'Container for content' },
   { type:'modifier', class: 'dropdown-end', desc: 'Aligns to end' },
   { type:'modifier', class: 'dropdown-top', desc: 'Open from top' },
+  { type:'modifier', class: 'dropdown-bottom', desc: 'Open from bottom' },
   { type:'modifier', class: 'dropdown-left', desc: 'Open from left' },
   { type:'modifier', class: 'dropdown-right', desc: 'Open from right' },
   { type:'modifier', class: 'dropdown-hover', desc: 'Opens on hover too' },
@@ -150,6 +151,62 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Dropdown bottom">
+<div class="dropdown dropdown-bottom mb-32">
+  <label tabindex="0" class="m-1 btn">Click</label>
+  <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$dropdown $$dropdown-bottom">
+  <label tabindex="0" class="$$btn m-1">Click</label>
+  <ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$dropdown $$dropdown-bottom">
+  <label tabIndex={0} className="$$btn m-1">Click</label>
+  <ul tabIndex={0} className="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Dropdown bottom / aligns to end">
+<div class="dropdown dropdown-bottom dropdown-end mb-32">
+  <label tabindex="0" class="m-1 btn">Click</label>
+  <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$dropdown $$dropdown-bottom $$dropdown-end">
+  <label tabindex="0" class="$$btn m-1">Click</label>
+  <ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$dropdown $$dropdown-bottom $$dropdown-end">
+  <label tabIndex={0} className="$$btn m-1">Click</label>
+  <ul tabIndex={0} className="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Dropdown left">
 <div class="dropdown dropdown-left mb-16">
   <label tabindex="0" class="m-1 btn">Click</label>

diff --git a/src/docs/src/routes/components/tooltip.svelte.md b/src/docs/src/routes/components/tooltip.svelte.md
@@ -15,6 +15,7 @@ published: true
 data="{[
   { type:'component', class: 'tooltip', desc: 'Container element' },
   { type:'component', class: 'tooltip-open', desc: 'Force open tooltip' },
+  { type:'modifier', class: 'tooltip-top', desc: 'Put tooltip on top' },
   { type:'modifier', class: 'tooltip-bottom', desc: 'Put tooltip on bottom' },
   { type:'modifier', class: 'tooltip-left', desc: 'Put tooltip on left' },
   { type:'modifier', class: 'tooltip-right', desc: 'Put tooltip on right' },
@@ -64,6 +65,24 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Top">
+<div class="my-6">
+  <div class="tooltip tooltip-open tooltip-top" data-tip="hello">
+    <button class="btn">Top</button>
+  </div>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$tooltip $$tooltip-open $$tooltip-top" data-tip="hello">
+  <button class="$$btn">Top</button>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$tooltip $$tooltip-open $$tooltip-top" data-tip="hello">
+  <button className="$$btn">Top</button>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Bottom">
 <div class="my-6">
   <div class="tooltip tooltip-open tooltip-bottom" data-tip="hello">