Skip to content

Commit

Permalink
Improve banners v12 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@kirillplatonov
kirillplatonov committed Feb 10, 2024
1 parent a99615f commit d75fb3c
Show file tree
Hide file tree
Showing 11 changed files with 199 additions and 112 deletions.
1 change: 1 addition & 0 deletions app/assets/icons/polaris/AlertTriangleIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/assets/icons/polaris/CheckIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 33 additions & 33 deletions app/assets/stylesheets/polaris_v12_overrides/banner.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
padding: 0 !important;

h2 {
font-size: var(--p-font-size-325);
}

.Polaris-VerticalStack,
.Polaris-Banner__TopBar {
width: 100%;
border-top-left-radius: var(--p-border-radius-300);
border-top-right-radius: var(--p-border-radius-300);
}

.Polaris-Banner__InlineIcon {
padding: var(--p-space-100);
border-radius: var(--p-border-radius-200);
width: 1.75rem;
height: 1.75rem;
}

.Polaris-Banner__Dismiss {
top: var(--p-space-200);
right: var(--p-space-200);
}
.Polaris-Banner__DismissButton {
display: flex;
width: 1.75rem;
height: 1.75rem;
}

&.Polaris-Banner--withinPage {

.Polaris-Banner__TopBar {
padding: var(--p-space-300);
}

@media (min-width: 30.625em) {
border-top-left-radius: var(--p-border-radius-300);
border-top-right-radius: var(--p-border-radius-300);
}
}
&.Polaris-Banner--statusInfo {
.Polaris-Banner__TopBar {
.Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon {
color: var(--p-color-text-info-on-bg-fill);
background-color: var(--p-color-bg-fill-info);

Expand All @@ -34,9 +31,8 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
}
}
}

&.Polaris-Banner--statusSuccess {
.Polaris-Banner__TopBar {
.Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon {
color: var(--p-color-text-success-on-bg-fill);
background-color: var(--p-color-bg-fill-success);

Expand All @@ -45,9 +41,8 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
}
}
}

&.Polaris-Banner--statusWarning {
.Polaris-Banner__TopBar {
.Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon {
color: var(--p-color-text-warning-on-bg-fill);
background-color: var(--p-color-bg-fill-warning);

Expand All @@ -57,7 +52,7 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
}
}
&.Polaris-Banner--statusCritical {
.Polaris-Banner__TopBar {
.Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon {
color: var(--p-color-text-critical-on-bg-fill);
background-color: var(--p-color-bg-fill-critical);

Expand All @@ -68,19 +63,24 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
}
}

&.Polaris-Banner--withinContentContainer {

&.Polaris-Banner--onlyTitle {
.Polaris-Banner__TopBar {
padding: var(--p-space-300) 0 var(--p-space-200) var(--p-space-300);
@media (min-width: 30.625em) {
border-radius: var(--p-border-radius-300) !important;
}
}
}

.Polaris-VerticalStack {
flex-direction: row;
align-items: start;
&.Polaris-Banner--withinContentContainer {
.Polaris-Banner__InlineIcon {
padding: calc(var(--p-space-100) * -1);
margin-left: calc(var(--p-space-100) * -1);
}

.Polaris-Banner__TopBar {
width: auto;
.Polaris-Banner__DismissButton {
padding: calc(var(--p-space-100) * -1);
margin-top: calc(var(--p-space-100) * -1);
margin-right: calc(var(--p-space-100) * -1);
}

&.Polaris-Banner--statusInfo {
Expand Down
60 changes: 32 additions & 28 deletions app/assets/stylesheets/polaris_view_components.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 82 additions & 39 deletions app/components/polaris/banner_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,100 @@
<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
<%= polaris_vertical_stack do %>
<% content_with_actions = capture do %>
<%= polaris_vertical_stack(classes: "Polaris-Banner__ContentWrapper", gap: within_container? ? "1" : "3") do %>
<% if content.present? || action || secondary_action %>

<%= polaris_horizontal_stack(classes: "Polaris-Banner__TopBar", wrap: false, gap: within_container? ? "1" : "2") do %>
<% unless @hide_icon %>
<%= polaris_box do %>
<%= render_icon %>
<% if content.present? %>
<%= polaris_box(padding_inline_end: within_container? ? "2" : nil) do %>
<%= content %>
<% end %>
<% end %>
<% if @title.present? %>
<%= polaris_box(padding_inline_end: "4") do %>
<%= polaris_text(as: :h2, variant: :headingMd, break_word: true) do %>
<%= @title %>

<% if action || secondary_action %>
<%= polaris_box do %>
<%= polaris_button_group do |group| %>
<% if action %>
<% group.with_item do %>
<%= polaris_box(padding_inline_end: "1") do %>
<%= action %>
<% end %>
<% end %>
<% end %>

<% if secondary_action %>
<% group.with_item do %>
<%= secondary_action %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if dismiss_button %>
<div class="Polaris-Banner__Dismiss">
<%= dismiss_button %>
</div>
<% end %>
<% end %>

<%= polaris_box(padding: within_container? ? "2" : "4") do %>
<%= polaris_vertical_stack(classes: "Polaris-Banner__ContentWrapper", gap: within_container? ? "1" : "3") do %>
<% if content.present? || action || secondary_action %>

<%= polaris_box(padding_inline_end: within_container? ? "2" : nil) do %>
<%= content %>
<% end %>
<% end %>
<% end %>
<% end %>

<% if action || secondary_action %>
<%= polaris_box do %>
<%= polaris_button_group do |group| %>
<% if action %>
<% group.with_item do %>
<%= polaris_box(padding_inline_end: "1") do %>
<%= action %>
<% end %>
<% end %>
<%= render Polaris::BaseComponent.new(**system_arguments) do %>
<% if has_title? && !within_container? %>
<%= polaris_box(width: "100%") do %>
<%= polaris_vertical_stack do %>
<%= polaris_box(classes: "Polaris-Banner__TopBar") do %>
<%= polaris_horizontal_stack(align: :space_between, block_align: :center, wrap: false, gap: "2") do %>
<%= polaris_horizontal_stack(wrap: false, gap: "1") do %>
<% unless @hide_icon %>
<%= polaris_box do %>
<%= render_icon %>
<% end %>

<% if secondary_action %>
<% group.with_item do %>
<%= secondary_action %>
<% end %>
<% end %>
<% if has_title? %>
<%= polaris_text(as: :h2, variant: :headingSm, break_word: true) do %>
<%= @title %>
<% end %>
<% end %>
<% end %>
<% if dismiss_button %>
<%= polaris_box(classes: "Polaris-Banner__DismissButton") do %>
<%= dismiss_button %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if has_content? %>
<%= polaris_box(padding: "4") do %>
<%= content_with_actions %>
<% end %>
<% end %>
<% end %>
<% end %>
<% else %>
<%= polaris_box(width: "100%", padding: within_container? ? "2" : "3") do %>
<%= polaris_horizontal_stack(align: :space_between, block_align: :start, wrap: false, gap: "2") do %>
<%= polaris_horizontal_stack(wrap: false, gap: "1") do %>
<% unless @hide_icon %>
<%= polaris_box(classes: "Polaris-Banner__InlineIcon") do %>
<%= render_icon %>
<% end %>
<% end %>
<%= polaris_box(
padding: within_container? ? nil : "1",
padding_block_start: (has_title? || within_container?) ? nil : "1_5",
) do %>
<%= polaris_vertical_stack(gap: "1") do %>
<% if has_title? %>
<%= polaris_text(as: :h2, variant: :headingSm, break_word: true) do %>
<%= @title %>
<% end %>
<% end %>
<% if has_content? %>
<%= content_with_actions %>
<% end %>
<% end %>
<% end %>
<% end %>
<% if dismiss_button %>
<%= polaris_box(classes: "Polaris-Banner__DismissButton") do %>
<%= dismiss_button %>
<% end %>

<% end %>
<% end %>
<% end %>

<% end %>
<% end %>
36 changes: 26 additions & 10 deletions app/components/polaris/banner_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,26 @@ def initialize(
**system_arguments
)
@status = status
@within = within
@icon = icon || default_icon(status)
@hide_icon = hide_icon
@title = title

@system_arguments = system_arguments
@system_arguments[:tabindex] = 0
@system_arguments[:role] = "status"
@system_arguments[:classes] = class_names(
@system_arguments[:classes],
"Polaris-Banner",
STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)]
)
end

def system_arguments
@system_arguments.tap do |opts|
opts[:tabindex] = 0
opts[:role] = "status"
opts[:tag] = "div"
opts[:classes] = class_names(
opts[:classes],
"Polaris-Banner",
STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, @status, STATUS_DEFAULT)],
WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, @within, WITHIN_DEFAULT)],
"Polaris-Banner--onlyTitle": has_title? && !has_content?
)
end
end

def render_icon
Expand All @@ -69,8 +76,9 @@ def render_icon

def default_icon(status)
case status
when :success then "CircleTickMajor"
when :success then "CheckIcon"
when :critical then "DiamondAlertMajor"
when :warning then "AlertTriangleIcon"
else
"CircleInformationMajor"
end
Expand All @@ -79,5 +87,13 @@ def default_icon(status)
def within_container?
@within == :container
end

def has_title?
@title.present?
end

def has_content?
content.present? || action || secondary_action
end
end
end
Loading

0 comments on commit d75fb3c

Please sign in to comment.