Skip to content

Commit

Permalink
Deal with buttons in dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@angelikatyborska
angelikatyborska committed Jul 1, 2024
1 parent 86ce283 commit 4e8bf53
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 51 deletions.
12 changes: 6 additions & 6 deletions lib/bitstyles_phoenix/alpine3/dropdown.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
'''
"""
<div class="u-relative" x-data="{ dropdownOpen: false }">
<button type="button" @click="dropdownOpen = true" class="a-button a-button--ui">
<button type="button" @click="dropdownOpen = true" class="a-button a-button--secondary">
<span class="a-button__label">
Select me
</span>
Expand All @@ -58,12 +58,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down Expand Up @@ -103,7 +103,7 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
'''
"""
<div class="u-relative" x-data="{ myOwnDropDown: false }">
<button type="button" @click="myOwnDropDown = true" class="a-button a-button--ui">
<button type="button" @click="myOwnDropDown = true" class="a-button a-button--secondary">
<span class="a-button__label">
Select me
</span>
Expand All @@ -114,12 +114,12 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down
16 changes: 8 additions & 8 deletions lib/bitstyles_phoenix/alpine3/sidebar.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
...> </:small_sidebar>
...> <:sidebar_content>
...> <.ui_sidebar_nav>
...> <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #1</.ui_button></.ui_sidebar_nav_item>
...> <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" variant="nav">Menu item #2</.ui_button></.ui_sidebar_nav_item>
...> <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #1</.ui_button></.ui_sidebar_nav_item>
...> <.ui_sidebar_nav_item><.ui_button href="#" class="u-flex-grow-1" color="transparent">Menu item #2</.ui_button></.ui_sidebar_nav_item>
...> </.ui_sidebar_nav>
...> </:sidebar_content>
...> <:main :let={s} class="u-margin-s-top">
Expand All @@ -63,12 +63,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
</a>
<ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
<li class="u-margin-xs-bottom u-flex">
<a href="#" class="a-button a-button--nav u-flex-grow-1">
<a href="#" class="a-button a-button--transparent u-flex-grow-1">
Menu item #1
</a>
</li>
<li class="u-margin-xs-bottom u-flex">
<a href="#" class="a-button a-button--nav u-flex-grow-1">
<a href="#" class="a-button a-button--transparent u-flex-grow-1">
Menu item #2
</a>
</li>
Expand All @@ -83,7 +83,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
</span>
</a>
<div>
<button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--icon a-button--icon-reversed" title="Close">
<button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-controls="sidebar-small" class="a-button a-button--square" data-theme="dark" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
<use xlink:href="#icon-cross">
</use>
Expand All @@ -96,12 +96,12 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
</div>
<ul class="u-flex-grow-1 u-flex-shrink-1 u-overflow-y-auto a-list-reset u-flex u-flex-col u-items-stretch u-padding-xs-right u-padding-xs-left">
<li class="u-margin-xs-bottom u-flex">
<a href="#" class="a-button a-button--nav u-flex-grow-1">
<a href="#" class="a-button a-button--transparent u-flex-grow-1">
Menu item #1
</a>
</li>
<li class="u-margin-xs-bottom u-flex">
<a href="#" class="a-button a-button--nav u-flex-grow-1">
<a href="#" class="a-button a-button--transparent u-flex-grow-1">
Menu item #2
</a>
</li>
Expand All @@ -111,7 +111,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
</header>
<main class="u-flex-grow-1 u-overflow-y-auto u-margin-s-top">
<div class="a-content flex">
<button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--icon u-hidden@l u-margin-s-right" title="Open sidebar">
<button type="button" :aria-expanded="sidebarOpen" @click="sidebarOpen = true" aria-controls="sidebar-small" class="a-button a-button--square u-hidden@l u-margin-s-right" title="Open sidebar">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
<use xlink:href="#icon-hamburger">
</use>
Expand Down
64 changes: 41 additions & 23 deletions lib/bitstyles_phoenix/component/dropdown.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
use BitstylesPhoenix.Component

import BitstylesPhoenix.Component.Button
alias BitstylesPhoenix.Bitstyles

@moduledoc """
The dropdown component without any JS.
Expand Down Expand Up @@ -69,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
"5.0.1": '''
"""
<div class="u-relative">
<button type="button" class="a-button a-button--ui">
<button type="button" class="a-button a-button--secondary">
<span class="a-button__label">
Select me
</span>
Expand All @@ -80,12 +81,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down Expand Up @@ -158,14 +159,14 @@ defmodule BitstylesPhoenix.Component.Dropdown do
)

story(
"Dropdown with menu variant top",
"Dropdown with menu variant top, primary button",
'''
iex> assigns = %{}
...> render ~H"""
...> <div style="min-height: 150px;" class="u-flex u-flex-col">
...> <div class="u-flex-grow-1"></div>
...> <.ui_dropdown variant={:top}>
...> <:button label="Select me"/>
...> <:button color={} label="Select me"/>
...> <:menu>
...> <.ui_dropdown_option href="#" class="u-h6">
...> Option 1
Expand All @@ -184,7 +185,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
<div class="u-flex-grow-1">
</div>
<div class="u-relative">
<button type="button" class="a-button a-button--ui">
<button type="button" class="a-button">
<span class="a-button__label">
Select me
</span>
Expand All @@ -195,12 +196,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top u-margin-s-bottom">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down Expand Up @@ -239,7 +240,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
'''
"""
<div class="u-relative u-flex u-justify-end">
<button type="button" class="a-button a-button--ui">
<button type="button" class="a-button a-button--secondary">
<span class="a-button__label">
Select me
</span>
Expand All @@ -250,12 +251,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--right u-margin-s-top">
<li>
<a href="#" class="a-button a-button--menu">
<a href="#" class="a-button a-button--transparent a-button--menu">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu">
<a href="#" class="a-button a-button--transparent a-button--menu">
Option 2
</a>
</li>
Expand Down Expand Up @@ -300,7 +301,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
<div class="u-flex-grow-1">
</div>
<div class="u-relative u-flex u-justify-end">
<button type="button" class="a-button a-button--ui">
<button type="button" class="a-button a-button--secondary">
<span class="a-button__label">
Select me
</span>
Expand All @@ -311,12 +312,12 @@ defmodule BitstylesPhoenix.Component.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--top a-dropdown--right u-margin-s-bottom">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down Expand Up @@ -356,17 +357,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
'''
"""
<div class="u-relative">
<button type="button" class="a-button a-button--ui foo">
<button type="button" class="a-button a-button--secondary foo">
Custom button content
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset u-margin-s-top">
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu u-h6">
<a href="#" class="a-button a-button--transparent a-button--menu u-h6">
Option 2
</a>
</li>
Expand Down Expand Up @@ -404,7 +405,7 @@ defmodule BitstylesPhoenix.Component.Dropdown do
"""
<div style="min-height: 200px; width: 500px;">
<div class="u-relative">
<button type="button" aria-controls="dropdown-1" class="a-button a-button--ui" onclick=\"toggle(&#39;dropdown-1&#39;)\">
<button type="button" aria-controls="dropdown-1" class="a-button a-button--secondary" onclick=\"toggle(&#39;dropdown-1&#39;)\">
<span class="a-button__label">
Select me
</span>
Expand All @@ -415,19 +416,19 @@ defmodule BitstylesPhoenix.Component.Dropdown do
</button>
<ul class="a-dropdown u-overflow-y-auto a-list-reset a-dropdown--full-width u-margin-s-top" id="dropdown-1" style="display: none">
<li>
<a href="#" class="a-button a-button--menu foo">
<a href="#" class="a-button a-button--transparent a-button--menu foo">
Option 1
</a>
</li>
<li>
<a href="#" class="a-button a-button--menu">
<a href="#" class="a-button a-button--transparent a-button--menu">
Option 2
</a>
</li>
<li role="separator">
</li>
<li>
<a href="#" class="a-button a-button--menu">
<a href="#" class="a-button a-button--transparent a-button--menu">
Option 3
</a>
</li>
Expand All @@ -454,9 +455,17 @@ defmodule BitstylesPhoenix.Component.Dropdown do
{button, button_extra} =
assigns_from_single_slot(assigns, :button, exclude: [:label, :icon_file])

button_extra =
if Bitstyles.version() >= "5.0.0" do
button_extra
|> Keyword.put_new(:color, :secondary)
else
button_extra
|> Keyword.put_new(:variant, :ui)
end

button_extra =
button_extra
|> Keyword.put_new(:variant, :ui)
|> maybe_put_icon(button[:label], button[:icon_file])

{menu, menu_extra} = assigns_from_single_slot(assigns, :menu, exclude: [:class])
Expand Down Expand Up @@ -505,7 +514,16 @@ defmodule BitstylesPhoenix.Component.Dropdown do
extra =
assigns
|> assigns_to_attributes()
|> Keyword.put_new(:variant, "menu")

extra =
if Bitstyles.version() >= "5.0.0" do
extra
|> Keyword.put_new(:shape, "menu")
|> Keyword.put_new(:color, "transparent")
else
extra
|> Keyword.put_new(:variant, "menu")
end

assigns = assign(assigns, extra: extra)

Expand Down
8 changes: 4 additions & 4 deletions lib/bitstyles_phoenix/component/heading.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ defmodule BitstylesPhoenix.Component.Heading do
...> <.ui_button>Edit</.ui_button>
...> </:action>
...> <:action>
...> <.ui_button variant="danger">Delete</.ui_button>
...> <.ui_button color="danger">Delete</.ui_button>
...> </:action>
...> <:action show={false}>
...> <.ui_button variant="danger">Hide me</.ui_button>
...> <.ui_button color="danger">Hide me</.ui_button>
...> </:action>
...> </.ui_page_title>
...> """
Expand Down Expand Up @@ -218,10 +218,10 @@ defmodule BitstylesPhoenix.Component.Heading do
...> <.ui_button>Edit</.ui_button>
...> </:action>
...> <:action>
...> <.ui_button variant="danger">Delete</.ui_button>
...> <.ui_button color="danger">Delete</.ui_button>
...> </:action>
...> <:action show={false}>
...> <.ui_button variant="danger">Hide me</.ui_button>
...> <.ui_button color="danger">Hide me</.ui_button>
...> </:action>
...> </.ui_section_title>
...> """
Expand Down
Loading

0 comments on commit 4e8bf53

Please sign in to comment.