refactor: 💡 add support for named block content in form actions (#1746)

* refactor: 💡 add support for named block content in form actions

✅ Closes: ICU-9507

* refactor: 💡 remove yielded variables

addons/core/addon/components/form/authenticate/details/index.hbs

@@ -33,9 +33,14 @@
     <F.Label>{{t 'form.password.label'}}</F.Label>
   </Hds::Form::TextInput::Field>
 
-  <form.actions
-    @submitText={{t 'actions.authenticate'}}
-    @showCancel={{false}}
-  />
-
+  <form.actions>
+    <:actions>
+      <Hds::Button
+        @text={{t 'actions.authenticate'}}
+        @isFullWidth={{true}}
+        disabled={{form.disabled}}
+        type='submit'
+      />
+    </:actions>
+  </form.actions>
 </Rose::Form>

addons/core/addon/components/form/authenticate/oidc/index.hbs

@@ -9,10 +9,14 @@
   @disabled={{@disabled}}
   as |form|
 >
-
-  <form.actions
-    @submitText={{t 'actions.authenticate'}}
-    @showCancel={{false}}
-  />
-
+  <form.actions>
+    <:actions>
+      <Hds::Button
+        @text={{t 'actions.authenticate'}}
+        @isFullWidth={{true}}
+        disabled={{form.disabled}}
+        type='submit'
+      />
+    </:actions>
+  </form.actions>
 </Rose::Form>

addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs

@@ -4,9 +4,13 @@
 }}
 
 <Hds::ButtonSet class='rose-form-actions' ...attributes>
-  <Hds::Button
-    @text={{@enableEditText}}
-    @color='secondary'
-    {{on 'click' @enableEdit}}
-  />
+  {{#if (has-block 'edit')}}
+    {{yield to='edit'}}
+  {{else}}
+    <Hds::Button
+      @text={{@enableEditText}}
+      @color='secondary'
+      {{on 'click' @enableEdit}}
+    />
+  {{/if}}
 </Hds::ButtonSet>

addons/rose/addon/components/rose/form/actions/index.hbs

@@ -4,17 +4,21 @@
 }}
 
 <Hds::ButtonSet class='rose-form-actions' ...attributes>
-  <Hds::Button
-    @text={{@submitText}}
-    disabled={{@submitDisabled}}
-    type='submit'
-  />
-  {{#if this.showCancel}}
+  {{#if (has-block 'actions')}}
+    {{yield to='actions'}}
+  {{else}}
     <Hds::Button
-      @text={{@cancelText}}
-      @color='secondary'
-      disabled={{@cancelDisabled}}
-      {{on 'click' @cancel}}
+      @text={{@submitText}}
+      disabled={{@submitDisabled}}
+      type='submit'
     />
+    {{#if this.showCancel}}
+      <Hds::Button
+        @text={{@cancelText}}
+        @color='secondary'
+        disabled={{@cancelDisabled}}
+        {{on 'click' @cancel}}
+      />
+    {{/if}}
   {{/if}}
 </Hds::ButtonSet>

ui/admin/app/styles/app.scss

@@ -168,14 +168,6 @@
   }
 }
 
-.rose-frame {
-  .rose-form-actions {
-    .hds-button {
-      width: 100%;
-    }
-  }
-}
-
 .rose-dialog-cover {
   svg {
     max-width: 20rem;

ui/desktop/app/styles/app.scss

@@ -286,12 +286,6 @@
   .branded-card-description {
     margin-bottom: sizing.rems(l);
   }
-
-  .rose-form-actions {
-    .hds-button {
-      width: 100%;
-    }
-  }
 }
 
 @media (max-width: media.width(medium)) {

ui/desktop/app/templates/cluster-url.hbs

@@ -23,7 +23,17 @@
         @helperText={{t 'form.cluster-url.description'}}
         {{autofocus}}
       />
-      <form.actions @submitText={{t 'actions.submit'}} @showCancel={{false}} />
+
+      <form.actions>
+        <:actions>
+          <Hds::Button
+            @text={{t 'actions.submit'}}
+            @isFullWidth={{true}}
+            disabled={{form.disabled}}
+            type='submit'
+          />
+        </:actions>
+      </form.actions>
     </Rose::Form>
   </BrandedCard>
 </main>