Another fixer PR

CHANGELOG.md

@@ -1,6 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Made `description` prop optional for `EuiDescribedFormGroup` ([#1191](https://github.com/elastic/eui/pull/1191))
+- Fixed issue with unselected tabs and aria-controls attribute in EuiTabbedContent
+- Added `tag` icon ([#1188](https://github.com/elastic/eui/pull/1188))
+
+**Bug fixes**
+
+- Added background to `readOnly` inputs ([#1188](https://github.com/elastic/eui/pull/1188))
+- Fixed some modal default and responsive sizing ([#1188](https://github.com/elastic/eui/pull/1188))
 
 ## [`4.0.1`](https://github.com/elastic/eui/tree/v4.0.1)
 

src-docs/src/views/bottom_bar/bottom_bar.js

@@ -40,20 +40,20 @@ export default class extends Component {
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiButton color="ghost" size="s" iconType="help">Help</EuiButton>
                 </EuiFlexItem>
-                <EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiButton color="ghost" size="s" iconType="user">Add user</EuiButton>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiButtonEmpty color="ghost" size="s" iconType="cross">Discard</EuiButtonEmpty>
                 </EuiFlexItem>
-                <EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiButton color="primary" fill size="s" iconType="check">Save</EuiButton>
                 </EuiFlexItem>
               </EuiFlexGroup>

src-docs/src/views/icon/icons.js

@@ -126,6 +126,7 @@ const iconTypes = [
   'string',
   'temperature',
   'tableOfContents',
+  'tag',
   'tear',
   'trash',
   'user',

src/components/form/_mixins.scss

@@ -9,7 +9,6 @@
 }
 
 /**
- * 1. Ensure the icon padding remains when in readOnly mode
  * 2. Account for inner box-shadow style border when in group
  * 3. Must supply both values to background-size or some browsers apply the single value to both directions
  */
@@ -45,16 +44,12 @@
 @mixin euiFormControlWithIcon($isIconOptional: false, $side: "left") {
   @if ($isIconOptional) {
     @at-root {
-      #{&}--withIcon,
-      #{&}--withIcon[readOnly] /* 1 */ {
+      #{&}--withIcon {
         @include euiFormControlLayout__padding(1, $side);
       }
     }
   } @else {
-    &,
-    &[readOnly] /* 1 */ {
-      @include euiFormControlLayout__padding(1, $side);
-    }
+    @include euiFormControlLayout__padding(1, $side);
   }
 }
 
@@ -124,10 +119,10 @@
 
 @mixin euiFormControlReadOnlyStyle {
   cursor: default;
-  background: transparent;
+  // Use transparency since there is no border and in case form is on a non-white background
+  background: transparentize(lightOrDarkTheme($euiColorLightShade, #000), .88);
   border-color: transparent;
   box-shadow: none;
-  padding-left: 0; // line up text with label
 }
 
 /**

src/components/icon/__snapshots__/icon.test.js.snap

@@ -5122,6 +5122,21 @@ exports[`EuiIcon props type tableOfContents is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tag is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6.254 14.97L.996 9.712c-.315-.316-.397-.463-.45-.64a.909.909 0 0 1 0-.534c.053-.177.135-.324.45-.64L7.43 1.466c.182-.183.252-.24.338-.293a.87.87 0 0 1 .273-.113c.099-.023.188-.032.446-.032h5.173c.445 0 .607.046.77.133.162.087.29.214.377.377.088.162.134.324.136.769l.015 5.15c0 .259-.009.348-.032.448a.87.87 0 0 1-.112.273c-.054.087-.111.157-.294.34L8.067 14.97c-.315.315-.462.396-.639.45a.909.909 0 0 1-.535 0c-.176-.054-.324-.135-.639-.45zm1.106-.707l6.453-6.453c.092-.092.126-.128.141-.147.003-.025.004-.074.004-.204l-.015-5.15c0-.181-.003-.245-.009-.275a2.247 2.247 0 0 0-.274-.007H8.487c-.13 0-.179.001-.203.004-.02.015-.055.05-.147.141L1.703 8.606a2.248 2.248 0 0 0-.189.2c.017.024.061.07.19.198l5.257 5.259c.128.128.175.171.2.188.024-.017.071-.06.2-.188zm4.972-10.607a2 2 0 1 1-2.828 2.828 2 2 0 0 1 2.828-2.828zm-.707.707a1 1 0 1 0-1.414 1.414 1 1 0 0 0 1.414-1.414zM6.807 11.28L4.686 9.159a.5.5 0 1 1 .707-.707l2.121 2.12a.5.5 0 1 1-.707.708zm1.414-1.414l-2.12-2.122a.5.5 0 1 1 .706-.707L8.928 9.16a.5.5 0 1 1-.707.707z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type tear is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium"

src/components/icon/icon.js

@@ -186,6 +186,7 @@ import stopFilled from './assets/stop_filled.svg';
 import storage from './assets/storage.svg';
 import string from './assets/string.svg';
 import tableOfContents from './assets/tableOfContents.svg';
+import tag from './assets/tag.svg';
 import tear from './assets/tear.svg';
 import temperature from './assets/temperature.svg';
 import timelionApp from './assets/app_timelion.svg';
@@ -402,6 +403,7 @@ const typeToIconMap = {
   storage,
   string,
   tableOfContents,
+  tag,
   tear,
   temperature,
   timelionApp,

src/components/icon/index.d.ts

@@ -190,6 +190,7 @@ declare module '@elastic/eui' {
     | 'storage'
     | 'string'
     | 'tableOfContents'
+    | 'tag'
     | 'tear'
     | 'temperature'
     | 'timelionApp'

src/components/modal/_modal.scss

@@ -30,8 +30,7 @@
 }
 
 .euiModal--confirmation {
-  width: 450px;
-  min-width: auto;
+  min-width: $euiFormMaxWidth;
 }
 
 .euiModalHeader {
@@ -100,7 +99,8 @@
 @include euiBreakpoint('xs','s') {
   .euiModal {
     position: fixed;
-    width: calc(100vw + 2px);
+    width: calc(100vw + 2px) !important;
+    max-width: none !important;
     left: 0;
     right: 0;
     bottom: 0;

src/components/modal/confirm_modal.js

@@ -129,6 +129,19 @@ EuiConfirmModal.propTypes = {
   className: PropTypes.string,
   defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS),
   buttonColor: PropTypes.string,
+  // For docs only, will get passed with ...rest
+  /**
+   * Sets the max-width of the modal.
+   * Set to `true` to use the default (`euiBreakpoints 'm'`),
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width in px,
+   * set to a string for a custom width in custom measurement.
+   */
+  maxWidth: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+  ]),
 };
 
 EuiConfirmModal.defaultProps = {

src/components/modal/index.d.ts

@@ -11,6 +11,14 @@ declare module '@elastic/eui' {
    */
   export interface EuiModalProps {
     onClose: () => void;
+    /**
+     * Sets the max-width of the modal,
+     * set to `true` to use the default size,
+     * set to `false` to not restrict the width,
+     * set to a number for a custom width in px,
+     * set to a string for a custom width in custom measurement.
+     */
+    maxWidth?: boolean | number | string;
   }
 
   export const EuiModal: SFC<

src/global_styling/mixins/_helpers.scss

@@ -29,9 +29,7 @@
   }
 }
 
-/**
- * Set scroll bar appearance on Chrome.
- */
+// Set scroll bar appearance on Chrome.
 @mixin euiScrollBar {
   &::-webkit-scrollbar {
     width: 16px;
@@ -51,9 +49,7 @@
 }
 
 
-/**
- * Specifically target IE11, but not Edge.
- */
+// Specifically target IE11, but not Edge.
 @mixin internetExplorerOnly {
   @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     @content;

src/global_styling/mixins/_states.scss

@@ -14,20 +14,5 @@ $euiFocusRingSizeLarge: 4px;
   }
 }
 
-@keyframes focusRingAnimate {
-  0% {
-    box-shadow: 0 0 0 6px $euiFocusRingAnimStartColor;
-  }
-  100% {
-    box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-  }
-}
-
-@keyframes focusRingAnimateLarge {
-  0% {
-    box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor;
-  }
-  100% {
-    box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor;
-  }
-}
+// Keyframe animation declarations can be found in
+// utility/animations.scss

src/global_styling/mixins/_typography.scss

@@ -85,18 +85,17 @@
   font-weight: $euiFontWeightLight; // always apply light weight to x-large type
 }
 
-/**
- * Text truncation
- *
- * Prevent text from wrapping onto multiple lines, and truncate with an
- * ellipsis.
- *
- * 1. Ensure that the node has a maximum width after which truncation can
- *    occur.
- * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
- *    nodes.
- */
- @mixin euiTextTruncate {
+// Text truncation
+//
+// Prevent text from wrapping onto multiple lines, and truncate with an
+// ellipsis.
+//
+// 1. Ensure that the node has a maximum width after which truncation can
+//    occur.
+// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
+//    nodes.
+
+@mixin euiTextTruncate {
   max-width: 100%; /* 1 */
   overflow: hidden !important;
   text-overflow: ellipsis !important;

src/global_styling/utility/_animations.scss

@@ -0,0 +1,42 @@
+// Animations as utility so they don't get duplicated in compiled CSS
+
+@keyframes euiAnimFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes euiGrow {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes focusRingAnimate {
+  0% {
+    box-shadow: 0 0 0 6px $euiFocusRingAnimStartColor;
+  }
+  100% {
+    box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
+  }
+}
+
+@keyframes focusRingAnimateLarge {
+  0% {
+    box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor;
+  }
+  100% {
+    box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor;
+  }
+}

src/global_styling/utility/_index.scss

@@ -1 +1,2 @@
+@import 'animations';
 @import 'utility';

src/global_styling/variables/_animations.scss

@@ -9,25 +9,5 @@ $euiAnimSpeedNormal: 250ms !default;
 $euiAnimSpeedSlow: 350ms !default;
 $euiAnimSpeedExtraSlow: 500ms !default;
 
-@keyframes euiAnimFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes euiGrow {
-  0% {
-    opacity: 0;
-  }
-  1% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+// Keyframe animation declarations can be found in
+// utility/animations.scss

src/global_styling/variables/_z_index.scss

@@ -1,18 +1,17 @@
 // Z-Index
 
-/*
-Remember that z-index is relative to parent and based on the stacking context. 
-z-indexs only compete against other z-indexs when they exist as children of
-that shared parent.
+// Remember that z-index is relative to parent and based on the stacking context.
+// z-indexs only compete against other z-indexs when they exist as children of
+// that shared parent.
 
-That means a popover with a settings of 2, will still show above a modal
-with a setting of 100, if it is within that modal and not besides it.
+// That means a popover with a settings of 2, will still show above a modal
+// with a setting of 100, if it is within that modal and not besides it.
 
-Generaly that means it's a good idea to consider things added to this file
-as competitive only as siblings.
+// Generaly that means it's a good idea to consider things added to this file
+// as competitive only as siblings.
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-*/
 
 $euiZLevel0:          0;
 $euiZLevel1:          1000;