bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into unstubbing

Browse Source 
* main:
  Bump proportionally
  Insure text enlarges on perma
  Stub admin switch
  Refine layout
  Tighten up list view
  Font sizing tweaks
  Polish
  Rework Workflows creation and editing flows
  Stub everyone switch
This commit is contained in:
Jose Farias
2024-11-21 19:58:31 -06:00
parent f266e46b57 b5291acf7c
commit 3ef37ca014
17 changed files with 197 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/crown.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m24 6.25a3 3 0 1 0 -4.258 2.714c-.47 1.376-1.536 3.786-3.242 3.786-2.3 0-2.967-3.142-3.53-6.175a3 3 0 1 0 -1.94 0c-.56 3.1-1.239 6.175-3.53 6.175-1.706 0-2.772-2.41-3.242-3.786a3.008 3.008 0 1 0 -2.129.141l1.635 9.809a1 1 0 0 0 .986.836h14.5a1 1 0 0 0 .986-.836l1.635-9.809a2.992 2.992 0 0 0 2.129-2.855z"/><path d="m19.25 21.25h-14.5a1 1 0 0 0 0 2h14.5a1 1 0 0 0 0-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 446 B

app/assets/images/everyone.svg
+1
View File
@@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.1.6c1.4 0 2.6 1.2 2.6 2.6s-1.1 2.5-2.6 2.5-2.5-1.1-2.5-2.5 1.1-2.6 2.5-2.6m0 6c2.8 0 5.1 1.2 5.1 2.6v1.1h-10.2v-1.1c0-1.5 2.3-2.6 5.1-2.6z"/><path d="m18.9.6c1.4 0 2.6 1.2 2.6 2.6s-1.2 2.6-2.6 2.6-2.6-1.2-2.6-2.6 1.1-2.6 2.6-2.6m0 6c2.8 0 5.1 1.2 5.1 2.6v1.1h-10.3v-1.1c0-1.5 2.3-2.6 5.2-2.6z"/><path d="m5.1 14.3c1.4 0 2.6 1.2 2.6 2.6s-1.2 2.6-2.6 2.6-2.6-1.2-2.6-2.6 1.2-2.6 2.6-2.6m0 6c2.8 0 5.1 1.2 5.1 2.6v1.1h-10.2v-1.1c0-1.5 2.3-2.6 5.1-2.6z"/><path d="m18.9 14.3c1.4 0 2.6 1.2 2.6 2.6s-1.2 2.6-2.6 2.6-2.6-1.2-2.6-2.6 1.1-2.6 2.6-2.6m0 6c2.8 0 5.1 1.2 5.1 2.6v1.1h-10.3v-1.1c0-1.5 2.3-2.6 5.2-2.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 720 B

app/assets/images/remove-med.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.5 20.5c.7.7 1.8.7 2.5 0l5.9-5.9 5.9 5.9c.7.7 1.8.7 2.5 0s.7-1.8 0-2.5l-5.9-5.9 5.9-5.9c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0l-5.9 5.9-5.8-6.1c-.7-.7-1.8-.7-2.5 0s-.7 1.8 0 2.5l5.9 5.9-5.9 5.9c-.7.7-.7 1.8 0 2.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

app/assets/stylesheets/bubbles.css
+7 -7
View File
@@ -315,7 +315,7 @@
-webkit-line-clamp: var(--lines, 5);
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 8cqi;
font-size: 9cqi;
hyphens: auto;
line-height: 1.2;
margin: auto;
@@ -344,11 +344,11 @@
}
.bubbles-list {
--bubble-size: 1.2em;
--bubble-size: 1.8em;
--bubble-shift: 15deg;
--hover-size: 0;
font-size: clamp(1rem, 1.8cqi, 2rem);
font-size: var(--text-medium);
max-inline-size: 80ch;
.bubble {
@@ -409,9 +409,9 @@
.bubble__shape {
background-color: var(--bubble-color);
block-size: 1.2em;
block-size: var(--bubble-size, 1.2em);
border-radius: var(--bubble-shape);
inline-size: 1.2em;
inline-size: var(--bubble-size, 1.2em);
pointer-events: none;
position: relative;
transform: rotate(var(--bubble-rotate));
@@ -419,10 +419,10 @@
z-index: 0;
.bubble & {
--bubble-size: 100%;
background-color: color(from var(--bubble-color) srgb r g b / 0.15);
border: var(--bubble-border-width) solid var(--bubble-color);
block-size: 100%;
inline-size: 100%;
}
.bubble:has(.bubble__link) & {
app/assets/stylesheets/utilities.css
+14 -5
View File
@@ -6,14 +6,23 @@
--block-space: 1rem;
--block-space-half: calc(var(--block-space) / 2);
--block-space-double: calc(var(--block-space) * 2);
/* Text sizes */
--text-x-small: 0.6rem;
--text-small: 0.8rem;
--text-medium: 1.2rem;
--text-large: 1.5rem;
--text-x-large: 1.8rem;
--text-xx-large: 2.4rem;
}
/* Text */
.txt-small { font-size: 0.8rem; }
.txt-medium { font-size: 1rem; }
.txt-large { font-size: 1.4rem; }
.txt-x-large { font-size: 1.8rem; }
.txt-xx-large { font-size: 2.4rem; }
.txt-x-small { font-size: var(--text-x-small); }
.txt-small { font-size: var(--text-small); }
.txt-medium { font-size: var(--text-medium); }
.txt-large { font-size: var(--text-large); }
.txt-x-large { font-size: var(--text-x-large); }
.txt-xx-large { font-size: var(--text-xx-large); }
.txt-align-center { text-align: center; }
.txt-align-start { text-align: start; }
app/views/accounts/users/_user.html.erb
+6
View File
@@ -7,6 +7,12 @@
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>">
<span class="for-screen-reader">Role: <%= true ? "Administrator" : "Member" %></span>
<%= image_tag "crown.svg", size: 20, aria: { hidden: "true" } %>
<%= check_box_tag :role, { data: { action: "form#submit" }, hidden: true, id: dom_id(user, :role) }, "administrator", "member" %>
</label>
<%# FIXME: Move this Current.user check to a stimulus controller that just checks for admin? or the like we so we can cache user list %>
<%= button_to account_user_path(user), method: :delete, class: "btn btn--small btn--negative flex-item-no-shrink",
disabled: !Current.user.can_remove?(user),
app/views/accounts/users/index.html.erb
+8 -6
View File
@@ -7,7 +7,14 @@
<span class="for-screen-reader">Go back</span>
<% end %>
<%= button_to session_path, method: :delete, class: "btn", form_class: "flex-item-justify-end" do %>
<h1 class="txt-large"><%= @page_title %></h1>
<%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
<%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Workflows</span>
<% end %>
<%= button_to session_path, method: :delete, class: "btn" do %>
<%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Sign out</span>
<% end %>
@@ -21,8 +28,3 @@
<div class="panel borderless center pad fill-none flex flex-column gap">
<%= render partial: "accounts/users/user", collection: @users %>
</div>
<div class="panel borderless center pad fill-none flex flex-column gap">
<h2>Workflows</h2>
<%= turbo_frame_tag :workflows, src: workflows_path %>
</div>
app/views/bubbles/list/_bubble.html.erb
+22 -20
View File
@@ -1,33 +1,35 @@
<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
<li class="flex align-center gap-half margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
<div class="bubble__shape flex-item-no-shrink"></div>
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>
<strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
<% end %>
<div class="flex flex-column">
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap min-width" do %>
<strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
<% end %>
<% if bubble.due_on.present? %>
<time class="txt-nowrap txt-small fill-black txt-reversed border-radius" style="background-color: <%= bubble.color %>; padding: 0.4em 1em;">
<strong>DUE:</strong> <%= bubble.due_on.strftime("%b %d") %>
</time>
<% end %>
<div class="flex align-end gap-half">
<% bubble.tags.each do |tag| %>
<%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
class: "btn btn--plain txt-small fill-transparent", style: "color: #{bubble.color}" %>
<% end %>
</div>
</div>
<div class="flex align-center gap flex-item-no-shrink">
<hr class="separator--horizontal flex-item-grow" aria-hidden="true" style="--border-color: var(--color-subtle-dark); --border-style: dashed" />
<div class="flex align-center gap-half flex-item-no-shrink">
<% bubble.assignees.each do |assignee| %>
<%= link_to bubbles_path(@filter.to_params.merge(assignee_ids: [ assignee.id ])), class: "btn avatar txt-small" do %>
<%= link_to bubbles_path(@filter.to_params.merge(assignee_ids: [ assignee.id ])), class: "btn avatar txt-x-small" do %>
<%= avatar_image_tag assignee, loading: :lazy %>
<% end %>
<% end %>
</div>
<small class="flex align-center gap flex-item-no-shrink">
<% bubble.tags.each do |tag| %>
<%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
class: "btn btn--plain", style: "color: #{bubble.color}" %>
<% end %>
<% if bubble.due_on.present? %>
<time class="txt-nowrap txt-small fill-black txt-reversed border-radius" style="background-color: <%= bubble.color %>; padding: 0.3em 0.6em;">
<strong>DUE:</strong> <%= bubble.due_on.strftime("%b %d") %>
</time>
<% end %>
<%= tag.time bubble.created_at, class: "txt-nowrap flex-item-justify-end" do %>
<%= bubble.created_at.strftime("%b %d") %>
<% end %>
</small>
</li>
app/views/bubbles/stage_pickers/new.html.erb
+3 -2
View File
@@ -3,11 +3,12 @@
<aside class="position-relative border pad border-radius" style="--bubble-color: <%= @bubble.color %>"
data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<div class="flex align-center justify-start gap-half">
<button class="btn txt-small" data-action="click->dialog#toggle" data-dialog-modal-value="true">
<button class="btn txt-small borderless" data-action="click->dialog#toggle" data-dialog-modal-value="true">
<%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Choose a workflow</span>
</button>
<strong class="txt-large"><%= @selected_workflow.name %></strong>
<strong class="txt-medium"><%= @selected_workflow.name %></strong>
<span class="btn btn--placeholder" aria-hidden="true"></span>
</div>
<dialog class="workflow__popup panel fill-white shadow" data-dialog-target="dialog">
app/views/buckets/edit.html.erb
+23
View File
@@ -30,6 +30,29 @@
<section class="margin-block pad-inline fill-shade border-radius">
<menu class="flex flex-column gap margin-none pad txt-medium" data-controller="filter" data-filter-active-class="filter--active" data-filter-selected-class="selected">
<li class="flex align-center gap margin-none">
<figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 4ch;">
<%= image_tag "everyone.svg", aria: { hidden: "true" }, class: "colorize--black" %>
<span class="for-screen-reader">Everyone</span>
</figure>
<div class="min-width">
<div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
<%= link_to nil, class: "btn--faux flex-inline", tabindex: "-1" do %>
<label class="switch">
<input type="checkbox" lass="switch__input">
<span class="switch__btn round"></span>
<span class="for-screen-reader">Give everyone access to this project</span>
</label>
<% end %>
</li>
<hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
<% if User.active.count > 20 %>
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
<% end %>
app/views/workflows/_workflow.html.erb
+8 -15
View File
@@ -1,27 +1,20 @@
<%= turbo_frame_tag workflow do %>
<article>
<div class="flex pad gap align-center justify-space-between">
<article class="panel" style="--panel-size: 40ch;">
<div class="flex gap-half align-center justify-starts">
<%= turbo_frame_tag dom_id(workflow, :header) do %>
<%= link_to edit_workflow_path(workflow), class: "btn btn--small" do %>
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Edit <%= workflow.name %></span>
<% end %>
<h3 class="txt-nowrap margin-none"><%= workflow.name %></h3>
<%= button_to workflow_path(workflow), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Delete <%= workflow.name %></span>
<%= link_to edit_workflow_path(workflow) do %>
<h3 class="txt-large txt-nowrap margin-none overflow-ellipsis"><%= workflow.name %></h3>
<% end %>
<% end %>
</div>
<hr class="separator--horizontal flex-item-grow" aria-hidden="true" style="--border-color: var(--color-bg)">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
<div class="flex flex-column pad gap">
<div class="flex flex-column gap margin-block-start">
<%= turbo_frame_tag dom_id(workflow, :stages) do %>
<%= render partial: "workflows/stages/stage", collection: workflow.stages %>
<%= link_to new_workflow_stage_path(workflow), class: "btn btn--positive btn--small" do %>
<%= link_to new_workflow_stage_path(workflow), class: "btn btn--small" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">New stage</span>
<% end %>
app/views/workflows/edit.html.erb
+20 -13
View File
@@ -1,17 +1,24 @@
<%= turbo_frame_tag dom_id(@workflow, :header) do %>
<%= form_with model: @workflow, url: workflow_path(@workflow) do |form| %>
<div class="flex pad gap justify-space-between">
<%= form.text_field :name, required: true, autofocus: true %>
<div class="flex align-center gap-half">
<%= form_with model: @workflow, url: workflow_path(@workflow), id: dom_id(@workflow, :form), class: "full-width" do |form| %>
<h3 class="txt-large margin-none">
<%= form.text_field :name, required: true, autofocus: true, class: "input full-width", style: "--input-padding: 0.2em 0.5em;" %>
</h3>
<% end %>
<div class="flex gap">
<%= form.button type: :submit, class: "btn btn--small" do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<% end %>
<%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@workflow, :form) do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Save</span>
<% end %>
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
<% end %>
</div>
</div>
<% end %>
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Cancel</span>
<% end %>
<%= button_to workflow_path(@workflow), method: :delete, class: "btn btn--small btn--negative", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Delete <%= @workflow.name %></span>
<% end %>
</div>
<% end %>
app/views/workflows/index.html.erb
+25 -3
View File
@@ -1,7 +1,29 @@
<% @page_title = "Workflows" %>
<% content_for :header do %>
<nav>
<%= link_to account_users_path, class: "btn flex-item-justify-start" do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Go back</span>
<% end %>
<span class="btn btn--placeholder"></span>
<h1 class="txt-large"><%= @page_title %></h1>
<%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new workflow</span>
<% end %>
<%= button_to session_path, method: :delete, class: "btn" do %>
<%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Sign out</span>
<% end %>
</nav>
<% end %>
<%= turbo_frame_tag :workflows do %>
<section class="flex flex-column gap fill-shade border-radius">
<section class="center justify-center flex flex-wrap gap">
<%= render partial: "workflows/workflow", collection: @workflows %>
</section>
<%= link_to "New workflow", new_workflow_path, class: "btn" %>
<% end %>
app/views/workflows/new.html.erb
+23 -5
View File
@@ -1,6 +1,24 @@
<%= turbo_frame_tag :workflows do %>
<%= form_with model: @workflow, url: workflows_path do |form| %>
<%= form.text_field :name, required: true, autofocus: true %>
<%= form.submit %>
<% end %>
<% @page_title = "Create a new Workflow" %>
<% content_for :header do %>
<nav>
<%= link_to workflows_path, class: "btn flex-item-justify-start" do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Go back</span>
<% end %>
<h1 class="txt-large center"><%= @page_title %></h1>
<span class="btn btn--placeholder flex-item-justify-end"></span>
</nav>
<% end %>
<%= turbo_frame_tag :workflows do %>
<article class="panel center margin-block-start flex flex-column gap" style="view-transition-name: <%= dom_id(@workflow) %>">
<%= form_with model: @workflow, url: workflows_path do |form| %>
<%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…" %>
<%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-large" do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create Workflow</span>
<% end %>
<% end %>
</article>
<% end %>
app/views/workflows/stages/_stage.html.erb
+3 -15
View File
@@ -1,19 +1,7 @@
<div class="flex gap align-center justify-space-between">
<div class="flex gap-half align-center justify-space-between">
<%= turbo_frame_tag stage do %>
<h4 class="txt-nowrap"><%= stage.name %></h4>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<%= link_to edit_workflow_stage_path(stage.workflow, stage), class: "btn btn--small" do %>
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Edit <%= stage.name %></span>
<% end %>
<% if stage_counter >= 1 %>
<%= button_to workflow_stage_path(stage.workflow, stage), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: dom_id(stage.workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Delete <%= stage.name %></span>
<% end %>
<%= link_to edit_workflow_stage_path(stage.workflow, stage) do %>
<strong class="txt-nowrap overflow-ellipsis"><%= stage.name %></strong>
<% end %>
<% end %>
</div>
app/views/workflows/stages/edit.html.erb
+22 -14
View File
@@ -1,17 +1,25 @@
<%= turbo_frame_tag @stage do %>
<%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage) do |form| %>
<div class="flex pad gap justify-space-between">
<%= form.text_field :name, required: true, autofocus: true %>
<div class="flex gap">
<%= form.button type: :submit, class: "btn btn--small" do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<% end %>
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
<% end %>
</div>
</div>
<%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage), id: dom_id(@stage, :form), class: "full-width" do |form| %>
<%= form.text_field :name, required: true, autofocus: true, class: "input full-width" %>
<% end %>
<div class="flex align-center gap-half">
<%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@stage, :form) do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Save</span>
<% end %>
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Cancel</span>
<% end %>
<% if @stage.workflow.stages.many? %>
<%= button_to workflow_stage_path(@stage.workflow, @stage), method: :delete, class: "btn btn--negative btn--small",
data: { turbo_frame: dom_id(@workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Delete <%= @stage.name %></span>
<% end %>
<% end %>
</div>
<% end %>
app/views/workflows/stages/new.html.erb
+10 -3
View File
@@ -1,6 +1,13 @@
<%= turbo_frame_tag dom_id(@stage.workflow, :stages) do %>
<%= form_with model: @stage, url: workflow_stages_path(@stage.workflow) do |form| %>
<%= form.text_field :name, required: true, autofocus: true %>
<%= form.submit %>
<%= form_with model: @stage, url: workflow_stages_path(@stage.workflow), class: "flex align-center gap-half" do |form| %>
<%= form.text_field :name, required: true, autofocus: true, class: "input" %>
<%= form.button type: :submit, class: "btn btn--positive txt-small" do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Add stage</span>
<% end %>
<%= link_to workflow_path(@workflow), class: "btn btn--small" do %>
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Cancel</span>
<% end %>
<% end %>
<% end %>