diff --git a/components/inputs/input-styles.js b/components/inputs/input-styles.js index 5caabdc634d..96543c166e7 100644 --- a/components/inputs/input-styles.js +++ b/components/inputs/input-styles.js @@ -14,23 +14,28 @@ registerSemanticVariableForSvgImageUrl( ` ); +/** + * A private helper method that should not be used by general consumers + */ +export function _getInputBaseStyleDelegates(selector, focusSelector) { + return { + selector: focusClass => ` + ${focusSelector ? `${focusSelector},` : ''} + ${selector}:${focusClass}:not(:disabled), + ${selector}:hover:not(:disabled)`, + style: fullSelector => css` + ${fullSelector} { + border-color: var(--d2l-theme-border-color-focus); + border-width: 2px; + outline: none; + padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px)); + }` + }; +} + function getStyleDelegates(selector, focusSelector, textAreaSelector) { return { - input: { - selector: focusClass => ` - ${focusSelector ? `${focusSelector},` : ''} - ${selector}:${focusClass}:not(:disabled), - ${selector}:hover:not(:disabled) - `, - style: fullSelector => css` - ${fullSelector} { - border-color: var(--d2l-theme-border-color-focus); - border-width: 2px; - outline: none; - padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px)); - } - ` - }, + input: _getInputBaseStyleDelegates(selector, focusSelector), textarea: { selector: focusClass => ` ${textAreaSelector}:hover:not(:disabled), @@ -58,13 +63,10 @@ function getStyleDelegates(selector, focusSelector, textAreaSelector) { }; } -export function _generateInputStyles(selector, focusSelector) { - if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return ''; - const lastSpaceIndex = selector.lastIndexOf(' '); - const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`); - const delegates = getStyleDelegates(selector, focusSelector, textareaSelector); - - selector = unsafeCSS(selector); +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputBaseStyles(selector) { return css` ${selector} { background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base)); @@ -88,26 +90,72 @@ export function _generateInputStyles(selector, focusSelector) { vertical-align: middle; width: 100%; } - ${getFocusVisibleStyles(delegates.input.selector, delegates.input.style)} + `; +} +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputPlaceholderBaseStyles(selector) { + return css` ${selector}::placeholder { color: var(--d2l-theme-text-color-static-faint); font-size: 0.8rem; font-weight: 400; opacity: 1; /* Firefox has non-1 default */ } - ${selector}::-ms-input-placeholder { - color: var(--d2l-theme-text-color-static-faint); - font-size: 0.8rem; - font-weight: 400; - } + `; +} - [aria-invalid="true"]${selector}:not(:disabled) { +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputAriaInvalidBaseStyles(selector) { + return css` + ${selector}[aria-invalid="true"]:not(:disabled) { border-color: var(--d2l-theme-status-color-error); } + `; +} + +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputDisabledBaseStyles(selector) { + return css` ${selector}:disabled { opacity: var(--d2l-theme-opacity-disabled-control); } + `; +} + +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputStyles(selector, focusSelector) { + if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return ''; + const lastSpaceIndex = selector.lastIndexOf(' '); + const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`); + const delegates = getStyleDelegates(selector, focusSelector, textareaSelector); + + selector = unsafeCSS(selector); + return css` + ${_generateInputBaseStyles(selector)} + + ${getFocusVisibleStyles(delegates.input.selector, delegates.input.style)} + + ${_generateInputPlaceholderBaseStyles(selector)} + + ${selector}::-ms-input-placeholder { + color: var(--d2l-theme-text-color-static-faint); + font-size: 0.8rem; + font-weight: 400; + } + + ${_generateInputAriaInvalidBaseStyles(selector)} + + ${_generateInputDisabledBaseStyles(selector)} + ${selector}::-webkit-search-cancel-button, ${selector}::-webkit-search-decoration { display: none; diff --git a/components/inputs/input-text-styles.js b/components/inputs/input-text-styles.js new file mode 100644 index 00000000000..dd96401e013 --- /dev/null +++ b/components/inputs/input-text-styles.js @@ -0,0 +1,36 @@ + +import { + _generateInputAriaInvalidBaseStyles, + _generateInputBaseStyles, + _generateInputDisabledBaseStyles, + _generateInputPlaceholderBaseStyles, + _getInputBaseStyleDelegates, +} from './input-styles.js'; +import { css, unsafeCSS } from 'lit'; +import { _isValidCssSelector } from '../../helpers/internal/css.js'; +import { getFocusVisibleStyles } from '../../helpers/focus.js'; + +function _generateInputTextFocusStyles(selector) { + const input = _getInputBaseStyleDelegates(selector); + return getFocusVisibleStyles(input.selector, input.style); +} + +/** + * A private helper method that should not be used by general consumers + */ +export function _generateInputTextStyles(selector) { + if (!_isValidCssSelector(selector)) return ''; + const finalSelector = unsafeCSS(selector); + + return css` + ${ _generateInputBaseStyles(finalSelector) } + + ${ _generateInputPlaceholderBaseStyles(finalSelector) } + + ${ _generateInputTextFocusStyles(finalSelector) } + + ${ _generateInputAriaInvalidBaseStyles(finalSelector) } + + ${_generateInputDisabledBaseStyles(finalSelector)} + `; +} diff --git a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-disabled.png b/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-disabled.png deleted file mode 100644 index 4b0107166fd..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-disabled.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-focus.png b/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-focus.png deleted file mode 100644 index aa1ed2e35d1..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid-focus.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid.png b/components/inputs/test/golden/input-text/chromium/sass-aria-invalid.png deleted file mode 100644 index d308eeb5c01..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-aria-invalid.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-basic-focus.png b/components/inputs/test/golden/input-text/chromium/sass-basic-focus.png deleted file mode 100644 index 84dc7e317d2..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-basic-focus.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-basic.png b/components/inputs/test/golden/input-text/chromium/sass-basic.png deleted file mode 100644 index 63637e214fd..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-basic.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-disabled.png b/components/inputs/test/golden/input-text/chromium/sass-disabled.png deleted file mode 100644 index d096b25c27b..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-disabled.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-email.png b/components/inputs/test/golden/input-text/chromium/sass-email.png deleted file mode 100644 index 37aeecce62c..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-email.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-invalid-disabled.png b/components/inputs/test/golden/input-text/chromium/sass-invalid-disabled.png deleted file mode 100644 index 99faca573c5..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-invalid-disabled.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-invalid-focus.png b/components/inputs/test/golden/input-text/chromium/sass-invalid-focus.png deleted file mode 100644 index dbbf3cf1aa9..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-invalid-focus.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-invalid.png b/components/inputs/test/golden/input-text/chromium/sass-invalid.png deleted file mode 100644 index 8ad4805b3b9..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-invalid.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-number.png b/components/inputs/test/golden/input-text/chromium/sass-number.png deleted file mode 100644 index 855adeafa35..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-number.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-password.png b/components/inputs/test/golden/input-text/chromium/sass-password.png deleted file mode 100644 index 5faca9e13f8..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-password.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-placeholder-disabled.png b/components/inputs/test/golden/input-text/chromium/sass-placeholder-disabled.png deleted file mode 100644 index 4b948befc70..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-placeholder-disabled.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-placeholder.png b/components/inputs/test/golden/input-text/chromium/sass-placeholder.png deleted file mode 100644 index ba80d2816c5..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-placeholder.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-search.png b/components/inputs/test/golden/input-text/chromium/sass-search.png deleted file mode 100644 index 7cf463d923e..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-search.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-tel.png b/components/inputs/test/golden/input-text/chromium/sass-tel.png deleted file mode 100644 index 195aad6fc8e..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-tel.png and /dev/null differ diff --git a/components/inputs/test/golden/input-text/chromium/sass-url.png b/components/inputs/test/golden/input-text/chromium/sass-url.png deleted file mode 100644 index 86c5996a29d..00000000000 Binary files a/components/inputs/test/golden/input-text/chromium/sass-url.png and /dev/null differ diff --git a/components/inputs/test/input-text.vdiff.js b/components/inputs/test/input-text.vdiff.js index 7b9e8caa7f1..dc1abb14fc0 100644 --- a/components/inputs/test/input-text.vdiff.js +++ b/components/inputs/test/input-text.vdiff.js @@ -2,7 +2,6 @@ import '../../button/button-icon.js'; import '../../icons/icon.js'; import '../input-text.js'; import { expect, fixture, focusElem, hoverElem, hoverElemAt, html } from '@brightspace-ui/testing'; -import { loadSass, unloadSass } from '../../../test/load-sass.js'; import { inlineHelpFixtures } from './input-shared-content.js'; const createIcon = (icon, slot) => html``; @@ -164,41 +163,4 @@ describe('d2l-input-text', () => { }); - describe('sass', () => { - - before(loadSass); - after(unloadSass); - - const sassBasicFixture = html``; - const sassInvalidFixture = html``; - const sassAriaInvalidFixture = html``; - - [ - { name: 'basic', template: sassBasicFixture }, - { name: 'basic-focus', template: sassBasicFixture, focus: true }, - { name: 'email', template: html`` }, - { name: 'number', template: html`` }, - { name: 'password', template: html`` }, - { name: 'search', template: html`` }, - { name: 'tel', template: html`` }, - { name: 'url', template: html`` }, - { name: 'disabled', template: html`` }, - { name: 'placeholder', template: html`` }, - { name: 'placeholder-disabled', template: html`` }, - { name: 'invalid', template: sassInvalidFixture }, - { name: 'invalid-disabled', template: html`` }, - { name: 'invalid-focus', template: sassInvalidFixture, focus: true }, - { name: 'aria-invalid', template: sassAriaInvalidFixture }, - { name: 'aria-invalid-disabled', template: html`` }, - { name: 'aria-invalid-focus', template: sassAriaInvalidFixture, focus: true }, - ].forEach(({ name, template, focus }) => { - it(name, async() => { - const elem = await fixture(template, { viewport }); - if (focus) await focusElem(elem); - await expect(elem).to.be.golden(); - }); - }); - - }); - }); diff --git a/test/node-imports-test.js b/test/node-imports-test.js index 9b11a895bee..35a648ef7ff 100644 --- a/test/node-imports-test.js +++ b/test/node-imports-test.js @@ -19,4 +19,9 @@ describe('node imports', () => { assert.ok(t._generateHeading4Styles); }); + it('should import input text styles in a node environment', async() => { + const t = await import('../components/inputs/input-text-styles.js'); + assert.ok(t._generateInputTextStyles); + }); + });