From 4866f765667931899e150f6f9e2f5f9d355659cb Mon Sep 17 00:00:00 2001
From: Bruno Calou <brunocaloualves@gmail.com>
Date: Sat, 29 Oct 2022 12:24:18 -0300
Subject: [PATCH] fix: #1218 - Add missing modifiers on dropdown and tooltip
 (#1232)

* feat: add dropdown-bottom modifier

* feat: add tooltip-top modifier

* fix: dropdown styles
---
 src/components/unstyled/tooltip.css           |  2 +-
 .../src/routes/components/dropdown.svelte.md  | 57 +++++++++++++++++++
 .../src/routes/components/tooltip.svelte.md   | 19 +++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/components/unstyled/tooltip.css b/src/components/unstyled/tooltip.css
index 11e29b5a76f..8475c91965d 100644
--- 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
index 1c54b1329fc..35f970a9bf5 100644
--- 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
index 04b7c5d33ed..4538e4d2c05 100644
--- 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">