diff --git a/.versionrc b/.versionrc index 4ff7618b..ad8e13bb 100644 --- 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 index 892d922a..af2c40d1 100644 --- 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 `...`. 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 index c74125e6..21447ecf 100644 --- 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 @@
Is form valid: {{ form.valid }} - - + +
diff --git a/libs/anglify/src/modules/button/_variables.scss b/libs/anglify/src/modules/button/_variables.scss index c3b08b55..4e7f8aee 100644 --- 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 index 36b69d9f..d03c6742 100644 --- 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 index 5057489e..d0f9a10a 100644 --- 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 index 133f30ce..20d48109 100644 --- 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 index 11a0784c..785d214e 100644 --- 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 index c04fa4d9..06aa17a7 100644 --- 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 index f3c2bed9..7124c49f 100644 --- 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 index c95533b9..fb591044 100644 --- 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 index ab34390b..2c6ec929 100644 --- 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 index caa4e7b7..a6906793 100644 --- 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 index 1a64355e..e626c6dc 100644 --- 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%);