undoing euiButtonIcon change and fixing euiButtonGroup styling

elastic · Mar 31, 2020 · 7aa7ea5 · 7aa7ea5
1 parent 8402c4e
commit 7aa7ea5
Show file tree

Hide file tree

Showing 32 changed files with 577 additions and 721 deletions.
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`CollapsedItemActions render 1`] = `
       class="euiToolTipAnchor"
     >
       <button
+        aria-label="All actions"
         class="euiButtonIcon euiButtonIcon--text"
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
@@ -21,11 +22,6 @@ exports[`CollapsedItemActions render 1`] = `
           class="euiButtonIcon__icon"
           data-euiicon-type="boxesHorizontal"
         />
-        <span
-          class="euiScreenReaderOnly"
-        >
-          All actions
-        </span>
       </button>
     </span>
   </div>

diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap
@@ -43,10 +43,10 @@ exports[`DefaultItemAction render - icon 1`] = `
   position="top"
 >
   <EuiButtonIcon
+    aria-label="action1"
     color="primary"
     iconType="trash"
     isDisabled={false}
-    label="action1"
     onClick={[Function]}
   />
 </EuiToolTip>

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -437,14 +437,15 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           token="euiPagination.previousPage"
                         >
                           <EuiButtonIcon
+                            aria-label="Previous page"
                             color="text"
                             data-test-subj="pagination-button-previous"
                             disabled={false}
                             iconType="arrowLeft"
-                            label="Previous page"
                             onClick={[Function]}
                           >
                             <button
+                              aria-label="Previous page"
                               className="euiButtonIcon euiButtonIcon--text"
                               data-test-subj="pagination-button-previous"
                               disabled={false}
@@ -464,13 +465,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   size="m"
                                 />
                               </EuiIcon>
-                              <EuiScreenReaderOnly>
-                                <span
-                                  className="euiScreenReaderOnly"
-                                >
-                                  Previous page
-                                </span>
-                              </EuiScreenReaderOnly>
                             </button>
                           </EuiButtonIcon>
                         </EuiI18n>
@@ -571,14 +565,15 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           token="euiPagination.nextPage"
                         >
                           <EuiButtonIcon
+                            aria-label="Next page"
                             color="text"
                             data-test-subj="pagination-button-next"
                             disabled={true}
                             iconType="arrowRight"
-                            label="Next page"
                             onClick={[Function]}
                           >
                             <button
+                              aria-label="Next page"
                               className="euiButtonIcon euiButtonIcon--text"
                               data-test-subj="pagination-button-next"
                               disabled={true}
@@ -598,13 +593,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   size="m"
                                 />
                               </EuiIcon>
-                              <EuiScreenReaderOnly>
-                                <span
-                                  className="euiScreenReaderOnly"
-                                >
-                                  Next page
-                                </span>
-                              </EuiScreenReaderOnly>
                             </button>
                           </EuiButtonIcon>
                         </EuiI18n>

diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx
@@ -149,7 +149,7 @@ export class CollapsedItemActions<T> extends Component<
         {(allActions: string) => (
           <EuiButtonIcon
             className={className}
-            label={allActions}
+            aria-label={allActions}
             iconType="boxesHorizontal"
             color="text"
             isDisabled={allDisabled}

diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx
@@ -52,7 +52,7 @@ export const DefaultItemAction = <T extends {}>({
     button = (
       <EuiButtonIcon
         className={className}
-        label={action.name}
+        aria-label={action.name}
         isDisabled={!enabled}
         color={color}
         iconType={icon}

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -43,7 +43,8 @@
     }
   }
 
-  &:disabled {
+  &:disabled,
+  &.euiButton--disabled {
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
     pointer-events: none;
@@ -138,7 +139,8 @@
 }
 
 // Fix ghost/disabled look specifically
-.euiButton:disabled.euiButton--ghost {
+.euiButton:disabled.euiButton--ghost,
+.euiButton--disabled.euiButton--ghost, {
   &,
   &:hover,
   &:focus {