Skip to content

Commit

Permalink
feat(components/lookup): tokenize lookup styles (#2913)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Blackbaud-TrevorBurch
Blackbaud-TrevorBurch authored Nov 19, 2024
1 parent 957b7d6 commit 3236e6e
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 31 deletions.
2 changes: 1 addition & 1 deletion apps/e2e/lookup-storybook-e2e/src/e2e/lookup.component.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,5 +220,5 @@ describe('lookup-storybook', () => {
});
});
});
});
}, true);
});
30 changes: 26 additions & 4 deletions libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
@include compatMixins.sky-default-overrides(
'.sky-autocomplete-results-container'
) {
--sky-override-autocomplete-actions-add-icon-padding-right: #{$sky-theme-modern-space-xs};
--sky-override-autocomplete-actions-no-results-line-height: normal;
--sky-override-autocomplete-actions-no-results-padding: 7px 13px;
--sky-override-autocomplete-actions-top-border: 1px solid #{$sky-border-color-neutral-medium};
--sky-override-autocomplete-no-results-font-size: 15px;
--sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
--sky-override-autocomplete-result-background-color: transparent;
Expand All @@ -24,6 +28,9 @@
'.sky-autocomplete-results-container',
false
) {
--sky-override-autocomplete-actions-no-results-line-height: normal;
--sky-override-autocomplete-actions-no-results-padding: 7px 13px;
--sky-override-autocomplete-actions-top-border: 1px solid #{$sky-border-color-neutral-medium};
--sky-override-autocomplete-no-results-font-size: 15px;
--sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
--sky-override-autocomplete-result-margin-bottom: 0;
Expand Down Expand Up @@ -109,25 +116,40 @@
font-size: var(--sky-override-autocomplete-no-results-font-size, inherit);
}

// TODO: Tokenize when doing lookup
.sky-autocomplete-actions {
@include defaultMixins.sky-border(dark, top);
border-top: var(
--sky-override-autocomplete-actions-top-border,
var(--sky-border-width-divider) var(--sky-border-style-divider)
var(--sky-color-border-divider)
);

.sky-autocomplete-action {
border: none;
}

.sky-autocomplete-actions-no-results {
display: inline-block;
padding: 7px 13px;
padding: var(
--sky-override-autocomplete-actions-no-results-padding,
var(--sky-space-inset-pillarbox-1_2-top-m) 0
var(--sky-space-inset-pillarbox-1_2-bottom-m)
var(--sky-space-inset-pillarbox-1_2-left-m)
);
line-height: var(
--sky-override-autocomplete-actions-no-results-line-height,
var(--sky-font-line_height-body-m)
);
}
}

.sky-autocomplete-action-add {
float: right;

sky-icon {
padding-right: $sky-theme-modern-space-xs;
padding-right: var(
--sky-override-autocomplete-actions-add-icon-padding-right,
var(--sky-space-gap-icon-s)
);
}
}

Expand Down
170 changes: 144 additions & 26 deletions libs/components/lookup/src/lib/modules/lookup/lookup.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,57 @@
@use 'libs/components/theme/src/lib/styles/mixins' as defaultMixins;
@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-lookup') {
--sky-override-lookup-form-control-background-color: transparent;
--sky-override-lookup-input-box-margin-top: 0;
--sky-override-lookup-input-box-padding-top: 0;
--sky-override-lookup-input-box-search-background-color: inherit;
--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;
--sky-override-lookup-input-box-tokens-align-items: baseline;
--sky-override-lookup-input-box-tokens-content-padding-left: 10px;
--sky-override-lookup-search-background-color: #{$sky-color-white};
--sky-override-lookup-search-border: 1px solid #{$sky-border-color-neutral-medium};
--sky-override-lookup-search-disabled-background-color: #{$sky-background-color-disabled};
--sky-override-lookup-search-line-height: #{$sky-line-height-base}em;
--sky-override-lookup-single-control-padding-left: 7px;
--sky-override-lookup-textarea-padding-left: 0;
--sky-override-lookup-token-margin-top: 0;
--sky-override-lookup-tokens-margin-top: -5px;
--sky-override-lookup-tokens-padding-left: 0;
--sky-override-lookup-tokens-row-gap: 0;
}

@include compatMixins.sky-modern-overrides('.sky-lookup', false) {
--sky-override-lookup-input-box-search-disabled-background-color: transparent;
--sky-override-lookup-input-box-search-padding: 0 0 0 15px;
--sky-override-lookup-input-box-single-control-padding-left: 0;
--sky-override-lookup-input-box-tokens-align-items: baseline;
--sky-override-lookup-input-box-tokens-content-padding-left: 10px;
--sky-override-lookup-search-background-color: #{$sky-color-white};
--sky-override-lookup-search-border: 1px solid #{$sky-border-color-neutral-medium};
--sky-override-lookup-search-disabled-background-color: #{$sky-background-color-disabled};
--sky-override-lookup-search-line-height: #{$sky-line-height-base}em;
--sky-override-lookup-single-control-padding-left: 7px;
--sky-override-lookup-textarea-padding-left: 0;
--sky-override-lookup-token-margin-top: 0;
--sky-override-lookup-tokens-padding-left: 0;
--sky-override-lookup-tokens-row-gap: 0;
}

.sky-lookup {
.sky-lookup-input.sky-form-control {
resize: none;
border: 0;
box-sizing: content-box;
height: #{$sky-line-height-base}em;
overflow: hidden;
padding: 0;
background-color: transparent;
background-color: var(
--sky-override-lookup-form-control-background-color,
inherit
);

// NOTE: This style is for legacy non-input box lookups. This is not needed when we fully drop support for this use case.
border: 0;

&:focus {
outline: none;
Expand All @@ -23,7 +65,10 @@

&.sky-lookup-disabled {
.sky-lookup-search {
background-color: $sky-background-color-disabled;
background-color: var(
--sky-override-lookup-search-disabled-background-color,
inherit
);
}
}

Expand All @@ -33,34 +78,54 @@
}

.sky-tokens {
margin-top: -5px;
row-gap: var(
--sky-override-lookup-tokens-row-gap,
var(--sky-space-gap-action_group-s)
);

// NOTE: These styles are for legacy non-input box lookups and there are overrides below for input box.
// Remove those overrides and use them here when we fully drop support for this use case.
// Mixin override only used here to maintain an existing default/modern difference without the modern mixin.
margin-top: var(--sky-override-lookup-tokens-margin-top, -6px);
margin-bottom: -5px;

.sky-tokens-content {
flex-basis: 100px;

// NOTE: These styles are for legacy non-input box lookups and there are overrides below for input box.
// Remove those overrides and use them here when we fully drop support for this use case.
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
flex-basis: 100px;
}
}
}

.sky-lookup-single-control {
display: inline-flex;
padding-left: 7px;
padding-left: var(
--sky-override-lookup-single-control-padding-left,
inherit
);
width: 100%;
}
}

// NOTE: Some of these styles are for legacy non-input box lookups and there are overrides below for input box.
// Remove those overrides and use them here when we fully drop support for this use case.
.sky-lookup-search {
cursor: text;
background-color: $sky-color-white;
line-height: #{$sky-line-height-base}em;
background-color: var(--sky-override-lookup-search-background-color, inherit);
line-height: var(--sky-override-lookup-search-line-height, inherit);
padding: 6px 12px 6px 3px;
flex-grow: 1;

&:not(.sky-field-status-active) {
@include defaultMixins.sky-border(dark, top, bottom, left, right);
border: var(
--sky-override-lookup-search-border,
var(--sky-border-width-input-base) solid
var(--sky-color-border-action-input-base)
);
}
}

Expand All @@ -82,31 +147,59 @@
}
}

// Note: this only applies to legacy non-input box lookups - for input box the standard styling is applied there.
sky-lookup.ng-invalid.ng-touched .sky-lookup-search {
@include defaultMixins.sky-field-status(invalid);
box-shadow: 0 0 8px rgba($sky-highlight-color-danger, 0.6);
border: 1px solid var(--sky-highlight-color-danger);
outline: none;
}

sky-input-box .sky-lookup {
width: 100%;
// Since we are applying the host template directly - add the same spacing styles that we do around a directly projected text area.
// Calculation taken from input box
margin-top: var(
--sky-override-lookup-input-box-margin-top,
calc(
-1 * (calc(
var(--sky-font-line_height-input-label) *
var(--sky-font-size-input-label)
) + var(--sky-space-inset-input_label-top-m) +
var(--sky-space-inset-input_label-bottom-m))
)
);
padding-top: var(
--sky-override-lookup-input-box-padding-top,
calc(
calc(
var(--sky-font-line_height-input-label) *
var(--sky-font-size-input-label)
) + var(--sky-space-inset-input_label-top-m) +
var(--sky-space-inset-input_label-bottom-m)
)
);

.sky-lookup-search {
background-color: var(
--sky-override-lookup-input-box-search-background-color,
transparent
);
border: none;
padding-bottom: 5px;
padding: var(--sky-override-lookup-input-box-search-padding, inherit);
width: 100%;
}
}

@include defaultMixins.sky-theme-modern {
sky-tokens.sky-lookup-tokens {
.sky-tokens {
margin-top: -6px;
}
}

sky-input-box .sky-lookup {
// Since we are applying the host template directly - add the same spacing styles that we do around a directly projected text area.
margin-top: -26px;
padding-top: 26px;
&.sky-lookup-disabled {
.sky-lookup-search {
background-color: var(
--sky-override-lookup-input-box-search-disabled-background-color,
inherit
);
}
}

sky-tokens.sky-lookup-tokens {
// Input box adds a negative margin-top to elements with the
Expand All @@ -120,21 +213,40 @@ sky-input-box .sky-lookup {
.sky-tokens {
margin-top: 0;
margin-bottom: 0;
padding-left: var(
--sky-override-lookup-tokens-padding-left,
var(--sky-space-inset-input-left-m)
);
align-items: var(
--sky-override-lookup-input-box-tokens-align-items,
flex-start
);

sky-token {
padding-bottom: 0;
padding-top: 0;
margin-top: var(--sky-override-lookup-token-margin-top, -1px);
}

.sky-tokens-content {
padding-bottom: 0;
padding-top: 0;
padding-left: var(
--sky-override-lookup-input-box-tokens-content-padding-left,
var(--sky-space-gap-text_action-xs)
);

&:first-child {
padding-left: 0;
}
}
}

&:has(sky-token) {
textarea.sky-lookup-input.sky-form-control {
padding-left: var(--sky-override-lookup-textarea-padding-left, 0);
}
}
}

&.sky-lookup-single {
Expand All @@ -146,21 +258,27 @@ sky-input-box .sky-lookup {
}

.sky-lookup-search {
background-color: transparent;
padding: 0 0 0 15px;

&.sky-field-status-active {
box-shadow: none;
}
}

textarea.sky-lookup-input.sky-form-control {
padding-left: 0;
// NOTE: This left padding rule can be removed when the override support is removed.
// However, the value must be specified until then because the value is set on the same element in input box
// and so `inherit` does not work in this case.
padding-left: var(
--sky-override-lookup-textarea-padding-left,
var(--sky-space-inset-input-left-m)
);
resize: none;
}

.sky-lookup-single-control {
padding-left: 0;
padding-left: var(
--sky-override-lookup-input-box-single-control-padding-left,
inherit
);
}
}
}

0 comments on commit 3236e6e

Please sign in to comment.