Merge pull request #383 from baoagency/buttons

Buttons

app/assets/stylesheets/polaris_v12_overrides/action_list.pcss

@@ -1,5 +1,4 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList {
-
   .Polaris-ActionMenu-SecondaryAction a,
   .Polaris-ActionMenu-SecondaryAction button,
   .Polaris-ActionList__Item {
@@ -9,5 +8,14 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList {
     &:hover {
       background: var(--p-color-bg-surface-secondary-hover) !important;
     }
+
+    &.Polaris-ActionList--destructive {
+      &:hover {
+        background: var(--p-color-bg-surface-critical-hover) !important;
+      }
+      svg {
+        fill: var(--p-color-text-critical);
+      }
+    }
   }
 }

app/assets/stylesheets/polaris_v12_overrides/button.pcss

@@ -1,13 +1,14 @@
+/* Polaris no longer uses different button styling depending on the context,
+   so we can override all buttons at once. */
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
-
-  /* Polaris no longer uses different button styling depending on the context, so we can override all buttons at once. */
   &:not(.Polaris-Button--plain) {
     &:hover {
       box-shadow: var(--pc-button-shadow-hover);
       border: none;
     }
   }
 
+  /* Dimsiss buttons */
   &.Polaris-Button--plain.Polaris-Button--iconOnly {
     padding: var(--p-space-100);
 
@@ -20,14 +21,70 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
       fill: var(--p-color-icon);
     }
   }
+
+  /* Plain */
+  &.Polaris-Button--plain {
+    box-shadow: none !important;
+  }
+
+  /* Tertiary */
+  &.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-size: var(--p-font-size-300);
+      font-weight: var(--p-font-weight-medium) !important;
+    }
+
+    &:hover {
+      background: var(--p-color-bg-fill-tertiary);
+    }
+  }
+
+  /* Loading */
+  &.Polaris-Button--loading {
+    svg {
+      fill: var(--p-color-icon-disabled);
+    }
+  }
+
+  /* Destructive */
+  &.Polaris-Button--destructive {
+    --pc-button-color: var(--p-color-bg-fill-critical);
+    --pc-button-text: var(--p-color-bg-surface);
+    --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-critical-active);
+    --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
+    box-shadow: var(--p-shadow-button-primary-critical);
+  }
+
+  /* Primary */
+  &.Polaris-Button--primary {
+    --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
+    --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
+    --pc-button-text: var(--p-color-bg-surface);
+    --pc-button-color-hover: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
+    --pc-button-color-active: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
+    --pc-button-color-depressed: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-selected);
+
+    &:hover {
+      --pc-button-text: var(--p-color-bg-surface);
+    }
+  }
 }
 
-@media (max-width: 30.625em) {
-  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
-    .Polaris-Button__Content {
-      font-size: var(--p-font-size-350);
-      font-weight: var(--p-font-weight-semibold);
-      line-height: var(--p-font-line-height-500);
+@media (max-width: 767px) {
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain),
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-size: var(--p-font-size-350) !important;
+      line-height: var(--p-font-line-height-500) !important;
+    }
+  }
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain):not(.Polaris-Button--disclosure.Polaris-Button--plain),
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-weight: var(--p-font-weight-semibold) !important;
     }
   }
 }

app/assets/stylesheets/polaris_v12_overrides/variables.pcss

@@ -1,13 +1,12 @@
 html.Polaris-Summer-Editions-2023 {
+  --p-font-size-300: 0.75rem;
   --p-font-weight-regular: 450;
   --p-font-weight-medium: 550;
   --p-font-weight-semibold: 650;
   --p-font-weight-bold: 700;
   --p-color-bg-surface-secondary: #f7f7f7;
   --p-color-icon: rgba(74, 74, 74, 1);
-
   --p-space-1_5: var(--p-space-1_5-experimental);
-
   --pc-stack-spacing: var(--p-space-300);
-
+  --p-color-button-gradient-bg-fill: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15));
 }

app/components/polaris/headless_button.rb

@@ -83,10 +83,11 @@ def initialize(
         "Polaris-Button--loading": loading,
         "Polaris-Button--fullWidth": full_width,
         "Polaris-Button--monochrome": monochrome,
-        "Polaris-Button--outline": outline,
+        # "Polaris-Button--outline": outline,
         "Polaris-Button--plain": plain,
         "Polaris-Button--primary": primary,
         "Polaris-Button--pressed": pressed,
+        "Polaris-Button--disclosure": disclosure,
         "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
       )
     end

demo/app/previews/button_component_preview/disabled.html.erb

@@ -1 +1,6 @@
-<%= polaris_button(disabled: true) { "Buy shipping label" } %>
+<%= polaris_horizontal_stack(gap: "4") do %>
+  <%= polaris_button(disabled: true) { "Buy shipping label" } %>
+  <%= polaris_button(primary: true, disabled: true) { "Buy shipping label" } %>
+  <%= polaris_button(plain: true, monochrome: true, remove_underline: true, disabled: true) { "Buy shipping label" } %>
+  <%= polaris_button(disabled: true) { "Buy shipping label" } %>
+<% end %>

demo/app/previews/button_component_preview/outline.html.erb

@@ -1 +1,2 @@
+<p>Deprecated - No longer used in Polaris v12</p>
 <%= polaris_button(outline: true) { "Add product" } %>

test/components/polaris/button_component_test.rb

@@ -11,18 +11,6 @@ def test_basic_button
     end
   end
 
-  def test_outline_button
-    render_inline(Polaris::ButtonComponent.new(outline: true)) { "Button" }
-
-    assert_selector "button.Polaris-Button--outline"
-  end
-
-  def test_outline_monochrome_button
-    render_inline(Polaris::ButtonComponent.new(outline: true, monochrome: true)) { "Button" }
-
-    assert_selector "button.Polaris-Button--outline.Polaris-Button--monochrome"
-  end
-
   def test_plain_button
     render_inline(Polaris::ButtonComponent.new(plain: true)) { "Button" }
 

test/components/polaris/pagination_component_test.rb

@@ -9,11 +9,11 @@ def test_default_pagination
     assert_selector "nav[aria-label=Pagination] > .Polaris-ButtonGroup.Polaris-ButtonGroup--segmented" do
       assert_selector ".Polaris-ButtonGroup__Item", count: 2
       assert_selector ".Polaris-ButtonGroup__Item:nth-child(1)" do
-        assert_selector "a.Polaris-Button.Polaris-Button--outline.Polaris-Button--iconOnly[href='/previous.html']"
+        assert_selector "a.Polaris-Button.Polaris-Button--iconOnly[href='/previous.html']"
         assert_selector ".Polaris-Button__Icon > .Polaris-Icon"
       end
       assert_selector ".Polaris-ButtonGroup__Item:nth-child(2)" do
-        assert_selector "a.Polaris-Button.Polaris-Button--outline.Polaris-Button--iconOnly[href='/next.html']"
+        assert_selector "a.Polaris-Button.Polaris-Button--iconOnly[href='/next.html']"
         assert_selector ".Polaris-Button__Icon > .Polaris-Icon"
       end
     end