Skip to content

Commit db754d5

Browse files
authored
chore(checkbox): added multiline checkbox example (#DS-3538) (#656)
1 parent 9891973 commit db754d5

File tree

9 files changed

+67
-106
lines changed

9 files changed

+67
-106
lines changed

packages/components-dev/checkbox/module.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { KbqFormFieldModule } from '@koobiq/components/form-field';
55
import { KbqTableModule } from '@koobiq/components/table';
66
import { CheckboxExamplesModule } from 'packages/docs-examples/components/checkbox';
77
import { KbqCheckboxModule } from '../../components/checkbox';
8+
import { DevThemeToggle } from '../theme-toggle';
89

910
@Component({
1011
standalone: true,
@@ -16,6 +17,8 @@ import { KbqCheckboxModule } from '../../components/checkbox';
1617
<checkbox-overview-example />
1718
<hr />
1819
<pseudo-checkbox-example />
20+
<hr />
21+
<checkbox-multiline-example />
1922
`,
2023
changeDetection: ChangeDetectionStrategy.OnPush
2124
})
@@ -29,7 +32,8 @@ export class DevCheckboxExamples {}
2932
KbqCheckboxModule,
3033
KbqPseudoCheckboxModule,
3134
DevCheckboxExamples,
32-
KbqTableModule
35+
KbqTableModule,
36+
DevThemeToggle
3337
],
3438
selector: 'app',
3539
templateUrl: './template.html',

packages/components-dev/checkbox/template.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<dev-theme-toggle />
2+
3+
<hr />
4+
5+
<dev-checkbox-examples />
6+
7+
<hr />
8+
19
<table kbq-table width="100%">
210
<thead>
311
<tr>
@@ -128,7 +136,3 @@
128136
</tr>
129137
</tbody>
130138
</table>
131-
132-
<hr />
133-
134-
<dev-checkbox-examples />
Lines changed: 3 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,5 @@
1-
Checkboxes are defined using the `<kbq-checkbox>` element. Clicking the checkbox or its label toggles the checkbox state, which can be checked, unchecked, or indeterminate.
1+
🚧 **Documentation in progress** 🚧
22

3-
### Label
3+
Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
44

5-
The checkbox label describes an option to be selected. The label is provided as the content of the `<kbq-checkbox>` element.
6-
7-
### Label position
8-
9-
To place the label before or after the checkbox, use the `[labelPosition]` attribute with possible values `'before'` and `'after'`. The default position is after the checkbox.
10-
11-
`<kbq-checkbox [labelPosition]="'before'">Left side label</kbq-checkbox>`
12-
13-
If you don't want the label to appear next to the checkbox, you can use
14-
<a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-label" target="_blank">aria-label</a> or
15-
<a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" target="_blank">aria-labelledby</a>
16-
specify an appropriate label.
17-
18-
### Use with @angular/forms
19-
20-
`<kbq-checkbox>` is compatible with `@angular/forms` and supports both `FormsModule`
21-
and `ReactiveFormsModule`.
22-
23-
### Dual-state
24-
25-
The dual-state is applied using the `[checked]` boolean attribute to show whether the checkbox is selected or not. The default state is checked.
26-
27-
<!-- example(checkbox-overview) -->
28-
29-
### Indeterminate state (partially selected)
30-
31-
The indeterminate state is applied using the `[indeterminate]` boolean attribute and can be used when you have a group of options, and a higher-level checkbox must represent their state:
32-
33-
- if only some of the options in a group are selected, the higher-level checkbox appears partially selected (`[indeterminate]="true"`).
34-
- If all of them are selected, the higher-level checkbox appears selected.
35-
- If none are selected, the higher-level checkbox appears not selected.
36-
37-
<Можно пример с группой чекбоксов?>
38-
39-
<!-- example(checkbox-indeterminate) -->
40-
41-
### Disabled checkboxes
42-
43-
You can use the `[disabled]` boolean attribute to make a checkbox look unclickable.
44-
45-
`<kbq-checkbox [disabled]="true">Disabled</kbq-checkbox>`
46-
47-
### Click action config
48-
49-
When user clicks on the `kbq-checkbox`, the default behavior is toggle `checked` value and set
50-
`indeterminate` to `false`. This behavior can be customized by
51-
<a href="https://angular.io/guide/dependency-injection" target="_blank">providing a new value</a>
52-
of `KBQ_CHECKBOX_CLICK_ACTION` to the checkbox.
53-
54-
```
55-
providers: [
56-
{provide: KBQ_CHECKBOX_CLICK_ACTION, useValue: 'check'}
57-
]
58-
```
59-
60-
The possible values are:
61-
62-
#### noop
63-
64-
Do not change the `checked` value or `indeterminate` value. Developers have the power to
65-
implement customized click actions.
66-
67-
#### check
68-
69-
Toggle `checked` value of the checkbox, ignore `indeterminate` value. If the
70-
checkbox is in `indeterminate` state, the checkbox will display as an `indeterminate` checkbox
71-
regardless the `checked` value.
72-
73-
#### check-indeterminate
74-
75-
Default behavior of `kbq-checkbox`. Always set `indeterminate` to `false`
76-
when user click on the `kbq-checkbox`.
77-
This matches the behavior of native `<input type="checkbox">`.
78-
79-
### Theming
80-
81-
The color of a `<kbq-checkbox>` can be changed by using the `color` property. By default, checkboxes
82-
use the theme's accent color. This can be changed to `'primary'` or `'error'`.
83-
84-
### Accessibility
85-
86-
The `<kbq-checkbox>` uses an internal `<input type="checkbox">` to provide an accessible experience.
87-
This internal checkbox receives focus and is automatically labelled by the text content of the
88-
`<kbq-checkbox>` element.
89-
90-
Checkboxes without text or labels should be given a meaningful label via `aria-label` or
91-
`aria-labelledby`.
92-
93-
### Pseudo checkbox
94-
95-
<!-- example(pseudo-checkbox) -->
5+
If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.

packages/components/checkbox/checkbox.ru.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,7 @@ providers: [
3333
### Pseudo checkbox
3434

3535
<!-- example(pseudo-checkbox) -->
36+
37+
### Многострочный
38+
39+
<!-- example(checkbox-multiline) -->

packages/docs-examples/components/checkbox/checkbox-indeterminate/checkbox-indeterminate-example.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
22
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
33

44
interface ICheckbox {
@@ -28,7 +28,8 @@ interface ICheckbox {
2828
</p>
2929
}
3030
</div>
31-
`
31+
`,
32+
changeDetection: ChangeDetectionStrategy.OnPush
3233
})
3334
export class CheckboxIndeterminateExample {
3435
parentIndeterminate = true;
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
3+
import { KbqFormFieldModule } from '@koobiq/components/form-field';
4+
5+
/**
6+
* @title Checkbox multiline example
7+
*/
8+
@Component({
9+
standalone: true,
10+
selector: 'checkbox-multiline-example',
11+
imports: [KbqCheckboxModule, KbqFormFieldModule],
12+
template: `
13+
<kbq-checkbox>
14+
I accept the security policy terms and acknowledge the responsibility to safeguard sensitive information
15+
<kbq-hint>
16+
Please review our security policy for detailed information about data protection and privacy standards.
17+
By checking this box, you confirm that you understand and agree to comply with all security
18+
requirements.
19+
</kbq-hint>
20+
</kbq-checkbox>
21+
`,
22+
styles: `
23+
:host {
24+
display: flex;
25+
justify-content: center;
26+
}
27+
28+
.kbq-checkbox {
29+
max-width: 400px;
30+
}
31+
`,
32+
changeDetection: ChangeDetectionStrategy.OnPush
33+
})
34+
export class CheckboxMultilineExample {}

packages/docs-examples/components/checkbox/checkbox-overview/checkbox-overview-example.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
33
import { KbqFormFieldModule } from '@koobiq/components/form-field';
44

@@ -12,6 +12,7 @@ import { KbqFormFieldModule } from '@koobiq/components/form-field';
1212
imports: [
1313
KbqCheckboxModule,
1414
KbqFormFieldModule
15-
]
15+
],
16+
changeDetection: ChangeDetectionStrategy.OnPush
1617
})
1718
export class CheckboxOverviewExample {}

packages/docs-examples/components/checkbox/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { NgModule } from '@angular/core';
22
import { CheckboxIndeterminateExample } from './checkbox-indeterminate/checkbox-indeterminate-example';
3+
import { CheckboxMultilineExample } from './checkbox-multiline/checkbox-multiline-example';
34
import { CheckboxOverviewExample } from './checkbox-overview/checkbox-overview-example';
45
import { PseudoCheckboxExample } from './pseudo-checkbox/pseudo-checkbox-example';
56

6-
export { CheckboxIndeterminateExample, CheckboxOverviewExample, PseudoCheckboxExample };
7+
export { CheckboxIndeterminateExample, CheckboxMultilineExample, CheckboxOverviewExample, PseudoCheckboxExample };
78

89
const EXAMPLES = [
910
CheckboxIndeterminateExample,
1011
CheckboxOverviewExample,
11-
PseudoCheckboxExample
12+
PseudoCheckboxExample,
13+
CheckboxMultilineExample
1214
];
1315

1416
@NgModule({

packages/docs-examples/components/checkbox/pseudo-checkbox/pseudo-checkbox-example.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { KbqPseudoCheckboxModule } from '@koobiq/components/core';
33

44
/**
@@ -16,6 +16,7 @@ import { KbqPseudoCheckboxModule } from '@koobiq/components/core';
1616
<kbq-pseudo-checkbox class="layout-margin-top-l" [state]="'indeterminate'" />
1717
<kbq-pseudo-checkbox class="layout-margin-top-l" [state]="'checked'" />
1818
</div>
19-
`
19+
`,
20+
changeDetection: ChangeDetectionStrategy.OnPush
2021
})
2122
export class PseudoCheckboxExample {}

0 commit comments

Comments
 (0)