Skip to content

Commit e99195a

Browse files
simeonoffsimeonoff
authored
Merge pull request #8951 from IgniteUI/SIvanova/icon-and-label-button
feat(button): icon + label button styling
2 parents cf49e0c + ba6e339 commit e99195a

File tree

4 files changed

+49
-28
lines changed

4 files changed

+49
-28
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ All notable changes for each version of this project will be documented in this
9191
- **Breaking Change**:
9292
- `onPagingDone` output is removed. Use the `paging` and `pagingDone` outputs exposed by the `IgxPaginator`.
9393
- `page`, `perPage`, `paginate`, `nextPage`, `previousPage` and `totalPages` in the grids are deprecated and will be removed. Use the corresponding `IgxPaginator` outputs/inputs. When using an external paginator, take care to provide the corresponding slice of data. See [`Paging with Custom Template`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging-with-custom-template)
94+
- IgxButton
95+
- IgxIcon(s) placed in a button now include margin if there are one or more sibling elements to give them some breathing room. The amount of margin applied depends on the display density of the button.
9496
9597
9698
## 11.0.4

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,14 @@
408408
));
409409
}
410410

411+
/// @access private
412+
@mixin _icon-w-margin($margin, $left) {
413+
* + igx-icon,
414+
igx-icon + *:not(igx-icon) {
415+
margin-#{$left}: $margin;
416+
}
417+
}
418+
411419
/// @param {Map} $theme - The theme used to style the component.
412420
/// @requires {mixin} igx-root-css-vars
413421
/// @requires rem
@@ -531,6 +539,12 @@
531539
compact: rem(32px)
532540
);
533541

542+
$icon-in-button-margin: (
543+
comfortable: rem(12px),
544+
cosy: rem(8px),
545+
compact: rem(4px)
546+
);
547+
534548
$icon-in-button-size: rem(18px);
535549

536550
$raised-shadow: map-get((
@@ -600,37 +614,50 @@
600614
transition: $button-transition;
601615
font-family: inherit;
602616

603-
%igx-icon-display {
617+
igx-icon {
604618
width: $icon-in-button-size;
605619
height: $icon-in-button-size;
606620
font-size: $icon-in-button-size;
607621
}
622+
623+
@include _icon-w-margin(
624+
map-get($icon-in-button-margin, 'comfortable'),
625+
$left
626+
);
608627
}
609628

610629
%igx-button-display--cosy {
611630
padding: map-get($button-padding, 'cosy');
612631
min-height: map-get($button-size, 'cosy');
632+
@include _icon-w-margin(
633+
map-get($icon-in-button-margin, 'cosy'),
634+
$left
635+
);
613636
}
614637

615638
%igx-button-display--compact {
616639
padding: map-get($button-padding, 'compact');
617640
min-height: map-get($button-size, 'compact');
641+
@include _icon-w-margin(
642+
map-get($icon-in-button-margin, 'compact'),
643+
$left
644+
);
618645
}
619646

620647
%igx-button--flat {
621648
background: --var($theme, 'flat-background');
622649
color: --var($theme, 'flat-text-color');
623650
border-radius: --var($theme, 'flat-border-radius');
624651

625-
%igx-icon-display {
652+
igx-icon {
626653
color: --var($theme, 'flat-icon-color')
627654
}
628655

629656
&:hover {
630657
background: --var($theme, 'flat-hover-background');
631658
color: --var($theme, 'flat-hover-text-color');
632659

633-
%igx-icon-display {
660+
igx-icon {
634661
color: --var($theme, 'flat-hover-icon-color');
635662
}
636663
}
@@ -642,7 +669,7 @@
642669
box-shadow: 0 0 0 rem(3px) --var($theme, 'flat-shadow-color');
643670

644671

645-
%igx-icon-display {
672+
igx-icon {
646673
color: --var($theme, 'flat-focus-icon-color');
647674
}
648675
}
@@ -665,15 +692,15 @@
665692
}
666693
}
667694

668-
%igx-icon-display {
695+
igx-icon {
669696
color: --var($theme, 'outlined-icon-color')
670697
}
671698

672699
&:hover {
673700
background: --var($theme, 'outlined-hover-background');
674701
color: --var($theme, 'outlined-hover-text-color');
675702

676-
%igx-icon-display {
703+
igx-icon {
677704
color: --var($theme, 'outlined-hover-icon-color')
678705
}
679706
}
@@ -684,7 +711,7 @@
684711
color: --var($theme, 'outlined-focus-text-color');
685712
box-shadow: 0 0 0 rem(3px) --var($theme, 'outlined-shadow-color');
686713

687-
%igx-icon-display {
714+
igx-icon {
688715
color: --var($theme, 'outlined-focus-icon-color')
689716
}
690717
}
@@ -693,11 +720,19 @@
693720
%igx-button--outlined-cosy {
694721
padding: map-get($outlined-button-padding, 'cosy');
695722
min-height: map-get($button-size, 'cosy');
723+
@include _icon-w-margin(
724+
map-get($icon-in-button-margin, 'cosy'),
725+
$left
726+
);
696727
}
697728

698729
%igx-button--outlined-compact {
699730
padding: map-get($outlined-button-padding, 'compact');
700731
min-height: map-get($button-size, 'compact');
732+
@include _icon-w-margin(
733+
map-get($icon-in-button-margin, 'compact'),
734+
$left
735+
);
701736
}
702737

703738
%igx-button--raised {
@@ -706,7 +741,7 @@
706741
box-shadow: $raised-shadow;
707742
border-radius: --var($theme, 'raised-border-radius');
708743

709-
%igx-icon-display {
744+
igx-icon {
710745
color: --var($theme, 'raised-icon-color')
711746
}
712747

@@ -716,7 +751,7 @@
716751
box-shadow: $raised-shadow--hover;
717752

718753

719-
%igx-icon-display {
754+
igx-icon {
720755
color: --var($theme, 'raised-hover-icon-color')
721756
}
722757
}
@@ -732,7 +767,7 @@
732767
box-shadow: $raised-shadow--focus;
733768
}
734769

735-
%igx-icon-display {
770+
igx-icon {
736771
color: --var($theme, 'raised-focus-icon-color')
737772
}
738773
}

‎src/app/button/button.sample.css

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,6 @@
2121
justify-self: center;
2222
}
2323

24-
.igx-button--flat .igx-icon,
25-
.igx-button--raised .igx-icon,
26-
.igx-button--outlined .igx-icon {
27-
margin-right: 8px;
28-
}
29-
30-
[dir='rtl'].igx-button--flat .igx-icon,
31-
[dir='rtl'].igx-button--raised .igx-icon,
32-
[dir='rtl'].igx-button--outlined .igx-icon,
33-
[dir='rtl'] .igx-button--flat .igx-icon,
34-
[dir='rtl'] .igx-button--raised .igx-icon,
35-
[dir='rtl'] .igx-button--outlined .igx-icon {
36-
margin-left: 8px;
37-
margin-right: 0;
38-
}
39-
4024
.density-chooser {
4125
margin-bottom: 16px;
4226
}

‎src/app/button/button.sample.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,8 @@ <h4 class="sample-title">Buttons based on Display Density</h4>
158158
</div>
159159
<div class="button-sample">
160160
<button igxButton="outlined" igxRipple [displayDensity]="density">
161+
<span>Outlined</span>
161162
<igx-icon>face</igx-icon>
162-
Outlined
163163
</button>
164164
</div>
165165
<div class="button-sample">
@@ -168,7 +168,7 @@ <h4 class="sample-title">Buttons based on Display Density</h4>
168168
<div class="button-sample">
169169
<button igxButton="raised" igxRipple [displayDensity]="density">
170170
<igx-icon>face</igx-icon>
171-
Raised
171+
<span>Raised</span>
172172
</button>
173173
</div>
174174
<div class="button-sample">

0 commit comments

Comments
 (0)