polaris_view_components 0.13.6 → 1.0.0

data/app/components/polaris/resource_item_component.rb

@@ -5,13 +5,6 @@ module Polaris
     CURSOR_DEFAULT = :default
     CURSOR_OPTIONS = %i[default pointer]
 
-    ALIGNMENT_DEFAULT = :default
-    ALIGNMENT_MAPPINGS = {
-      ALIGNMENT_DEFAULT => "",
-      :center => "Polaris-ResourceItem--alignmentCenter"
-    }
-    ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
-
     renders_one :checkbox, ->(**system_arguments) do
       Polaris::CheckboxComponent.new(
         label_hidden: true,
@@ -35,7 +28,7 @@ module Polaris
 
     def initialize(
       url: nil,
-      vertical_alignment: ALIGNMENT_DEFAULT,
+      vertical_alignment: nil,
       cursor: CURSOR_DEFAULT,
       selectable: false,
       selected: false,
@@ -71,14 +64,15 @@ module Polaris
     end
 
     def container_arguments
-      {
-        tag: "div"
-      }.deep_merge(@container_arguments).tap do |args|
+      @container_arguments.tap do |args|
         args[:classes] = class_names(
-          args[:classes],
-          "Polaris-ResourceItem__Container",
-          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)]
+          args[:classes]
         )
+        args[:position] = :relative
+        args[:padding] = "3"
+        args[:padding_inline_start] = {xs: "4", sm: "5"}
+        args[:padding_inline_end] = {xs: "4", sm: "5"}
+        args[:z_index] = "var(--pc-resource-item-content-stacking-order)"
       end
     end
 
@@ -103,17 +97,6 @@ module Polaris
       checkbox.present? || radio_button.present? || media.present?
     end
 
-    def owned_arguments
-      {
-        tag: "div",
-        classes: class_names(
-          "Polaris-ResourceItem__Owned",
-          "Polaris-ResourceItem__OwnedNoMedia": media.blank?,
-          "Polaris-ResourceItem__Owned--offset": @offset
-        )
-      }
-    end
-
     private
 
     def cursor

data/app/components/polaris/select_component.html.erb

@@ -21,9 +21,11 @@
       <% if @disabled %>aria-disabled="true"<% end %>
     >
       <% if @label_inline %>
-        <span class="Polaris-Select__InlineLabel">
-          <%= @label %>
-        </span>
+        <%= polaris_box(padding_inline_end: "1") do %>
+          <%= polaris_text(as: :span, color: :subdued, truncate: true) do %>
+            <%= @label %>
+          <% end %>
+        <% end %>
       <% end %>
       <span
         class="Polaris-Select__SelectedOption"

data/app/components/polaris/skeleton_body_text_component.html.erb

@@ -1,5 +1,3 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-  <% @lines.times do %>
-    <div class="Polaris-SkeletonBodyText"></div>
-  <% end %>
+<% @lines.times do %>
+  <div class="Polaris-SkeletonBodyText"></div>
 <% end %>

data/app/components/polaris/skeleton_body_text_component.rb

@@ -2,14 +2,8 @@
 
 module Polaris
   class SkeletonBodyTextComponent < Polaris::Component
-    def initialize(lines: 3, **system_arguments)
+    def initialize(lines: 3)
       @lines = lines
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = "div"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer"
-      )
     end
   end
 end

data/app/components/polaris/skeleton_page_component.html.erb

@@ -1,23 +1,61 @@
-<%= render Polaris::BaseComponent.new(**system_arguments) do %>
-  <div class="Polaris-SkeletonPage__Header">
-    <div class="Polaris-SkeletonPage__TitleAndPrimaryAction">
-      <div class="Polaris-SkeletonPage__TitleWrapper">
-        <% if @title.present? %>
-          <h1 class="Polaris-SkeletonPage__Title">
-            <%= @title %>
-          </h1>
-        <% else %>
-          <div class="Polaris-SkeletonPage__SkeletonTitle"></div>
+<%= polaris_vertical_stack(gap: "4", **system_arguments) do %>
+  <%= polaris_box(
+    with: "100%",
+    padding: "0",
+    padding_inline_start: {sm: "6"},
+    padding_inline_end: {sm: "6"},
+    max_width: page_width
+  ) do %>
+    <%= polaris_vertical_stack do %>
+      <%= polaris_box(
+        padding_block_start: {xs: "4", md: "5"},
+        padding_block_end: {xs: "4", md: "5"},
+        padding_inline_start: {xs: "4", sm: "0"},
+        padding_inline_end: {xs: "4", sm: "0"},
+        width: "100%"
+      ) do %>
+        <%= polaris_horizontal_stack(gap: "4", align: :space_between, block_align: :center) do %>
+          <%= polaris_horizontal_stack(gap: "4") do %>
+            <% if @back_action %>
+              <%= polaris_box(
+                border_radius: "1",
+                background: "bg-strong",
+                min_height: "2.25rem",
+                min_width: "2.25rem",
+                max_width: "2.25rem"
+              ) %>
+            <% end %>
+            <%= polaris_box(padding_block_start: "1", padding_block_end: "1") do %>
+              <% if @title.present? %>
+                <h1 class="Polaris-SkeletonPage__Title">
+                  <%= @title %>
+                </h1>
+              <% else %>
+                <div class="Polaris-SkeletonPage__SkeletonTitle">
+                  <%= polaris_box(
+                    border_radius: "1",
+                    background: "bg-strong",
+                    min_height: "28px",
+                    min_width: "120px"
+                  ) %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+          <% if @primary_action %>
+            <%= polaris_box(
+              id: "SkeletonPage-PrimaryAction",
+              border_radius: "1",
+              background: "bg-strong",
+              min_height: "2.25rem",
+              min_width: "6.25rem"
+            ) %>
+          <% end %>
         <% end %>
-      </div>
-      <% if @primary_action %>
-        <div class="Polaris-SkeletonPage__PrimaryAction">
-          <%= polaris_skeleton_display_text(size: :large) %>
-        </div>
       <% end %>
-    </div>
-  </div>
-  <div class="Polaris-SkeletonPage__Content">
-    <%= content %>
-  </div>
+      <%= polaris_box(padding_block_end: "2", width: "100%") do %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/components/polaris/skeleton_page_component.rb

@@ -2,20 +2,35 @@
 
 module Polaris
   class SkeletonPageComponent < Polaris::Component
-    def initialize(title: nil, primary_action: false, **system_arguments)
+    def initialize(
+      title: nil,
+      primary_action: false,
+      narrow_width: false,
+      full_width: false,
+      back_action: false,
+      **system_arguments
+    )
       @title = title
       @primary_action = primary_action
+      @narrow_width = narrow_width
+      @full_width = full_width
+      @back_action = back_action
       @system_arguments = system_arguments
     end
 
     def system_arguments
       @system_arguments.tap do |opts|
-        opts[:tag] = "div"
         opts[:role] = "status"
-        opts[:classes] = class_names(
-          @system_arguments[:classes],
-          "Polaris-SkeletonPage__Page"
-        )
+      end
+    end
+
+    def page_width
+      if @narrow_width
+        "var(--pc-skeleton-page-max-width-narrow)"
+      elsif @full_width
+        "none"
+      else
+        "var(--pc-skeleton-page-max-width)"
       end
     end
   end

data/app/components/polaris/spinner_component.html.erb

@@ -1,11 +1,17 @@
-<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
-  <% if @size == :small %>
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if @size == :large %>
+    <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z" />
     </svg>
   <% else %>
-    <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
-      <path d="M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"></path>
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" />
     </svg>
   <% end %>
 <% end %>
+
+<% if render_accessibility? %>
+  <%= render Polaris::BaseComponent.new(**span_arguments) do %>
+    <%= render Polaris::TextComponent.new(as: :span, variant: :bodySm, visually_hidden: true).with_content(@accessibility_label) %>
+  <% end %>
+<% end %>

data/app/components/polaris/spinner_component.rb

@@ -2,24 +2,50 @@
 
 module Polaris
   class SpinnerComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    attr_reader :has_focusable_parent, :size
+
     SIZE_DEFAULT = :large
     SIZE_MAPPINGS = {
       small: "Polaris-Spinner--sizeSmall",
       large: "Polaris-Spinner--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
+    validates :size, inclusion: {in: SIZE_OPTIONS}
+    validates :has_focusable_parent, inclusion: {in: [true, false]}
 
     def initialize(
+      accessibility_label: nil,
       size: SIZE_DEFAULT,
+      has_focusable_parent: false,
       **system_arguments
     )
+      @accessibility_label = accessibility_label
+      @has_focusable_parent = has_focusable_parent
       @size = size
+
       @system_arguments = system_arguments
+      @system_arguments[:tag] = :span
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Spinner",
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end
+
+    def span_arguments
+      arguments = {
+        tag: :span
+      }
+
+      arguments[:role] = :status unless @has_focusable_parent
+
+      arguments
+    end
+
+    def render_accessibility?
+      (!@has_focusable_parent && @accessibility_label.present?)
+    end
   end
 end

data/app/components/polaris/stack/item_component.rb

@@ -4,8 +4,8 @@ class Polaris::Stack::ItemComponent < Polaris::Component
     @system_arguments[:tag] = "div"
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-Stack__Item",
-      "Polaris-Stack__Item--fill": fill
+      "Polaris-LegacyStack__Item",
+      "Polaris-LegacyStack__Item--fill": fill
     )
   end
 

data/app/components/polaris/stack_component.rb

@@ -5,35 +5,35 @@ module Polaris
     ALIGNMENT_DEFAULT = :default
     ALIGNMENT_MAPPINGS = {
       ALIGNMENT_DEFAULT => "",
-      :leading => "Polaris-Stack--alignmentLeading",
-      :trailing => "Polaris-Stack--alignmentTrailing",
-      :center => "Polaris-Stack--alignmentCenter",
-      :fill => "Polaris-Stack--alignmentFill",
-      :baseline => "Polaris-Stack--alignmentBaseline"
+      :leading => "Polaris-LegacyStack--alignmentLeading",
+      :trailing => "Polaris-LegacyStack--alignmentTrailing",
+      :center => "Polaris-LegacyStack--alignmentCenter",
+      :fill => "Polaris-LegacyStack--alignmentFill",
+      :baseline => "Polaris-LegacyStack--alignmentBaseline"
     }
     ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
 
     DISTRIBUTION_DEFAULT = :default
     DISTRIBUTION_MAPPINGS = {
       DISTRIBUTION_DEFAULT => "",
-      :equal_spacing => "Polaris-Stack--distributionEqualSpacing",
-      :leading => "Polaris-Stack--distributionLeading",
-      :trailing => "Polaris-Stack--distributionTrailing",
-      :center => "Polaris-Stack--distributionCenter",
-      :fill => "Polaris-Stack--distributionFill",
-      :fill_evenly => "Polaris-Stack--distributionFillEvenly"
+      :equal_spacing => "Polaris-LegacyStack--distributionEqualSpacing",
+      :leading => "Polaris-LegacyStack--distributionLeading",
+      :trailing => "Polaris-LegacyStack--distributionTrailing",
+      :center => "Polaris-LegacyStack--distributionCenter",
+      :fill => "Polaris-LegacyStack--distributionFill",
+      :fill_evenly => "Polaris-LegacyStack--distributionFillEvenly"
     }
     DISTRIBUTION_OPTIONS = DISTRIBUTION_MAPPINGS.keys
 
     SPACING_DEFAULT = :default
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
-      :extra_tight => "Polaris-Stack--spacingExtraTight",
-      :tight => "Polaris-Stack--spacingTight",
-      :base_tight => "Polaris-Stack--spacingBaseTight",
-      :loose => "Polaris-Stack--spacingLoose",
-      :extra_loose => "Polaris-Stack--spacingExtraLoose",
-      :none => "Polaris-Stack--spacingNone"
+      :extra_tight => "Polaris-LegacyStack--spacingExtraTight",
+      :tight => "Polaris-LegacyStack--spacingTight",
+      :base_tight => "Polaris-LegacyStack--spacingBaseTight",
+      :loose => "Polaris-LegacyStack--spacingLoose",
+      :extra_loose => "Polaris-LegacyStack--spacingExtraLoose",
+      :none => "Polaris-LegacyStack--spacingNone"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
@@ -51,12 +51,12 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Stack",
+        "Polaris-LegacyStack",
         ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)],
         DISTRIBUTION_MAPPINGS[fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)],
         SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
-        "Polaris-Stack--vertical": vertical,
-        "Polaris-Stack--noWrap": !wrap
+        "Polaris-LegacyStack--vertical": vertical,
+        "Polaris-LegacyStack--noWrap": !wrap
       )
     end
   end

data/app/components/polaris/subheading_component.rb

@@ -10,15 +10,11 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = element
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Subheading"
-      )
+      @element = element
     end
 
     def call
-      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      render(Polaris::TextComponent.new(as: @element, variant: :headingXs, **@system_arguments)) { content }
     end
   end
 end

data/app/components/polaris/tabs/tab_component.html.erb

@@ -1,6 +1,6 @@
-<li class="Polaris-Tabs__TabContainer" role="presentation">
+<li class="Polaris-LegacyTabs__TabContainer" role="presentation">
   <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
-    <span class="Polaris-Tabs__Title">
+    <span class="Polaris-LegacyTabs__Title">
       <%= @title %>
       <% if badge.present? %>
         <%= badge %>

data/app/components/polaris/tabs/tab_component.rb

@@ -26,8 +26,8 @@ class Polaris::Tabs::TabComponent < Polaris::Component
       end
       opts[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Tabs__Tab",
-        "Polaris-Tabs__Tab--selected": @active
+        "Polaris-LegacyTabs__Tab",
+        "Polaris-LegacyTabs__Tab--selected": @active
       )
     end
   end

data/app/components/polaris/tabs_component.html.erb

@@ -1,4 +1,10 @@
-<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+<%= polaris_box(
+  border_block_end_width: "1",
+  border_color: "border-subdued",
+  padding_inline_start: "2",
+  padding_inline_end: "2",
+  **wrapper_arguments
+) do %>
   <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
     <% tabs.each do |tab| %>
       <%= tab %>

data/app/components/polaris/tabs_component.rb

@@ -13,7 +13,7 @@ module Polaris
         opts[:tag] = "div"
         opts[:classes] = class_names(
           @wrapper_arguments[:classes],
-          "Polaris-Tabs__Wrapper"
+          "Polaris-LegacyTabs__Wrapper"
         )
       end
     end
@@ -24,8 +24,8 @@ module Polaris
         opts[:role] = "tablist"
         opts[:classes] = class_names(
           @system_arguments[:classes],
-          "Polaris-Tabs",
-          "Polaris-Tabs--fitted": @fitted
+          "Polaris-LegacyTabs",
+          "Polaris-LegacyTabs--fitted": @fitted
         )
       end
     end

data/app/components/polaris/text_component.html.erb

@@ -0,0 +1,3 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <%= content %>
+<% end %>

data/app/components/polaris/text_component.rb

@@ -0,0 +1,132 @@
+# frozen_sting_literal: true
+
+module Polaris
+  class TextComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    attr_reader :as, :variant, :alignment, :font_weight, :color
+
+    AS_DEFAULT = :p
+    AS_OPTIONS = %i[
+      h1
+      h2
+      h3
+      h4
+      h5
+      h6
+      p
+      span
+      legend
+    ]
+    validates :as, inclusion: {in: AS_OPTIONS}
+
+    VARIANT_DEFAULT = :bodyMd
+    VARIANT_MAPPINGS = {
+      headingXs: "Polaris-Text--headingXs",
+      headingSm: "Polaris-Text--headingSm",
+      headingMd: "Polaris-Text--headingMd",
+      headingLg: "Polaris-Text--headingLg",
+      headingXl: "Polaris-Text--headingXl",
+      heading2xl: "Polaris-Text--heading2xl",
+      heading3xl: "Polaris-Text--heading3xl",
+      heading4xl: "Polaris-Text--heading4xl",
+      bodySm: "Polaris-Text--bodySm",
+      bodyMd: "Polaris-Text--bodyMd",
+      bodyLg: "Polaris-Text--bodyLg"
+    }
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+    validates :variant, inclusion: {in: VARIANT_OPTIONS}
+
+    ALIGNMENT_MAPPINGS = {
+      start: "Polaris-Text--start",
+      center: "Polaris-Text--center",
+      end: "Polaris-Text--end",
+      justify: "Polaris-Text--justify"
+    }
+    ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
+    validates :alignment, inclusion: {in: ALIGNMENT_OPTIONS}, allow_nil: true
+
+    FONT_WEIGHT_MAPPINGS = {
+      regular: "Polaris-Text--regular",
+      medium: "Polaris-Text--medium",
+      semibold: "Polaris-Text--semibold",
+      bold: "Polaris-Text--bold"
+    }
+    FONT_WEIGHT_VARIANT_MAPPINGS = {
+      headingXs: :semibold,
+      headingSm: :semibold,
+      headingMd: :semibold,
+      headingLg: :semibold,
+      headingXl: :semibold,
+      heading2xl: :semibold,
+      heading3xl: :semibold,
+      heading4xl: :bold,
+      bodySm: :regular,
+      bodyMd: :regular,
+      bodyLg: :regular
+    }
+    FONT_WEIGHT_OPTIONS = FONT_WEIGHT_MAPPINGS.keys
+    validates :font_weight, inclusion: {in: FONT_WEIGHT_OPTIONS}, allow_nil: true
+
+    COLOR_MAPPINGS = {
+      success: "Polaris-Text--success",
+      critical: "Polaris-Text--critical",
+      warning: "Polaris-Text--warning",
+      subdued: "Polaris-Text--subdued",
+      text_inverse: "Polaris-Text__text--inverse"
+    }
+    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+    validates :color, inclusion: {in: COLOR_OPTIONS}, allow_nil: true
+
+    def initialize(
+      alignment: nil,
+      as: AS_DEFAULT,
+      break_word: false,
+      color: nil,
+      font_weight: nil,
+      truncate: false,
+      variant: VARIANT_DEFAULT,
+      visually_hidden: false,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+
+      @alignment = alignment
+      @color = color
+      @font_weight = font_weight
+      @variant = variant
+
+      @system_arguments[:tag] = as || (visually_hidden ? :span : :p)
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Text--root",
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)],
+        alignment_class,
+        color_class,
+        font_weight_class,
+        "Polaris-Text--block": alignment || truncate,
+        "Polaris-Text--break": break_word,
+        "Polaris-Text--truncate": truncate,
+        "Polaris-Text--visuallyHidden": visually_hidden
+      )
+    end
+
+    def alignment_class
+      return nil if @alignment.nil?
+
+      ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @alignment, ALIGNMENT_OPTIONS.first)]
+    end
+
+    def color_class
+      return nil if @color.nil?
+
+      COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, @color, COLOR_OPTIONS.first)]
+    end
+
+    def font_weight_class
+      return FONT_WEIGHT_MAPPINGS[FONT_WEIGHT_VARIANT_MAPPINGS[@variant]] if @font_weight.nil?
+
+      FONT_WEIGHT_MAPPINGS[fetch_or_fallback(FONT_WEIGHT_OPTIONS, @font_weight, FONT_WEIGHT_OPTIONS.first)]
+    end
+  end
+end

data/app/components/polaris/text_field_component.rb

@@ -48,6 +48,7 @@ module Polaris
       label_hidden: false,
       label_action: nil,
       disabled: false,
+      readonly: false,
       required: false,
       help_text: nil,
       error: false,
@@ -78,6 +79,7 @@ module Polaris
       @label_hidden = label_hidden
       @label_action = label_action
       @disabled = disabled
+      @readonly = readonly
       @required = required
       @help_text = help_text
       @error = error
@@ -112,6 +114,7 @@ module Polaris
           opts[:classes],
           "Polaris-TextField",
           "Polaris-TextField--disabled": @disabled,
+          "Polaris-TextField--readOnly": @readonly,
           "Polaris-TextField--error": @error,
           "Polaris-TextField--hasValue": @value.present?,
           "Polaris-TextField--multiline": @multiline
@@ -128,6 +131,7 @@ module Polaris
       default_options = {
         value: @value,
         disabled: @disabled,
+        readonly: @readonly,
         required: @required,
         placeholder: @placeholder,
         maxlength: @maxlength,