@daffodil/design 0.81.1 → 0.82.0

package/button/button/button-sizable.directive.d.ts

@@ -1,7 +1,7 @@
 import { DaffSizableDirective, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType } from '@daffodil/design';
 import * as i0 from "@angular/core";
 /**
- * The DaffSizable {@link DaffSizable } types that the DaffButtonComponent can implement.
+ * The size types that the DaffButtonComponent can implement.
  */
 export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
 export declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {

package/button/button/raised/raised.component.d.ts

@@ -1,6 +1,8 @@
 import { DaffButtonBaseDirective } from '../button-base.directive';
 import * as i0 from "@angular/core";
 /**
+ * @deprecated in favor of the `elevated` property. Deprecated in 0.82.0. Will be removed in version 1.0.0. Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+ *
  * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
  *
  * @example Raised button

package/button/button/stroked/stroked.component.d.ts

@@ -23,6 +23,10 @@ export declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective
      * @docs-private
      */
     class: boolean;
+    /**
+     * Whether or not the button displays a shadow.
+     */
+    elevated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/button/button.d.ts

@@ -1,8 +1,10 @@
-import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DaffButtonComponent } from './button/basic/button.component';
 import { DaffFlatButtonComponent } from './button/flat/flat.component';
 import { DaffIconButtonComponent } from './button/icon/icon.component';
 import { DaffRaisedButtonComponent } from './button/raised/raised.component';
 import { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
 import { DaffUnderlineButtonComponent } from './button/underline/underline.component';
-export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];
+/**
+ * @docs-private
+ */
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];

package/button/button.module.d.ts

@@ -6,12 +6,11 @@ import * as i4 from "./button/icon/icon.component";
 import * as i5 from "./button/raised/raised.component";
 import * as i6 from "./button/stroked/stroked.component";
 import * as i7 from "./button/underline/underline.component";
-import * as i8 from "@daffodil/design";
 /**
  * @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent, typeof i8.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffButtonModule>;
 }

package/button/examples/elevated-button/elevated-button.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ElevatedButtonComponent {
+    faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElevatedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElevatedButtonComponent, "elevated-button", never, {}, {}, never, never, true, never>;
+}

package/button/examples/examples.d.ts

@@ -1,4 +1,5 @@
 import { BasicButtonComponent } from './basic-button/basic-button.component';
+import { ElevatedButtonComponent } from './elevated-button/elevated-button.component';
 import { IconButtonComponent } from './icon-button/icon-button.component';
 import { StatusableButtonComponent } from './statusable-button/statusable-button.component';
-export declare const BUTTON_EXAMPLES: (typeof BasicButtonComponent | typeof IconButtonComponent | typeof StatusableButtonComponent)[];
+export declare const BUTTON_EXAMPLES: (typeof BasicButtonComponent | typeof ElevatedButtonComponent | typeof IconButtonComponent | typeof StatusableButtonComponent)[];

package/button/examples/public_api.d.ts

@@ -7,3 +7,4 @@ export { SizeableButtonComponent } from './sizeable-button/sizeable-button.compo
 export { StatusableButtonComponent } from './statusable-button/statusable-button.component';
 export { StrokedButtonComponent } from './stroked-button/stroked-button.component';
 export { UnderlineButtonComponent } from './underline-button/underline-button.component';
+export { ElevatedButtonComponent } from './elevated-button/elevated-button.component';

package/button/public_api.d.ts

@@ -1,7 +1,6 @@
 export { DaffButtonModule } from './button.module';
 export { DAFF_BUTTON_COMPONENTS } from './button';
 export { DaffButtonComponent } from './button/basic/button.component';
-export { DaffButtonSizableDirective } from './button/button-sizable.directive';
 export { DaffFlatButtonComponent } from './button/flat/flat.component';
 export { DaffRaisedButtonComponent } from './button/raised/raised.component';
 export { DaffStrokedButtonComponent } from './button/stroked/stroked.component';

package/button/src/button/basic/button-theme.scss

@@ -40,106 +40,206 @@
 	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-button {
-		@include daff-button-theme-variant(
-			theming.daff-illuminate($base, $neutral, 2),
-			theming.daff-illuminate($base, $neutral, 3),
-			theming.daff-illuminate($base, $neutral, 4)
-		);
-
-		&.daff-primary {
+		@include theming.light($type) {
 			@include daff-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70),
-				theming.daff-color($primary, 80)
+				theming.daff-color($neutral, 20),
+				theming.daff-color($neutral, 30),
+				theming.daff-color($neutral, 40)
 			);
-		}
 
-		&.daff-secondary {
-			@include daff-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70),
-				theming.daff-color($secondary, 80)
-			);
-		}
+			&.daff-primary {
+				@include daff-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 70),
+					theming.daff-color($primary, 80)
+				);
+			}
 
-		&.daff-tertiary {
-			@include daff-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70),
-				theming.daff-color($tertiary, 80)
-			);
-		}
+			&.daff-secondary {
+				@include daff-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 70),
+					theming.daff-color($secondary, 80)
+				);
+			}
 
-		&.daff-black {
-			@include daff-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 90),
-				theming.daff-color($neutral, 80)
-			);
-		}
+			&.daff-tertiary {
+				@include daff-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 70),
+					theming.daff-color($tertiary, 80)
+				);
+			}
 
-		&.daff-white {
-			@include daff-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30)
-			);
-		}
+			&.daff-black {
+				@include daff-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
+				);
+			}
 
-		&.daff-theme {
-			@include daff-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 2),
-				theming.daff-illuminate($base, $neutral, 3)
-			);
-		}
+			&.daff-white {
+				@include daff-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
 
-		&.daff-theme-contrast {
-			@include daff-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 2),
-				theming.daff-illuminate($base-contrast, $neutral, 3)
-			);
-		}
+			&.daff-theme {
+				@include daff-button-theme-variant(
+					$base,
+					theming.daff-illuminate($base, $neutral, 2),
+					theming.daff-illuminate($base, $neutral, 3)
+				);
+			}
 
-		&[disabled],
-		&.disabled {
-			@include daff-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 3),
-				theming.daff-illuminate($base, $neutral, 3),
-				theming.daff-illuminate($base, $neutral, 3)
-			);
-			color: theming.daff-illuminate($base, $neutral, 5);
+			&.daff-theme-contrast {
+				@include daff-button-theme-variant(
+					$base-contrast,
+					theming.daff-illuminate($base-contrast, $neutral, 2),
+					theming.daff-illuminate($base-contrast, $neutral, 3)
+				);
+			}
 
-			&:hover {
+			&[disabled],
+			&.disabled {
+				@include daff-button-theme-variant(
+					theming.daff-illuminate($base, $neutral, 3),
+					theming.daff-illuminate($base, $neutral, 3),
+					theming.daff-illuminate($base, $neutral, 3),
+				);
 				color: theming.daff-illuminate($base, $neutral, 5);
+
+				&:hover {
+					color: theming.daff-illuminate($base, $neutral, 5);
+				}
 			}
-		}
 
-		&.daff-warn {
-			@include daff-button-theme-variant(
-				theming.daff-color($warn),
-				theming.daff-color($warn, 70),
-				theming.daff-color($warn, 80)
-			);
-		}
+			&.daff-warn {
+				@include daff-button-theme-variant(
+					theming.daff-color($warn),
+					theming.daff-color($warn, 70),
+					theming.daff-color($warn, 80)
+				);
+			}
 
-		&.daff-success {
-			@include daff-button-theme-variant(
-				theming.daff-color($success),
-				theming.daff-color($success, 70),
-				theming.daff-color($success, 80)
-			);
+			&.daff-success {
+				@include daff-button-theme-variant(
+					theming.daff-color($success),
+					theming.daff-color($success, 70),
+					theming.daff-color($success, 80)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 70),
+					theming.daff-color($critical, 80)
+				);
+			}
 		}
 
-		&.daff-critical {
+		@include theming.dark($type) {
 			@include daff-button-theme-variant(
-				theming.daff-color($critical),
-				theming.daff-color($critical, 70),
-				theming.daff-color($critical, 80)
+				theming.daff-color($neutral, 90),
+				theming.daff-color($neutral, 80),
+				theming.daff-color($neutral, 70)
 			);
+
+			&.daff-primary {
+				@include daff-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 40),
+					theming.daff-color($primary, 30)
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 40),
+					theming.daff-color($secondary, 30)
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 40),
+					theming.daff-color($tertiary, 30)
+				);
+			}
+
+			&.daff-black {
+				@include daff-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
+				);
+			}
+
+			&.daff-white {
+				@include daff-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
+
+			&.daff-theme {
+				@include daff-button-theme-variant(
+					$base,
+					theming.daff-illuminate($base, $neutral, 2),
+					theming.daff-illuminate($base, $neutral, 3)
+				);
+			}
+
+			&.daff-theme-contrast {
+				@include daff-button-theme-variant(
+					$base-contrast,
+					theming.daff-illuminate($base-contrast, $neutral, 2),
+					theming.daff-illuminate($base-contrast, $neutral, 3)
+				);
+			}
+
+			&[disabled],
+			&.disabled {
+				@include daff-button-theme-variant(
+					theming.daff-illuminate($base, $neutral, 3),
+					theming.daff-illuminate($base, $neutral, 3),
+					theming.daff-illuminate($base, $neutral, 3)
+				);
+			}
+
+			&.daff-warn {
+				@include daff-button-theme-variant(
+					theming.daff-color($warn),
+					theming.daff-color($warn, 40),
+					theming.daff-color($warn, 30)
+				);
+			}
+
+			&.daff-success {
+				@include daff-button-theme-variant(
+					theming.daff-color($success),
+					theming.daff-color($success, 40),
+					theming.daff-color($success, 30)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 40),
+					theming.daff-color($critical, 30)
+				);
+			}
 		}
 	}
 }

package/button/src/button/button-base.scss

@@ -1,8 +1,19 @@
 @use '../../../scss/interactions';
 @use '../../../scss/typography' as t;
 
+@mixin daff-button-elevated {
+	&.elevated { /* stylelint-disable-line selector-class-pattern */
+		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+
+		&:hover { /* stylelint-disable-line selector-class-pattern */
+			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
+		}
+	}
+}
+
 @mixin daff-button-base {
 	@include interactions.clickable();
+	@include t.text-truncate();
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -35,27 +46,27 @@
 }
 
 @mixin daff-button-background($border-radius) {
-	&::after {
-		content: '';
-		border-radius: $border-radius;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-		transition: opacity 300ms;
-	}
-
-	&:hover,
-	&:active {
+	&:not(&[disabled], &.disabled) {
 		&::after {
-			opacity: 1;
+			content: '';
+			border-radius: $border-radius;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+		}
+
+		&:hover,
+		&:active {
+			&::after {
+				opacity: 1;
+			}
 		}
 	}
 }
 
 @mixin daff-button-sizes {
-	min-width: 96px;
-
 	&.daff-sm {
 		font-size: t.$small-font-size;
 		line-height: 2rem;