WIP Accessibility palette swap #11610

snide · 2017-05-04T23:54:29Z

WIP, don't merge.

Addresses #11521

cjcenizal

The buttons look so so much better. I had a few suggestions.

cjcenizal · 2017-05-05T15:20:07Z

ui_framework/components/local_nav/_index.scss

@@ -14,8 +14,8 @@ $localDropdownFormNoteTextColor: #737373;
 $localTabTextColor: $localNavButtonTextColor;
 $localTabTextColor-isHover: $localNavButtonTextColor-isHover;
 $localTabTextColor-isSelected: $localNavButtonTextColor-isHover;
-$localBreadcrumbLinkColor: #328caa;
-$localSearchButtonBackgroundColor: #9c9c9c;
+$localBreadcrumbLinkColor: $globalColorBlue;


Looks like this fails WCAG:

cjcenizal · 2017-05-05T15:43:28Z

ui_framework/components/button/_button.scss

+
+  @include kuiButtonHoverAndActive {
+    color: darken($globalLinkColor, 10%) !important; /* 1 */
+    border: solid 1px darken($globalColorBlue, 10%);


Could you an example of this button to the UI Framework? If you look in ui_framework/doc_site/src/views/button/, you'll need to create a file similar to button_sizes.html and add it to button_example.js.

cjcenizal · 2017-05-05T15:58:04Z

ui_framework/components/local_nav/_local_dropdown.scss

@@ -2,6 +2,7 @@
  position: relative;
  padding: 10px $localNavSideSpacing 14px;
  background-color: $localDropdownBackgroundColor;
+  border-bottom: solid 10px $globalColorLightGray;


Look like we need to add a dark theme rule for this:

cjcenizal · 2017-05-05T16:52:28Z

ui_framework/components/local_nav/_local_menu.scss

@@ -15,18 +15,21 @@
  border: 0;
  cursor: pointer;

-  &:hover {
+  &:hover, &:focus {


Small nit, but I've been stacking these to make them easier to scan:

&:hover, &:focus {

Are you OK with keeping this convention?

cjcenizal · 2017-05-05T17:00:18Z

ui_framework/components/button/_button.scss

@@ -18,7 +18,8 @@
  border-radius: $globalBorderRadius;

  @include kuiButtonDisabled {
-    cursor: default;
+    cursor: not-allowed;
+    opacity: .5;


The disabled state doesn't quite look disabled in some contexts:

Some solutions off the top of my head:

Change the context, e.g. make this sidebar have a white background.

Change the button enabled state so it contrasts more, e.g. by adding a box-shadow or border. Then the disabled state will look "flatter".

Change the button disabled state so it contrasts more, e.g. by also dropping the text opacity and/or by reducing the saturation of the button so it looks a little more grayed out.

cjcenizal · 2017-05-05T17:05:37Z

src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html

-    <h5 ng-show="!field.details.error">Quick Count <kbn-info info="Top 5 values based on documents in the table" placement="right"></kbn-info>
-      <span ng-if="!field.details.error" class="small discover-field-details-count">
-        (
+    <p class="kuiSubduedText" ng-show="!field.details.error">


Let's add kuiSubText class here to remove the bottom margin and preserve the font-size.

cjcenizal · 2017-05-05T17:22:01Z

src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html

@@ -44,7 +43,7 @@ <h5 ng-show="!field.details.error">Quick Count <kbn-info info="Top 5 values base
  <a
    ng-href="{{field.details.visualizeUrl}}"
    ng-show="field.visualizable"
-    class="kuiButton kuiButton--primary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"
+    class="kuiButton kuiButton--secondary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"


A couple things bother me about this button... the white background feels out of place because it doesn't match the background of the panel it's in, and the hover state doesn't feel very noticeable to me:

I think we should make the background semi-transparent, so it will adjust to the background of the container. And then what if we did a background change to make the hover state more noticeable? This is similar to how this button on elastic.co behaves:

I just threw this together to communicate the idea, I'm sure it could be improved:

Works on white too:

Here's the SCSS I used:

.kuiButton--secondary { color: $globalLinkColor !important; border: solid 1px $globalColorBlue; background-color: rgba($globalColorWhite, 0.4); @include kuiButtonHoverAndActive { color: darken($globalLinkColor, 10%) !important; border: solid 1px darken($globalColorBlue, 10%); background-color: rgba(lighten($globalLinkColor, 50%), 0.1); } }

alexfrancoeur · 2017-05-15T13:59:39Z

This looks great! @snide I noticed the loading indicator still has some pink in it

alexfrancoeur · 2017-05-15T19:26:51Z

Screenshots from latest logo update:

epixa · 2017-05-15T21:17:15Z

Honestly, I prefer the teal logo treatment to this new one. I just kind of think the new one seems out of place with the current color scheme - perhaps the lighter background makes it look like it belongs more to the main content area than the sidebar, so it kind of looks like the sidebar just begins out of nowhere.

I know we're trying not to overthink this too much, but at the same time this is going to be the Kibana that people use every single day for a year or more, so it should be something we're happy with. The Kibana 5 design is far from perfect, but it was such a better design than Kibana 4 that any problems it has are totally worth living with.

Anyone have thoughts here? I don't have a useful alternative to propose at this point, but I'll think about it.

epixa · 2017-05-17T13:24:06Z

A few of us discussed this in a group and decided the best option for now would be to have the logo sit on the same blue background as the rest of the sidebar, and the logo itself would just be the flat white logo rather than the multi-color logo.

alexfrancoeur · 2017-05-17T17:41:18Z

Screenshots of latest below. I believe there will be some changes to the icon as well.

epixa · 2017-05-26T14:36:14Z

@snide What's the status of this? If it's ready for review, can you rebase on or merge master to resolve conflicts, take the WIP label out of the title, slap a review label on this, and update the PR description with the latest information about what's in this PR/updated images/etc?

snide · 2017-05-26T17:34:07Z

@epixa Not ready for review. It needs a day or two of solid love, mostly going through some more coloring, and then some refactoring on buttons for KUI. Unfortunately didn't have much time for it with Xschool this week. It's next on my plate. I'll see where I can get it today.

…c#11928)

) * Implement a way to hide write controls from dashboard * Add roles definition to the saved dashboard object * Remove roles from dashboard * Use an angular provider to control the hideWriteControls flag * Add an api to chrome to show only a single app by id * Refactor injectVars logic * Fix tests * Refactor kibana root controller * add additional test functionality * Missed a couple spots for hiding edit controls * add retry and help text for dash only mode failures See if it helps. Tests pass locally. * Move element into screen when clicking * use shorthand for object creation * Hide checkboxes, show 'no dashboard' message with the button

- Removing "I'm a pro" link from top right. - Adding "Got it, take me to Kibana" button at bottom center. - De-emphasizing demo site.

…lastic#11969) * [indexPatterns/field] replace mapping awareness with readFromDocValues * move link to more details to proper location * Address kjbekkelund's feedback * let the prs speak for themselves

…tic#12006)

All builds are now 64 bit, which is what we want to support from 6.0 onward.

…tic#11906)

* [indexPatterns/create] timeFields -> timeFieldOptions In elastic#11409 we added two new possible options to the "Time Filter field name" drop down. These options display a message that "there are no time fields" or "I don't want to use the time filter". These new options were added to the `controller.timeFields` array, which is where the other options were, but they don't actually represent time fields. This change updates `controller.timeFields` to instead be a list of options, specifically created to populate the select box in the view. They are now stored at `controller.timeFieldOptions` and each option has a `display` property (which will be rendered in the view) and optionally a `fieldName` property. The selected option, `controller.formValues.timeFieldOption` is checked for a `fieldName` property when the Index Pattern is created. * [indexPatterns/create] populate `this.timeFieldOptions` * [indexPatterns/create] unify fetching and errors for timeFieldOptions * [indexPatterns/create] refreshFieldList() -> refreshTimeFieldOptions() * [indexPatterns/create] unify "No time fields available" messages * [indexPatterns/create] disable the timeField select when loading * [indexPatterns/create] only require a time field is there are options Doing this prevents the time field from rendering as invalid when there is no matching index pattern (which has it's own error display) and when the fields are loading * [indexPatterns/create] isolate side-effects * [indexPatterns/create] let refreshTimeFieldOptions() control model * [indexPatterns/create] attempt to make default field selection clearer * [indexPatterns/create] explain why we set timeFieldOption * [indexPatterns/create] make timeFieldName `undefined` when not set * [indexPatterns/create] Don't pass two args to .then() unless needed * 💅

With full screen panel mode, the width and height can be updated to 0 (because the panel is hidden). If _size isn’t updated, the second time through it’ll skip the resize because of the if (newWidth === this._size[0] && newHeight === this._size[1]) Another option to fix this is to get rid of that check, and continue to do the resize when the _size values are equal. I felt this one was slightly better, but could go either way.

Using the --dev flag is the only support way to change the internal Kibana environment to something else. Allowing NODE_ENV to be set at all can have unexpected results with our dependencies, so we now always set it to production.

…l Builder (elastic#11772)

* Fix a type error from the default to named conversion add tests that would have caught it. * address code review comments

* change type property to buttonType * Update the tests to assert that the type HTML attribute is supported * remove type=submit from KuiSubmitButton since component automatically sets type

…12040) * When on an embedded page, bypass Getting Started gate check * Add unit test for embedded page scenario

…board Panel (elastic#12030) * Move drag handle attribute onto the button element itself within Dashboard Panel. Fixes bug in which Firefox users could no longer drag the panel. * Use anchor elements for all Dashboard Panel buttons for consistent hover and focus states.

* [grunt/jest] fail task when jest fails * 😶

* Fix use of KuiButtons in Clone Modal. * [scripts] stub scripts/languages api until elastic#11959 is fixed

This reverts commit 71a9b8b. Until we get all the relevant infra configured with yarn as well.

Prior to version 4.2.0, kibana.yml configurations used underscore as a separator. In 4.2.0, this changed to dot instead, though the old configuration names continued to work. In 5.0 we started logging deprecation notices whenever the underscore-separated configurations were encountered. Now we remove support for them entirely.

…c#12011) * [indexPatterns/create] disable time-based options when needed * !! -> Boolean() * [indexPatterns/create] refactor sample deduping for clarity * [indexPattern/create] wrap html attributes

karmi · 2017-05-30T20:10:26Z

Hi @snide, we have found your signature in our records, but it seems like you have signed with a different e-mail than the one used in yout Git commit. Can you please add both of these e-mails into your Github profile (they can be hidden), so we can match your e-mails to your Github profile?

snide · 2017-05-30T22:18:33Z

Messed up my rebase, replaced with #12085

snide added 2 commits May 4, 2017 14:19

grayscale, get links and buttons on acceptable contrast

78902a6

variable color bingo for accessibility, still grayscale

1de77a2

snide added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. WIP Work in progress labels May 4, 2017

snide requested a review from cjcenizal May 4, 2017 23:54

cjcenizal suggested changes May 5, 2017

View reviewed changes

snide added 10 commits May 5, 2017 11:20

more variable / coloring

86d093b

Merge remote-tracking branch 'upstream/master' into 11521/colors

d8e240a

more reskin coloring, adding some blue

d651f63

more reskinning / palette swaps

8e134ce

filter bar retheme

fef75b5

more reskinning / palette swaps

55ec70e

reskinned typeahead and tooltips

524c7f3

visualization sidebars mostly cleaned up / normalized

7793fc8

more reskinning

660d108

better animation against login

2b0cf26

switch to colored kibana logo

6ef8923

flat blue

e4d96ca

coloring

2e00993

cjcenizal mentioned this pull request May 24, 2017

Support multiline Timelion queries #11972

Merged

snide added 3 commits May 26, 2017 11:50

more coloring

09effb2

some colors for visualizations

4776668

more coloring

fcb181d

stacey-gammon and others added 26 commits May 30, 2017 13:07

Move management sections around. No visual changes in this PR (elasti…

91923f9

…c#11928)

Making tweaks. (elastic#12003)

78e6d4c

- Removing "I'm a pro" link from top right. - Adding "Got it, take me to Kibana" button at bottom center. - De-emphasizing demo site.

[indexPatterns/field] remove indexed/analyzed/doc_values awareness (e…

85ec396

…lastic#11969) * [indexPatterns/field] replace mapping awareness with readFromDocValues * move link to more details to proper location * Address kjbekkelund's feedback * let the prs speak for themselves

Show Timelion function reference after user dismisses tutorial. (elas…

5f5deda

…tic#12006)

build: remove 32 bit builds (elastic#11941)

1857bc1

All builds are now 64 bit, which is what we want to support from 6.0 onward.

[tests/functional] catch and ignore errors during stabilization (elas…

6896040

…tic#11906)

Fixed a minor typo (elastic#8904)

765c972

Always set NODE_ENV to production (elastic#12010)

57c1986

Using the --dev flag is the only support way to change the internal Kibana environment to something else. Allowing NODE_ENV to be set at all can have unexpected results with our dependencies, so we now always set it to production.

Adding help text to calculation (elastic#11936)

4e7ca80

Fixes elastic#11763 - Fixes error in Percentile for Time Series Visua…

3737349

…l Builder (elastic#11772)

Fix a type error from the default to named conversion (elastic#12021)

5ea2f61

* Fix a type error from the default to named conversion add tests that would have caught it. * address code review comments

[UI Framework] Rename "type" property to "buttonType" (elastic#11878)

cf8adbc

* change type property to buttonType * Update the tests to assert that the type HTML attribute is supported * remove type=submit from KuiSubmitButton since component automatically sets type

When on an embedded page, bypass Getting Started gate check (elastic#…

093b1b8

…12040) * When on an embedded page, bypass Getting Started gate check * Add unit test for embedded page scenario

Remove node resolve algorithm reference (elastic#12023)

e94c682

[esvm] bump, remove outdated config (elastic#12043)

64f0372

[tests] remove unused visual_regression suite (elastic#12046)

1f99b89

[grunt/jest] fail task when jest fails (elastic#12049)

9eea91e

* [grunt/jest] fail task when jest fails * 😶

Work around elastic#11959 for now (elastic#12051)

a0cf6ad

* Fix use of KuiButtons in Clone Modal. * [scripts] stub scripts/languages api until elastic#11959 is fixed

Switch to Yarn (elastic#11637)

af28362

Revert "Switch to Yarn (elastic#11637)"

b45249c

This reverts commit 71a9b8b. Until we get all the relevant infra configured with yarn as well.

[indexPatterns/create] disable time-based options when needed (elasti…

dce17b9

…c#12011) * [indexPatterns/create] disable time-based options when needed * !! -> Boolean() * [indexPatterns/create] refactor sample deduping for clarity * [indexPattern/create] wrap html attributes

snide mentioned this pull request May 30, 2017

Palette swap for accessibility / kibana 6 #12085

Merged

snide closed this May 30, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP Accessibility palette swap #11610

WIP Accessibility palette swap #11610

snide commented May 4, 2017 •

edited

cjcenizal left a comment

cjcenizal May 5, 2017 •

edited

cjcenizal May 5, 2017

cjcenizal May 5, 2017

cjcenizal May 5, 2017

cjcenizal May 5, 2017

cjcenizal May 5, 2017

cjcenizal May 5, 2017

alexfrancoeur commented May 15, 2017

alexfrancoeur commented May 15, 2017 •

edited

epixa commented May 15, 2017

epixa commented May 17, 2017

alexfrancoeur commented May 17, 2017

epixa commented May 26, 2017

snide commented May 26, 2017

karmi commented May 30, 2017

snide commented May 30, 2017

WIP Accessibility palette swap #11610

WIP Accessibility palette swap #11610

Conversation

snide commented May 4, 2017 • edited

cjcenizal left a comment

Choose a reason for hiding this comment

cjcenizal May 5, 2017 • edited

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

cjcenizal May 5, 2017

Choose a reason for hiding this comment

alexfrancoeur commented May 15, 2017

alexfrancoeur commented May 15, 2017 • edited

epixa commented May 15, 2017

epixa commented May 17, 2017

alexfrancoeur commented May 17, 2017

epixa commented May 26, 2017

snide commented May 26, 2017

karmi commented May 30, 2017

snide commented May 30, 2017

snide commented May 4, 2017 •

edited

cjcenizal May 5, 2017 •

edited

alexfrancoeur commented May 15, 2017 •

edited