refactor(time-picker): remove redundant styles

projects/igniteui-angular/migrations/migration-collection.json

@@ -201,6 +201,11 @@
             "version": "18.2.0",
             "description": "Updates Ignite UI for Angular from v18.1.x to v18.2.0",
             "factory": "./update-18_2_0"
+        },
+        "migration-41": {
+            "version": "18.2.3",
+            "description": "Updates Ignite UI for Angular from v18.2.0 to v18.2.3",
+            "factory": "./update-18_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/update-18_2_3/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$header-time-period-color",
+      "remove": true,
+      "owner": "time-picker-theme",
+      "type":"property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-18_2_3/index.spec.ts

@@ -0,0 +1,36 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '18.2.3';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-41';
+
+    it('should remove the $header-time-period-color property from the time-picker-theme', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red,
+                $header-time-period-color: pink
+            );`
+        );
+
+        const tree = await schematicRunner
+            .runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-18_2_3/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '18.2.3';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

@@ -24,10 +24,6 @@
             @extend %time-picker__wrapper !optional;
         }
 
-        @include e(header-ampm) {
-            @extend %time-picker__header-ampm !optional;
-        }
-
         @include e(header-hour){
             @extend %time-picker__header-hour !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -23,7 +23,6 @@
 /// @param {Color} $disabled-item-background [null] - The background color for disabled values .
 /// @param {Color} $header-background [null] - The header background color of a time picker.
 /// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
-/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.
 /// @param {Color} $background-color [null] - The time-picker panel background color.
 /// @param {Number} $time-item-size [null] - The height of the time item.
 /// @param {Color} $divider-color [null] - The color for the actions area divider.
@@ -56,7 +55,6 @@
     $disabled-item-background: null,
     $header-background: null,
     $header-hour-text-color: null,
-    $header-time-period-color: null,
     $background-color: null,
     $modal-shadow: null,
     $dropdown-shadow: null,
@@ -85,12 +83,6 @@
         $header-hour-text-color: text-contrast($header-background);
     }
 
-    @if not($header-time-period-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-time-period-color: rgba(text-contrast($header-background), .8);
-        }
-    }
-
     @if not($selected-text-color) and $active-item-background {
         $selected-text-color: text-contrast($active-item-background);
     }
@@ -135,7 +127,6 @@
         disabled-item-background: $disabled-item-background,
         header-background: $header-background,
         header-hour-text-color: $header-hour-text-color,
-        header-time-period-color: $header-time-period-color,
         background-color: $background-color,
         modal-shadow: $modal-shadow,
         dropdown-shadow: $dropdown-shadow,
@@ -162,15 +153,15 @@
     $picker-buttons-padding: map.get((
         'material': rem(8px),
         'fluent': rem(8px),
-        'bootstrap': rem(16px),
+        'bootstrap': rem(8px),
         'indigo': rem(8px) rem(16px),
     ), $variant);
 
     $picker-header-padding: map.get((
-        'material': rem(24px) rem(16px),
+        'material': rem(16px) rem(24px),
         'fluent': rem(16px),
         'bootstrap': rem(16px),
-        'indigo': rem(16px) rem(24px) ,
+        'indigo': rem(16px),
     ), $variant);
 
     %time-picker-display {
@@ -287,7 +278,7 @@
     }
 
     %time-picker__item {
-        width: if($variant == 'indigo', rem(46px), rem(54px));
+        width: rem(46px);
         padding: rem(5px) rem(10px);
         border-radius: var-get($theme, 'active-item-border-radius');
         height: var-get($theme, 'time-item-size');
@@ -355,10 +346,6 @@
         }
     }
 
-    %time-picker__header-ampm {
-        color: var-get($theme, 'header-time-period-color');
-    }
-
     %time-picker__header--vertical {
         @if $variant == 'indigo' {
             min-width: rem(136px);
@@ -371,18 +358,14 @@
     %time-picker__header-hour {
         display: flex;
         color: var-get($theme, 'header-hour-text-color');
+        margin: 0;
 
         [dir='rtl'] & {
             flex-direction: row-reverse;
             justify-content: flex-end;
         }
     }
 
-    %time-picker__header-ampm,
-    %time-picker__header-hour {
-        margin: 0;
-    }
-
     %time-picker__buttons {
         display: flex;
         min-height: sizable(rem(40px), rem(44px), rem(48px));
@@ -413,24 +396,20 @@
     header-hour: 'h4',
     selected-time: 'h5'
 )) {
-    $time-period: map.get($categories, 'header-time-period');
     $header-hour: map.get($categories, 'header-hour');
     $selected-time: map.get($categories, 'selected-time');
 
-
-    %time-picker__header-ampm {
-        @include type-style($time-period, false);
-    }
-
     %time-picker__header-hour {
         @include type-style($header-hour, false) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 
     %time-picker__item--selected {
         @include type-style($selected-time) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -103,7 +103,6 @@
     ));
     @include tabs-typography();
     @include time-picker-typography($categories: (
-        header-time-period: 'subtitle-1',
         header-hour: 'h4',
         selected-time: 'h4'
     ));

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -106,7 +106,6 @@
         label: 'subtitle-2',
     ));
     @include time-picker-typography($categories: (
-        header-time-period: 'subtitle-1',
         header-hour: 'h5',
         selected-time: 'h6'
     ));