chore: camelCase linting for properties

Author: Knorgias

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
         'wc/guard-super-call': 'off', // types will prevent you from calling the super if it's not in the base class, making the guard unnecessary
         'no-await-in-loop': 'off',
         'import/no-unresolved': 'off', // eslint not smart enough atm to understand package exports maps
+        camelcase: ['error', { properties: 'always' }],
       },
       parserOptions: {
         ecmaVersion: 'latest',

docs/components/form/use-cases.md

@@ -46,12 +46,12 @@ export const formSubmit = () => {
     <lion-form @submit=${submitHandler}>
       <form @submit=${ev => ev.preventDefault()}>
         <lion-input
-          name="first_name"
+          name="firstName"
           label="First Name"
           .validators="${[new Required()]}"
         ></lion-input>
         <lion-input
-          name="last_name"
+          name="lastName"
           label="Last Name"
           .validators="${[new Required()]}"
         ></lion-input>

docs/fundamentals/systems/form/use-cases.md

@@ -42,14 +42,14 @@ export const main = () => {
   return html`
     <lion-form>
       <form>
-        <lion-fieldset name="full_name">
+        <lion-fieldset name="fullName">
           <lion-input
-            name="first_name"
+            name="firstName"
             label="First Name"
             .validators="${[new Required()]}"
           ></lion-input>
           <lion-input
-            name="last_name"
+            name="lastName"
             label="Last Name"
             .validators="${[new Required()]}"
           ></lion-input>

docs/fundamentals/systems/overlays/assets/umbrella-form.js

@@ -36,14 +36,14 @@ export class UmbrellaForm extends LitElement {
     return html`
       <lion-form>
         <form>
-          <lion-fieldset name="full_name">
+          <lion-fieldset name="fullName">
             <lion-input
-              name="first_name"
+              name="firstName"
               label="First Name"
               .validators="${[new Required()]}"
             ></lion-input>
             <lion-input
-              name="last_name"
+              name="lastName"
               label="Last Name"
               .validators="${[new Required()]}"
             ></lion-input>

packages/ui/components/form-integrations/test/form-group-methods.test.js

@@ -45,7 +45,7 @@ import '@lion/ui/define/lion-validation-feedback.js';
  */
 
 const fullyPrefilledSerializedValue = {
-  full_name: { first_name: 'Lorem', last_name: 'Ipsum' },
+  fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
   date: '2000-12-12',
   datepicker: '2020-12-12',
   bio: 'Lorem',
@@ -69,7 +69,7 @@ const fullyPrefilledSerializedValue = {
 };
 
 const fullyChangedSerializedValue = {
-  full_name: { first_name: 'LoremChanged', last_name: 'IpsumChanged' },
+  fullName: { firstName: 'LoremChanged', lastName: 'IpsumChanged' },
   date: '1999-12-12',
   datepicker: '1986-12-12',
   bio: 'LoremChanged',
@@ -177,7 +177,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
     await elementUpdated(formEl);
     await formEl.updateComplete;
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '',
       datepicker: '',
       bio: '',

packages/ui/components/form-integrations/test/form-integrations.test.js

@@ -29,7 +29,7 @@ describe('Form Integrations', () => {
     const formEl = el._lionFormNode;
 
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '2000-12-12',
       datepicker: '2020-12-12',
       bio: '',
@@ -62,7 +62,7 @@ describe('Form Integrations', () => {
     await inputTelDropdownEl?.updateComplete;
 
     expect(formEl.formattedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '12/12/2000',
       datepicker: '12/12/2020',
       bio: '',
@@ -91,7 +91,7 @@ describe('Form Integrations', () => {
         await fixture(
           html`<umbrella-form
             .serializedValue="${{
-              full_name: { first_name: '', last_name: '' },
+              fullName: { firstName: '', lastName: '' },
               date: '2000-12-12',
               datepicker: '2020-12-12',
               bio: '',

packages/ui/components/form-integrations/test/helpers/umbrella-form.js

@@ -50,14 +50,14 @@ export class UmbrellaForm extends LitElement {
     return html`
       <lion-form .serializedValue="${this.__serializedValue}">
         <form>
-          <lion-fieldset name="full_name">
+          <lion-fieldset name="fullName">
             <lion-input
-              name="first_name"
+              name="firstName"
               label="First Name"
               .validators="${[new Required()]}"
             ></lion-input>
             <lion-input
-              name="last_name"
+              name="lastName"
               label="Last Name"
               .validators="${[new Required()]}"
             ></lion-input>

packages/ui/docs/fundamentals/systems/overlays/assets/umbrella-form.js

@@ -36,14 +36,14 @@ export class UmbrellaForm extends LitElement {
     return html`
       <lion-form>
         <form>
-          <lion-fieldset name="full_name">
+          <lion-fieldset name="fullName">
             <lion-input
-              name="first_name"
+              name="firstName"
               label="First Name"
               .validators="${[new Required()]}"
             ></lion-input>
             <lion-input
-              name="last_name"
+              name="lastName"
               label="Last Name"
               .validators="${[new Required()]}"
             ></lion-input>

web-test-runner-browserstack.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 const { legacyPlugin } = require('@web/dev-server-legacy');
 const { browserstackLauncher } = require('@web/test-runner-browserstack');