Skip to content

Commit e892953

Browse files
desig9steinsimeonoff
desig9stein
and
simeonoff
authored
refactor(divider): fix the component in flex context and add dev sample (#13492)
* fix(divider): fix divider in flex context --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 6475d85 commit e892953

File tree

13 files changed

+371
-57
lines changed

13 files changed

+371
-57
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@types/source-map": "0.5.2",
6868
"fflate": "^0.7.3",
6969
"hammerjs": "^2.0.8",
70-
"igniteui-theming": "^3.1.0",
70+
"igniteui-theming": "^3.1.1",
7171
"igniteui-trial-watermark": "^2.0.0",
7272
"lodash-es": "^4.17.21",
7373
"rxjs": "^6.6.7",

‎projects/igniteui-angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"igniteui-trial-watermark": "^1.0.3",
7777
"lodash-es": "^4.17.21",
7878
"uuid": "^9.0.0",
79-
"igniteui-theming": "^3.1.0",
79+
"igniteui-theming": "^3.1.1",
8080
"@igniteui/material-icons-extended": "^3.0.0"
8181
},
8282
"peerDependencies": {

‎projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-component.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414

1515
@extend %igx-divider-display !optional;
1616

17+
@include m(inset) {
18+
@extend %igx-divider--inset !optional;
19+
}
20+
1721
@include m(dashed) {
1822
@extend %igx-divider--dashed !optional;
1923
}
@@ -22,8 +26,8 @@
2226
@extend %igx-divider--vertical !optional;
2327
}
2428

25-
@include mx(vertical, dashed) {
26-
@extend %igx-divider--vertical-dashed !optional;
29+
@include mx(vertical, inset) {
30+
@extend %igx-divider--vertical-inset !optional;
2731
}
2832
}
2933
}

‎projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss

Lines changed: 74 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@
1111

1212
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
1313
/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).
14+
/// @param {number} $inset [null] - The inset value of the divider.
1415
/// @requires $light-material-schema
1516
/// @example scss Change the color of the divider
1617
/// $my-divider-theme: divider-theme($color: orange);
1718
/// // Pass the theme to the css-vars() mixin
1819
/// @include css-vars($my-divider-theme);
1920
@function divider-theme(
2021
$schema: $light-material-schema,
21-
$color: null
22+
$color: null,
23+
$inset: null
2224
) {
2325
$name: 'igx-divider';
2426
$divider-schema: ();
@@ -33,7 +35,8 @@
3335

3436
@return extend($theme, (
3537
name: $name,
36-
color: $color
38+
color: $color,
39+
inset: $inset
3740
));
3841
}
3942

@@ -42,26 +45,83 @@
4245
@include css-vars($theme);
4346

4447
%igx-divider-display {
45-
display: block;
46-
height: rem(1px);
47-
background: var-get($theme, 'color');
48-
margin: var(--igx-divider-inset, var(--inset, var(--_inset)));
48+
position: relative;
49+
justify-content: center;
50+
overflow: hidden;
51+
52+
&::after {
53+
content: '';
54+
position: absolute;
55+
height: 100%;
56+
width: 100%;
57+
background: var-get($theme, 'color');
58+
}
59+
}
60+
61+
%igx-divider-display:not(%igx-divider--vertical) {
62+
display: flex;
63+
min-height: rem(1px);
64+
width: 100%;
65+
position: relative;
66+
67+
&::after {
68+
inset-inline-start: var-get($theme, 'inset');
69+
}
70+
71+
&:not(%igx-divider--inset) {
72+
&::after {
73+
width: 100%;
74+
}
75+
}
76+
}
77+
78+
%igx-divider--inset:not(%igx-divider--vertical) {
79+
&::after {
80+
min-width: rem(4px);
81+
width: calc(100% - (var-get($theme, 'inset') * 2));
82+
}
83+
}
84+
85+
%igx-divider--dashed:not(%igx-divider--vertical) {
86+
&::after {
87+
background: repeating-linear-gradient(
88+
to right,
89+
var-get($theme, 'color'),
90+
var-get($theme, 'color') rem(10px),
91+
transparent rem(10px),
92+
transparent rem(20px)
93+
);
94+
}
4995
}
5096

5197
%igx-divider--dashed {
52-
background: linear-gradient(to right, var-get($theme, 'color') 50%, transparent 50%);
53-
background-size: rem(10px) rem(1px); /* dash size */
98+
&::after {
99+
background: repeating-linear-gradient(
100+
to bottom,
101+
var-get($theme, 'color'),
102+
var-get($theme, 'color') rem(10px),
103+
transparent rem(10px),
104+
transparent rem(20px)
105+
);
106+
}
54107
}
55108

56109
%igx-divider--vertical {
57-
display: inline-block;
58-
width: rem(1px);
110+
display: inline-flex;
59111
min-width: rem(1px);
60-
height: auto;
112+
width: rem(1px);
113+
114+
&::after {
115+
inset-block-start: var-get($theme, 'inset');
116+
width: 100%;
117+
height: 100%;
118+
}
61119
}
62120

63-
%igx-divider--vertical-dashed {
64-
background: linear-gradient(to bottom, var-get($theme, 'color') 50%, transparent 50%);
65-
background-size: rem(1px) rem(10px); /* dash size */
121+
%igx-divider--vertical-inset {
122+
&::after {
123+
min-height: rem(4px);
124+
height: calc(100% - (var-get($theme, 'inset') * 2));
125+
}
66126
}
67127
}

‎projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,22 @@ export class IgxDividerDirective {
8383
* this.divider.inset = '32px';
8484
* ```
8585
*/
86-
@HostBinding('style.--_inset')
86+
@HostBinding('style.--inset')
8787
public set inset(value: string) {
8888
this._inset = value;
8989
}
9090

9191
/**
9292
* Gets the current divider inset in terms of
93-
* margin representation as applied to the divider.
93+
* inset-inline-start representation as applied to the divider.
9494
* ```typescript
9595
* const inset = this.divider.inset;
9696
* ```
9797
*/
9898
public get inset() {
99-
const baseMargin = '0';
100-
101-
if (this.middle) {
102-
if (this.vertical) {
103-
return `${this._inset} ${baseMargin}`;
104-
}
105-
return `${baseMargin} ${this._inset}`;
106-
} else {
107-
if (this.vertical) {
108-
return `${this._inset} ${baseMargin} 0 ${baseMargin}`;
109-
}
110-
return `${baseMargin} 0 ${baseMargin} ${this._inset}`;
111-
}
99+
return this._inset;
112100
}
113101

114-
115102
/**
116103
* An @Input property that sets the value of the `inset` attribute.
117104
* If not provided it will be set to `'0'`.
@@ -131,6 +118,7 @@ export class IgxDividerDirective {
131118
public get isSolid() {
132119
return this.type === IgxDividerType.SOLID;
133120
}
121+
134122
}
135123

136124

‎projects/igniteui-angular/src/lib/directives/divider/divider.spec.ts

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,14 @@ describe('Divider', () => {
7272
expect(divider.nativeElement).toHaveClass(classes.inset);
7373
});
7474

75-
it('should set in the divider by the specified inset amount', () => {
75+
it('should inset the divider by the specified amount', () => {
7676
const inset = '16px';
7777
const divider = fixture.debugElement.query(By.css('igx-divider'));
78-
const insetVar = () => window.getComputedStyle(divider.nativeElement).getPropertyValue('--_inset');
78+
const insetVar = () => window.getComputedStyle(divider.nativeElement).getPropertyValue('--inset');
7979
fixture.componentInstance.inset = inset;
8080
fixture.detectChanges();
8181

82-
expect(insetVar()).toEqual(`0 0 0 ${inset}`);
83-
84-
fixture.componentInstance.middle = true;
85-
fixture.detectChanges();
86-
87-
expect(insetVar()).toEqual(`0 ${inset}`);
88-
89-
fixture.componentInstance.vertical = true;
90-
fixture.detectChanges();
91-
92-
expect(insetVar()).toEqual(`${inset} 0`);
93-
94-
fixture.componentInstance.middle = false;
95-
fixture.detectChanges();
96-
97-
expect(insetVar()).toEqual(`${inset} 0 0 0`);
82+
expect(insetVar()).toEqual(`${inset}`);
9883
});
9984

10085
it('should change the role of the divider to the specified value', () => {

‎src/app/app.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,11 @@ export class AppComponent implements OnInit {
109109
icon: 'date_range',
110110
name: 'DatePicker'
111111
},
112+
{
113+
link: '/divider',
114+
icon: 'safety_divider',
115+
name: 'Divider'
116+
},
112117
{
113118
link: '/dialog',
114119
icon: 'all_out',

‎src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ import { QueryBuilderComponent } from './query-builder/query-builder.sample';
156156
import { PivotGridStateSampleComponent } from './pivot-grid-state/pivot-grid-state.sample';
157157
import { ForbiddenValidatorDirective, GridValidationSampleComponent } from './grid-validation/grid-validation.sample.component';
158158
import { GridExportComponent } from './grid-export/grid-export.sample';
159+
import { DividerComponent } from './divider/divider.component';
159160

160161
const components = [
161162
AccordionSampleComponent,
@@ -301,7 +302,8 @@ const components = [
301302
IgxStepperSampleComponent,
302303
QueryBuilderComponent,
303304
RatingSampleComponent,
304-
GridExportComponent
305+
GridExportComponent,
306+
DividerComponent,
305307
];
306308

307309
@NgModule({

‎src/app/app.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ import { QueryBuilderComponent } from './query-builder/query-builder.sample';
136136
import { PivotGridStateSampleComponent } from './pivot-grid-state/pivot-grid-state.sample';
137137
import { GridValidationSampleComponent } from './grid-validation/grid-validation.sample.component';
138138
import { GridExportComponent } from './grid-export/grid-export.sample';
139+
import { DividerComponent } from './divider/divider.component';
139140

140141
const appRoutes: Routes = [
141142
{
@@ -202,6 +203,10 @@ const appRoutes: Routes = [
202203
{
203204
path: 'chip',
204205
component: ChipsSampleComponent
206+
},
207+
{
208+
path: 'divider',
209+
component: DividerComponent
205210
},
206211
{
207212
path: 'datePicker',

0 commit comments

Comments
 (0)