feat(modal): adds prop for size based on container options

Kajabi · Aug 23, 2022 · 7df38f9 · 7df38f9
1 parent 71a5a82
commit 7df38f9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 1 deletion.
diff --git a/docs/app/views/examples/components/modal/_preview.html.erb b/docs/app/views/examples/components/modal/_preview.html.erb
@@ -45,6 +45,14 @@
         "data-js-modaltrigger": "cool-modal-large",
       }
     } %>
+    <%= sage_component SageButton, {
+      style: "primary",
+      icon: { name: "launch", style: "right" },
+      value: "Modal with Size Option",
+      attributes: {
+        "data-js-modaltrigger": "cool-modal-size-option",
+      }
+    } %>
     <%= sage_component SageButton, {
       style: "primary",
       icon: { name: "launch", style: "right" },
@@ -262,6 +270,41 @@
       <% end %>
     <% end %>
   <% end %>
+
+  <%# Standard Modal with Size Option %>
+  <%= sage_component SageModal, { id: "cool-modal-size-option", size: "full" } do %>
+    <%= sage_component SageModalContent, {
+      title: "Example Modal"
+    } do %>
+      <% content_for :sage_header_aside do %>
+        <%= sage_component SageButton, {
+          style: "secondary",
+          subtle: true,
+          value: "Close Modal",
+          icon: { name: "remove", style: "only" },
+          attributes: { "data-js-modal": true }
+        } %>
+      <% end %>
+
+      <%= sample_body_text %>
+
+      <% content_for :sage_footer do %>
+        <% content_for :sage_footer_aside do %>
+          <%= sage_component SageButton, {
+            style: "secondary",
+            subtle: true,
+            value: "Close Modal",
+            attributes: { "data-js-modal": true }
+          } %>
+        <% end %>
+        <%= sage_component SageButton, {
+          style: "primary",
+          icon: { name: "check", style: "left" },
+          value: "Take An Action",
+        } %>
+      <% end %>
+    <% end %>
+  <% end %>
   <%# Large Modal %>
   <%= sage_component SageModal, {
     id: "cool-modal-large",

diff --git a/docs/lib/sage_rails/app/sage_components/sage_modal.rb b/docs/lib/sage_rails/app/sage_components/sage_modal.rb
@@ -12,6 +12,7 @@ class SageModal < SageComponent
     id: [:optional, NilClass, String],
     large: [:optional, TrueClass],
     remove_content_on_close: [:optional, TrueClass],
-    remote_url: [:optional, String]
+    remote_url: [:optional, String],
+    size: [:optional, Set.new(SageTokens::CONTAINER_SIZES)]
   })
 end
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_modal.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_modal.html.erb
@@ -6,6 +6,7 @@
     <%= "sage-modal--no-blur" if component.disable_background_blur -%>
     <%= "sage-modal--no-background-dismiss" if component.disable_background_dismiss -%>
     <%= "sage-modal--scrollable" if component.allow_scroll %>
+    <%= "sage-modal--size-#{component.size}" if component.size %>
     <%= component.generated_css_classes %>
   "
   <%= "data-sage-animate" if component.animate.present? %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss
@@ -173,6 +173,13 @@ $-modal-inner-size: sage-container(md);
     @include overflow-scroll(y);
     padding: sage-spacing(xs) sage-spacing(3xs);
   }
+
+  @each $-key, $-value in $sage-containers {
+    .sage-modal--size-#{$-key} & {
+      width: sage-container($-key);
+      max-width: none;
+    }
+  }
 }
 
 .sage-modal__header {