From 1f66be4449e046b56af6d7b1e412eead7cb7d4c5 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/styled/dropdown.css            |  3 +
 src/components/styled/tooltip.css             |  2 +-
 src/components/unstyled/dropdown.css          |  3 +
 src/components/unstyled/tooltip.css           |  2 +-
 .../src/routes/components/dropdown.svelte.md  | 57 +++++++++++++++++++
 .../src/routes/components/tooltip.svelte.md   | 19 +++++++
 6 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/src/components/styled/dropdown.css b/src/components/styled/dropdown.css
index c607d48086e..0d1473a0e45 100644
--- a/src/components/styled/dropdown.css
+++ b/src/components/styled/dropdown.css
@@ -1,6 +1,9 @@
 .dropdown .dropdown-content {
   @apply origin-top scale-95 transform transition duration-200 ease-in-out;
 }
+.dropdown-bottom .dropdown-content {
+  @apply origin-top;
+}
 .dropdown-top .dropdown-content {
   @apply origin-bottom;
 }
diff --git a/src/components/styled/tooltip.css b/src/components/styled/tooltip.css
index 4d039cf5137..266c34c2b70 100644
--- a/src/components/styled/tooltip.css
+++ b/src/components/styled/tooltip.css
@@ -33,7 +33,7 @@
   display: block;
   position: absolute;
 }
-.tooltip {
+.tooltip, .tooltip-top {
   &:after {
     transform: translateX(-50%);
     border-color: var(--tooltip-color) transparent transparent transparent;
diff --git a/src/components/unstyled/dropdown.css b/src/components/unstyled/dropdown.css
index 0e6b398e478..3b92372b725 100644
--- a/src/components/unstyled/dropdown.css
+++ b/src/components/unstyled/dropdown.css
@@ -16,6 +16,9 @@
 .dropdown-right .dropdown-content {
   @apply left-full top-0 bottom-auto;
 }
+.dropdown-bottom .dropdown-content {
+  @apply bottom-auto top-full;
+}
 .dropdown-top .dropdown-content {
   @apply bottom-full top-auto;
 }
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">