fix: #1218 - Add missing modifiers on dropdown and tooltip (#1232)

* feat: add dropdown-bottom modifier * feat: add tooltip-top modifier * fix: dropdown styles
saadeghi · Oct 29, 2022 · 1728632 · 1728632
1 parent fce9f52
commit 1728632
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">