8000 feat(devtools): add button component (#61549) · angular/angular@8e861ef · GitHub
[go: up one dir, main page]
Skip to content

Commit 8e861ef

Browse files
milomgpkozlowski-opensource
milomg
authored and
pkozlowski-opensource
committed
feat(devtools): add button component (#61549)
enables flexible styling of button components with ng-button attribute PR Close #61549
1 parent 08eded7 commit 8e861ef

File tree

5 files changed

+135
-0
lines changed

5 files changed

+135
-0
lines changed

‎devtools/projects/ng-devtools/src/lib/shared/button/BUILD.bazel

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
3+
load("//devtools/tools:ng_project.bzl", "ng_project")
4+
load("//devtools/tools:typescript.bzl", "ts_test_library")
5+
6+
package(default_visibility = ["//devtools:__subpackages__"])
7+
8+
sass_binary(
9+
name = "button_component_styles",
10+
src = "button.component.scss",
11+
deps = [
12+
"//devtools/projects/ng-devtools/src/styles:typography",
13+
],
14+
)
15+
16+
ng_project(
17+
name = "button",
18+
srcs = ["button.component.ts"],
19+
angular_assets = [
20+
":button_component_styles",
21+
],
22+
interop_deps = [
23+
"//packages/core",
24+
],
25+
)
26+
27+
ts_test_library(
28+
name = "button_test",
29+
srcs = ["button.component.spec.ts"],
30+
interop_deps = [
31+
":button",
32+
"//packages/core/testing",
33+
"//packages/platform-browser",
34+
],
35+
)
36+
37+
karma_web_test_suite(
38+
name = "test",
39+
visibility = ["//visibility:public"],
40+
deps = [
41+
":button_test",
42+
],
43+
)

‎devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@use '../../../styles/typography';
2+
3+
:host {
4+
@extend %body-01;
5+
border: none;
6+
cursor: pointer;
7+
padding: 0.375rem 0.75rem;
8+
9+
&.size-compact {
10+
padding: 0.1rem 0.5rem;
11+
}
12+
13+
&.type-primary {
14+
border-radius: 2rem;
15+
background: var(--dynamic-blue-02);
16+
color: var(--septenary-contrast);
17+
}
18+
}

‎devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ComponentFixture, TestBed} from '@angular/core/testing';
10+
import {ButtonComponent} from './button.component';
11+
12+
describe('ButtonComponent', () => {
13+
let component: ButtonComponent;
14+
let fixture: ComponentFixture<ButtonComponent>;
15+
let element: Element;
16+
17+
beforeEach(async () => {
18+
await TestBed.configureTestingModule({
19+
imports: [ButtonComponent],
20+
}).compileComponents();
21+
22+
fixture = TestBed.createComponent(ButtonComponent);
23+
component = fixture.componentInstance;
24+
element = fixture.debugElement.nativeElement;
25+
fixture.detectChanges();
26+
});
27+
28+
it('should be primary type by default', () => {
29+
expect(component.btnType()).toEqual('primary');
30+
expect(element.classList.contains('type-primary')).toBeTrue();
31+
});
32+
33+
it('should be standard size by default', () => {
34+
expect(component.size()).toEqual('standard');
35+
expect(element.classList.contains('size-compact')).toBeFalse();
36+
});
37+
38+
it('should be compact size', () => {
39+
fixture.componentRef.setInput('size', 'compact');
40+
fixture.detectChanges();
41+
42+
expect(element.classList.contains('size-compact')).toBeTrue();
43+
});
44+
});

‎devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ChangeDetectionStrategy, Component, input} from '@angular/core';
10+
11+
type ButtonType = 'primary'; // To be extended in future
12+
type ButtonSize = 'standard' | 'compact';
13+
14+
@Component({
15+
selector: 'button[ng-button]',
16+
template: '<ng-content/>',
17+
styleUrl: './button.component.scss',
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
host: {
20+
class: 'ng-button',
21+
'[class.type-primary]': `btnType() === 'primary'`,
22+
'[class.size-compact]': `size() === 'compact'`,
23+
},
24+
})
25+
export class ButtonComponent {
26+
readonly btnType = input<ButtonType>('primary');
27+
readonly size = input<ButtonSize>('standard');
28+
}

‎devtools/projects/ng-devtools/src/styles/_colors.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ $_colors: (
6969
--dynamic-red-02: var(--red-06);
7070
--dynamic-green-01: var(--green-01);
7171
--dynamic-blue-01: var(--blue-05);
72+
--dynamic-blue-02: var(--blue-02);
7273
--dynamic-purple-01: var(--purple-01);
7374

7475
--dynamic-transparent-01: var(--transparent-04);
@@ -109,6 +110,7 @@ $_colors: (
109110
--dynamic-red-02: var(--red-01);
110111
--dynamic-green-01: var(--green-03);
111112
--dynamic-blue-01: var(--blue-01);
113+
--dynamic-blue-02: var(--blue-03);
112114
--dynamic-purple-01: var(--purple-03);
113115

114116
--dynamic-transparent-01: var(--transparent-03);

0 commit comments

Comments
 (0)
0