Skip to content

Commit cc00019

Browse files
kineticjskineticjs
authored
feat(ui5-checkbox): add value property (#11775)
* feat(ui5-checkbox): add value property * feat(ui5-checkbox): specify default value * feat(ui5-ckeckbox): minor improvements * feat(ui5-checkbox): enhancements * feat(ui5-checkbox): remove trailing spaces * feat(ui5-checkbox): simplified expression
1 parent 2507b43 commit cc00019

File tree

10 files changed

+115
-11
lines changed

10 files changed

+115
-11
lines changed

‎packages/main/cypress/specs/CheckBox.cy.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import CheckBox from "../../src/CheckBox.js";
2+
3+
describe('CheckBox Component', () => {
4+
it('should have correct type and value attributes in shadow dom', () => {
5+
cy.mount(<CheckBox value="testValue" />);
6+
cy.get("[ui5-checkbox]")
7+
.shadow()
8+
.find('[type="checkbox"]')
9+
.should('have.attr', 'value', 'testValue');
10+
});
11+
12+
it('should omit value attribute in shadow dom when checkbox has default value', () => {
13+
cy.mount(<CheckBox />);
14+
cy.get("[ui5-checkbox]")
15+
.shadow()
16+
.find('[type="checkbox"]')
17+
.should('not.have.attr', 'value');
18+
});
19+
20+
});
21+

‎packages/main/cypress/specs/FormSupport.cy.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,11 @@ describe("Form support", () => {
3232
it("ui5-checkbox in form", () => {
3333
cy.mount(<form method="get">
3434
<CheckBox id="cb1" text="ui5-checkbox without name" > </CheckBox>
35-
<CheckBox id="cb2" text="ui5-checkbox without name and value" checked > </CheckBox>
36-
<CheckBox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value" > </CheckBox>
37-
<CheckBox id="cb4" name="checkbox4" checked text="ui5-checkbox with name and value" > </CheckBox>
38-
<CheckBox id="cb5" name="checkbox5" required text="ui5-checkbox with name, value and required" > </CheckBox>
35+
<CheckBox id="cb2" text="checked ui5-checkbox without name" checked > </CheckBox>
36+
<CheckBox id="cb3" name="checkbox3" text="unchecked ui5-checkbox with name" > </CheckBox>
37+
<CheckBox id="cb4" name="checkbox4" checked text="checked ui5-checkbox with name" > </CheckBox>
38+
<CheckBox id="cb5" name="checkbox5" required text="unchecked ui5-checkbox with name and required" > </CheckBox>
39+
<CheckBox id="cb6" name="checkbox6" checked required value="checkbox6Value" text="checked ui5-checkbox with name and value and required" > </CheckBox>
3940
<button type="submit" > Submits forms </button>
4041
</form>);
4142

@@ -64,7 +65,7 @@ describe("Form support", () => {
6465
.then($el => {
6566
return getFormData($el.get(0));
6667
})
67-
.should("be.equal", "checkbox4=on&checkbox5=on");
68+
.should("be.equal", "checkbox4=on&checkbox5=on&checkbox6=checkbox6Value");
6869
});
6970

7071
it("ui5-color-picker in form", () => {

‎packages/main/src/CheckBox.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,21 @@ class CheckBox extends UI5Element implements IFormInputElement {
232232
@property()
233233
name?: string;
234234

235+
/**
236+
* Defines the form value of the component that is submitted when the checkbox is checked.
237+
*
238+
* When a form containing `ui5-checkbox` elements is submitted, only the values of the
239+
* **checked** checkboxes are included in the form data sent to the server. Unchecked
240+
* checkboxes do not contribute any data to the form submission.
241+
*
242+
* This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.
243+
*
244+
* @default "on"
245+
* @public
246+
*/
247+
@property()
248+
value = "on";
249+
235250
/**
236251
* Defines the active state (pressed or not) of the component.
237252
* @private
@@ -256,7 +271,7 @@ class CheckBox extends UI5Element implements IFormInputElement {
256271
}
257272

258273
get formFormattedValue() {
259-
return this.checked ? "on" : null;
274+
return this.checked ? this.value : null;
260275
}
261276

262277
constructor() {

‎packages/main/src/CheckBoxTemplate.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
4949
id={`${this._id}-CB`}
5050
type="checkbox"
5151
checked={this.checked}
52+
value={this.value}
5253
readonly={this.readonly}
5354
disabled={this.disabled}
5455
tabindex={-1}

‎packages/main/test/pages/CheckBox.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@
7373

7474
<br />
7575
<ui5-title>Form submission</ui5-title>
76-
<form id="cbForm">
77-
<ui5-checkbox id="cbItem1" text="Option 1" checked></ui5-checkbox>
78-
<ui5-checkbox id="cbItem2" text="Option 2" checked></ui5-checkbox>
79-
<ui5-checkbox id="cbItem3" text="Option 3" required></ui5-checkbox>
76+
<form id="cbForm" method="get">
77+
<ui5-checkbox id="cbItem1" text="Option 1" checked value="option1" name="option"></ui5-checkbox>
78+
<ui5-checkbox id="cbItem2" text="Option 2" checked value="option2" name="option"></ui5-checkbox>
79+
<ui5-checkbox id="cbItem3" text="Option 3" required value="option3" name="option"></ui5-checkbox>
8080
<br><br>
8181
<ui5-button id="cbSubmit" type="Submit">Submit</ui5-button>
8282
<input type="hidden" id="cbFormSubmitted" value="false" />
@@ -121,7 +121,11 @@
121121
cbForm.addEventListener("submit", function (event) {
122122
event.preventDefault();
123123
cbFormSubmitted.value = true;
124-
alert("Form submitted!");
124+
125+
const formData = new FormData(cbForm);
126+
const queryString = new URLSearchParams(formData).toString();
127+
128+
alert("Form submitted with query string: " + queryString);
125129
});
126130
</script>
127131
</body>

‎packages/website/docs/_components_pages/main/CheckBox.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Basic from "../../_samples/main/CheckBox/Basic/Basic.md";
66
import TextWrapping from "../../_samples/main/CheckBox/TextWrapping/TextWrapping.md";
77
import States from "../../_samples/main/CheckBox/States/States.md";
88
import Indeterminate from "../../_samples/main/CheckBox/Indeterminate/Indeterminate.md";
9+
import Group from "../../_samples/main/CheckBox/Group/Group.md";
910

1011
<%COMPONENT_OVERVIEW%>
1112

@@ -32,3 +33,7 @@ The CheckBox text wraps by default. To make it truncate - set <b>wrapping-type="
3233

3334
<TextWrapping />
3435

36+
### Group of Checkboxes in a Form
37+
Checkboxes can be logically grouped using the same name attribute to create a multi-selection form field. When the form is submitted, each checked item will send its individual value to the server, allowing backend processing to identify exactly which options the user selected.
38+
39+
<Group />

‎packages/website/docs/_samples/main/CheckBox/Group/Group.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
import css from '!!raw-loader!./main.css';
4+
5+
<Editor html={html} js={js} css={css} />

‎packages/website/docs/_samples/main/CheckBox/Group/main.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.checkbox-group {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 10px;
5+
margin: 15px 0;
6+
}
7+
8+
#output {
9+
margin: 1rem 0;
10+
}

‎packages/website/docs/_samples/main/CheckBox/Group/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import "@ui5/webcomponents/dist/CheckBox.js";
2+
import "@ui5/webcomponents/dist/Button.js";
3+
4+
const form = document.getElementById("form");
5+
const output = document.getElementById("output");
6+
7+
form.addEventListener("submit", (event) => {
8+
event.preventDefault();
9+
const formData = new FormData(form);
10+
const selectedLanguages = formData.getAll("languages");
11+
output.textContent = "Selected languages: " + selectedLanguages.join(", ");
12+
});

‎packages/website/docs/_samples/main/CheckBox/Group/sample.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Group of checkboxes</title>
9+
<link rel="stylesheet" href="./main.css">
10+
</head>
11+
12+
<body style="background-color: var(--sapBackgroundColor)">
13+
<!-- playground-fold-end -->
14+
15+
<form id="form" method="post">
16+
<div class="checkbox-group">
17+
<ui5-checkbox id="js" text="JavaScript" value="js" name="languages"></ui5-checkbox>
18+
<ui5-checkbox id="python" text="Python" value="python" name="languages"></ui5-checkbox>
19+
<ui5-checkbox id="java" text="Java" value="java" name="languages"></ui5-checkbox>
20+
<ui5-checkbox id="csharp" text="C#" value="csharp" name="languages"></ui5-checkbox>
21+
</div>
22+
<ui5-button type="Submit" design="Emphasized" >Submit Form</ui5-button>
23+
</form>
24+
<div id="output"></div>
25+
<!-- playground-fold -->
26+
<script type="module" src="main.js"></script>
27+
</body>
28+
29+
</html>
30+
<!-- playground-fold-end -->

0 commit comments

Comments
 (0)