Skip to content

Commit

Permalink
refactor(ui5-multi-combobox): rename property allowCustomValues to no…
Browse files Browse the repository at this point in the history 
…Validation (#8765)

Renames the `allowCustomValues` property of ui5-multi-combobox.

BREAKING CHANGE: The `allowCustomValues` property have been renamed to `noValidation`.
If you have previously used the `allowCustomValues` property
`<ui5-multi-combobox allow-custom-values></ui5-multi-combobox>`
Now use noValidation instead:
`<ui5-multi-combobox no-validation></ui5-multi-combobox>`

Related to: #8461
  • Loading branch information
@niyap
niyap committed Apr 17, 2024
1 parent ef64000 commit bb27acb
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 25 deletions.
12 changes: 6 additions & 6 deletions packages/main/src/MultiComboBox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ class MultiComboBox extends UI5Element {
* @public
*/
@property({ type: Boolean })
allowCustomValues!: boolean;
noValidation!: boolean;

/**
* Defines whether the component is in disabled state.
Expand Down Expand Up @@ -499,7 +499,7 @@ class MultiComboBox extends UI5Element {
const target = e.target as Input;
const value = target.value;

if (!this.allowCustomValues && !this._filterItems(value).length) {
if (!this.noValidation && !this._filterItems(value).length) {
this._dialogInputValueState = ValueState.Error;
} else {
this._dialogInputValueState = this.valueState;
Expand Down Expand Up @@ -603,7 +603,7 @@ class MultiComboBox extends UI5Element {

this._effectiveValueState = this.valueState;

if (!filteredItems.length && value && !this.allowCustomValues) {
if (!filteredItems.length && value && !this.noValidation) {
const newValue = this.valueBeforeAutoComplete || this._inputLastValue;

input.value = newValue;
Expand Down Expand Up @@ -871,7 +871,7 @@ class MultiComboBox extends UI5Element {
this.value = this.valueBeforeAutoComplete;
}

if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
if (!this.noValidation || (!this.open && this.noValidation)) {
this.value = this._lastValue;
}
}
Expand Down Expand Up @@ -1625,7 +1625,7 @@ class MultiComboBox extends UI5Element {
}
}

if (!this.allowCustomValues) {
if (!this.noValidation) {
this.value = "";
}

Expand Down Expand Up @@ -1706,7 +1706,7 @@ class MultiComboBox extends UI5Element {

this._tokenizer.expanded = this.open;
// remove the value if user focus out the input and focus is not going in the popover
if (!isPhone() && !this.allowCustomValues && !focusIsGoingInPopover) {
if (!isPhone() && !this.noValidation && !focusIsGoingInPopover) {
this.value = "";
}
}
Expand Down
28 changes: 14 additions & 14 deletions packages/main/test/pages/MultiComboBox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<span>Predefined value</span>

<br>
<ui5-multi-combobox allow-custom-values id="multi1" accessible-name="MultiComboBox with predefined values">
<ui5-multi-combobox no-validation id="multi1" accessible-name="MultiComboBox with predefined values">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand All @@ -89,10 +89,10 @@
</div>

<div class="demo-section">
<span>allow-custom-values and predefined value</span>
<span>no-validation and predefined value</span>

<br>
<ui5-multi-combobox id="multi-acv" allow-custom-values value="com">
<ui5-multi-combobox id="multi-acv" no-validation value="com">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item text="Condensed"></ui5-mcb-item>
Expand All @@ -115,7 +115,7 @@
<span>disabled and placeholder </span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" disabled>
<ui5-multi-combobox no-validation placeholder="Some initial text" disabled>
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand All @@ -127,7 +127,7 @@
<span>value state success </span>

<br>
<ui5-multi-combobox id="mcb-success" allow-custom-values placeholder="Some initial text" value-state="Success">
<ui5-multi-combobox id="mcb-success" no-validation placeholder="Some initial text" value-state="Success">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand All @@ -139,7 +139,7 @@
<span>value state information </span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" id="mcb-information"
<ui5-multi-combobox no-validation placeholder="Some initial text" id="mcb-information"
value-state="Information">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
Expand All @@ -155,7 +155,7 @@
<span>value state warning </span>

<br>
<ui5-multi-combobox id="mcb-warning" allow-custom-values placeholder="Some initial text" value-state="Warning">
<ui5-multi-combobox id="mcb-warning" no-validation placeholder="Some initial text" value-state="Warning">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand All @@ -167,7 +167,7 @@
<span>value state error </span>

<br>
<ui5-multi-combobox id="mcb-error" allow-custom-values placeholder="Some initial text" value-state="Error">
<ui5-multi-combobox id="mcb-error" no-validation placeholder="Some initial text" value-state="Error">
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand All @@ -179,7 +179,7 @@
<span>readonly </span>

<br>
<ui5-multi-combobox id="mcb-ro" allow-custom-values placeholder="Some initial text" readonly>
<ui5-multi-combobox id="mcb-ro" no-validation placeholder="Some initial text" readonly>
<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
Expand Down Expand Up @@ -281,7 +281,7 @@
<span>MultiComboBox with items</span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" id="mcb">
<ui5-multi-combobox no-validation placeholder="Some initial text" id="mcb">
<ui5-mcb-item text="Cosy" id="first-item"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item text="Condensed"></ui5-mcb-item>
Expand All @@ -295,7 +295,7 @@
<span>MultiComboBox without type ahead</span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" no-typeahead id="mcb-no-typeahead">
<ui5-multi-combobox no-validation placeholder="Some initial text" no-typeahead id="mcb-no-typeahead">
<ui5-mcb-item text="Cosy" id="first-item"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item text="Condensed"></ui5-mcb-item>
Expand All @@ -307,7 +307,7 @@
<span>MultiComboBox with more items</span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" id="mcb-items">
<ui5-multi-combobox no-validation placeholder="Some initial text" id="mcb-items">
<ui5-mcb-item text="Item 0" id="first-item"></ui5-mcb-item>
<ui5-mcb-item selected text="Item 1"></ui5-mcb-item>
<ui5-mcb-item selected text="Item 2"></ui5-mcb-item>
Expand All @@ -327,7 +327,7 @@
<span>MultiComboBox with validation</span>

<br>
<ui5-multi-combobox allow-custom-values placeholder="Some initial text" id="another-mcb">
<ui5-multi-combobox no-validation placeholder="Some initial text" id="another-mcb">
<ui5-mcb-item text="Cosy"></ui5-mcb-item>
<ui5-mcb-item text="Compact"></ui5-mcb-item>
<ui5-mcb-item text="Condensed"></ui5-mcb-item>
Expand Down Expand Up @@ -362,7 +362,7 @@
<span>MultiComboBox with grouping</span>

<br>
<ui5-multi-combobox id="mcb-grouping" allow-custom-values placeholder="Select a country">
<ui5-multi-combobox id="mcb-grouping" no-validation placeholder="Select a country">
<ui5-mcb-group-item text="Asia"></ui5-mcb-group-item>
<ui5-mcb-item text="Afghanistan"></ui5-mcb-item>
<ui5-mcb-item text="China"></ui5-mcb-item>
Expand Down
4 changes: 2 additions & 2 deletions packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Template: UI5StoryArgs<MultiComboBox, StoryArgsSlots> = (args) => html`
value="${ifDefined(args.value)}"
?no-typeahead="${ifDefined(args.noTypeahead)}"
placeholder="${ifDefined(args.placeholder)}"
?allow-custom-values="${ifDefined(args.allowCustomValues)}"
?no-validation="${ifDefined(args.noValidation)}"
?disabled="${ifDefined(args.disabled)}"
value-state="${ifDefined(args.valueState)}"
?readonly="${ifDefined(args.readonly)}"
Expand Down Expand Up @@ -56,7 +56,7 @@ export const MultiComboBoxCustomValue= Template.bind({});
MultiComboBoxCustomValue.args = {
placeholder: 'Choose your state',
valueState: ValueState.Success,
allowCustomValues: true,
noValidation: true,
default: `
<ui5-mcb-item text="Fortune"></ui5-mcb-item>
<ui5-mcb-item text="Luck"></ui5-mcb-item>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_components_pages/main/MultiComboBox/MultiComboBox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ When pressed, the value gets cleared.

### Custom values
By default, typing of non-existing items is permitted.
Use <b>allowCustomValues</b> to allow typing values that are not present as items.
Use <b>noValidation</b> to allow typing values that are not present as items.

<MultiComboBoxCustomValue />

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/MultiComboBox/ClearIcon/sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body style="background-color: var(--sapBackgroundColor); height: 350px;">
<!-- playground-fold-end -->

<ui5-multi-combobox value="Italy" allow-custom-values show-clear-icon>
<ui5-multi-combobox value="Italy" no-validation show-clear-icon>
<ui5-mcb-item text="Albania"></ui5-mcb-item>
<ui5-mcb-item selected text="Argentina"></ui5-mcb-item>
<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxCustomValue/sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body style="background-color: var(--sapBackgroundColor); height: 350px;">
<!-- playground-fold-end -->

<ui5-multi-combobox placeholder="Choose your state" allow-custom-values>
<ui5-multi-combobox placeholder="Choose your state" no-validation>
<ui5-mcb-item text="Fortune"></ui5-mcb-item>
<ui5-mcb-item text="Luck"></ui5-mcb-item>
<ui5-mcb-item selected text="Success"></ui5-mcb-item>
Expand Down

0 comments on commit bb27acb

Please sign in to comment.