Merge branch 'master' of https://github.com/IgniteUI/igniteui-webcomp…

…onents into rkaraivanov/radio-group-enhancement

CHANGELOG.md

@@ -7,8 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Banner component [#1174](https://github.com/IgniteUI/igniteui-webcomponents/issues/1174)
+- Divider component [#1237](https://github.com/IgniteUI/igniteui-webcomponents/issues/1237)
 - Date picker component [#174](https://github.com/IgniteUI/igniteui-webcomponents/issues/174)
-
 - Radio group - Bind underlying radio components name and checked state through the radio group [#315](https://github.com/IgniteUI/igniteui-webcomponents/issues/315)
 ### Fixed
 - Input, Textarea - passing `undefined` to **value** sets the underlying input value to undefined [#1206](https://github.com/IgniteUI/igniteui-webcomponents/issues/1206)

src/components/common/definitions/defineAllComponents.ts

@@ -19,6 +19,7 @@ import IgcComboComponent from '../../combo/combo.js';
 import IgcDatePickerComponent from '../../date-picker/date-picker.js';
 import IgcDateTimeInputComponent from '../../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../../dialog/dialog.js';
+import IgcDividerComponent from '../../divider/divider.js';
 import IgcDropdownGroupComponent from '../../dropdown/dropdown-group.js';
 import IgcDropdownHeaderComponent from '../../dropdown/dropdown-header.js';
 import IgcDropdownItemComponent from '../../dropdown/dropdown-item.js';
@@ -87,6 +88,7 @@ const allComponents: IgniteComponent[] = [
   IgcDropdownHeaderComponent,
   IgcDropdownItemComponent,
   IgcDialogComponent,
+  IgcDividerComponent,
   IgcSwitchComponent,
   IgcExpansionPanelComponent,
   IgcFormComponent,

src/components/date-picker/date-picker.spec.ts

@@ -18,6 +18,7 @@ import {
   FormAssociatedTestBed,
   simulateClick,
   simulateKeyboard,
+  simulatePointerDown,
 } from '../common/utils.spec.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import IgcDatePickerComponent from './date-picker.js';
@@ -1003,6 +1004,29 @@ describe('Date picker', () => {
       spec.submitValidates();
     });
   });
+
+  describe('Initial validation', () => {
+    it('should not enter in invalid state when clicking the calendar toggle part', async () => {
+      picker = await fixture(
+        html`<igc-date-picker required></igc-date-picker>`
+      );
+      dateTimeInput = picker.renderRoot.querySelector(
+        IgcDateTimeInputComponent.tagName
+      )!;
+      const icon = picker.renderRoot.querySelector(
+        `[name='${pickerShowIcon}']`
+      )!;
+
+      expect(picker.invalid).to.be.false;
+      expect(dateTimeInput.invalid).to.be.false;
+
+      simulatePointerDown(icon);
+      await elementUpdated(picker);
+
+      expect(picker.invalid).to.be.false;
+      expect(dateTimeInput.invalid).to.be.false;
+    });
+  });
 });
 
 const selectCurrentDate = (calendar: IgcCalendarComponent) => {

src/components/date-picker/date-picker.ts

@@ -174,6 +174,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     },
   ];
 
+  /* blazorSuppress */
   public static register() {
     registerComponent(
       IgcDatePickerComponent,
@@ -454,6 +455,9 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   constructor() {
     super();
 
+    this.addEventListener('focusin', this.handleFocusIn);
+    this.addEventListener('focusout', this.handleFocusOut);
+
     addKeybindings(this, {
       skip: () => this.disabled,
       bindingDefaults: { preventDefault: true },
@@ -521,6 +525,24 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     }
   }
 
+  protected handleFocusIn() {
+    this._dirty = true;
+  }
+
+  protected handleFocusOut({ relatedTarget }: FocusEvent) {
+    if (!this.contains(relatedTarget as Node)) {
+      this.checkValidity();
+    }
+  }
+
+  protected handlerCalendarIconSlotPointerDown(event: PointerEvent) {
+    // This is where the delegateFocus of the underlying input is a chore.
+    // If we have a required validator we don't want the input to enter an invalid
+    // state right off the bat when opening the picker which will happen since focus is transferred to the calendar element.
+    // So we call preventDefault on the event in order to not focus the input and trigger its validation logic on blur.
+    event.preventDefault();
+  }
+
   protected handleInputClick(event: Event) {
     if (findElementFromEventPath('input', event)) {
       // Open only if the click originates from the underlying input
@@ -633,7 +655,12 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
 
     return html`
-      <span slot="prefix" part=${state} @click=${this.handleAnchorClick}>
+      <span
+        slot="prefix"
+        part=${state}
+        @pointerdown=${this.handlerCalendarIconSlotPointerDown}
+        @click=${this.handleAnchorClick}
+      >
         <slot name=${state}>${defaultIcon}</slot>
       </span>
     `;

src/components/divider/divider.spec.ts

@@ -0,0 +1,49 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcDividerComponent from './divider.js';
+
+describe('Divider', () => {
+  before(() => {
+    defineComponents(IgcDividerComponent);
+  });
+
+  const createDefaultDivider = () => html` <igc-divider></igc-divider> `;
+
+  const createVerticalDashedDivider = () => html`
+    <igc-divider vertical type="dashed"></igc-divider>
+  `;
+
+  let divider: IgcDividerComponent;
+
+  beforeEach(async () => {
+    divider = await fixture<IgcDividerComponent>(createDefaultDivider());
+  });
+
+  describe('Initialization Tests', () => {
+    it('passes the a11y audit', async () => {
+      await expect(divider).to.be.accessible();
+      await expect(divider).shadowDom.to.be.accessible();
+    });
+
+    it('is correctly initialized and rendered with its default component state', () => {
+      expect(divider.middle).to.be.false;
+      expect(divider.vertical).to.be.false;
+      expect(divider.type).to.be.equal('solid');
+      expect(divider).dom.to.equal('<igc-divider type="solid"></igc-divider>');
+    });
+
+    it('should correctly render when vertical and dashed properties are set', async () => {
+      divider = await fixture<IgcDividerComponent>(
+        createVerticalDashedDivider()
+      );
+
+      expect(divider.middle).to.be.false;
+      expect(divider.vertical).to.be.true;
+      expect(divider.type).to.be.equal('dashed');
+      expect(divider).dom.to.equal(
+        '<igc-divider vertical type="dashed"></igc-divider>'
+      );
+    });
+  });
+});

src/components/divider/divider.ts

@@ -0,0 +1,83 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { styles } from './themes/divider.base.css.js';
+import { styles as shared } from './themes/shared/divider.common.css.js';
+import { all } from './themes/themes.js';
+
+/**
+ * The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.
+ *
+ * @element igc-divider
+ *
+ * @cssproperty --color - Sets the color of the divider.
+ * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.
+ *
+ */
+
+@themes(all)
+export default class IgcDividerComponent extends LitElement {
+  public static readonly tagName = 'igc-divider';
+  public static override styles = [styles, shared];
+
+  private _internals: ElementInternals;
+
+  /* blazorSuppress */
+  public static register() {
+    registerComponent(IgcDividerComponent);
+  }
+
+  private _vertical = false;
+
+  /**
+   * Whether to render a vertical divider line.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public set vertical(value: boolean) {
+    this._vertical = Boolean(value);
+    this._internals.ariaOrientation = this._vertical
+      ? 'vertical'
+      : 'horizontal';
+  }
+
+  public get vertical(): boolean {
+    return this._vertical;
+  }
+
+  /**
+   * When set and inset is provided, it will shrink the divider line from both sides.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public middle = false;
+
+  /**
+   * Whether to render a solid or a dashed divider line.
+   * @attr
+   */
+
+  @property({ reflect: true })
+  public type: 'solid' | 'dashed' = 'solid';
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    this._internals.role = 'separator';
+    this._internals.ariaOrientation = this._vertical
+      ? 'vertical'
+      : 'horizontal';
+  }
+
+  protected override render() {
+    return html``;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-divider': IgcDividerComponent;
+  }
+}

src/components/divider/themes/dark/_themes.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/divider' as *;
+
+$material: digest-schema($dark-material-divider);
+$bootstrap: digest-schema($dark-bootstrap-divider);
+$fluent: digest-schema($dark-fluent-divider);
+$indigo: digest-schema($dark-indigo-divider);

src/components/divider/themes/dark/divider.bootstrap.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.fluent.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.indigo.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.material.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/divider.base.scss

@@ -0,0 +1,24 @@
+@use 'styles/common/component';
+@use 'styles/utilities' as *;
+
+:host {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    overflow: hidden;
+    min-height: rem(1px);
+    width: 100%;
+
+    &::after {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+:host([vertical]) {
+    display: inline-flex;
+    min-width: rem(1px);
+    width: rem(1px);
+}

src/components/divider/themes/light/_themes.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/divider' as *;
+
+$base: digest-schema($light-divider);
+$material: digest-schema($material-divider);
+$bootstrap: digest-schema($bootstrap-divider);
+$fluent: digest-schema($fluent-divider);
+$indigo: digest-schema($indigo-divider);

src/components/divider/themes/light/divider.bootstrap.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.fluent.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.indigo.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.material.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.shared.scss

@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-divider');
+}