From af9faeca179e07ea145b7e229643903704b73386 Mon Sep 17 00:00:00 2001 From: Rikarin Date: Thu, 6 Jun 2024 14:06:44 +0200 Subject: [PATCH] feat: better css normalization --- .../app/docs/components/example/example.html | 2 +- .../app/docs/components/example/example.ts | 6 +- .../components/theming/theming.component.html | 2 +- .../components/theming/theming.component.ts | 3 +- libs/theme-core/src/core/normalize.scss | 380 ++++++++++++++---- libs/xui/.eslintrc.json | 12 +- libs/xui/src/config/config.service.ts | 2 +- libs/xui/src/config/config.ts | 2 - libs/xui/src/icon/icon-registry.ts | 2 +- libs/xui/src/icon/icon.ts | 2 +- libs/xui/src/menu/menu.service.ts | 1 - libs/xui/src/radio-list/radio-list.types.ts | 1 - libs/xui/src/radio/radio.types.ts | 1 - libs/xui/src/select/select.types.ts | 1 - libs/xui/src/snack-bar/simple-snack-bar.ts | 2 +- libs/xui/src/snack-bar/snack-bar.ts | 2 +- libs/xui/src/snack-bar/snack-bar.types.ts | 2 +- libs/xui/src/tabs/tab.types.ts | 1 - libs/xui/src/utils/convert.ts | 57 --- libs/xui/src/utils/index.ts | 1 - package.json | 2 +- 21 files changed, 327 insertions(+), 157 deletions(-) delete mode 100644 libs/xui/src/utils/convert.ts diff --git a/apps/web/src/app/docs/components/example/example.html b/apps/web/src/app/docs/components/example/example.html index c3bebc1d..46d78f98 100644 --- a/apps/web/src/app/docs/components/example/example.html +++ b/apps/web/src/app/docs/components/example/example.html @@ -14,7 +14,7 @@
-
TODO
+
TODO
@if (files) { } diff --git a/apps/web/src/app/docs/components/example/example.ts b/apps/web/src/app/docs/components/example/example.ts index 5471fd28..3cc92dda 100644 --- a/apps/web/src/app/docs/components/example/example.ts +++ b/apps/web/src/app/docs/components/example/example.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; -import { InputBoolean, XuiCard, XuiCardModule, XuiIcon, XuiTabModule, XuiTooltipModule } from '@xui/components'; +import { ChangeDetectionStrategy, Component, Inject, input, Input, OnInit } from '@angular/core'; +import { convertToBoolean, XuiCardModule, XuiIcon, XuiTabModule, XuiTooltipModule } from '@xui/components'; import sdk, { Project, ProjectFiles } from '@stackblitz/sdk'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject, lastValueFrom } from 'rxjs'; @@ -32,7 +32,7 @@ export class Example implements OnInit { content$ = new BehaviorSubject([]); @Input() files: { [name: string]: FileType } = {}; - @Input() @InputBoolean() todo = false; + todo = input(false, { transform: (v: string | boolean) => convertToBoolean(v) }); get project(): Project { return { diff --git a/apps/web/src/app/docs/components/theming/theming.component.html b/apps/web/src/app/docs/components/theming/theming.component.html index a9f6fdbd..6ddc42ae 100644 --- a/apps/web/src/app/docs/components/theming/theming.component.html +++ b/apps/web/src/app/docs/components/theming/theming.component.html @@ -3,7 +3,7 @@

Theming

Components can be themed by setting SCSS variables similar to Material Design
-  
+
diff --git a/apps/web/src/app/docs/components/theming/theming.component.ts b/apps/web/src/app/docs/components/theming/theming.component.ts index f55113a5..97891f1d 100644 --- a/apps/web/src/app/docs/components/theming/theming.component.ts +++ b/apps/web/src/app/docs/components/theming/theming.component.ts @@ -3,10 +3,11 @@ import { STYLE_SCSS } from '../../../../templates/angular'; import { HighlightModule } from 'ngx-highlightjs'; import { Example } from '../example'; import { XuiTooltipModule } from '@xui/components'; +import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers'; @Component({ standalone: true, - imports: [HighlightModule, Example, XuiTooltipModule], + imports: [HighlightModule, HighlightLineNumbers, Example, XuiTooltipModule], selector: 'app-theming', templateUrl: './theming.component.html', styleUrls: ['./theming.component.scss'] diff --git a/libs/theme-core/src/core/normalize.scss b/libs/theme-core/src/core/normalize.scss index e12a2e2c..c3ea4bba 100644 --- a/libs/theme-core/src/core/normalize.scss +++ b/libs/theme-core/src/core/normalize.scss @@ -2,117 +2,341 @@ @mixin theme() { *, - *::before, - *::after { + ::before, + ::after { box-sizing: border-box; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - overscroll-behavior: none; } - *:focus-visible { - // TODO: check this - //outline: none; + html { + font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + line-height: 1.15; /* 1. Correct the line height in all browsers. */ + -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ + -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ + tab-size: 4; /* 3 */ } - html, + /* + 1. Remove the margin in all browsers. + 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. + */ body { - overflow: hidden; + margin: 0; /* Remove the margin in all browsers. */ + line-height: inherit; /* 2 */ } - a { - text-decoration: none; - cursor: pointer; + /** + 1. Add the correct height in Firefox. + 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) + 3. Ensure horizontal rules are visible by default. + */ + hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ + } - &:hover { - text-decoration: underline; - } + /** + Add the correct text decoration in Chrome, Edge, and Safari. + */ + abbr[title] { + text-decoration: underline dotted; } - a, - abbr, - acronym, - address, - applet, - big, - blockquote, - body, - button, - caption, - cite, + /** + Add the correct font weight in Edge and Safari. + */ + b, + strong { + font-weight: bolder; + } + + /** + 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) + 2. Correct the odd 'em' font sizing in all browsers. + */ code, - dd, - del, - dfn, - div, + kbd, + samp, + pre { + font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + Add the correct font size in all browsers. + */ + small { + font-size: 80%; + } + + /** + Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. + */ + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /** + 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) + 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) + 3. Remove gaps between table borders by default. + */ + table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ + } + + /** + 1. Change the font styles in all browsers. + 2. Remove the margin in Firefox and Safari. + 3. Remove default padding in all browsers. + */ + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + font-size: 100%; /* 1 */ + font-weight: inherit; /* 1 */ + line-height: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ + } + + /** + Remove the inheritance of text transform in Edge and Firefox. + */ + button, + select { + text-transform: none; + } + + /* + 1. Correct the inability to style clickable types in iOS and Safari. + 2. Remove default button styles. + */ + button, + input:where([type='button']), + input:where([type='reset']), + input:where([type='submit']) { + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ + } + + /** + Remove the inner border and padding in Firefox. + */ + ::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + Restore the focus styles unset by the previous rule. + */ + :-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + Remove the additional ':invalid' styles in Firefox. + See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 + */ + :-moz-ui-invalid { + box-shadow: none; + } + + /** + Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. + */ + legend { + padding: 0; + } + + /** + Add the correct vertical alignment in Chrome and Firefox. + */ + progress { + vertical-align: baseline; + } + + /** + Correct the cursor style of increment and decrement buttons in Safari. + */ + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + + /** + 1. Correct the odd appearance in Chrome and Safari. + 2. Correct the outline style in Safari. + */ + [type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + Remove the inner padding in Chrome and Safari on macOS. + */ + ::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + 1. Correct the inability to style clickable types in iOS and Safari. + 2. Change font properties to 'inherit' in Safari. + */ + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* + Add the correct display in Chrome and Safari. + */ + summary { + display: list-item; + } + + /* + Removes the default spacing and border for appropriate elements. + */ + blockquote, dl, - dt, - em, - fieldset, - form, + dd, h1, h2, h3, h4, h5, h6, - html, - iframe, - img, - input, - ins, - kbd, - label, - legend, - li, - object, - ol, + hr, + figure, p, - pre, - q, - s, - samp, - small, - span, - strike, - strong, - sub, - sup, - table, - tbody, - td, - tfoot, - th, - thead, - tr, - tt, + pre { + margin: 0; + } + + fieldset { + margin: 0; + padding: 0; + } + + legend { + padding: 0; + } + + ol, ul, - var { + menu { + list-style: none; margin: 0; padding: 0; - border: 0; - outline: 0; - vertical-align: baseline; } - .cdk-overlay-container { - z-index: 10000; + /* + Reset default styling for dialogs. + */ + dialog { + padding: 0; } - .mdc-snackbar__surface { - box-shadow: none !important; + /* + Prevent resizing textareas horizontally by default. + */ + textarea { + resize: vertical; } - a { - color: var(--text-link-color); + /* + 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) + 2. Set the default placeholder color to the user's configured gray 400 color. + */ + input::placeholder, + textarea::placeholder { + opacity: 1; /* 1 */ + } + + /* + Set the default cursor for buttons. + */ + button, + [role='button'] { + cursor: pointer; + } + + /* + Make sure disabled buttons don't get the pointer cursor. + */ + :disabled { + cursor: default; + } + + /* + 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) + 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. + */ + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ + } + + /* + Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) + */ + img, + video { + max-width: 100%; + height: auto; } + /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { - display: none !important; // sass-lint:disable-line no-important + display: none; + } + + /* Use little bit modern style of link decorations */ + a { + text-decoration: none; + cursor: pointer; + color: var(--text-link-color); + + &:hover { + text-decoration: underline; + } } - script { - display: none !important; // sass-lint:disable-line no-important + // TODO: Remove this after moving settings into overlay + .cdk-overlay-container { + z-index: 10000; } } diff --git a/libs/xui/.eslintrc.json b/libs/xui/.eslintrc.json index d3f015f4..b910dc13 100644 --- a/libs/xui/.eslintrc.json +++ b/libs/xui/.eslintrc.json @@ -1,4 +1,14 @@ { "extends": ["../.eslintrc.json"], - "ignorePatterns": ["!**/*"] + "ignorePatterns": ["!**/*"], + + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@angular-eslint/component-class-suffix": "off", + "@angular-eslint/directive-class-suffix": "off" + } + } + ] } diff --git a/libs/xui/src/config/config.service.ts b/libs/xui/src/config/config.service.ts index 60fea560..40e7b6cb 100644 --- a/libs/xui/src/config/config.service.ts +++ b/libs/xui/src/config/config.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable, InputSignal, Optional, input } from '@angular/core'; +import { Inject, Injectable, Optional } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { filter, mapTo } from 'rxjs/operators'; import { XuiConfig, XUI_CONFIG } from './config'; diff --git a/libs/xui/src/config/config.ts b/libs/xui/src/config/config.ts index 542df6c7..96797f2b 100644 --- a/libs/xui/src/config/config.ts +++ b/libs/xui/src/config/config.ts @@ -1,8 +1,6 @@ import { InjectionToken, ViewContainerRef } from '@angular/core'; import { InputColor, InputSize } from '../input'; import { ButtonColor, ButtonSize, ButtonType } from '../button'; -import { BadgeColor } from '../badge'; -import { BannerType } from '../banner'; import { CheckboxColor } from '../checkbox'; import { DatePickerColor, DatePickerSize } from '../date-picker'; import { SnackBarHorizontalPosition, SnackBarVerticalPosition } from '../snack-bar'; diff --git a/libs/xui/src/icon/icon-registry.ts b/libs/xui/src/icon/icon-registry.ts index dc5fc461..8f06ef07 100644 --- a/libs/xui/src/icon/icon-registry.ts +++ b/libs/xui/src/icon/icon-registry.ts @@ -341,7 +341,7 @@ export class XuiIconRegistry implements OnDestroy { * @param name Name of the icon to be retrieved. * @param namespace Namespace in which to look for the icon. */ - getNamedSvgIcon(name: string, namespace: string = ''): Observable { + getNamedSvgIcon(name: string, namespace = ''): Observable { const key = iconKey(namespace, name); let config = this._svgIconConfigs.get(key); diff --git a/libs/xui/src/icon/icon.ts b/libs/xui/src/icon/icon.ts index 721f2494..5d34bf24 100644 --- a/libs/xui/src/icon/icon.ts +++ b/libs/xui/src/icon/icon.ts @@ -171,7 +171,7 @@ export class XuiIcon implements OnInit, AfterViewChecked, OnDestroy { * the element the icon is contained in. */ @Input({ transform: booleanAttribute }) - inline: boolean = false; + inline = false; /** Name of the icon in the SVG icon set. */ @Input() diff --git a/libs/xui/src/menu/menu.service.ts b/libs/xui/src/menu/menu.service.ts index 30e3e5b0..c39bde0b 100644 --- a/libs/xui/src/menu/menu.service.ts +++ b/libs/xui/src/menu/menu.service.ts @@ -1,5 +1,4 @@ import { Injectable, Signal } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; import { MenuType } from './menu.types'; @Injectable() diff --git a/libs/xui/src/radio-list/radio-list.types.ts b/libs/xui/src/radio-list/radio-list.types.ts index 68063c5c..ed821fb3 100644 --- a/libs/xui/src/radio-list/radio-list.types.ts +++ b/libs/xui/src/radio-list/radio-list.types.ts @@ -1,5 +1,4 @@ import { InjectionToken, Signal, WritableSignal } from '@angular/core'; -import { Observable } from 'rxjs'; export type RadioListValue = string | number | null; export type RadioListSize = 'sm' | 'md'; diff --git a/libs/xui/src/radio/radio.types.ts b/libs/xui/src/radio/radio.types.ts index 719f592b..0e4a57c6 100644 --- a/libs/xui/src/radio/radio.types.ts +++ b/libs/xui/src/radio/radio.types.ts @@ -1,5 +1,4 @@ import { InjectionToken, Signal, WritableSignal } from '@angular/core'; -import { Observable } from 'rxjs'; export type RadioValue = string | number | null; export type RadioColor = 'primary' | 'primary-alt' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'none'; diff --git a/libs/xui/src/select/select.types.ts b/libs/xui/src/select/select.types.ts index 93e16071..5234d74b 100644 --- a/libs/xui/src/select/select.types.ts +++ b/libs/xui/src/select/select.types.ts @@ -1,5 +1,4 @@ import { InjectionToken, Signal, WritableSignal } from '@angular/core'; -import { Observable } from 'rxjs'; export type SelectSize = 'large' | 'small'; export type SelectColor = 'light' | 'dark'; diff --git a/libs/xui/src/snack-bar/simple-snack-bar.ts b/libs/xui/src/snack-bar/simple-snack-bar.ts index 2ec47eae..a82fd0a4 100644 --- a/libs/xui/src/snack-bar/simple-snack-bar.ts +++ b/libs/xui/src/snack-bar/simple-snack-bar.ts @@ -15,7 +15,7 @@ export interface TextOnlySnackBar { } @Component({ - selector: 'simple-snack-bar', + selector: 'xui-simple-snack-bar', exportAs: 'xuiSnackBar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, diff --git a/libs/xui/src/snack-bar/snack-bar.ts b/libs/xui/src/snack-bar/snack-bar.ts index 230bc66b..6df7595f 100644 --- a/libs/xui/src/snack-bar/snack-bar.ts +++ b/libs/xui/src/snack-bar/snack-bar.ts @@ -223,7 +223,7 @@ export class XuiSnackBar implements OnDestroy { const overlayConfig = new OverlayConfig(); overlayConfig.direction = config.direction; - let positionStrategy = this.overlay.position().global(); + const positionStrategy = this.overlay.position().global(); // Set horizontal position. const isRtl = config.direction === 'rtl'; const isLeft = diff --git a/libs/xui/src/snack-bar/snack-bar.types.ts b/libs/xui/src/snack-bar/snack-bar.types.ts index 7fba1961..b3fe002f 100644 --- a/libs/xui/src/snack-bar/snack-bar.types.ts +++ b/libs/xui/src/snack-bar/snack-bar.types.ts @@ -3,4 +3,4 @@ import { InjectionToken } from '@angular/core'; export type SnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right'; export type SnackBarVerticalPosition = 'top' | 'bottom'; -export const XUI_SNACK_BAR_DATA = new InjectionToken('xui-snack-bar-data'); +export const XUI_SNACK_BAR_DATA = new InjectionToken('xui-snack-bar-data'); diff --git a/libs/xui/src/tabs/tab.types.ts b/libs/xui/src/tabs/tab.types.ts index d0ed74cd..cefea6aa 100644 --- a/libs/xui/src/tabs/tab.types.ts +++ b/libs/xui/src/tabs/tab.types.ts @@ -1,5 +1,4 @@ import { InjectionToken, Signal } from '@angular/core'; -import { Observable } from 'rxjs'; import { XuiTab } from './tab'; export const TAB_GROUP_ACCESSOR = new InjectionToken('xui-tab-group'); diff --git a/libs/xui/src/utils/convert.ts b/libs/xui/src/utils/convert.ts deleted file mode 100644 index 6331266c..00000000 --- a/libs/xui/src/utils/convert.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { coerceBooleanProperty, coerceCssPixelValue, _isNumberValue } from '@angular/cdk/coercion'; - -export function toBoolean(value: boolean | string): boolean { - return coerceBooleanProperty(value); -} - -export function toNumber(value: number | string): number; -export function toNumber(value: number | string, fallback: D): number | D; -export function toNumber(value: number | string, fallbackValue = 0): number { - return _isNumberValue(value) ? Number(value) : fallbackValue; -} - -export function toCssPixel(value: number | string): string { - return coerceCssPixelValue(value); -} - -function propDecoratorFactory(name: string, fallback: (v: T) => D): (target: any, propName: string) => void { - function propDecorator(target: any, propName: string, originalDescriptor?: TypedPropertyDescriptor): any { - const privatePropName = `$$__${propName}`; - - if (Object.prototype.hasOwnProperty.call(target, privatePropName)) { - console.warn(`The prop "${privatePropName}" already exists and it will be overridden by ${name} decorator.`); - } - - Object.defineProperty(target, privatePropName, { - configurable: true, - writable: true - }); - - return { - get(): string { - return originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName]; - }, - set(value: T): void { - if (originalDescriptor?.set) { - originalDescriptor.set.bind(this)(fallback(value)); - } - - this[privatePropName] = fallback(value); - } - }; - } - - return propDecorator; -} - -export function InputBoolean(): any { - return propDecoratorFactory('InputBoolean', toBoolean); -} - -export function InputCssPixel(): any { - return propDecoratorFactory('InputCssPixel', toCssPixel); -} - -export function InputNumber(fallbackValue?: any): any { - return propDecoratorFactory('InputNumber', (value: string | number) => toNumber(value, fallbackValue)); -} diff --git a/libs/xui/src/utils/index.ts b/libs/xui/src/utils/index.ts index 0936542f..4f4fac42 100644 --- a/libs/xui/src/utils/index.ts +++ b/libs/xui/src/utils/index.ts @@ -1,3 +1,2 @@ export * from './basic'; export * from './delay'; -export * from './convert'; diff --git a/package.json b/package.json index 8d26e9de..9b5a2006 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "e2e": "nx component-test xui", "format": "nx format:write --all", "format:check": "nx format:check", - "clean": "nx reset && rm -rf dist", + "clean": "nx reset && rm -rf dist .angular .nx", "prepare": "husky", "prerender": "nx prerender" },