openproject-primer_view_components 0.12.1 → 0.13.0

data/previews/primer/alpha/action_menu_preview/with_actions.html.erb

@@ -8,14 +8,15 @@
 
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Trigger" } %>
-  <% component.with_item(label: "Alert", tag: :button, id: "alert-item") %>
-  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }) %>
-  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }) %>
+  <% component.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
+  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
   <% component.with_item(
     label: "Submit form",
-    href: action_menu_form_action_path,
+    href: action_menu_form_action_path(format: route_format),
     form_arguments: {
       name: "foo", value: "bar", method: :post
-    }
+    },
+    disabled: disable_items
   ) %>
 <% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -216,7 +216,10 @@ module Primer
 
       # @label With actions
       #
-      def with_actions; end
+      # @param disable_items toggle
+      def with_actions(disable_items: false, route_format: :html)
+        render_with_template(locals: { disable_items: disable_items, route_format: route_format })
+      end
 
       # @label Single select form
       #
@@ -224,6 +227,12 @@ module Primer
         render_with_template(locals: { route_format: route_format })
       end
 
+      # @label Single select form items
+      #
+      def single_select_form_items(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
       # @label Multiple select form
       #
       def multiple_select_form(route_format: :html)

data/previews/primer/alpha/check_box_preview.rb

@@ -24,6 +24,7 @@ module Primer
       )
         system_arguments = {
           name: name,
+          id: id,
           value: value,
           label: label,
           caption: caption,

data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
+  <% d.with_show_button { "Show Dialog" } %>
+  <% d.with_body do %>
+    <form>
+      <input type="text" placeholder="This element is focused on open" autofocus>
+    </form>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -166,6 +166,11 @@ module Primer
                                show_divider: show_divider
                              })
       end
+
+      # @label Autofocus element with autofocus attribute
+      def autofocus_element
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/alpha/radio_button_preview.rb

@@ -24,6 +24,7 @@ module Primer
       )
         system_arguments = {
           name: name,
+          id: id,
           value: value,
           label: label,
           caption: caption,

data/previews/primer/alpha/segmented_control_preview.rb

@@ -100,6 +100,41 @@ module Primer
       end
       # @!endgroup
 
+      # @!group Trailing Label
+      # @label Size small
+      # @snapshot
+      def trailing_label_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def trailing_label_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def trailing_label_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+      # @!endgroup
+
       # @!group Icons only
       # @label Size small
       # @snapshot

data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb

@@ -0,0 +1,23 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm focus")) do |d| %>
+  <%= render(Primer::Alpha::Dialog::Body.new()) do %>
+    Are you sure you want to focus the input?
+  <% end %>
+  <%= render(Primer::Alpha::Dialog::Footer.new()) do %>
+    <%= render(Primer::Beta::Button.new(id: "yes-button", data: { "close-dialog-id": "my-dialog" })) { "Yes" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary, data: { "close-dialog-id": "my-dialog" })) { "Yes but in green" } %>
+  <% end %>
+  <% d.with_show_button do |b| %>
+    Focus input
+    <% b.with_tooltip(text: "This is a tooltip in an Overlay") %>
+  <% end %>
+<% end %>
+<label>
+  An input
+  <input type="text" id="input">
+</label>
+<script>
+  document.querySelector('#my-dialog').addEventListener('cancel', function () {
+    console.log('!!')
+    setTimeout(() => document.querySelector('#input').focus(), 0);
+  });
+</script>

data/previews/primer/alpha/tooltip_preview.rb

@@ -78,11 +78,16 @@ module Primer
       # @!endgroup
 
       # @label Tooltip inside Primer::Alpha::Overlay
-      def tooltip_inside_primer_overlay(direction: :s, tooltip_text: "You can press a button")
+      def tooltip_inside_primer_overlay
         render_with_template(
           locals: {}
         )
       end
+
+      # @label Tooltip with button moving focus to input
+      def tooltip_with_dialog_moving_focus_to_input
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview.rb

@@ -55,16 +55,16 @@ module Primer
       # @snapshot
       def all_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
-          component.with_button(id: "button-1", tag: :button) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-1", tag: :button) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 1"
           end
-          component.with_button(id: "button-2", tag: :a) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-2", tag: :a) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 2"
           end
-          component.with_button(id: "button-3", tag: :summary) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-3", tag: :summary) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 3"
           end
         end

data/previews/primer/beta/button_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param block toggle
       # @param disabled toggle
+      # @param inactive toggle
       # @param align_content select [center, start]
       # @param tag select [a, summary, button]
       def playground(
@@ -27,7 +28,8 @@ module Primer
         id: "button-preview",
         align_content: :center,
         tag: :button,
-        disabled: false
+        disabled: false,
+        inactive: false
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -36,7 +38,8 @@ module Primer
                  id: id,
                  align_content: align_content,
                  tag: tag,
-                 disabled: disabled
+                 disabled: disabled,
+                 inactive: inactive
                )) do |_c|
           "Button"
         end
@@ -341,6 +344,21 @@ module Primer
                                align_content: align_content
                              })
       end
+
+      # @label Inactive
+      # @param inactive toggle
+      # @snapshot
+      def inactive(
+        id: "button-preview",
+        inactive: true
+      )
+        render(Primer::Beta::Button.new(
+                 id: id,
+                 inactive: inactive
+               )) do |_c|
+          "Button"
+        end
+      end
     end
   end
 end

data/previews/primer/beta/icon_button_preview.rb

@@ -9,6 +9,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
+      # @param inactive toggle
       # @param tag select [a, summary, button]
       # @param icon [Symbol] octicon
       # @param show_tooltip toggle
@@ -18,6 +19,7 @@ module Primer
         id: "button-preview",
         tag: :button,
         disabled: false,
+        inactive: false,
         icon: :plus,
         aria_label: "Button",
         show_tooltip: true
@@ -28,6 +30,7 @@ module Primer
                  id: id,
                  tag: tag,
                  disabled: disabled,
+                 inactive: inactive,
                  icon: icon,
                  "aria-label": aria_label,
                  show_tooltip: show_tooltip

data/static/arguments.json

@@ -46,7 +46,18 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
     "parameters": [
-
+      {
+        "name": "item_content",
+        "type": "String",
+        "default": "N/A",
+        "description": "The content to render inside the item."
+      },
+      {
+        "name": "item_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
     ]
   },
   {
@@ -3117,6 +3128,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/classes.json

@@ -507,6 +507,18 @@
   "SegmentedControl--fullWidth": [
     "Primer::Alpha::SegmentedControl"
   ],
+  "SegmentedControl--iconOnly": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--large": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--medium": [
+    "Primer::Alpha::SegmentedControl"
+  ],
+  "SegmentedControl--small": [
+    "Primer::Alpha::SegmentedControl"
+  ],
   "SegmentedControl-item": [
     "Primer::Alpha::SegmentedControl"
   ],

data/static/constants.json

@@ -544,9 +544,20 @@
   "Primer::Alpha::RadioButtonGroup": {
   },
   "Primer::Alpha::SegmentedControl": {
+    "DEFAULT_SIZE": "medium",
     "FULL_WIDTH_DEFAULT": false,
     "HIDE_LABELS_DEFAULT": false,
-    "Item": "Primer::Alpha::SegmentedControl::Item"
+    "Item": "Primer::Alpha::SegmentedControl::Item",
+    "SIZE_MAPPINGS": {
+      "small": "SegmentedControl--small",
+      "medium": "SegmentedControl--medium",
+      "large": "SegmentedControl--large"
+    },
+    "SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ]
   },
   "Primer::Alpha::SegmentedControl::Item": {
   },