+
{{ hintText }}
}
diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss
index aed13f88aa..2ad5c5fae0 100644
--- a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss
+++ b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss
@@ -1,120 +1,231 @@
@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-file-attachment-wrapper') {
+ --sky-override-file-attachment-accept-border-color: #{$sky-highlight-color-success};
+ --sky-override-file-attachment-accept-border-radius: 5px;
+ --sky-override-file-attachment-accept-border-width: 1px;
+ --sky-override-file-attachment-control-label-color: #{$sky-text-color-default};
+ --sky-override-file-attachment-control-label-font-size: 15px;
+ --sky-override-file-attachment-delete-margin-left: 0;
+ --sky-override-file-attachment-file-link-padding: 0 5px;
+ --sky-override-file-attachment-invalid-border: 1px solid #{$sky-highlight-color-danger};
+ --sky-override-file-attachment-invalid-box-shadow: 0 0 8px
+ rgba(239, 64, 68, 0.6);
+ --sky-override-file-attachment-invalid-label-color: #{$sky-text-color-default};
+ --sky-override-file-attachment-preview-img-border: none;
+ --sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;
+ --sky-override-file-attachment-preview-img-margin: 10px;
+ --sky-override-file-attachment-preview-img-width: auto;
+ --sky-override-file-attachment-reject-border-color: #{$sky-highlight-color-danger};
+ --sky-override-file-attachment-reject-border-radius: 5px;
+ --sky-override-file-attachment-reject-border-width: 1px;
+ --sky-override-file-attachment-upload-display: block;
+ --sky-override-file-attachment-upload-padding-right: 8px;
+ --sky-override-file-attachment-wrapper-display: inline-block;
+
+ .sky-file-attachment-delete {
+ padding: 0;
+ }
+}
+
+@include compatMixins.sky-modern-overrides('.sky-file-attachment-wrapper') {
+ --sky-override-file-attachment-accept-border-radius: 5px;
+ --sky-override-file-attachment-accept-border-width: 1px;
+ --sky-override-file-attachment-btn-non-stacked-margin: 0 #{$sky-theme-modern-space-sm}
+ 0 0;
+ --sky-override-file-attachment-control-label-color: #{$sky-theme-modern-font-deemphasized-color};
+ --sky-override-file-attachment-control-label-font-size: 13px;
+ --sky-override-file-attachment-delete-height: 40px;
+ --sky-override-file-attachment-delete-width: 40px;
+ --sky-override-file-attachment-file-icon-font-size: 30px;
+ --sky-override-file-attachment-file-icon-line-height: normal;
+ --sky-override-file-attachment-file-icon-margin: #{$sky-theme-modern-space-xs
+ $sky-theme-modern-space-sm $sky-theme-modern-space-xs
+ $sky-theme-modern-space-xs};
+ --sky-override-file-attachment-file-link-margin: #{$sky-theme-modern-space-sm}
+ 0 0 0;
+ --sky-override-file-attachment-file-link-padding: 0;
+ --sky-override-file-attachment-invalid-border: 1px solid #{$sky-highlight-color-danger};
+ --sky-override-file-attachment-invalid-box-shadow: 0 0 8px
+ rgba(239, 64, 68, 0.6);
+ --sky-override-file-attachment-invalid-label-color: #{$sky-theme-modern-font-deemphasized-color};
+ --sky-override-file-attachment-preview-img-border: var(
+ --sky-border-width-separator-dark
+ )
+ solid var(--sky-color-border-separator-dark);
+ --sky-override-file-attachment-preview-img-box-shadow: none;
+ --sky-override-file-attachment-preview-img-margin: 0 #{$sky-theme-modern-space-sm}
+ 0 0;
+ --sky-override-file-attachment-reject-border-radius: 5px;
+ --sky-override-file-attachment-reject-border-width: 1px;
+ --sky-override-file-attachment-upload-with-icon-align-items: flex-start;
+
+ .sky-file-attachment-delete {
+ padding: 0;
+ }
+}
+
+@include compatMixins.sky-default-host-overrides() {
+ --sky-override-file-attachment-hint-text-margin-top: var(
+ --sky-margin-stacked-xs
+ );
+}
-:host.sky-margin-stacked-lg {
+:host.sky-form-field-stacked {
display: block;
}
+:host:not(.sky-form-field-stacked) {
+ .sky-file-attachment-wrapper {
+ .sky-file-attachment-btn {
+ margin: var(--sky-override-file-attachment-btn-non-stacked-margin, 0);
+ }
+ }
+}
+
.sky-file-attachment-wrapper {
- display: inline-block;
+ display: var(--sky-override-file-attachment-wrapper-display, flex);
+ flex-wrap: wrap;
+}
+
+.sky-file-attachment-label-wrapper {
+ width: 100%;
}
.sky-file-attachment-upload {
- padding-right: 8px;
- display: block;
+ flex: 1;
+ order: 2;
+ display: var(--sky-override-file-attachment-upload-display, flex);
+ align-items: flex-start;
+ padding-right: var(--sky-override-file-attachment-upload-padding-right, 0);
border: 1px solid transparent;
+
+ &:has(.sky-file-attachment-icon) {
+ align-items: var(
+ --sky-override-file-attachment-upload-with-icon-align-items,
+ center
+ );
+ }
}
.sky-file-attachment-accept {
- border-color: $sky-highlight-color-success;
+ border-color: var(
+ --sky-override-file-attachment-accept-border-color,
+ var(--sky-color-border-success)
+ );
border-style: dashed;
- border-width: 1px;
- border-radius: 5px;
- color: $sky-text-color-default;
+ border-width: var(
+ --sky-override-file-attachment-accept-border-width,
+ var(--sky-border-width-input-hover)
+ );
+ border-radius: var(
+ --sky-override-file-attachment-accept-border-radius,
+ var(--sky-border-radius-s)
+ );
}
.sky-file-attachment-reject {
- border-color: $sky-highlight-color-danger;
+ border-color: var(
+ --sky-override-file-attachment-reject-border-color,
+ var(--sky-color-border-danger)
+ );
border-style: dashed;
- border-width: 1px;
- border-radius: 5px;
- color: $sky-text-color-default;
+ border-width: var(
+ --sky-override-file-attachment-reject-border-width,
+ var(--sky-border-width-input-hover)
+ );
+ border-radius: var(
+ --sky-override-file-attachment-reject-border-radius,
+ var(--sky-border-radius-s)
+ );
+}
+
+.sky-file-attachment-btn,
+.sky-control-label {
+ transition: $sky-form-border-and-color-transitions;
}
:host(.ng-invalid.ng-dirty) {
.sky-file-attachment-btn {
- box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
- border: 1px solid $sky-highlight-color-danger;
+ box-shadow: var(--sky-override-file-attachment-invalid-box-shadow, none);
+ border: var(
+ --sky-override-file-attachment-invalid-border,
+ var(--sky-border-width-input-error) solid
+ var(--sky-color-border-input-error)
+ );
+ }
+
+ .sky-control-label {
+ color: var(
+ --sky-override-file-attachment-invalid-label-color,
+ var(--sky-color-text-danger)
+ );
}
}
.sky-file-attachment-file-link {
- padding: 0 5px;
-
- a {
- cursor: pointer;
- }
+ padding: var(
+ --sky-override-file-attachment-file-link-padding,
+ 0 0 0 var(--sky-space-gap-icon-m)
+ );
+ margin: var(--sky-override-file-attachment-file-link-margin, 0);
}
.sky-file-attachment-delete {
- border: none;
- @include mixins.sky-icon-button-borderless();
- padding: 0;
+ width: var(--sky-override-file-attachment-delete-width, auto);
+ height: var(--sky-override-file-attachment-delete-height, auto);
+ margin-left: var(
+ --sky-override-file-attachment-delete-margin-left,
+ var(--sky-space-gap-text_action-s)
+ );
}
.sky-file-attachment-preview-img {
+ flex: 0;
+ order: 1;
max-width: 25%;
+ width: var(
+ --sky-override-file-attachment-preview-img-width,
+ var(--sky-size-thumbnail-l)
+ );
height: auto;
- box-shadow: 0 0 5px #666;
- margin: 10px;
+ box-shadow: var(
+ --sky-override-file-attachment-preview-img-box-shadow,
+ var(--sky-elevation-raised-100)
+ );
+ border: var(--sky-override-file-attachment-preview-img-border, none);
+ margin: var(--sky-override-file-attachment-preview-img-margin, 0);
}
.sky-file-attachment-hint-text {
- margin-top: var(--sky-margin-stacked-xs);
+ margin-top: var(
+ --sky-override-file-attachment-hint-text-margin-top,
+ var(--sky-space-gap-stacked_supplemental-s)
+ );
}
-@include mixins.sky-theme-modern {
- .sky-control-label {
- color: $sky-theme-modern-font-deemphasized-color;
- font-size: 13px;
- }
-
- .sky-file-attachment-none {
- font-size: $sky-theme-modern-text-size-125;
- }
-
- .sky-file-attachment-wrapper {
- display: flex;
- flex-wrap: wrap;
-
- .sky-file-attachment-label-wrapper {
- width: 100%;
- }
-
- .sky-file-attachment-preview-img {
- @include mixins.sky-border(dark, top, bottom, left, right);
- box-shadow: none;
- margin: 0 $sky-theme-modern-space-sm 0 0;
- width: 100px;
- flex: 0;
- order: 1;
- }
-
- .sky-file-attachment-btn {
- margin: 0 $sky-theme-modern-space-sm 0 0;
- }
-
- .sky-file-attachment-icon {
- margin: $sky-theme-modern-space-xs $sky-theme-modern-space-sm
- $sky-theme-modern-space-xs $sky-theme-modern-space-xs;
- }
-
- .sky-file-attachment-upload {
- flex: 1;
- order: 2;
- display: flex;
- align-items: flex-start;
-
- .sky-file-attachment-file-link {
- margin: $sky-theme-modern-space-sm $sky-theme-modern-space-sm 0 0;
- padding: 0;
- }
- }
+.sky-control-label {
+ color: var(
+ --sky-override-file-attachment-control-label-color,
+ var(--sky-color-text-deemphasized)
+ );
+ font-size: var(
+ --sky-override-file-attachment-control-label-font-size,
+ var(--sky-font-size-input-label)
+ );
+}
- .sky-file-attachment-delete {
- width: 40px;
- height: 40px;
- color: $sky-theme-modern-color-gray-70 !important;
- }
- }
+.sky-file-attachment-icon {
+ color: var(--sky-color-icon-deemphasized);
+ margin: var(
+ --sky-override-file-attachment-file-icon-margin,
+ 0 0 0 var(--sky-gap-icon-m)
+ );
+ font-size: var(
+ --sky-override-file-attachment-file-icon-font-size,
+ var(--sky-size-icon-xl)
+ );
+ line-height: var(--sky-override-file-attachment-file-icon-line-height, 1);
}
diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
index 1a318159be..11dc387f8c 100644
--- a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
+++ b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
@@ -1717,7 +1717,7 @@ describe('File attachment', () => {
'sky-file-attachment',
);
- expect(fileAttachment).toHaveClass('sky-margin-stacked-lg');
+ expect(fileAttachment).toHaveClass('sky-form-field-stacked');
});
it('should not have the lg margin class if stacked is false', () => {
@@ -1725,7 +1725,7 @@ describe('File attachment', () => {
'sky-file-attachment',
);
- expect(fileAttachment).not.toHaveClass('sky-margin-stacked-lg');
+ expect(fileAttachment).not.toHaveClass('sky-form-field-stacked');
});
});
diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts
index e8d32235ac..b4c5f9dd6d 100644
--- a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts
+++ b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts
@@ -35,7 +35,11 @@ import {
import { SkyHelpInlineModule } from '@skyux/help-inline';
import { SkyLibResourcesService } from '@skyux/i18n';
import { SkyIconModule } from '@skyux/icon';
-import { SkyThemeModule, SkyThemeService } from '@skyux/theme';
+import {
+ SkyThemeComponentClassDirective,
+ SkyThemeModule,
+ SkyThemeService,
+} from '@skyux/theme';
import { Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
@@ -75,11 +79,13 @@ const MIN_FILE_SIZE_DEFAULT = 0;
SkyIconModule,
SkyIdModule,
SkyThemeModule,
+ SkyThemeComponentClassDirective,
],
providers: [
SkyFileAttachmentService,
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
],
+ hostDirectives: [SkyThemeComponentClassDirective],
selector: 'sky-file-attachment',
standalone: true,
styleUrl: './file-attachment.component.scss',
@@ -188,7 +194,7 @@ export class SkyFileAttachmentComponent
* the appropriate vertical spacing is automatically added to the single file attachment.
*/
@Input({ transform: booleanAttribute })
- @HostBinding('class.sky-margin-stacked-lg')
+ @HostBinding('class.sky-form-field-stacked')
public stacked = false;
/**
diff --git a/libs/components/theme/src/lib/styles/_forms.scss b/libs/components/theme/src/lib/styles/_forms.scss
index 56f43539df..7875d60f3d 100644
--- a/libs/components/theme/src/lib/styles/_forms.scss
+++ b/libs/components/theme/src/lib/styles/_forms.scss
@@ -8,6 +8,10 @@
--sky-override-help-inline-margin-left: var(--sky-margin-inline-xs);
}
+@include compatMixins.sky-default-overrides('.sky-control-label') {
+ --sky-override-control-label-margin-bottom: #{$sky-margin-half};
+}
+
@include compatMixins.sky-default-overrides('.sky-control-label-required') {
--sky-override-required-color: var(--sky-highlight-color-danger);
--sky-override-required-space: var(--sky-padding-half);
@@ -69,7 +73,10 @@ textarea.ng-invalid.ng-touched {
.sky-control-label {
display: inline-block;
font-weight: normal;
- margin-bottom: $sky-margin-half;
+ margin-bottom: var(
+ --sky-override-control-label-margin-bottom,
+ var(--sky-space-gap-form-xs)
+ );
max-width: 100%;
}