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.

Sign up for GitHub

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

Jump to bottom

Improve Frame component #428

Merged
merged 4 commits into from
Jul 9, 2024
Merged

Improve Frame component #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6aafc83
feat: support secondary menu
remy727 Jul 8, 2024
011b3a2
fix: make detail optional
remy727 Jul 8, 2024
d8154f8
feat: support showing order
remy727 Jul 8, 2024
65fb39e
docs: update lookbook
remy727 Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 5 additions & 17 deletions app/components/polaris/frame/top_bar_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,19 @@
</div>

<div class="Polaris-TopBar__RightContent">
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<%= user_menu %>
<div class="Polaris-TopBar__SecondaryMenu">
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<%= secondary_menu %>
</div>
</div>
</div>
</div>


<%
=begin%>

<div class="Polaris-TopBar__Contents">
<div class="Polaris-TopBar__SearchField">
<%= search_field %>
</div>
<div class="Polaris-TopBar__SecondaryMenu">
<%= secondary_menu %>
</div>
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<%= user_menu %>
</div>
</div>
</div>
<%
=end%>
</div>
<% end %>
1 change: 1 addition & 0 deletions app/components/polaris/frame/top_bar_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
class Polaris::Frame::TopBarComponent < Polaris::Component
renders_one :user_menu, Polaris::TopBar::UserMenuComponent
renders_one :search_field
renders_one :secondary_menu

def initialize(logo:, **system_arguments)
@logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
Expand Down
73 changes: 51 additions & 22 deletions app/components/polaris/top_bar/user_menu_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,57 @@
class="Polaris-TopBar-Menu__Activator"
data-action="polaris-popover#toggle click@window->polaris-popover#hide"
>
<span class="Polaris-TopBar-UserMenu__Details">
<%= polaris_text(
as: :p,
font_weight: :medium,
truncate: true,
alignment: :start
) do %>
<%= @name %>
<% end %>
<%= polaris_text(
as: :p,
variant: :bodySm,
truncate: true,
alignment: :start,
color: :subdued
) do %>
<%= @detail %>
<% end %>
</span>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<%= avatar %>
</div>
<% if @show_avatar_first %>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<%= avatar %>
</div>
<span class="Polaris-TopBar-UserMenu__Details">
<%= polaris_text(
as: :p,
font_weight: :medium,
truncate: true,
alignment: :start
) do %>
<%= @name %>
<% end %>
<% if @detail.present? %>
<%= polaris_text(
as: :p,
variant: :bodySm,
truncate: true,
alignment: :start,
color: :subdued
) do %>
<%= @detail %>
<% end %>
<% end %>
</span>
<% else %>
<span class="Polaris-TopBar-UserMenu__Details">
<%= polaris_text(
as: :p,
font_weight: :medium,
truncate: true,
alignment: :start
) do %>
<%= @name %>
<% end %>
<% if @detail.present? %>
<%= polaris_text(
as: :p,
variant: :bodySm,
truncate: true,
alignment: :start,
color: :subdued
) do %>
<%= @detail %>
<% end %>
<% end %>
</span>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<%= avatar %>
</div>
<% end %>
</button>
<% end %>

Expand Down
3 changes: 2 additions & 1 deletion app/components/polaris/top_bar/user_menu_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
class Polaris::TopBar::UserMenuComponent < Polaris::Component
renders_one :avatar, Polaris::AvatarComponent

def initialize(name:, detail:, **system_arguments)
def initialize(name:, detail: nil, show_avatar_first: false, **system_arguments)
@name = name
@detail = detail
@show_avatar_first = show_avatar_first
@system_arguments = system_arguments
end
end
9 changes: 9 additions & 0 deletions demo/app/previews/frame_component_preview.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
class FrameComponentPreview < ViewComponent::Preview
def default
end

def optional_detail
end

def show_avatar_first
end

def with_secondary_menu
end
end
50 changes: 50 additions & 0 deletions demo/app/previews/frame_component_preview/optional_detail.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<%= polaris_frame(
logo: {
url: "/",
src: "https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg",
width: "124px"
}
) do |frame| %>
<% frame.with_top_bar do |top_bar| %>
<% top_bar.with_search_field do |search_field| %>
<%= polaris_text_field(placeholder: "Search", clear_button: true) %>
<% end %>
<% top_bar.with_user_menu(name: "Kirill") do |user_menu| %>
<% user_menu.with_avatar(initials: "K") %>

<%= polaris_action_list do |action_list| %>
<% action_list.with_item(icon: "ExitIcon", url: "/") { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% frame.with_navigation do |navigation| %>
<% navigation.with_section do |section| %>
<% section.with_item(url: "#", label: "Back to Shopify", icon: "ArrowLeftIcon") %>
<% end %>
<% navigation.with_section(title: "Jaded Pixel App", separator: true) do |section| %>
<% section.with_action(icon: "ChatIcon") %>
<% section.with_item(url: "#", label: "Dashboard", icon: "HomeIcon") %>
<% section.with_item(url: "#", label: "Jaded Pixel Orders", icon: "OrderIcon") %>
<% end %>
<% end %>

<%= polaris_page(title: "Account") do %>
<%= polaris_layout do |layout| %>
<% layout.with_annotated_section(
title: "Account details",
description: "Jaded Pixel will use this as your account information."
) do %>
<%= polaris_card do %>
<%= polaris_form_layout do |form_layout| %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Full name", value: "Jaded Pixel") %>
<% end %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Email", value: "[email protected]") %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
50 changes: 50 additions & 0 deletions demo/app/previews/frame_component_preview/show_avatar_first.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<%= polaris_frame(
logo: {
url: "/",
src: "https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg",
width: "124px"
}
) do |frame| %>
<% frame.with_top_bar do |top_bar| %>
<% top_bar.with_search_field do |search_field| %>
<%= polaris_text_field(placeholder: "Search", clear_button: true) %>
<% end %>
<% top_bar.with_user_menu(name: "Kirill", detail: "Platmart", show_avatar_first: true) do |user_menu| %>
<% user_menu.with_avatar(initials: "K") %>

<%= polaris_action_list do |action_list| %>
<% action_list.with_item(icon: "ExitIcon", url: "/") { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% frame.with_navigation do |navigation| %>
<% navigation.with_section do |section| %>
<% section.with_item(url: "#", label: "Back to Shopify", icon: "ArrowLeftIcon") %>
<% end %>
<% navigation.with_section(title: "Jaded Pixel App", separator: true) do |section| %>
<% section.with_action(icon: "ChatIcon") %>
<% section.with_item(url: "#", label: "Dashboard", icon: "HomeIcon") %>
<% section.with_item(url: "#", label: "Jaded Pixel Orders", icon: "OrderIcon") %>
<% end %>
<% end %>

<%= polaris_page(title: "Account") do %>
<%= polaris_layout do |layout| %>
<% layout.with_annotated_section(
title: "Account details",
description: "Jaded Pixel will use this as your account information."
) do %>
<%= polaris_card do %>
<%= polaris_form_layout do |form_layout| %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Full name", value: "Jaded Pixel") %>
<% end %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Email", value: "[email protected]") %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
53 changes: 53 additions & 0 deletions demo/app/previews/frame_component_preview/with_secondary_menu.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<%= polaris_frame(
logo: {
url: "/",
src: "https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg",
width: "124px"
}
) do |frame| %>
<% frame.with_top_bar do |top_bar| %>
<% top_bar.with_search_field do |search_field| %>
<%= polaris_text_field(placeholder: "Search", clear_button: true) %>
<% end %>
<% top_bar.with_secondary_menu do |secondary_menu| %>
<%= polaris_icon(name: "QuestionCircleIcon") %>
<% end %>
<% top_bar.with_user_menu(name: "Kirill", detail: "Platmart") do |user_menu| %>
<% user_menu.with_avatar(initials: "K") %>

<%= polaris_action_list do |action_list| %>
<% action_list.with_item(icon: "ExitIcon", url: "/") { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% frame.with_navigation do |navigation| %>
<% navigation.with_section do |section| %>
<% section.with_item(url: "#", label: "Back to Shopify", icon: "ArrowLeftIcon") %>
<% end %>
<% navigation.with_section(title: "Jaded Pixel App", separator: true) do |section| %>
<% section.with_action(icon: "ChatIcon") %>
<% section.with_item(url: "#", label: "Dashboard", icon: "HomeIcon") %>
<% section.with_item(url: "#", label: "Jaded Pixel Orders", icon: "OrderIcon") %>
<% end %>
<% end %>

<%= polaris_page(title: "Account") do %>
<%= polaris_layout do |layout| %>
<% layout.with_annotated_section(
title: "Account details",
description: "Jaded Pixel will use this as your account information."
) do %>
<%= polaris_card do %>
<%= polaris_form_layout do |form_layout| %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Full name", value: "Jaded Pixel") %>
<% end %>
<% form_layout.with_item do %>
<%= polaris_text_field(label: "Email", value: "[email protected]") %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
Loading