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; }