polaris_view_helpers 1.2.11 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a9b7641e9cd98c805a8417e48b2f8c69fcd4e8d6d5d9654055c6531bf0016f4
-  data.tar.gz: 7034940dea69410517836739ae68fc83ea2d9d44af9c94734c4264511a93c04a
+  metadata.gz: 3592b44501a8ea856a140eb72dc98ef298b5ed14f65af6b768fa64bc5dde27b5
+  data.tar.gz: db2520a94ca0146d525f4b2f9063b31ff0263ec5f0123354c92f8b695509e757
 SHA512:
-  metadata.gz: d2f6b82676c53921e9e2d769ac13abd2e45957111f891242ec45bbb21abd54c93257399dc063faa3e2e51af24b2973bfcefb22a255411ed930d276996ce38ff1
-  data.tar.gz: 790ebe28fc88ce3740a2ad1f382576d8c8530cbaef2ad548074e87fa8993339d12c953ccea32558c43bd79a3095a64dc6b48188a22be951a5cc7d1dcfb1b96b5
+  metadata.gz: deef0e704fbc32802f6367ad49eb038fbfeddc393c70afb9c7ba330db2bb8427d876adf0ab610948eb33321adf5f39d987932138f7dfcd08c5a243f373518b51
+  data.tar.gz: 3ad4f4f96d3dab22a7e6a7733c6102727e6beed96bf2fa3797c9301ebec25ce6df5c9c336d33ec1677a5f37dd086b0af06f0f2990740d3dbbfb0f71bb93b002c

data/app/views/polaris/_annotated_section.html.erb

@@ -1,19 +1,23 @@
 <div class="Polaris-Layout__AnnotatedSection">
   <div class="Polaris-Layout__AnnotationWrapper">
     <div class="Polaris-Layout__Annotation">
-      <div class="Polaris-TextContainer">
-        <h2 class="Polaris-Heading"><%= heading %></h2>
-        <% if description.html_safe? %>
-          <%= description %>
-        <% else %>
-          <p><%= description %></p>
+      <div class="Polaris-TextContainer Polaris-TextContainer--spacingTight">
+        <h2 class="Polaris-Text--root Polaris-Text--headingMd" id="storeDetails"><%= heading %></h2>
+        <% if description.present? %>
+          <div class="Polaris-Box" style="--pc-box-color:var(--p-color-text-secondary)">
+            <% if description.html_safe? %>
+              <%= description %>
+            <% else %>
+              <p class="Polaris-Text--root Polaris-Text--bodyMd"><%= description %></p>
+            <% end %>
+          </div>
         <% end %>
       </div>
     </div>
     <div class="Polaris-Layout__AnnotationContent">
-      <div class="Polaris-Card">
-        <div class="Polaris-Card__Section">
-          <div class="Polaris-FormLayout">
+      <div class="Polaris-LegacyCard">
+        <div class="Polaris-LegacyCard__Section Polaris-LegacyCard__FirstSectionPadding Polaris-LegacyCard__LastSectionPadding">
+          <div class="Polaris-BlockStack" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-400)">
             <%= capture(&block) %>
           </div>
         </div>

data/app/views/polaris/_annotated_section_input.html.erb

@@ -1,32 +1,32 @@
 <div class="Polaris-Layout__AnnotatedSection">
   <div class="Polaris-Layout__AnnotationWrapper">
     <div class="Polaris-Layout__Annotation">
-      <div class="Polaris-TextContainer">
+      <div class="Polaris-TextContainer Polaris-TextContainer--spacingTight">
         <%= capture(&block) %>
       </div>
     </div>
     <div class="Polaris-Layout__AnnotationContent">
-      <div class="Polaris-Card">
-        <div class="Polaris-Card__Section">
-          <div class="Polaris-FormLayout">
-
+      <div class="Polaris-LegacyCard">
+        <div class="Polaris-LegacyCard__Section Polaris-LegacyCard__FirstSectionPadding Polaris-LegacyCard__LastSectionPadding">
+          <div class="Polaris-BlockStack" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-400)">
             <% attribute.each do |att| %>
-            <div class="Polaris-FormLayout__Item">
-              <div class="">
-                <div class="Polaris-Labelled__LabelWrapper">
-                  <div class="Polaris-Label">
-                    <%= form.label att, class: 'Polaris-Label__Text' %>
+              <div class="Polaris-FormLayout__Item Polaris-FormLayout--grouped">
+                <div class="">
+                  <div class="Polaris-Labelled__LabelWrapper">
+                    <div class="Polaris-Label">
+                      <%= form.label att, class: 'Polaris-Label__Text' %>
+                    </div>
+                  </div>
+                  <div class="Polaris-Connected">
+                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
+                      <div class="Polaris-TextField">
+                        <%= input %>
+                      </div>
+                    </div>
                   </div>
-                </div>
-                <div class="Polaris-TextField">
-                  <%= input %>
-                  <%#= form.send element_type, att, id: "#{form.object.class.name.tableize.singularize}_#{att}", class: "Polaris-TextField__Input" %>
-                  <!--<div class="Polaris-TextField__Backdrop"></div>-->
                 </div>
               </div>
-            </div>
             <% end %>
-
           </div>
         </div>
       </div>

data/app/views/polaris/_annotated_section_text_field.html.erb

@@ -1,31 +1,33 @@
 <div class="Polaris-Layout__AnnotatedSection">
   <div class="Polaris-Layout__AnnotationWrapper">
     <div class="Polaris-Layout__Annotation">
-      <div class="Polaris-TextContainer">
+      <div class="Polaris-TextContainer Polaris-TextContainer--spacingTight">
         <%= capture(&block) %>
       </div>
     </div>
     <div class="Polaris-Layout__AnnotationContent">
-      <div class="Polaris-Card">
-        <div class="Polaris-Card__Section">
-          <div class="Polaris-FormLayout">
-
+      <div class="Polaris-LegacyCard">
+        <div class="Polaris-LegacyCard__Section Polaris-LegacyCard__FirstSectionPadding Polaris-LegacyCard__LastSectionPadding">
+          <div class="Polaris-BlockStack" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-400)">
             <% attribute.each do |att| %>
-            <div class="Polaris-FormLayout__Item">
-              <div class="">
-                <div class="Polaris-Labelled__LabelWrapper">
-                  <div class="Polaris-Label">
-                    <%= form.label att, options[:label], class: 'Polaris-Label__Text' %>
+              <div class="Polaris-FormLayout__Item Polaris-FormLayout--grouped">
+                <div class="">
+                  <div class="Polaris-Labelled__LabelWrapper">
+                    <div class="Polaris-Label">
+                      <%= form.label att, options[:label], class: 'Polaris-Label__Text' %>
+                    </div>
+                  </div>
+                  <div class="Polaris-Connected">
+                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
+                      <div class="Polaris-TextField">
+                        <%= form.send element_type, att, id: "#{form.object.class.name.tableize.singularize}_#{att}", class: "Polaris-TextField__Input", placeholder: options[:placeholder] %>
+                        <div class="Polaris-TextField__Backdrop"></div>
+                      </div>
+                    </div>
                   </div>
-                </div>
-                <div class="Polaris-TextField">
-                  <%= form.send element_type, att, id: "#{form.object.class.name.tableize.singularize}_#{att}", class: "Polaris-TextField__Input", placeholder: options[:placeholder] %>
-                  <div class="Polaris-TextField__Backdrop"></div>
                 </div>
               </div>
-            </div>
             <% end %>
-
           </div>
         </div>
       </div>

data/app/views/polaris/_badge.html.erb

@@ -1 +1,3 @@
-<span class="Polaris-Badge <%= extra_class %>"><%= content.try(:html_safe) %></span>
+<span class="Polaris-Badge Polaris-Badge--toneInfo <%= extra_class %>">
+  <span class="Polaris-Text--root Polaris-Text--bodySm"><%= content.try(:html_safe) %></span>
+</span>

data/app/views/polaris/_banner.html.erb

@@ -1,13 +1,25 @@
-<div class="Polaris-Banner Polaris-Banner--withinPage Polaris-Banner--status<%= options[:status].titleize %>" tabindex="0" role="banner <%= options[:status] %>" aria-labelledby="Banner2Heading" aria-describedby="Banner2Content">
-  <div class="Polaris-Banner__Ribbon">
-    <%= render "polaris/banner_icons/#{options[:status]}" %>
-  </div>
-  <div>
-    <div class="Polaris-Banner__Heading" id="Banner2Heading">
-      <p class="Polaris-Heading"><%= options[:title] %></p>
-    </div>
-    <div class="Polaris-Banner__Content" id="Banner2Content">
-      <%= capture(&block) %>
+<div class="Polaris-Banner Polaris-Banner--withinPage" tabindex="0" role="alert" aria-live="polite">
+  <div class="Polaris-Box" style="--pc-box-width:100%">
+    <div class="Polaris-BlockStack" style="--pc-block-stack-align:space-between;--pc-block-stack-order:column">
+      <div class="Polaris-Box" style="--pc-box-color: var(--p-color-text-<%= options[:status] %>-on-bg-fill); --pc-box-background: var(--p-color-bg-fill-<%= options[:status] %>); --pc-box-padding-block-start-xs: var(--p-space-300); --pc-box-padding-block-end-xs: var(--p-space-300); --pc-box-padding-inline-start-xs: var(--p-space-300); --pc-box-padding-inline-end-xs: var(--p-space-300); --pc-box-border-start-start-radius: var(--p-border-radius-300); --pc-box-border-start-end-radius: var(--p-border-radius-300);">
+        <div class="Polaris-InlineStack" style="--pc-inline-stack-align:space-between;--pc-inline-stack-block-align:center;--pc-inline-stack-wrap:nowrap;--pc-inline-stack-gap-xs:var(--p-space-200);--pc-inline-stack-flex-direction-xs:row">
+          <div class="Polaris-InlineStack" style="--pc-inline-stack-wrap:nowrap;--pc-inline-stack-gap-xs:var(--p-space-100);--pc-inline-stack-flex-direction-xs:row">
+            <span class="Polaris-Banner--text<%= options[:status].capitalize %>OnBgFill">
+              <%= render "polaris/banner_icons/#{options[:status]}" %>
+            </span>
+            <h2 class="Polaris-Text--root Polaris-Text--headingSm Polaris-Text--break"><%= options[:title] %></h2>
+          </div>
+        </div>
+      </div>
+      <div class="Polaris-Box" style="--pc-box-padding-block-start-xs:var(--p-space-300);--pc-box-padding-block-end-xs:var(--p-space-300);--pc-box-padding-block-end-md:var(--p-space-400);--pc-box-padding-inline-start-xs:var(--p-space-300);--pc-box-padding-inline-start-md:var(--p-space-400);--pc-box-padding-inline-end-xs:var(--p-space-300);--pc-box-padding-inline-end-md:var(--p-space-400)">
+        <div class="Polaris-BlockStack" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-200)">
+          <div>
+            <span class="Polaris-Text--root Polaris-Text--bodyMd">
+              <%= capture(&block) %>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

data/app/views/polaris/_block_stack.html.erb

@@ -0,0 +1,3 @@
+<div class="Polaris-BlockStack" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-500)">
+  <%= capture(&block) %>
+</div>

data/app/views/polaris/_button_link_to.html.erb

@@ -1,3 +1,3 @@
-<%= link_to link_destination, data: { method: method, remote: remote }, confirm: confirm, class: "Polaris-Button #{additional_classes}", target: target, 'data-polaris-unstyled': true do %>
-  <span class="Polaris-Button__Content"><span><%= name || capture(&block) %></span></span>
+<%= link_to link_destination, data: { method: method, remote: remote }, confirm: confirm, class: "Polaris-Button Polaris-Button--pressable Polaris-Button--sizeMedium Polaris-Button--textAlignCenter #{additional_classes}", target: target, 'data-polaris-unstyled': true do %>
+  <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium"><%= name || capture(&block) %></span>
 <% end %>

data/app/views/polaris/_button_tag.html.erb

@@ -1,4 +1,4 @@
 <% data ||= nil %>
-<%= button_tag type: type, class: "Polaris-Button #{additional_classes}", data: data do %>
-  <span class="Polaris-Button__Content"><span><%= name %></span></span>
+<%= button_tag type: type, class: "Polaris-Button Polaris-Button--pressable Polaris-Button--sizeMedium Polaris-Button--textAlignCenter #{additional_classes}", data: data do %>
+  <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium"><%= name %></span>
 <% end %>

data/app/views/polaris/_card.html.erb

@@ -1,15 +1,17 @@
-<div class="Polaris-Card <%= extra_class %>">
-  <% if heading.present? %>
-    <div class="Polaris-Card__Header">
-      <h2 class="Polaris-Heading"><%= heading %></h2>
+<% body_style = "" %>
+<div class="Polaris-ShadowBevel <%= extra_class %>" style="--pc-shadow-bevel-z-index: 32; --pc-shadow-bevel-content-xs: &quot;&quot;; --pc-shadow-bevel-box-shadow-xs: var(--p-shadow-100); --pc-shadow-bevel-border-radius-xs: var(--p-border-radius-300);">
+  <div class="Polaris-Box" style="--pc-box-background:var(--p-color-bg-surface);--pc-box-min-height:100%;--pc-box-overflow-x:clip;--pc-box-overflow-y:clip;--pc-box-padding-block-start-xs:var(--p-space-400);--pc-box-padding-block-end-xs:var(--p-space-400);--pc-box-padding-inline-start-xs:var(--p-space-400);--pc-box-padding-inline-end-xs:var(--p-space-400)">
+    <% if heading.present? %>
+      <h2 class="Polaris-Text--root Polaris-Text--headingSm"><%= heading %></h2>
+      <% body_style = "--pc-box-padding-block-start-xs:var(--p-space-200)" %>
+    <% end %>
+    <div class="Polaris-Box" style="<%= body_style %>">
+      <%= capture(&block) %>
     </div>
-  <% end %>
-  <div class="Polaris-Card__Section">
-    <%= capture(&block) %>
+    <% if footer.present? %>
+      <div class="Polaris-Card__Footer">
+        <%= footer %>
+      </div>
+    <% end %>
   </div>
-  <% if footer.present? %>
-    <div class="Polaris-Card__Footer">
-      <%= footer %>
-    </div>
-  <% end %>
 </div>

data/app/views/polaris/_choice_list.html.erb

@@ -1,25 +1,27 @@
 <% listname = attribute %>
-<div class="Polaris-FormLayout__Item">
-  <div class="">
-    <fieldset class="Polaris-ChoiceList" id="<%= listname %>" aria-invalid="false">
-      <legend class="Polaris-ChoiceList__Title"><%= title %></legend>
-      <ul class="Polaris-ChoiceList__Choices">
-        <% choices.each do |choice| %>
-          <% inputname = polaris_random_input_name %>
-          <li>
-            <label class="Polaris-Choice" for="<%= inputname %>">
-              <span class="Polaris-Choice__Control">
-                <span class="Polaris-RadioButton">
-                  <%= form.radio_button attribute, choice[:value], checked: selected == choice[:value], class: 'Polaris-RadioButton__Input', id: inputname, data: data %>
-                  <span class="Polaris-RadioButton__Backdrop"></span>
-                  <span class="Polaris-RadioButton__Icon"></span>
+<fieldset class="Polaris-BlockStack Polaris-BlockStack--fieldsetReset" id=":Rq6:" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-400);--pc-block-stack-gap-md:var(--p-space-0)" aria-invalid="false">
+  <%#<legend class="Polaris-Box" style="--pc-box-padding-block-end-xs:var(--p-space-0);--pc-box-padding-block-end-md:var(--p-space-100)">%>
+    <%#<span class="Polaris-Text--root Polaris-Text--bodyMd">Company name</span>%>
+  <%#</legend>%>
+  <ul class="Polaris-BlockStack Polaris-BlockStack--listReset" style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-400);--pc-block-stack-gap-md:var(--p-space-0)">
+    <% choices.each do |choice| %>
+      <% inputname = polaris_random_input_name %>
+      <li>
+        <div class="no-Polaris-Bleed" nostyle="--pc-bleed-margin-block-end-xs:var(--p-space-0)">
+          <label class="Polaris-Choice Polaris-RadioButton__ChoiceLabel" for="<%= inputname %>" style="--pc-choice-fill-xs:100%;--pc-choice-fill-sm:auto">
+            <span class="Polaris-Choice__Control">
+              <span class="Polaris-RadioButton">
+                <%= form.radio_button attribute, choice[:value], checked: selected == choice[:value], class: 'Polaris-RadioButton__Input', id: inputname, data: data %>
+                <span class="Polaris-RadioButton__Backdrop">
                 </span>
               </span>
-              <span class="Polaris-Choice__Label"><%= choice[:label] %></span>
-            </label>
-          </li>
-        <% end %>
-      </ul>
-    </fieldset>
-  </div>
-</div>
+            </span>
+            <span class="Polaris-Choice__Label">
+              <span class="Polaris-Text--root Polaris-Text--bodyMd"><%= choice[:label] %></span>
+            </span>
+          </label>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</fieldset>

data/app/views/polaris/_footer_help.html.erb

@@ -1,16 +1,5 @@
-<div class="Polaris-FooterHelp">
-  <div class="Polaris-FooterHelp__Content">
-    <div class="Polaris-FooterHelp__Icon">
-      <span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor">
-        <svg role="img" class="Polaris-Icon__Svg" aria-labelledby="next-help-f4f13b47b896c4e3dda071982d260af5-title">
-          <title id="next-help-f4f13b47b896c4e3dda071982d260af5-title">Help</title>
-          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#<%= icon %>">
-          </use>
-        </svg>
-      </span>
-    </div>
-    <div class="Polaris-FooterHelp__Text">
-      <%= capture(&block) %>
-    </div>
-  </div>
+<div class="Polaris-FooterHelp" style="--pc-footer-help-align:center">
+  <p class="Polaris-Text--root Polaris-Text--bodyLg">
+    <%= capture(&block) %>
+  </p>
 </div>

data/app/views/polaris/_heading.html.erb

@@ -1 +1 @@
-<h2 class="Polaris-Heading"><%= title %></h2>
+<h6 class="Polaris-Text--root Polaris-Text--headingMd"><%= title %></h6>

data/app/views/polaris/_legacy_card.html.erb

@@ -0,0 +1,3 @@
+<div class="Polaris-LegacyCard">
+  <%= capture(&block) %>
+</div>

data/app/views/polaris/_page.html.erb

@@ -1,6 +1,5 @@
 <div class="Polaris-Page">
-  <%= polaris_css_variable_hack_div do %>
+  <%#= polaris_css_variable_hack_div do %>
     <%= capture(&block) %>
-  <% end %>
+  <%# end %>
 </div>
-

data/app/views/polaris/_page_actions.html.erb

@@ -1,22 +1,27 @@
+<% # TODO: Eventually refactor this to just take an array of buttons instead of left and right %>
 <div class="Polaris-PageActions">
-  <div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--distributionEqualSpacing">
-    <div class="Polaris-Stack__Item">
-      <% if left.is_a? Array %>
-        <% left.each do |item| %>
+  <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--distributionTrailing">
+    <% if left.is_a? Array %>
+      <% left.each do |item| %>
+        <div class="Polaris-LegacyStack__Item">
           <%= item %>
-        <% end %>
-      <% else %>
-        <%= left %>
+        </div>
       <% end %>
-    </div>
-    <div class="Polaris-Stack__Item">
-      <% if right.is_a? Array %>
-        <% right.each do |item| %>
+    <% else %>
+      <div class="Polaris-LegacyStack__Item">
+        <%= left %>
+      </div>
+    <% end %>
+    <% if right.is_a? Array %>
+      <% right.each do |item| %>
+        <div class="Polaris-LegacyStack__Item">
           <%= item %>
-        <% end %>
-      <% else %>
-        <%= right %>
+        </div>
       <% end %>
-    </div>
+    <% else %>
+      <div class="Polaris-LegacyStack__Item">
+        <%= right %>
+      </div>
+    <% end %>
   </div>
 </div>

data/app/views/polaris/_page_content.html.erb

@@ -1,4 +1,3 @@
 <div class="Polaris-Page__Content">
   <%= capture(&block) %>
 </div>
-

data/app/views/polaris/_page_header.html.erb

@@ -1,7 +1,18 @@
-<div class="Polaris-Page__Header">
-  <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge"><%= title %></h1>
-  <% if block.present? %>
-    <%= capture(&block) %>
-  <% end %>
-</div>
+<div class="Polaris-Box" style="--pc-box-padding-block-start-xs:var(--p-space-400);--pc-box-padding-block-start-md:var(--p-space-600);--pc-box-padding-block-end-xs:var(--p-space-400);--pc-box-padding-block-end-md:var(--p-space-600);--pc-box-padding-inline-start-xs:var(--p-space-400);--pc-box-padding-inline-start-sm:var(--p-space-0);--pc-box-padding-inline-end-xs:var(--p-space-400);--pc-box-padding-inline-end-sm:var(--p-space-0);position:relative">
+  <div class="Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle">
+    <div class="Polaris-Page-Header__Row">
+
+      <div class="Polaris-Page-Header__TitleWrapper">
+        <div class="Polaris-Header-Title__TitleWrapper">
+          <h1 class="Polaris-Header-Title">
+            <span class="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--bold"><%= title %></span>
+          </h1>
+        </div>
+      </div>
+      <% if block.present? %>
+        <%= capture(&block) %>
+      <% end %>
 
+    </div>
+  </div>
+</div>

data/app/views/polaris/_resource_list_item.html.erb

@@ -1,31 +1,53 @@
 <li class="Polaris-ResourceItem__ListItem <%#= extra_classes %>">
   <div class="Polaris-ResourceItem__ItemWrapper">
-    <div class="Polaris-ResourceItem" data-href="<%= attributes[:url] %>">
-      <a aria-describedby="" aria-label="<%= attributes[:attribute_one] %>" class="Polaris-ResourceItem__Link" tabindex="" id="" href="<%= attributes[:url] %>" data-polaris-unstyled="true"></a>
-      <div class="Polaris-ResourceItem__Container" id="">
-        <div class="Polaris-ResourceItem__Owned">
-          <% if attributes[:media].present? %>
-            <div class="Polaris-ResourceItem__Media">
-              <%= attributes[:media] %>
-            </div>
-          <% end %>
-        </div>
-        <div class="Polaris-ResourceItem__Content">
-          <h3><span class="Polaris-TextStyle--variationStrong"><%= attributes[:attribute_one] %></span></h3>
 
-          <% if attributes[:attribute_two].present? %>
-            <div><%= attributes[:attribute_two] %></div>
-          <% end %>
+    <div class="Polaris-ResourceItem" data-href="<%= attributes[:url] %>">
+      <a aria-describedby="100" aria-label="<%= attributes[:attribute_one] %>" class="Polaris-ResourceItem__Link" tabindex="0" id=":R5ikq6:" href="<%= attributes[:url] %>" data-polaris-unstyled="true">
+      </a>
+      <div class="Polaris-Box" id="100" style="--pc-box-padding-block-start-xs:var(--p-space-300);--pc-box-padding-block-end-xs:var(--p-space-300);--pc-box-padding-inline-start-xs:var(--p-space-300);--pc-box-padding-inline-end-xs:var(--p-space-300);position:relative;z-index:var(--pc-resource-item-content-stacking-order)">
+        <% if block.present? %>
+          <div class="Polaris-ResourceItem__Container" id="">
+            <%= capture(&block) %>
+          </div>
+        <% else %>
+          <div class="Polaris-InlineGrid" style="--pc-inline-grid-grid-template-columns-xs:1fr auto">
+            <div class="Polaris-InlineGrid" style="--pc-inline-grid-grid-template-columns-xs:auto 1fr;--pc-inline-grid-gap-xs:var(--p-space-300)">
+              <div class="Polaris-InlineStack" style="--pc-inline-stack-block-align:start;--pc-inline-stack-wrap:wrap;--pc-inline-stack-gap-xs:var(--p-space-300);--pc-inline-stack-flex-direction-xs:row">
+                <span aria-label="<%= attributes[:attribute_one] %>" role="img" class="Polaris-Avatar Polaris-Avatar--sizeXl">
+                  <span class="Polaris-Avatar__Initials">
+                    <% if attributes[:media].present? %>
+                      <div class="Polaris-ResourceItem__Media">
+                        <%= attributes[:media] %>
+                      </div>
+                    <% end %>
+                    <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
+                      <path fill="none" d="M25.5 13.5C25.5 16.5376 23.0376 19 20 19C16.9624 19 14.5 16.5376 14.5 13.5C14.5 10.4624 16.9624 8 20 8C23.0376 8 25.5 10.4624 25.5 13.5Z" stroke="currentColor" stroke-width="2.5">
+                      </path>
+                      <path fill="none" d="M10.3433 29.682L9.47 31.254C9.03481 32.0373 9.60125 33 10.4974 33H29.5026C30.3988 33 30.9652 32.0373 30.53 31.254L29.6567 29.682C27.7084 26.175 24.0119 24 20 24C15.9882 24 12.2916 26.175 10.3433 29.682Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                      </path>
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div class="Polaris-InlineStack" style="--pc-inline-stack-block-align:start;--pc-inline-stack-wrap:wrap;--pc-inline-stack-flex-direction-xs:row">
+                <div class="Polaris-Box" style="--pc-box-padding-block-start-xs:var(--p-space-0);--pc-box-padding-block-end-xs:var(--p-space-0);--pc-box-padding-inline-start-xs:var(--p-space-0);--pc-box-padding-inline-end-xs:var(--p-space-0);--pc-box-width:100%">
+                  <h3 class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--bold"><%= attributes[:attribute_one] %></h3>
+                  <% if attributes[:attribute_two].present? %>
+                    <div><%= attributes[:attribute_two] %></div>
+                  <% end %>
 
-          <% if attributes[:attribute_three].present? %>
-            <div><%= attributes[:attribute_three] %></div>
-          <% end %>
-          <% attributes[:badges].each do |badge| %>
-            <%= badge %>
-          <% end %>
-        </div>
+                  <% if attributes[:attribute_three].present? %>
+                    <div><%= attributes[:attribute_three] %></div>
+                  <% end %>
+                  <% attributes[:badges].each do |badge| %>
+                    <%= badge %>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
       </div>
     </div>
   </div>
 </li>
-

data/app/views/polaris/_sub_heading.html.erb

@@ -1 +1 @@
-<h3 class="Polaris-Subheading"><%= title %></h3>
+<h6 class="Polaris-Text--root Polaris-Text--headingSm"><%= title %></h6>

data/app/views/polaris/_tab.html.erb

@@ -1,7 +1,7 @@
-<li role="presentation" class="Polaris-Tabs__TabContainer">
-  <%= link_to link_path, class: "Polaris-Tabs__Tab #{'Polaris-Tabs__Tab--selected' if active}" do %>
-    <span class="Polaris-Tabs__Title"><%= text %></span>
+<li class="Polaris-Tabs__TabContainer" role="presentation">
+  <%= link_to link_path, class: "Polaris-Tabs__Tab #{'Polaris-Tabs__Tab--active' if active}" do %>
+    <div class="Polaris-InlineStack" style="--pc-inline-stack-align: center; --pc-inline-stack-block-align: center; --pc-inline-stack-wrap: nowrap; --pc-inline-stack-gap-xs: var(--p-space-200); --pc-inline-stack-flex-direction-xs: row;">
+      <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium"><%= text %></span>
+    </div>
   <% end %>
 </li>
-
-

data/app/views/polaris/_tabs.html.erb

@@ -1,5 +1,11 @@
-<div class="Polaris-Tabs__Wrapper">
-  <ul role="tablist" class="Polaris-Tabs">
-    <%= capture(&block) %>
-  </ul>
+<div class="Polaris-Tabs__Outer">
+  <div class="Polaris-Box" style="--pc-box-padding-block-start-md:var(--p-space-200);--pc-box-padding-block-end-md:var(--p-space-200);--pc-box-padding-inline-start-md:var(--p-space-200);--pc-box-padding-inline-end-md:var(--p-space-200)">
+    <div class="Polaris-Tabs__Wrapper">
+      <div class="Polaris-Tabs__ButtonWrapper">
+        <ul class="Polaris-Tabs" data-tabs-focus-catchment="true" role="tablist">
+          <%= capture(&block) %>
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>

data/app/views/polaris/banner_icons/_critical.html.erb

@@ -1,6 +1,10 @@
-<span class="Polaris-Icon Polaris-Icon--colorCritical Polaris-Icon--applyColor">
-  <span class="Polaris-VisuallyHidden"></span>
+<span class="Polaris-Icon">
   <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
-    <path d="M11.768.768a2.5 2.5 0 0 0-3.536 0L.768 8.232a2.5 2.5 0 0 0 0 3.536l7.464 7.464a2.5 2.5 0 0 0 3.536 0l7.464-7.464a2.5 2.5 0 0 0 0-3.536L11.768.768zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm2 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
+    <path d="M10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Z">
+    </path>
+    <path d="M11 13a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z">
+    </path>
+    <path fill-rule="evenodd" d="M11.237 3.177a1.75 1.75 0 0 0-2.474 0l-5.586 5.585a1.75 1.75 0 0 0 0 2.475l5.586 5.586a1.75 1.75 0 0 0 2.474 0l5.586-5.586a1.75 1.75 0 0 0 0-2.475l-5.586-5.585Zm-1.414 1.06a.25.25 0 0 1 .354 0l5.586 5.586a.25.25 0 0 1 0 .354l-5.586 5.585a.25.25 0 0 1-.354 0l-5.586-5.585a.25.25 0 0 1 0-.354l5.586-5.586Z">
+    </path>
   </svg>
 </span>

data/app/views/polaris/banner_icons/_info.html.erb

@@ -1,7 +1,10 @@
-<span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor">
-  <span class="Polaris-VisuallyHidden"></span>
+<span class="Polaris-Icon">
   <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
-    <path fill-rule="evenodd" d="M10 20c5.514 0 10-4.486 10-10s-4.486-10-10-10-10 4.486-10 10 4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z">
+    <path d="M10 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-.75.75Z">
+    </path>
+    <path d="M9 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z">
+    </path>
+    <path fill-rule="evenodd" d="M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z">
     </path>
   </svg>
 </span>

data/app/views/polaris/banner_icons/_success.html.erb

@@ -1,6 +1,6 @@
-<span class="Polaris-Icon Polaris-Icon--colorSuccess Polaris-Icon--applyColor">
-  <span class="Polaris-VisuallyHidden"></span>
+<span class="Polaris-Icon">
   <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
-    <path fill-rule="evenodd" d="M0 10a10 10 0 1 0 20 0 10 10 0 0 0-20 0zm15.2-1.8a1 1 0 0 0-1.4-1.4L9 11.6 6.7 9.3a1 1 0 0 0-1.4 1.4l3 3c.4.4 1 .4 1.4 0l5.5-5.5z"></path>
+    <path fill-rule="evenodd" d="M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z">
+    </path>
   </svg>
 </span>

data/app/views/polaris/banner_icons/_warning.html.erb

@@ -1,6 +1,10 @@
-<span class="Polaris-Icon Polaris-Icon--colorWarning Polaris-Icon--applyColor">
-  <span class="Polaris-VisuallyHidden"></span>
+<span class="Polaris-Icon">
   <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
-    <path fill-rule="evenodd" d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
+    <path d="M10 6.75a.75.75 0 0 1 .75.75v3.5a.75.75 0 1 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Z">
+    </path>
+    <path d="M11 13.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z">
+    </path>
+    <path fill-rule="evenodd" d="M10 3.5c-1.045 0-1.784.702-2.152 1.447a449.26 449.26 0 0 1-2.005 3.847l-.028.052a403.426 403.426 0 0 0-2.008 3.856c-.372.752-.478 1.75.093 2.614.57.863 1.542 1.184 2.464 1.184h7.272c.922 0 1.895-.32 2.464-1.184.57-.864.465-1.862.093-2.614-.21-.424-1.113-2.147-2.004-3.847l-.032-.061a429.497 429.497 0 0 1-2.005-3.847c-.368-.745-1.107-1.447-2.152-1.447Zm-.808 2.112c.404-.816 1.212-.816 1.616 0 .202.409 1.112 2.145 2.022 3.88a418.904 418.904 0 0 1 2.018 3.875c.404.817 0 1.633-1.212 1.633h-7.272c-1.212 0-1.617-.816-1.212-1.633.202-.408 1.113-2.147 2.023-3.883a421.932 421.932 0 0 0 2.017-3.872Z">
+    </path>
   </svg>
 </span>