feat(@dpc-sdp/ripple-ui-forms): remove fieldset update disabled styles

dpc-sdp · Feb 14, 2025 · 982fb1e · 982fb1e
1 parent 1df1309
commit 982fb1e
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 58 deletions.
diff --git a/packages/ripple-ui-core/src/components/button/RplButton.css b/packages/ripple-ui-core/src/components/button/RplButton.css
@@ -24,6 +24,11 @@
     text-decoration: underline;
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    text-decoration: none;
+  }
+
   @media (--rpl-bp-s) {
     width: auto;
   }
@@ -77,6 +82,10 @@
     &:hover {
       text-decoration: none;
     }
+
+    &:disabled {
+      text-decoration: underline;
+    }
   }
 
   /* stylelint-disable-next-line no-descending-specificity */

diff --git a/packages/ripple-ui-forms/cypress/support/component.ts b/packages/ripple-ui-forms/cypress/support/component.ts
@@ -27,6 +27,7 @@ import { plugin, defaultConfig } from '@formkit/vue'
 import { mount } from 'cypress/vue'
 import { h } from 'vue'
 import RplFauxForm from './components/RplFauxForm.vue'
+import { RplButton, RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
 
 Cypress.on('uncaught:exception', (err) => {
   // https://stackoverflow.com/a/50387233 Ignore Resize observer loop
@@ -43,7 +44,8 @@ Cypress.Commands.add('mount', (component, options = {}) => {
     {
       ...options,
       global: {
-        plugins: [[plugin, defaultConfig]]
+        plugins: [[plugin, defaultConfig]],
+        components: { RplButton, RplIcon }
       }
     }
   )

diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.css b/packages/ripple-ui-forms/src/components/RplForm/RplForm.css
@@ -12,12 +12,6 @@
   }
 }
 
-.rpl-form__submit-guard {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
 .rpl-form__messages {
   /* Formkit always adds an error message to the bottom of the form and there is currently no nice way to remove it */
   display: none;

diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.cy.ts b/packages/ripple-ui-forms/src/components/RplForm/RplForm.cy.ts
@@ -1,23 +1,40 @@
 import RplForm from './RplForm.vue'
+import { schema } from './fixtures/sample'
 
-describe('<RplFormAlert />', () => {
+describe('<RplForm />', () => {
   it('renders', () => {
     // see: https://test-utils.vuejs.org/guide/
     cy.mount(RplForm, {
       props: {
         id: 'test-form',
-        schema: [
-          {
-            $formkit: 'RplFormText',
-            name: 'last_name',
-            label: 'Last name',
-            help: 'Your surname',
-            id: 'last_name',
-            validation: '',
-            validationMessages: {}
-          }
-        ]
+        schema
       }
     })
+
+    cy.get('[name="name"]').should('not.be.disabled')
+    cy.get('[name="message"]').should('not.be.disabled')
+    cy.get('[name="colour"]').should('not.have.attr', 'aria-disabled', 'true')
+    cy.get('[name="pet"]').should('not.be.disabled')
+    cy.get('[name="terms"]').should('not.be.disabled')
+    cy.get('button[type="submit"]').should('not.be.disabled')
+    cy.get('button[type="reset"]').should('not.be.disabled')
+  })
+
+  it('form is disabled while submitting', () => {
+    cy.mount(RplForm, {
+      props: {
+        id: 'test-form',
+        schema,
+        submissionState: { status: 'submitting' }
+      }
+    })
+
+    cy.get('[name="name"]').should('be.disabled')
+    cy.get('[name="message"]').should('be.disabled')
+    cy.get('[name="colour"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[name="pet"]').should('be.disabled')
+    cy.get('[name="terms"]').should('be.disabled')
+    cy.get('button[type="submit"]').should('be.disabled')
+    cy.get('button[type="reset"]').should('be.disabled')
   })
 })
diff --git a/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue b/packages/ripple-ui-forms/src/components/RplForm/RplForm.vue
@@ -311,47 +311,43 @@ const plugins = computed(
     :config="rplFormConfig"
     :actions="false"
     :inputErrors="inputErrors"
+    :disabled="isFormSubmitting"
     novalidate
     @submit-invalid="submitInvalidHandler"
     @submit="submitHandler"
     @input="handleInput"
   >
-    <fieldset
-      class="rpl-form__submit-guard"
-      :disabled="submissionState.status === 'submitting'"
+    <RplFormAlert
+      v-if="errorSummaryMessages && errorSummaryMessages.length"
+      ref="errorSummaryRef"
+      status="error"
+      title="Form not submitted"
+      :fields="errorSummaryMessages"
+      data-component-type="form-error-summary"
+    />
+    <RplFormAlert
+      v-else-if="
+        submissionState.status === 'error' ||
+        submissionState.status === 'success'
+      "
+      ref="serverMessageRef"
+      :status="submissionState.status"
+      :title="submissionState.title"
+      data-component-type="form-server-message"
     >
-      <RplFormAlert
-        v-if="errorSummaryMessages && errorSummaryMessages.length"
-        ref="errorSummaryRef"
-        status="error"
-        title="Form not submitted"
-        :fields="errorSummaryMessages"
-        data-component-type="form-error-summary"
-      />
-      <RplFormAlert
-        v-else-if="
-          submissionState.status === 'error' ||
-          submissionState.status === 'success'
-        "
-        ref="serverMessageRef"
-        :status="submissionState.status"
-        :title="submissionState.title"
-        data-component-type="form-server-message"
-      >
-        <template #default>
-          <RplContent :html="submissionState.message" />
-        </template>
-      </RplFormAlert>
-      <slot name="aboveForm"></slot>
-      <slot :value="value">
-        <FormKitSchema
-          v-if="schema"
-          :schema="schema"
-          :data="data"
-        ></FormKitSchema>
-      </slot>
-      <slot name="belowForm" :value="value"></slot>
-    </fieldset>
+      <template #default>
+        <RplContent :html="submissionState.message" />
+      </template>
+    </RplFormAlert>
+    <slot name="aboveForm"></slot>
+    <slot :value="value">
+      <FormKitSchema
+        v-if="schema"
+        :schema="schema"
+        :data="data"
+      ></FormKitSchema>
+    </slot>
+    <slot name="belowForm" :value="value"></slot>
   </FormKit>
 </template>
 

diff --git a/packages/ripple-ui-forms/src/components/RplForm/fixtures/sample.ts b/packages/ripple-ui-forms/src/components/RplForm/fixtures/sample.ts
@@ -0,0 +1,65 @@
+export const schema = [
+  {
+    $formkit: 'RplFormText',
+    name: 'name',
+    label: 'Name',
+    id: 'name'
+  },
+  {
+    $formkit: 'RplFormTextarea',
+    name: 'message',
+    label: 'Message',
+    id: 'message'
+  },
+  {
+    $formkit: 'RplFormDropdown',
+    id: 'colour',
+    name: 'colour',
+    label: 'Colour',
+    options: [
+      {
+        id: 'Green',
+        value: 'Green',
+        label: 'Green'
+      },
+      {
+        id: 'Blue',
+        value: 'Blue',
+        label: 'Blue'
+      }
+    ]
+  },
+  {
+    $formkit: 'RplFormRadioGroup',
+    id: 'pet',
+    name: 'pet',
+    label: 'Pet',
+    options: [
+      {
+        id: 'dog',
+        value: 'dog',
+        label: 'Dog'
+      },
+      {
+        id: 'cat',
+        value: 'cat',
+        label: 'Cat'
+      }
+    ]
+  },
+  {
+    $formkit: 'RplFormCheckbox',
+    id: 'terms',
+    name: 'terms',
+    label: 'Terms',
+    checkboxLabel: 'I accept the terms'
+  },
+  {
+    $formkit: 'RplFormActions',
+    name: 'submit',
+    variant: 'filled',
+    label: 'Submit',
+    id: 'actions',
+    displayResetButton: true
+  }
+]
diff --git a/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue b/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue
@@ -84,6 +84,8 @@ onMounted(() => {
     onCaptchaElementReady()
   }
 })
+
+const isDisabled = computed(() => props.disabled || isFormSubmitting.value)
 </script>
 <template>
   <div v-if="captchaElementId" :id="captchaElementId"></div>
@@ -94,7 +96,7 @@ onMounted(() => {
       :id="id"
       :variant="variant"
       type="submit"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :icon-name="prefixIcon || suffixIcon"
       :icon-position="iconPosition"
       :busy="isFormSubmitting"
@@ -105,7 +107,7 @@ onMounted(() => {
       v-if="displayResetButton"
       variant="white"
       type="reset"
-      :disabled="disabled"
+      :disabled="isDisabled"
       class="rpl-form-actions__reset"
       iconName="icon-cancel-circle-filled"
       iconPosition="left"

diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts
@@ -346,10 +346,10 @@ describe('RplFormDropDown', () => {
     cy.get(option).click({ multiple: true })
     cy.get(toggle).click()
 
-    cy.get(moreLabel).contains('+7 more')
+    cy.get(moreLabel).contains('+8 more')
 
     cy.viewport(746, 680)
-    cy.get(moreLabel).contains('+9 more')
+    cy.get(moreLabel).contains('+10 more')
 
     cy.viewport(480, 680)
     cy.get(moreLabel).contains('+12 more')

diff --git a/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.css b/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.css
@@ -57,6 +57,10 @@
     cursor: not-allowed;
     color: var(--rpl-clr-neutral-300);
     border-color: var(--rpl-clr-neutral-200);
+
+    &::placeholder {
+      color: var(--rpl-clr-neutral-300);
+    }
   }
 
   &[type='date'] {

diff --git a/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.vue b/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.vue
@@ -137,6 +137,7 @@ const handleIncrement = () => {
         v-if="props.mode"
         class="rpl-form__input-dec rpl-u-focusable-outline"
         type="button"
+        :disabled="disabled"
         @click.prevent="handleDecrement"
       >
         <span class="rpl-u-visually-hidden">Decrease value</span>
@@ -168,6 +169,7 @@ const handleIncrement = () => {
         v-if="props.mode"
         class="rpl-form__input-inc rpl-u-focusable-outline"
         type="button"
+        :disabled="disabled"
         @click.prevent="handleIncrement"
       >
         <span class="rpl-u-visually-hidden">Increase value</span>
@@ -207,6 +209,11 @@ const handleIncrement = () => {
     &:focus {
       border-color: var(--rpl-clr-dark);
     }
+
+    &:disabled {
+      color: var(--rpl-clr-neutral-300);
+      border-color: var(--rpl-clr-neutral-200);
+    }
   }
 
   input[type='number']::-webkit-inner-spin-button,
@@ -247,6 +254,15 @@ const handleIncrement = () => {
     &:hover .rpl-icon {
       color: var(--rpl-clr-primary);
     }
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--rpl-clr-neutral-200);
+
+      .rpl-icon {
+        color: var(--rpl-clr-neutral-300);
+      }
+    }
   }
 
   .rpl-form__input-inc {