From 3a09d01c63154ba4619d4d691e906284d5a2e7cf Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Tue, 25 Jun 2019 15:27:47 -0700 Subject: [PATCH] fix(docs-infra): fix API list search color and styles (#31272) - Add more spacing to inputs. - Correct placeholder colors in inputs. - Add aria label to input for accessibility. - Clean up layout styles and mobile view. Fixes #31265 PR Close #31272 --- aio/scripts/test-aio-a11y.js | 2 +- .../api/api-list.component.html | 2 +- .../app/shared/select/select.component.html | 4 +- .../shared/select/select.component.spec.ts | 20 ++++---- aio/src/styles/1-layouts/_top-menu.scss | 5 ++ aio/src/styles/2-modules/_api-list.scss | 49 ++++++++++--------- aio/src/styles/2-modules/_select-menu.scss | 24 ++++++--- aio/src/styles/_mixins.scss | 10 ++++ 8 files changed, 74 insertions(+), 42 deletions(-) diff --git a/aio/scripts/test-aio-a11y.js b/aio/scripts/test-aio-a11y.js index f4c89aae0a..5b3211b9dd 100644 --- a/aio/scripts/test-aio-a11y.js +++ b/aio/scripts/test-aio-a11y.js @@ -21,7 +21,7 @@ sh.set('-e'); // Constants const MIN_SCORES_PER_PAGE = { '': 100, - 'api': 90, + 'api': 100, 'api/core/Directive': 90, 'cli': 91, 'cli/add': 91, diff --git a/aio/src/app/custom-elements/api/api-list.component.html b/aio/src/app/custom-elements/api/api-list.component.html index 2ae0f12420..7e0eb0f0fd 100644 --- a/aio/src/app/custom-elements/api/api-list.component.html +++ b/aio/src/app/custom-elements/api/api-list.component.html @@ -15,7 +15,7 @@
- + search
diff --git a/aio/src/app/shared/select/select.component.html b/aio/src/app/shared/select/select.component.html index 5ede947d10..2f333955c3 100644 --- a/aio/src/app/shared/select/select.component.html +++ b/aio/src/app/shared/select/select.component.html @@ -1,6 +1,6 @@
diff --git a/aio/src/app/shared/select/select.component.spec.ts b/aio/src/app/shared/select/select.component.spec.ts index 2c7f3112e9..cb71370a94 100644 --- a/aio/src/app/shared/select/select.component.spec.ts +++ b/aio/src/app/shared/select/select.component.spec.ts @@ -41,13 +41,11 @@ describe('SelectComponent', () => { expect(getButton().textContent!.trim()).toEqual('Label:'); }); - it('should contain a symbol `` if hasSymbol is true', () => { - expect(getButton().querySelector('span')).toEqual(null); + it('should contain a symbol if hasSymbol is true', () => { + expect(getButtonSymbol()).toEqual(null); host.showSymbol = true; fixture.detectChanges(); - const span = getButton().querySelector('span'); - expect(span).not.toEqual(null); - expect(span!.className).toContain('symbol'); + expect(getButtonSymbol()).not.toEqual(null); }); it('should display the selected option, if there is one', () => { @@ -55,7 +53,7 @@ describe('SelectComponent', () => { host.selected = options[0]; fixture.detectChanges(); expect(getButton().textContent).toContain(options[0].title); - expect(getButton().querySelector('span')!.className).toContain(options[0].value); + expect(getButtonSymbol()!.className).toContain(options[0].value); }); it('should toggle the visibility of the options list when clicked', () => { @@ -110,7 +108,7 @@ describe('SelectComponent', () => { fixture.detectChanges(); expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 }); expect(getButton().textContent).toContain(options[0].title); - expect(getButton().querySelector('span')!.className).toContain(options[0].value); + expect(getButtonSymbol()!.className).toContain(options[0].value); }); it('should select the current option when enter is pressed', () => { @@ -119,7 +117,7 @@ describe('SelectComponent', () => { fixture.detectChanges(); expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 }); expect(getButton().textContent).toContain(options[0].title); - expect(getButton().querySelector('span')!.className).toContain(options[0].value); + expect(getButtonSymbol()!.className).toContain(options[0].value); }); it('should select the current option when space is pressed', () => { @@ -128,7 +126,7 @@ describe('SelectComponent', () => { fixture.detectChanges(); expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 }); expect(getButton().textContent).toContain(options[0].title); - expect(getButton().querySelector('span')!.className).toContain(options[0].value); + expect(getButtonSymbol()!.className).toContain(options[0].value); }); it('should hide when an option is clicked', () => { @@ -177,6 +175,10 @@ function getButton(): HTMLButtonElement { return element.query(By.css('button')).nativeElement; } +function getButtonSymbol(): HTMLElement | null { + return getButton().querySelector('.symbol'); +} + function getOptionContainer(): HTMLUListElement|null { const de = element.query(By.css('ul')); return de && de.nativeElement; diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index 642ff44142..9e46210dd9 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -192,6 +192,11 @@ aio-search-box.search-container { outline: none; } + @include placeholder { + @include font-size(14); + color: $mediumgray; + } + @include bp(big) { transition: width 0.4s ease-in-out; diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss index 795e5d81c4..a3a7d273a4 100644 --- a/aio/src/styles/2-modules/_api-list.scss +++ b/aio/src/styles/2-modules/_api-list.scss @@ -15,12 +15,17 @@ aio-api-list { .form-search input { width: 182px; + + @media screen and (max-width: 600px) { + width: 100%; + } } .api-list-container { display: flex; flex-direction: column; margin: 0 auto; + padding-left: 0; h2 { margin-top: 16px; @@ -37,8 +42,17 @@ aio-api-list { margin: 16px auto; } - .form-select-menu, .form-search { + .form-select-menu, + .form-search { margin: 8px; + + @media screen and (max-width: 600px) { + margin-left: 0; + } + } + + aio-select:first-child .form-select-menu { + margin-left: 0; } } @@ -69,32 +83,17 @@ aio-api-list { box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); box-sizing: border-box; border: 1px solid $white; - color: $blue-600; - @include font-size(16); - height: 32px; + border-radius: 4px; + color: $darkgray; + @include font-size(14); @include line-height(32); outline: none; - padding: 0 16px 0 32px; + padding: 4px 16px 4px 32px; transition: all .2s; - // PLACEHOLDER TEXT - // NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown - // selector will invalidate the whole block. - &::placeholder { // Chrome/Firefox/Safari - color: $blue-grey-100; - @include font-size(14); - } - &::-webkit-input-placeholder { // QQ Browser - color: $blue-grey-100; - @include font-size(14); - } - &::-ms-input-placeholder { // Edge - color: $blue-grey-100; - @include font-size(14); - } - &:-ms-input-placeholder { // IE - color: $blue-grey-100; + @include placeholder { @include font-size(14); + color: $mediumgray; } &:focus { @@ -108,7 +107,7 @@ aio-api-list { @include font-size(20); left: 8px; position: absolute; - top: 6px; + top: 12px; z-index: $layer-1; } } @@ -149,6 +148,10 @@ aio-api-list { aio-select { width: 200px; + @media screen and (max-width: 600px) { + width: 100%; + } + .symbol { margin-right: 8px; } diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss index bc2c991c76..b54690fe5a 100644 --- a/aio/src/styles/2-modules/_select-menu.scss +++ b/aio/src/styles/2-modules/_select-menu.scss @@ -9,21 +9,24 @@ box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); box-sizing: border-box; border: 1px solid $white; + border-radius: 4px; color: $blue-grey-600; - @include font-size(12); + @include font-size(14); font-weight: 400; - height: 32px; @include line-height(32); outline: none; - padding: 0 16px; + padding: 4px 16px; text-align: left; width: 100%; cursor: pointer; + display: flex; + align-items: center; + flex-direction: row; strong { font-weight: 600; margin-right: 8px; - text-transform: uppercase; + text-transform: capitalize; } &:focus { @@ -54,9 +57,18 @@ @include font-size(14); @include line-height(32); margin: 0; - padding: 0 16px 0 40px; + padding: 4px 16px 4px 40px; position: relative; transition: all .2s; + border: 1px solid transparent; + + &:first-child { + border-radius: 4px 4px 0 0; + } + + &:last-child { + border-radius: 0 0 4px 4px; + } &:hover { background: $blue-grey-50; @@ -70,7 +82,7 @@ .symbol { left: 16px; position: absolute; - top: 8px; + top: 12px; z-index: $layer-5; } } diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss index 8b0d5f957c..4765f39bdf 100644 --- a/aio/src/styles/_mixins.scss +++ b/aio/src/styles/_mixins.scss @@ -56,6 +56,16 @@ line-height: ($heightValue / 10) + rem; } +// PLACEHOLDER +// NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown +// selector will invalidate the whole block. +@mixin placeholder { + &:-ms-input-placeholder { @content; } // IE + &::-ms-input-placeholder { @content; } // Edge + &::-webkit-input-placeholder { @content; } // QQ Browser + &::placeholder { @content; } // Chrome/Firefox/Safari +} + @mixin rotate($degrees) { -moz-transform: rotate($degrees); -webkit-transform: rotate($degrees);