Skip to content

Commit d8e6ea9

Browse files
mawelCaballeromawelCaballero
authored
Merge pull request #699 from dxc-technology/fix-452-aida
[Patch] Fixed height and margin in toggle group
2 parents 08c1b6c + c4e7ec1 commit d8e6ea9

File tree

2 files changed

+84
-80
lines changed

2 files changed

+84
-80
lines changed

‎projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggle/dxc-toggle.component.ts‎

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,22 @@ import {
44
Output,
55
EventEmitter,
66
HostBinding,
7-
ChangeDetectionStrategy
7+
ChangeDetectionStrategy,
88
} from "@angular/core";
99
import { css } from "emotion";
10-
import { OnInit } from '@angular/core';
10+
import { OnInit } from "@angular/core";
1111

1212
@Component({
1313
selector: "dxc-toggle",
1414
templateUrl: "./dxc-toggle.component.html",
1515
providers: [],
1616
})
1717
export class DxcToggleComponent implements OnInit {
18-
19-
2018
@Input() label: string;
2119
@Input() value;
2220
@Output() public onClick: EventEmitter<any> = new EventEmitter<any>();
2321
@Output() public onKeyPress: EventEmitter<any> = new EventEmitter<any>();
24-
role:string;
22+
role: string;
2523
@HostBinding("class") style;
2624

2725
@HostBinding("class.selected") get valid() {
@@ -36,64 +34,62 @@ export class DxcToggleComponent implements OnInit {
3634
}
3735

3836
onHandleKeyPressHandler(event) {
39-
if ((event.code === "Enter" || event.code === "Space")){
37+
if (event.code === "Enter" || event.code === "Space") {
4038
this.onKeyPress.emit(this.value);
4139
}
42-
};
40+
}
4341

4442
ngOnInit(): void {
4543
this.style = `${this.getDynamicStyle()}`;
4644
}
4745

48-
getDynamicStyle(){
46+
getDynamicStyle() {
4947
return css`
50-
5148
display: flex;
5249
background: var(--toggleGroup-unselectedBackgroundColor);
53-
margin: 4px;
5450
color: var(--toggleGroup-unselectedFontColor);
5551
border-radius: var(--toggleGroup-optionBorderRadius);
5652
border-width: var(--toggleGroup-optionBorderThickness);
5753
border-style: var(--toggleGroup-optionBorderStyle);
58-
59-
.toggleContent {
60-
61-
${this.label ? `padding-left: var(--toggleGroup-labelPaddingLeft);
62-
padding-right: var(--toggleGroup-labelPaddingRight);` : `
54+
.toggleContent {
55+
${this.label
56+
? `padding-left: var(--toggleGroup-labelPaddingLeft);
57+
padding-right: var(--toggleGroup-labelPaddingRight);`
58+
: `
6359
padding-left: var(--toggleGroup-iconPaddingLeft);
6460
padding-right: var(--toggleGroup-iconPaddingRight);
65-
` }
61+
`}
6662
67-
&:focus,
63+
&:focus,
6864
&:focus-within,
6965
&:focus-visible {
70-
outline: none;
71-
}
72-
height: 40px;
73-
width: 100% !important;
66+
outline: none;
67+
}
68+
height: 40px;
69+
width: 100% !important;
70+
display: flex;
71+
align-items: center;
72+
.label {
73+
font-family: var(--toggleGroup-labelFontFamily);
74+
font-size: var(--toggleGroup-labelFontSize);
75+
font-style: var(--toggleGroup-labelFontStyle);
76+
font-weight: var(--toggleGroup-labelFontWeight);
77+
}
78+
.icon {
79+
${this.label
80+
? `margin-right: var(--toggleGroup-iconMarginRight);`
81+
: ``}
7482
display: flex;
75-
align-items: center;
76-
.label {
77-
font-family: var(--toggleGroup-labelFontFamily);
78-
font-size: var(--toggleGroup-labelFontSize);
79-
font-style: var(--toggleGroup-labelFontStyle);
80-
font-weight: var(--toggleGroup-labelFontWeight);
81-
}
82-
.icon {
83-
${this.label ? `margin-right: var(--toggleGroup-iconMarginRight);`: `` }
84-
display: flex;
85-
height: 24px;
86-
overflow: hidden;
87-
width: 24px;
88-
svg {
89-
fill: var(--toggleGroup-unselectedFontColor);
90-
height: 100%;
91-
width: 100%;
92-
}
83+
height: 24px;
84+
overflow: hidden;
85+
width: 24px;
86+
svg {
87+
fill: var(--toggleGroup-unselectedFontColor);
88+
height: 100%;
89+
width: 100%;
9390
}
9491
}
95-
92+
}
9693
`;
97-
};
98-
94+
}
9995
}

‎projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
coerceNumberProperty,
1919
} from "@angular/cdk/coercion";
2020
import { DxcToggleComponent } from "./dxc-toggle/dxc-toggle.component";
21-
import { ChangeDetectorRef } from '@angular/core';
21+
import { ChangeDetectorRef } from "@angular/core";
2222
import { v4 as uuidv4 } from "uuid";
2323

2424
@Component({
@@ -76,7 +76,7 @@ export class DxcToggleGroupComponent implements OnInit {
7676
tabIndexValue: 0,
7777
});
7878
constructor(private utils: CssUtils, private ref: ChangeDetectorRef) {
79-
this.toggleGroupId = `file-input${ uuidv4()}`;
79+
this.toggleGroupId = `file-input${uuidv4()}`;
8080
}
8181

8282
ngOnInit() {
@@ -91,7 +91,7 @@ export class DxcToggleGroupComponent implements OnInit {
9191
ngAfterContentInit() {
9292
// reference to the dxc-toggles and manipulating them depending on the given data
9393
if (this.toggleGroup) {
94-
this.toggleGroup.forEach((item:DxcToggleComponent, index: number) => {
94+
this.toggleGroup.forEach((item: DxcToggleComponent, index: number) => {
9595
item.onClick.subscribe((value) => {
9696
if (!this.disabled) {
9797
this.valueChanged(value);
@@ -105,11 +105,10 @@ export class DxcToggleGroupComponent implements OnInit {
105105

106106
setTimeout(() => {
107107
item.tabIndexValue = this.disabled ? -1 : this.tabIndex;
108-
item.role = this.multiple ? 'switch': 'radio';
108+
item.role = this.multiple ? "switch" : "radio";
109109
this.setToggleSelected(item);
110110
});
111111
});
112-
113112
}
114113
}
115114

@@ -127,8 +126,6 @@ export class DxcToggleGroupComponent implements OnInit {
127126
}
128127
}
129128

130-
131-
132129
private valueChanged(selectedOption: any): void {
133130
let newSelectedOptions = [];
134131
//handle When value is defined
@@ -143,7 +140,8 @@ export class DxcToggleGroupComponent implements OnInit {
143140
}
144141
this.selectedOptions = newSelectedOptions;
145142
} else {
146-
this.selectedOptions = selectedOption === this.selectedOptions ? null : selectedOption;
143+
this.selectedOptions =
144+
selectedOption === this.selectedOptions ? null : selectedOption;
147145
}
148146
} else if (this.multiple) {
149147
newSelectedOptions = this.value.map((v) => v);
@@ -153,22 +151,26 @@ export class DxcToggleGroupComponent implements OnInit {
153151
} else {
154152
newSelectedOptions.push(selectedOption);
155153
}
156-
}else{
154+
} else {
157155
newSelectedOptions = selectedOption;
158156
}
159157
this.changeSelectedToggle(this.multiple ? selectedOption : null);
160158
// Emit the new selected values
161-
this.onChange.emit(this.isControlled ? newSelectedOptions: this.selectedOptions);
159+
this.onChange.emit(
160+
this.isControlled ? newSelectedOptions : this.selectedOptions
161+
);
162162
}
163163

164-
private changeSelectedToggle(selectedValue? :string) {
164+
private changeSelectedToggle(selectedValue?: string) {
165165
if (this.toggleGroup) {
166-
if (selectedValue){
167-
const filterToggles = this.toggleGroup.filter(item=> item.value === selectedValue);
166+
if (selectedValue) {
167+
const filterToggles = this.toggleGroup.filter(
168+
(item) => item.value === selectedValue
169+
);
168170
filterToggles.forEach((item) => {
169171
this.setToggleSelected(item);
170172
});
171-
}else {
173+
} else {
172174
this.toggleGroup.forEach((item) => {
173175
this.setToggleSelected(item);
174176
});
@@ -179,9 +181,13 @@ export class DxcToggleGroupComponent implements OnInit {
179181

180182
private setToggleSelected(item: DxcToggleComponent) {
181183
if (this.multiple) {
182-
this.isControlled ? item.selected = this.value.includes(item.value) : item.selected = this.selectedOptions.includes(item.value);
184+
this.isControlled
185+
? (item.selected = this.value.includes(item.value))
186+
: (item.selected = this.selectedOptions.includes(item.value));
183187
} else {
184-
this.isControlled ? item.selected = item.value === this.value : item.selected = item.value === this.selectedOptions;
188+
this.isControlled
189+
? (item.selected = item.value === this.value)
190+
: (item.selected = item.value === this.selectedOptions);
185191
}
186192
}
187193

@@ -205,8 +211,7 @@ export class DxcToggleGroupComponent implements OnInit {
205211
cursor: not-allowed;
206212
}
207213
&.selected {
208-
background: var(
209-
--toggleGroup-selectedDisabledBackgroundColor);
214+
background: var(--toggleGroup-selectedDisabledBackgroundColor);
210215
color: var(--toggleGroup-selectedDisabledFontColor);
211216
.icon img,
212217
.icon svg {
@@ -250,9 +255,7 @@ export class DxcToggleGroupComponent implements OnInit {
250255
fill: var(--toggleGroup-selectedFontColor);
251256
}
252257
&:active {
253-
background: var(
254-
--toggleGroup-selectedActiveBackgroundColor
255-
);
258+
background: var(--toggleGroup-selectedActiveBackgroundColor);
256259
color: #ffffff;
257260
}
258261
&:hover {
@@ -273,44 +276,49 @@ export class DxcToggleGroupComponent implements OnInit {
273276
display: inline-flex;
274277
flex-direction: column;
275278
${this.utils.getMargins(inputs.margin)};
276-
label{
277-
color: ${this.disabled ? 'var(--toggleGroup-disabledLabelFontColor)' : 'var(--toggleGroup-labelFontColor)' };
279+
label {
280+
color: ${this.disabled
281+
? "var(--toggleGroup-disabledLabelFontColor)"
282+
: "var(--toggleGroup-labelFontColor)"};
278283
font-family: var(--toggleGroup-labelFontFamily);
279284
font-size: var(--toggleGroup-labelFontSize);
280285
font-style: var(--toggleGroup-labelFontStyle);
281286
font-weight: var(--toggleGroup-labelFontWeight);
282287
line-height: var(--toggleGroup-labelLineHeight);
283-
284288
}
285289
286-
287-
.helperText{
288-
color: ${this.disabled ? 'var(--toggleGroup-disabledHelperTextFontColor)' : 'var(--toggleGroup-helperTextFontColor)' };
289-
font-family: var(--toggleGroup-helperTextFontFamily);
290-
font-size: var(--toggleGroup-helperTextFontSize);
291-
font-style: var(--toggleGroup-helperTextFontStyle);
292-
font-weight: var(--toggleGroup-helperTextFontWeight);
293-
line-height: var(--toggleGroup-helperTextLineHeight);
294-
}
295-
.toggleContainer{
290+
.helperText {
291+
color: ${this.disabled
292+
? "var(--toggleGroup-disabledHelperTextFontColor)"
293+
: "var(--toggleGroup-helperTextFontColor)"};
294+
font-family: var(--toggleGroup-helperTextFontFamily);
295+
font-size: var(--toggleGroup-helperTextFontSize);
296+
font-style: var(--toggleGroup-helperTextFontStyle);
297+
font-weight: var(--toggleGroup-helperTextFontWeight);
298+
line-height: var(--toggleGroup-helperTextLineHeight);
299+
}
300+
.toggleContainer {
296301
display: inline-flex;
297302
flex-direction: row;
298-
opacity: 1px;
299-
height: calc(48px - 4px - 4px);
303+
opacity: 1;
304+
height: 48px;
300305
padding: 4px;
301306
margin-top: var(--toggleGroup-containerMarginTop);
302307
border-width: var(--toggleGroup-containerBorderThickness);
303308
border-style: var(--toggleGroup-containerBorderStyle);
304309
border-radius: var(--toggleGroup-containerBorderRadius);
305310
border-color: var(--toggleGroup-containerBorderColor);
306311
background-color: var(--toggleGroup-containerBackgroundColor);
307-
padding: 4px;
308312
margin-top: var(--toggleGroup-containerMarginTop);
309313
align-items: center;
310314
min-height: 40px;
315+
box-sizing: border-box;
311316
}
312-
313317
${this.disabledStyles()};
318+
319+
dxc-toggle:not(:last-of-type) {
320+
margin-right: 4px;
321+
}
314322
`;
315323
}
316324
}

0 commit comments

Comments
 (0)