fix(quantity): exportparts name

ovh · Jul 29, 2024 · 56642fd · 56642fd
1 parent 6fe59fd
commit 56642fd
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 20 deletions.
diff --git a/packages/ods/src/components/quantity/src/components/ods-quantity/ods-quantity.tsx b/packages/ods/src/components/quantity/src/components/ods-quantity/ods-quantity.tsx
@@ -2,7 +2,7 @@ import { AttachInternals, Component, Event, type EventEmitter, type FunctionalCo
 import { ODS_BUTTON_COLOR, ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '../../../../button/src';
 import { ODS_ICON_NAME } from '../../../../icon/src';
 import { ODS_INPUT_TYPE, type OdsInput, type OdsInputValueChangeEvent } from '../../../../input/src';
-import { isAddButtonDisabled, isMinusButtonDisabled, setFormValue } from '../../controller/ods-quantity';
+import { isMinusButtonDisabled, isPlusButtonDisabled, setFormValue } from '../../controller/ods-quantity';
 import { type OdsQuantityEventValueChangeDetail } from '../../interfaces/events';
 
 @Component({
@@ -96,7 +96,7 @@ export class OdsQuantity {
             'ods-quantity__button--readonly': this.isReadonly,
           }}
           color={ this.hasError ? ODS_BUTTON_COLOR.critical : ODS_BUTTON_COLOR.primary }
-          exportparts="button:button_minus"
+          exportparts="button:button-minus"
           isDisabled={ isMinusButtonDisabled(this.isDisabled, this.value, this.min) }
           icon={ ODS_ICON_NAME.minus }
           label=""
@@ -130,8 +130,8 @@ export class OdsQuantity {
             'ods-quantity__button--readonly': this.isReadonly,
           }}
           color={ this.hasError ? ODS_BUTTON_COLOR.critical : ODS_BUTTON_COLOR.primary }
-          exportparts="button:button_add"
-          isDisabled={ isAddButtonDisabled(this.isDisabled, this.value, this.max) }
+          exportparts="button:button-plus"
+          isDisabled={ isPlusButtonDisabled(this.isDisabled, this.value, this.max) }
           icon={ ODS_ICON_NAME.add }
           label=""
           onClick={ () => this.increment() }

diff --git a/packages/ods/src/components/quantity/src/controller/ods-quantity.ts b/packages/ods/src/components/quantity/src/controller/ods-quantity.ts
@@ -1,4 +1,4 @@
-function isAddButtonDisabled(isDisabled: boolean, value: number | null, max?: number): boolean {
+function isPlusButtonDisabled(isDisabled: boolean, value: number | null, max?: number): boolean {
   return isDisabled || (max !== undefined && value !== null && max <= value);
 }
 
@@ -11,7 +11,7 @@ function setFormValue(internals: ElementInternals, value: number | null): void {
 }
 
 export {
-  isAddButtonDisabled,
+  isPlusButtonDisabled,
   isMinusButtonDisabled,
   setFormValue,
 };
diff --git a/packages/ods/src/components/quantity/src/index.html b/packages/ods/src/components/quantity/src/index.html
@@ -79,12 +79,12 @@
       width: 200px;
     }
 
-    .my-quantity::part(button_minus) {
+    .my-quantity::part(button-minus) {
       color: green;
       border-color: green;
     }
 
-    .my-quantity::part(button_add) {
+    .my-quantity::part(button-plus) {
       color: red;
       border-color: red;
     }

diff --git a/packages/ods/src/components/quantity/tests/behaviour/ods-quantity.e2e.ts b/packages/ods/src/components/quantity/tests/behaviour/ods-quantity.e2e.ts
@@ -14,8 +14,8 @@ describe('ods-quantity behaviour', () => {
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
     el = await page.find('ods-quantity');
-    buttonMinus = await page.find('ods-quantity >>> [exportparts="button:button_minus"]');
-    buttonAdd = await page.find('ods-quantity >>> [exportparts="button:button_add"]');
+    buttonMinus = await page.find('ods-quantity >>> [exportparts="button:button-minus"]');
+    buttonAdd = await page.find('ods-quantity >>> [exportparts="button:button-plus"]');
 
     await page.waitForChanges();
   }

diff --git a/packages/ods/src/components/quantity/tests/rendering/ods-quantity.e2e.ts b/packages/ods/src/components/quantity/tests/rendering/ods-quantity.e2e.ts
@@ -29,8 +29,8 @@ describe('ods-quantity rendering', () => {
 
     el = await page.find('ods-quantity');
     input = await page.find('ods-quantity >>> .ods-quantity__input');
-    buttonMinus = await page.find('ods-quantity >>> [exportparts="button:button_minus"]');
-    buttonAdd = await page.find('ods-quantity >>> [exportparts="button:button_add"]');
+    buttonMinus = await page.find('ods-quantity >>> [exportparts="button:button-minus"]');
+    buttonAdd = await page.find('ods-quantity >>> [exportparts="button:button-plus"]');
   }
 
   it('should render the web component', async() => {
@@ -41,14 +41,14 @@ describe('ods-quantity rendering', () => {
 
   describe('part', () => {
     it('should render with custom style applied', async() => {
-      await setup('<ods-quantity class="my-quantity"></ods-quantity>', '.my-quantity::part(input) { width: 200px; } .my-quantity::part(button_minus) { color: #00ff00; } .my-quantity::part(button_add) { color: #ff0000; }');
+      await setup('<ods-quantity class="my-quantity"></ods-quantity>', '.my-quantity::part(input) { width: 200px; } .my-quantity::part(button-minus) { color: #00ff00; } .my-quantity::part(button-plus) { color: #ff0000; }');
       const inputStyle = await input.getComputedStyle();
       expect(inputStyle.getPropertyValue('width')).toBe('200px');
 
-      const buttonMinusColor = await getButtonColor('button_minus');
+      const buttonMinusColor = await getButtonColor('button-minus');
       expect(buttonMinusColor).toBe('rgb(0, 255, 0)');
 
-      const buttonAddColor = await getButtonColor('button_add');
+      const buttonAddColor = await getButtonColor('button-plus');
       expect(buttonAddColor).toBe('rgb(255, 0, 0)');
     });
   });

diff --git a/packages/storybook/stories/components/quantity/documentation.mdx b/packages/storybook/stories/components/quantity/documentation.mdx
@@ -22,7 +22,7 @@ Quantity is a component used to enter and modify a numeric value in a responsive
 
 # Style customization
 
-You can add your own style on the quantity element using the part `input`, `button_minus` or `button_add`.
+You can add your own style on the quantity element using the part `input`, `button-minus` or `button-plus`.
 
 Custom quantity css:
 

diff --git a/packages/storybook/stories/components/quantity/quantity.stories.ts b/packages/storybook/stories/components/quantity/quantity.stories.ts
@@ -31,10 +31,10 @@ export const Demo: StoryObj = {
   .my-quantity::part(input) {
     ${arg.customCssInput}
   }
-  .my-quantity::part(button_minus) {
+  .my-quantity::part(button-minus) {
     ${arg.customCssButtonMinus}
   }
-  .my-quantity::part(button_add) {
+  .my-quantity::part(button-plus) {
     ${arg.customCssButtonAdd}
   }
 </style>
@@ -206,12 +206,12 @@ export const CustomCSS: StoryObj = {
       width: 200px;
     }
 
-    .my-quantity::part(button_minus) {
+    .my-quantity::part(button-minus) {
       color: green;
       border-color: green;
     }
 
-    .my-quantity::part(button_add) {
+    .my-quantity::part(button-plus) {
       color: red;
       border-color: red;
     }