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
index da7e6f2ec5..29218598c8 100644
--- 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
index 1d2f22751d..ea9eacb49a 100644
--- 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
index 4adb58cd8d..1418f6529a 100644
--- 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
index 94b2a3cbb4..1f787b4638 100644
--- 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
index cce9bea3f6..1721e3005a 100644
--- 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('', '.my-quantity::part(input) { width: 200px; } .my-quantity::part(button_minus) { color: #00ff00; } .my-quantity::part(button_add) { color: #ff0000; }');
+ await setup('', '.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
index 5b95b6d857..a1a4386b3e 100644
--- 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
index 84b4e72a74..9efe3c53e9 100644
--- 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}
}
@@ -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;
}