Merge branch 'develop'

valentingavran · Jul 26, 2022 · 51bdaac · 51bdaac
2 parents 8ae0b34 + b5f5a1c
commit 51bdaac
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 45 deletions.
diff --git a/.versionrc b/.versionrc
@@ -29,23 +29,23 @@
     },
     {
       "type": "chore",
-      "section": "🛠  Other Commmits"
+      "section": "🛠  Other Commits"
     },
     {
       "type": "build",
-      "section": "🛠  Other Commmits"
+      "section": "🛠  Other Commits"
     },
     {
       "type": "ci",
-      "section": "🛠  Other Commmits"
+      "section": "🛠  Other Commits"
     },
     {
       "type": "test",
-      "section": "🛠  Other Commmits"
+      "section": "🛠  Other Commits"
     },
     {
       "type": "style",
-      "section": "🛠  Other Commmits"
+      "section": "🛠  Other Commits"
     }
   ],
   "packageFiles": [

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,7 @@ All notable changes to this project will be documented in this file. See [standa
 * All dependencies including Angular have been updated to the latest version.
 Anglify now uses Angular 14 Updating should work seamlessly.
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * update to Angular 14 ([64d971d](https://github.com/valentingavran/anglify/commit/64d971d666459dd5b17b0fdfeb4357614dd1e5f0))
 
@@ -46,7 +46,7 @@ Anglify now uses Angular 14 Updating should work seamlessly.
 * fix some deprecated slots ([bd90880](https://github.com/valentingavran/anglify/commit/bd90880b04d77f6f34e9c326133c25802495b260))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * add compodoc npm script command ([73afce5](https://github.com/valentingavran/anglify/commit/73afce558ac6bcc748f109946361d6fae4eec0fe))
 
@@ -84,7 +84,7 @@ Angular.
 * use Anglify table for styling API ([febfd29](https://github.com/valentingavran/anglify/commit/febfd299259f9d9e7fdafa82053728acf0b66e30))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * adjust vscode settings to exclude build directory from search ([fd89678](https://github.com/valentingavran/anglify/commit/fd8967811434b14fe5642d1cca308b73f9204867))
 * cleanup index.ts ([b901192](https://github.com/valentingavran/anglify/commit/b901192f625e199e5a3afba64a2ecea1c3f5f4e8))
@@ -165,7 +165,7 @@ Angular.
 * add release notes page ([dbbb083](https://github.com/valentingavran/anglify/commit/dbbb0833de578ad3885abc395fc6e22326782dc8))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * fix anglify build command ([5543a6a](https://github.com/valentingavran/anglify/commit/5543a6ae623764b77b19f69da7d5fb0b9badf723))
 
@@ -209,7 +209,7 @@ and the Text Area component
 * replace [@import](https://github.com/import) with [@use](https://github.com/use) everywhere ([5fdf7d1](https://github.com/valentingavran/anglify/commit/5fdf7d15706db03c34e72a6eed4ce9d04257dd04))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * update deps and add cpy-cli and rimraf for cross-platform compatability ([9ea98c0](https://github.com/valentingavran/anglify/commit/9ea98c0ea3cc0e896b4887c99b51cd5579db57aa))
 
@@ -223,7 +223,7 @@ and the Text Area component
 ### [0.21.2](https://github.com/valentingavran/anglify/compare/v0.21.1...v0.21.2) (2022-06-23)
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * add missing test files ([e96dc50](https://github.com/valentingavran/anglify/commit/e96dc50feb2973e2ecb23f1186795110b9c8254f))
 
@@ -269,7 +269,7 @@ properties with the same name.
 * **Radio Button:** remove hover state when hovering over label ([74a4cb1](https://github.com/valentingavran/anglify/commit/74a4cb14b0294d74490a60d22e43bfab0aee7f9e))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * add package description and additional information ([f97ed25](https://github.com/valentingavran/anglify/commit/f97ed253e9d63205065bba3dffb0cfa1cc19e0f0))
 * copy root README to anglify lib bundle just before publishing ([ff52da2](https://github.com/valentingavran/anglify/commit/ff52da2ed935c456b32c61205a8b622860bbba46))
@@ -356,7 +356,7 @@ overwritten by the different size properties (for example: `--anglify-icon-size-
 * **Toolbar:** add elevation property ([e8c61ca](https://github.com/valentingavran/anglify/commit/e8c61ca15ac38868c71bfa140661925fa913df5f))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * adjust changelog generation ([7d9381d](https://github.com/valentingavran/anglify/commit/7d9381d84b82fb64b1b50bc803b747facf87c5a8))
 * extend stylelint config so that style properties get sorted ([d611a28](https://github.com/valentingavran/anglify/commit/d611a286dc2568355aa3dc4a0cc6c1d8ad850b4a))
@@ -473,7 +473,7 @@ to add the theme variables, you must now call the mixin with `@include light-the
 * typographies should not have predefined colors ([813ea7d](https://github.com/valentingavran/anglify/commit/813ea7d173692325bf058786aaf275a2d44fbf39))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * add husky pre-commit checks ([3f3ed9c](https://github.com/valentingavran/anglify/commit/3f3ed9cdd02507c73df47b10d915bf3032af41f4))
 * add stylelint ([c36fc84](https://github.com/valentingavran/anglify/commit/c36fc840351deec8c1d821297eedf2b294e15467))
@@ -506,7 +506,7 @@ to add the theme variables, you must now call the mixin with `@include light-the
 * change absolute import paths to relative ones in some places ([f733ed3](https://github.com/valentingavran/anglify/commit/f733ed3ac66bb302ce487b5e425d31b8978e7ef3))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * **release:** 0.17.2 ([53e996e](https://github.com/valentingavran/anglify/commit/53e996ebf24566932a3f1321b3cd13e32039955d))
 * **release:** 0.17.2 ([debf753](https://github.com/valentingavran/anglify/commit/debf753f8537e81515b150150fccaf0a540589ca))
@@ -528,7 +528,7 @@ were also places where no TemplateRefs were used at all (instad only normal sele
 now been standardized. At the respective places one must now use
 `<ng-template slot="...">...</ng-template>`. The slot name is passed via the slot attribute
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * improve pull request and issue templates ([af08084](https://github.com/valentingavran/anglify/commit/af08084ef5549ecfc271bbf807d01c4ac7a71753))
 * test anglify library when running npm run test ([b0fd37a](https://github.com/valentingavran/anglify/commit/b0fd37afcb4239f0322f111f6a63d11ae045edf5))
@@ -587,7 +587,7 @@ been unified. BooleanLike only makes sense in templates.
 * **List:** add list item group examples ([125b289](https://github.com/valentingavran/anglify/commit/125b289758ae9d575a45a383aa1907d90dbf312a))
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * change release notes structure ([82f40cc](https://github.com/valentingavran/anglify/commit/82f40cc28495eb628363d5ee9eb74e88908b0e26))
 
@@ -608,7 +608,7 @@ been unified. BooleanLike only makes sense in templates.
 ### [0.15.1](https://github.com/valentingavran/anglify/compare/v0.15.0...v0.15.1) (2022-05-02)
 
 
-### 🛠  Other Commmits
+### 🛠  Other Commits
 
 * add contributing guide ([9e1734c](https://github.com/valentingavran/anglify/commit/9e1734cdd0318917d511c0324a848a70fa680635))
 * add GitHub issue templates ([9ade2fd](https://github.com/valentingavran/anglify/commit/9ade2fd2e98d01ac9a552fb5fa3968fdc9e26cb0))

diff --git a/apps/docs/src/app/examples/text-field/disabled-validation/disabled-validation.component.html b/apps/docs/src/app/examples/text-field/disabled-validation/disabled-validation.component.html
@@ -10,6 +10,6 @@
 
 <div>
   <span>Is form valid: {{ form.valid }}</span>
-  <button anglifyButton appearance="contained-tonal" (click)="manualError()">Set manual error state on Email</button>
-  <button anglifyButton appearance="contained-tonal" (click)="disableEmailField()">Disable/Enable Email Field</button>
+  <button anglifyButton appearance="contained" (click)="manualError()">Set manual error state on Email</button>
+  <button anglifyButton appearance="contained" (click)="disableEmailField()">Disable/Enable Email Field</button>
 </div>
diff --git a/libs/anglify/src/modules/button/_variables.scss b/libs/anglify/src/modules/button/_variables.scss
@@ -8,9 +8,9 @@ $button-inline-padding-end-icon: var(--anglify-button-inline-padding-end-icon, 1
 $button-inline-padding-end-text: var(--anglify-button-inline-padding-end-text, 8px) !default;
 $button-inline-padding-end-extended-fab: var(--anglify-button-inline-padding-end-extended-fab, 20px) !default;
 $button-contained-background: var(--anglify-button-contained-background, var(--color-primary)) !default;
-$button-contained-background-disabled: var(--anglify-button-contained-background, var(--color-surface)) !default;
+$button-contained-background-disabled: var(--anglify-button-contained-background, var(--color-surface-overlay)) !default;
 $button-contained-label-color: var(--anglify-button-contained-label-color, var(--color-on-primary-high-emphasis)) !default;
-$button-contained-label-color-disabled: var(--anglify-button-contained-label-color, var(--color-on-surface-low-emphasis)) !default;
+$button-contained-label-color-disabled: var(--anglify-button-contained-label-color, var(--color-on-surface-overlay-low-emphasis)) !default;
 $button-contained-font: var(--anglify-button-contained-font, var(--font-button)) !default;
 $button-contained-letter-spacing: var(--anglify-button-contained-letter-spacing, var(--font-letter-spacing-button)) !default;
 $button-contained-text-transform: var(--anglify-button-contained-text-transform, var(--font-text-transform-button)) !default;

diff --git a/libs/anglify/src/modules/button/button.component.scss b/libs/anglify/src/modules/button/button.component.scss
@@ -17,7 +17,6 @@
   @include elevation-transition;
 
   &.contained,
-  &.contained-tonal,
   &.outlined,
   &.text {
     height: $button-height;

diff --git a/libs/anglify/src/modules/button/button.component.spec.ts b/libs/anglify/src/modules/button/button.component.spec.ts
@@ -25,6 +25,7 @@ describe('ButtonComponent', () => {
   it('should have default settings', () => {
     expect(component.appearance).toBe(DEFAULT_BUTTON_SETTINGS.appearance);
     expect(component.block).toBe(DEFAULT_BUTTON_SETTINGS.block);
-    expect(component.ripple).toBe(DEFAULT_BUTTON_SETTINGS.ripple);
+    expect(component.block).toBe(DEFAULT_BUTTON_SETTINGS.block);
+    expect(component.state).toBe(DEFAULT_BUTTON_SETTINGS.state);
   });
 });
diff --git a/libs/anglify/src/modules/button/button.interface.ts b/libs/anglify/src/modules/button/button.interface.ts
@@ -1,4 +1,4 @@
-export type ButtonAppearance = 'contained' | 'contained-tonal' | 'outlined' | 'text' | 'icon' | 'fab' | 'extended-fab';
+export type ButtonAppearance = 'contained' | 'outlined' | 'text' | 'icon' | 'fab' | 'extended-fab';
 
 export interface EntireButtonSettings {
   appearance: ButtonAppearance;

diff --git a/libs/anglify/src/modules/input/_details.scss b/libs/anglify/src/modules/input/_details.scss
@@ -6,6 +6,7 @@
     overflow: hidden;
     min-height: $input-details-min-height;
     margin-top: $input-gap;
+    margin-bottom: $input-gap;
     font: var(--font-caption);
     gap: $input-gap;
     grid-area: details;

diff --git a/libs/anglify/src/modules/input/_filled.scss b/libs/anglify/src/modules/input/_filled.scss
@@ -67,17 +67,9 @@
       label {
         color: $input-filled-label-color-disabled;
       }
-    }
-  }
-
-  &:not(.anglify-input-focused, .anglify-input-disabled) {
-    .anglify-input {
-      &:hover {
-        --state-container-color: #{$input-filled-state-color-hover};
 
-        &::before {
-          border-bottom: $input-filled-border-width-inactive solid $input-filled-border-color-hover;
-        }
+      &::before {
+        border-bottom: $input-filled-border-width-inactive solid $input-filled-border-color-disabled;
       }
     }
   }
@@ -94,6 +86,20 @@
     }
   }
 
+  // Two separate not selectors needed
+  /* stylelint-disable-next-line selector-not-notation */
+  &:not(.anglify-input-focused):not(.anglify-input-disabled) {
+    .anglify-input {
+      &:hover {
+        --state-container-color: #{$input-filled-state-color-hover};
+
+        &::before {
+          border-bottom: $input-filled-border-width-inactive solid $input-filled-border-color-hover;
+        }
+      }
+    }
+  }
+
   .anglify-input-prepend-inner {
     padding-inline-start: $input-filled-label-start-offset;
   }

diff --git a/libs/anglify/src/modules/input/_variables.scss b/libs/anglify/src/modules/input/_variables.scss
@@ -1,9 +1,9 @@
 $input-prepend-width: var(--anglify-input-prepend-width, 0px) !default;
 $input-content-width: var(--anglify-input-content-width, 0px) !default;
 $input-append-width: var(--anglify-input-append-width, 0px) !default;
-$input-min-height: var(--anglify-input-min-height, 56px) !default;
+$input-min-height: var(--anglify-input-min-height, 54px) !default;
 $input-border-radius: var(--anglify-input-border-radius, 4px) !default;
-$input-gap: var(--anglify-input-gap, 8px) !default;
+$input-gap: var(--anglify-input-gap, 4px) !default;
 $input-label-font: var(--anglify-input-label-font, var(--font-caption)) !default;
 $input-label-letter-spacing: var(--anglify-input-label-letter-spacing, var(--font-letter-spacing-caption)) !default;
 $input-label-text-transform: var(--anglify-input-label-text-transform, var(--font-text-transform-caption)) !default;

diff --git a/libs/anglify/src/modules/text-area/text-area.component.scss b/libs/anglify/src/modules/text-area/text-area.component.scss
@@ -51,7 +51,7 @@
     }
 
     &.anglify-input-filled {
-      --anglify-input-min-height: calc(56px - 24px);
+      --anglify-input-min-height: calc(54px - 24px);
 
       ::ng-deep textarea {
         min-height: var(--anglify-input-min-height);
@@ -63,7 +63,7 @@
     }
 
     &.anglify-input-outlined {
-      --anglify-input-min-height: calc(56px - var(--anglify-input-outlined-label-start-offset));
+      --anglify-input-min-height: calc(54px - var(--anglify-input-outlined-label-start-offset));
 
       ::ng-deep textarea {
         min-height: var(--anglify-input-min-height);

diff --git a/libs/anglify/src/modules/text-field/text-field.component.scss b/libs/anglify/src/modules/text-field/text-field.component.scss
@@ -4,7 +4,7 @@
   --anglify-input-filled-label-start-offset: 16px;
   --anglify-input-filled-label-end-offset: 16px;
   --anglify-input-min-width: 0;
-  --anglify-input-min-height: 56px;
+  --anglify-input-min-height: 54px;
   --anglify-input-min-height-dense: 40px;
   --anglify-input-flex-basis: 100px;
   --anglify-input-flex-grow: 1;

diff --git a/libs/anglify/src/styles/themes/dark.scss b/libs/anglify/src/styles/themes/dark.scss
@@ -31,12 +31,12 @@
   --color-on-inverse-surface-medium-emphasis: rgb(0 0 0 / 60%);
   --color-on-inverse-surface-low-emphasis: rgb(0 0 0 / 38%);
   --border-color-on-surface-high-emphasis: rgb(255 255 255 / 87%);
-  --border-color-on-surface-medium-emphasis: rgb(255 255 255 / 60%);
+  --border-color-on-surface-medium-emphasis: rgb(255 255 255 / 38%);
   --border-color-on-surface-low-emphasis: rgb(255 255 255 / 12%);
   --color-surface-overlay: rgb(255 255 255 / 4%);
-  --color-on-surface-overlay-high-emphasis: rgb(0 0 0 / 87%);
-  --color-on-surface-overlay-medium-emphasis: rgb(0 0 0 / 60%);
-  --color-on-surface-overlay-low-emphasis: rgb(0 0 0 / 38%);
+  --color-on-surface-overlay-high-emphasis: rgb(255 255 255 / 87%);
+  --color-on-surface-overlay-medium-emphasis: rgb(255 255 255 / 60%);
+  --color-on-surface-overlay-low-emphasis: rgb(255 255 255 / 38%);
   --color-elevated: rgb(46 46 46 / 100%);
   --color-backdrop: rgb(0 0 0 / 32%);
   --color-ripple: rgb(255 255 255 / 12%);

diff --git a/libs/anglify/src/styles/themes/light.scss b/libs/anglify/src/styles/themes/light.scss
@@ -31,7 +31,7 @@
   --color-on-inverse-surface-medium-emphasis: rgb(255 255 255 / 60%);
   --color-on-inverse-surface-low-emphasis: rgb(255 255 255 / 38%);
   --border-color-on-surface-high-emphasis: rgb(0 0 0 / 87%);
-  --border-color-on-surface-medium-emphasis: rgb(0 0 0 / 60%);
+  --border-color-on-surface-medium-emphasis: rgb(0 0 0 / 38%);
   --border-color-on-surface-low-emphasis: rgb(0 0 0 / 12%);
   --color-surface-overlay: rgb(33 33 33 / 8%);
   --color-on-surface-overlay-high-emphasis: rgb(0 0 0 / 87%);