diff --git a/libs/design/src/core/text-alignable/README.md b/libs/design/src/core/text-alignable/README.md new file mode 100644 index 0000000000..6aaeb0d648 --- /dev/null +++ b/libs/design/src/core/text-alignable/README.md @@ -0,0 +1,68 @@ +# Text Alignable + +Text alignable enforces consistent use of text alignment across components. + +## Overview + +`DaffTextAlignableDirective` applies alignment-specific CSS classes and validates the alignment in dev mode. When an alignment is set, the corresponding `daff-[alignment]` class is added. + +## Supported alignments + +| Alignment | CSS Class | +|---|---| +| `left` | `.daff-left` | +| `center` | `.daff-center` | +| `right` | `.daff-right` | + +## Usage + +Use `daffTextAlignable` as an attribute selector: + +```html +
Aligned text
+``` + +Or as an Angular host directive: + +```ts +import { DaffTextAlignableDirective } from '@daffodil/design'; + +@Component({ + selector: 'custom-component', + template: 'custom-component.html', + hostDirectives: [ + { + directive: DaffTextAlignableDirective, + inputs: ['textAlignment'], + }, + ], +}) +export class CustomComponent { } +``` + +### Default alignment + +Set `defaultAlignment` to apply an alignment when `textAlignment` is not explicitly provided: + +```ts +constructor(private textAlignable: DaffTextAlignableDirective) { + this.textAlignable.defaultAlignment = 'left'; +} +``` + +## Styles + +Use the applied CSS class to style each alignment variant: + +```scss +.custom-component { + &.daff-center { + text-align: center; + margin: 0 auto; + } +} +``` + +## Warnings + +A console warning is shown in dev mode if a value is not part of the supported alignments. diff --git a/libs/design/src/core/text-alignable/text-alignable.directive.ts b/libs/design/src/core/text-alignable/text-alignable.directive.ts index c98db4c3f6..b073673af4 100644 --- a/libs/design/src/core/text-alignable/text-alignable.directive.ts +++ b/libs/design/src/core/text-alignable/text-alignable.directive.ts @@ -24,49 +24,7 @@ const validateTextAlignment = (textAlignment: string) => { }; /** - * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by - * setting CSS classes based on the specified text alignment. This directive is - * useful when text alignment needs to be managed dynamically in an Angular component. - * - * ## Why not just use CSS? - * - * While the native CSS `text-align` property can be used for static text alignment, - * the `DaffTextAlignableDirective` provides a structured and consistent way to handle - * dynamic text alignment within Angular components in more complex use cases where the - * application of `text-align: center;` would cause unexpected side effects. - * - * @example Implementing it as an attribute directive - * - * ```html - *
Aligned text
- * ``` - * - * In this example, the `daff-center` class is added to the `div` element, allowing - * you to style the `div` as you wish using the class. - * - * @example Implementing it as an Angular host directive - * - * ```ts - * @Component({ - * selector: 'custom-component', - * template: 'custom-component.html', - * hostDirectives: [ - * { - * directive: DaffTextAlignableDirective, - * inputs: ['textAlignment'], - * }, - * ], - * }) - * export class CustomComponent { } - * ``` - * - * ```scss - * .custom-component { - * &.daff-left { - * text-align: left; - * } - * } - * ``` + * `DaffTextAlignableDirective` enforces consistent use of text alignment across components. */ @Directive({ selector: '[daffTextAlignable]', @@ -84,14 +42,7 @@ export class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, @Input() textAlignment: DaffTextAlignment; /** - * Sets a default alignment. - * - * @example - * ```ts - * constructor(private textAligmentDirective: DaffTextAlignableDirective) { - * this.textAligmentDirective.defaultAlignent = 'left'; - * } - * ``` + * The default used when no text alignment is set. */ public defaultAlignment: DaffTextAlignment; diff --git a/libs/design/src/core/text-alignable/text-alignable.ts b/libs/design/src/core/text-alignable/text-alignable.ts index 0c318c0393..94e54ed3aa 100644 --- a/libs/design/src/core/text-alignable/text-alignable.ts +++ b/libs/design/src/core/text-alignable/text-alignable.ts @@ -1,14 +1,18 @@ /** - * Interface for giving a component the ability to customize text alignment for component-specific UI. + * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0. */ export interface DaffTextAlignable { textAlignment: DaffTextAlignment; } /** - * The possible types that can be passed to a DaffTextAlignable component + * * The available text alignment options. */ export type DaffTextAlignment = 'left' | 'center' | 'right'; + +/** + * This enum will be removed from the public api in v1.0.0. + */ export enum DaffTextAlignmentEnum { Left = 'left', Center = 'center',