From 6dbabdcf0eb04c0a61cc8de472c3e77127a7bda5 Mon Sep 17 00:00:00 2001 From: xelaint Date: Fri, 1 May 2026 10:11:18 +0800 Subject: [PATCH 1/2] feat(design): deprecate DaffSizableEnum and DaffSizable and update documentation --- libs/design/src/core/sizable/README.md | 68 +++++++++++++++++++ .../src/core/sizable/sizable.directive.ts | 62 +---------------- libs/design/src/core/sizable/sizable.ts | 11 ++- 3 files changed, 76 insertions(+), 65 deletions(-) create mode 100644 libs/design/src/core/sizable/README.md diff --git a/libs/design/src/core/sizable/README.md b/libs/design/src/core/sizable/README.md new file mode 100644 index 0000000000..1c3fa27ebd --- /dev/null +++ b/libs/design/src/core/sizable/README.md @@ -0,0 +1,68 @@ +# Sizable +Sizable enforces consistent use of size across components. + +## Overview + +`DaffSizableDirective` applies size-specific CSS classes and validates the size in dev mode. When an size is set, the corresponding `daff-[size]` class is added. + +## Supported sizes + +| Alignment | CSS Class | +|---|---| +| `xs` | `.daff-xs` | +| `sm` | `.daff-sm` | +| `md` | `.daff-md` | +| `lg` | `.daff-lg` | +| `xl` | `.daff-xl` | + +## Usage + +Use `daffSizable` as an attribute selector: + +```html +
Example
+``` + +Or as an Angular host directive: + +```ts +import { DaffSizableDirective } from '@daffodil/design'; + +@Component({ + selector: 'custom-component', + template: 'custom-component.html', + hostDirectives: [ + { + directive: DaffSizableDirective, + inputs: ['size'], + }, + ], +}) +export class CustomComponent { } +``` + +### Default size + +Set `defaultSize` to apply an size when `size` is not explicitly provided: + +```ts +constructor(private textAlignable: DaffSizableDirective) { + this.textAlignable.defaultSize = 'left'; +} +``` + +## Styles + +Use the applied CSS class to style each size variant: + +```scss +.custom-component { + &.daff-sm { + font-size: 0.875rem; + } + + &.daff-md { + font-size: 1rem; + } +} +``` diff --git a/libs/design/src/core/sizable/sizable.directive.ts b/libs/design/src/core/sizable/sizable.directive.ts index 04d8f0fe6c..a603189173 100644 --- a/libs/design/src/core/sizable/sizable.directive.ts +++ b/libs/design/src/core/sizable/sizable.directive.ts @@ -6,59 +6,10 @@ import { SimpleChanges, } from '@angular/core'; -import { - DaffSizable, - DaffSizeAllType, -} from './sizable'; +import { DaffSizeAllType } from './sizable'; /** - * `DaffSizableDirective` allows for dynamic sizing of a component by setting - * CSS classes based on the specified size. - * - * @example Implementing it as an attribute directive - * - * ```html - *
Sized content
- * ``` - * In this example, the `daff-small` class is applied to the `div` element, allowing you to - * use the class to style the `div`. - * - * @example Implementing it as an Angular host directive - * - * ```ts - * @Component({ - * standalone: true, - * selector: 'custom-component', - * template: 'custom-component.html', - * hostDirectives: [ - * { - * directive: DaffSizableDirective, - * inputs: ['size'], - * }, - * ], - * }) - * export class CustomComponent { } - * ``` - * - * ```scss - * :host { - * &.daff-sm { - * width: 24px; - * } - * - * &.daff-md { - * width: 32px; - * } - * } - * ``` - * - * The directive applies the following CSS classes to the component based on the size: - * - * - `daff-xs`: Applied when the size is `xs`. - * - `daff-sm`: Applied when the size is `sm`. - * - `daff-md`: Applied when the size is `md`. - * - `daff-lg`: Applied when the size is `lg`. - * - `daff-xl`: Applied when the size is `xl`. + * `DaffSizableDirective` enforces consistent use of sizes across components. */ @Directive({ selector: '[daffSizable]', @@ -70,7 +21,7 @@ import { '[class.daff-xl]': 'size === "xl"', }, }) -export class DaffSizableDirective implements DaffSizable, OnChanges, OnInit { +export class DaffSizableDirective implements OnChanges, OnInit { /** * The size of the component. */ @@ -78,13 +29,6 @@ export class DaffSizableDirective implements DaffSiza /** * Sets a default size. - * - * @example - * ```ts - * constructor(private sizableDirective: DaffSizableDirective) { - * this.sizableDirective.defaultSize = 'md'; - * } - * ``` */ public defaultSize: T; diff --git a/libs/design/src/core/sizable/sizable.ts b/libs/design/src/core/sizable/sizable.ts index b29d548fca..83632e0cc3 100644 --- a/libs/design/src/core/sizable/sizable.ts +++ b/libs/design/src/core/sizable/sizable.ts @@ -1,15 +1,11 @@ /** - * Interfaces that gives a component the ability to customize sizing for component specific UI. + * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0. */ export interface DaffSizable { size: T; } -/** - * The possible types that can be passed to a component that implements DaffSizable - */ - export type DaffSizeXSmallType = 'xs'; export type DaffSizeSmallType = 'sm'; export type DaffSizeMediumType = 'md'; @@ -17,10 +13,13 @@ export type DaffSizeLargeType = 'lg'; export type DaffSizeXLargeType = 'xl'; /** - * The a type representing all available sizes. + * All available sizes. */ export type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType; +/** + * This enum will be removed from the public api in v1.0.0. + */ export enum DaffSizableEnum { XSmall = 'xs', Small = 'sm', From 2ceb7e3472988acedee7eeb0fcc8937627646e2a Mon Sep 17 00:00:00 2001 From: xelaint Date: Thu, 21 May 2026 15:25:04 +0800 Subject: [PATCH 2/2] add deprecate tag --- libs/design/src/core/sizable/sizable.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/design/src/core/sizable/sizable.ts b/libs/design/src/core/sizable/sizable.ts index 83632e0cc3..bb6a244e3f 100644 --- a/libs/design/src/core/sizable/sizable.ts +++ b/libs/design/src/core/sizable/sizable.ts @@ -18,6 +18,8 @@ export type DaffSizeXLargeType = 'xl'; export type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType; /** + * @deprecated + * * This enum will be removed from the public api in v1.0.0. */ export enum DaffSizableEnum {