Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from Oct 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions 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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/styled/tooltip.css
Expand Up @@ -33,7 +33,7 @@
display: block;
position: absolute;
}
.tooltip {
.tooltip, .tooltip-top {
&:after {
transform: translateX(-50%);
border-color: var(--tooltip-color) transparent transparent transparent;
Expand Down
3 changes: 3 additions & 0 deletions src/components/unstyled/dropdown.css
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/unstyled/tooltip.css
Expand Up @@ -9,7 +9,7 @@
.tooltip:before {
content: attr(data-tip);
}
.tooltip {
.tooltip, .tooltip-top {
&:before {
transform: translateX(-50%);
top: auto;
Expand Down
57 changes: 57 additions & 0 deletions src/docs/src/routes/components/dropdown.svelte.md
Expand Up @@ -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' },
Expand Down Expand Up @@ -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>
Expand Down
19 changes: 19 additions & 0 deletions src/docs/src/routes/components/tooltip.svelte.md
Expand Up @@ -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' },
Expand Down Expand Up @@ -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">
Expand Down