Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(checkbox): allow configuration of default checkbox options #139

Merged
merged 4 commits into from
Feb 4, 2021
Merged

feat(checkbox): allow configuration of default checkbox options #139

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abf6d0b
feat(checkbox): allow configuration of default checkbox options
fynnfeldpausch Jan 22, 2021
265e1cb
fix(checkbox): export checkbox options
fynnfeldpausch Jan 23, 2021
bc543ed
fix(checkbox): implement review notes
fynnfeldpausch Jan 28, 2021
11da0cb
fix(checkbox): implement review notes
fynnfeldpausch Feb 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions projects/demo/src/modules/components/checkbox/checkbox.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';

import {default as exampleDeclareForm} from '!!raw-loader!./examples/import/declare-form.txt';
import {default as exampleDefineOptions} from '!!raw-loader!./examples/import/define-options.txt';
import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';

Expand All @@ -30,6 +31,7 @@ import {AbstractExampleTuiReactiveField} from '../abstract/reactive-field';
})
export class ExampleTuiCheckboxComponent extends AbstractExampleTuiReactiveField {
readonly exampleDeclareForm = exampleDeclareForm;
readonly exampleDefineOptions = exampleDefineOptions;
readonly exampleImportModule = exampleImportModule;
readonly exampleInsertTemplate = exampleInsertTemplate;

Expand Down
13 changes: 13 additions & 0 deletions projects/demo/src/modules/components/checkbox/checkbox.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,19 @@
></tui-doc-code>
</li>

<li>
<p i18n>
Optionally use the
<code>TUI_CHECKBOX_OPTIONS</code> injection token to
override the default options for the component.
</p>

<tui-doc-code
filename="myComponent.module.ts"
[code]="exampleDefineOptions"
></tui-doc-code>
</li>

<li>
<p i18n>
Declare a form (<code>FormGroup</code>) or a control
Expand Down
13 changes: 13 additions & 0 deletions projects/demo/src/modules/components/checkbox/examples/import/define-options.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {TUI_CHECKBOX_OPTIONS, TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/kit';

...

@NgModule({
providers: [{
provide: TUI_CHECKBOX_OPTIONS,
useValue: {
...TUI_CHECKBOX_DEFAULT_OPTIONS,
size: 'l'
}
}],
...
19 changes: 19 additions & 0 deletions projects/kit/components/checkbox/checkbox-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {InjectionToken} from '@angular/core';
import {TuiSizeL} from '@taiga-ui/core';

export interface CheckboxOptions {
readonly size: TuiSizeL;
fynnfeldpausch marked this conversation as resolved.
Show resolved Hide resolved
}

/** Default values for the checkbox options. */
export const TUI_CHECKBOX_DEFAULT_OPTIONS: CheckboxOptions = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is also Readonly<CheckboxOptions> so nobody decides to mutate the constant instead of providing :) We love readonly here :)

size: 'm',
};

/** Injection token that can be used to specify checkbox options. */
export const TUI_CHECKBOX_OPTIONS = new InjectionToken<CheckboxOptions>(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fynnfeldpausch @MarsiBarsi so what do you think if we will use this same token for icons config? If we will, then we need to move that to PrimitiveCheckbox. Sounds like a reasonable thing to do, I wouldn't want to create too many tokens.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. Don't know how to achieve a good separation then, as the checkbox might define other inputs as the primitive checkbox. One could either use different tokens for every component type (checkbox, checkbox-block, primitive checkbox,...) or go for a unified one with all fields and use it in every component. Don't know where to place it then. More interestingly, how would one make a distinction between the default size of the primitive checkbox and the normal checkbox component. Or use one size option and use it in every component (so basically not making them configurable individually)?...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking one token per component. In this particular case, looks like Checkbox will just inject the same token.

'tui-checkbox-default-options',
{
factory: () => TUI_CHECKBOX_DEFAULT_OPTIONS,
},
);
8 changes: 6 additions & 2 deletions projects/kit/components/checkbox/checkbox.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
TuiFocusableElementAccessor,
} from '@taiga-ui/cdk';
import {TuiSizeL} from '@taiga-ui/core';
import {CheckboxOptions, TUI_CHECKBOX_OPTIONS} from './checkbox-options';

@Component({
selector: 'tui-checkbox',
Expand All @@ -35,11 +36,11 @@ import {TuiSizeL} from '@taiga-ui/core';
})
export class TuiCheckboxComponent
extends AbstractTuiNullableControl<boolean>
implements TuiFocusableElementAccessor {
implements TuiFocusableElementAccessor, CheckboxOptions {
@Input()
@HostBinding('attr.data-tui-host-size')
@tuiDefaultProp()
size: TuiSizeL = 'm';
size: TuiSizeL;

@ViewChild('focusableElement')
private readonly focusableElement?: ElementRef<HTMLInputElement>;
Expand All @@ -49,9 +50,12 @@ export class TuiCheckboxComponent
@Self()
@Inject(NgControl)
control: NgControl | null,
@Inject(TUI_CHECKBOX_OPTIONS)
options: CheckboxOptions,
fynnfeldpausch marked this conversation as resolved.
Show resolved Hide resolved
@Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
) {
super(control, changeDetectorRef);
this.size = options.size;
}

get nativeFocusableElement(): HTMLInputElement | null {
Expand Down
1 change: 1 addition & 0 deletions projects/kit/components/checkbox/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './checkbox-options';
export * from './checkbox.component';
export * from './checkbox.module';