[Emotion] Convert EuiButtonEmpty (#6863)

* [EuiButtonEmpty] Convert to use new non-deprecated internal content component * [EuiButtonEmpty] Convert child wrapper CSS to Emotion - place the padding on the parent button instead of on the content - remove the text truncation (already handled by the new component - no need to repeat) - retain `className`s, as they're used/targeted in many places in Kibana, but update syntax * [EuiButtonEmpty] Convert styles shared with `EuiButtonDisplay` * [EuiButtonEmpty] Convert remaining CSS specific to empty buttons - flush modifiers - transition + comment - leave out transform/animation - those aren't defined in the new base CSS-in-JS util and don't need to be unset * [EuiButtonEmpty] Remove modifier classes + rewrite enums to new preferred syntax * [EuiButtonEmpty] Delete Sass files * Delete `EuiButtonContentDeprecated` and all button Sass files/imports * [EuiButtonEmpty] Convert tests from Enzyme to RTL + add missing `textProps` test * [EuiButtonEmpty] Add Storybook - TODO: add another story for link vs button? - add another with all permutations visible at once (like in docs?) * changelog * Update downstream snapshots * Address specificity TODO * [PR feedback] comment typo Co-authored-by: Bree Hall <[email protected]> --------- Co-authored-by: Bree Hall <[email protected]>
elastic · Jun 27, 2023 · 38ec5ab · 38ec5ab
1 parent ca7ecfd
commit 38ec5ab
Show file tree

Hide file tree

Showing 40 changed files with 804 additions and 1,084 deletions.
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -177,22 +177,21 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiPopover__anchor css-16vtueo-render"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--xSmall euiButtonEmpty--flushRight css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonContent__icon"
-                      color="inherit"
-                      data-euiicon-type="arrowDown"
-                    />
-                    <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Sorting
                     </span>
+                    <span
+                      color="inherit"
+                      data-euiicon-type="arrowDown"
+                    />
                   </span>
                 </button>
               </div>
@@ -419,14 +418,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Edit
                     </span>
@@ -437,14 +436,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Delete
                     </span>
@@ -540,14 +539,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Edit
                     </span>
@@ -558,14 +557,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Delete
                     </span>
@@ -661,14 +660,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Edit
                     </span>
@@ -679,14 +678,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushRight euiTableCellContent__hoverItem css-9t7nyf-empty-primary"
+                  class="euiButtonEmpty euiTableCellContent__hoverItem emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary-flush-right"
                   type="button"
                 >
                   <span
-                    class="euiButtonContent euiButtonEmpty__content"
+                    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="eui-textTruncate euiButtonEmpty__text"
                     >
                       Delete
                     </span>
@@ -780,25 +779,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiPopover__anchor css-16vtueo-render"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--xSmall css-wvaqcf-empty-text"
+              class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
               data-test-subj="tablePaginationPopoverButton"
               type="button"
             >
               <span
-                class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
               >
                 <span
-                  class="euiButtonContent__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowDown"
-                />
-                <span
-                  class="euiButtonEmpty__text"
+                  class="eui-textTruncate euiButtonEmpty__text"
                 >
                   Rows per page
                   : 
                   3
                 </span>
+                <span
+                  color="inherit"
+                  data-euiicon-type="arrowDown"
+                />
               </span>
             </button>
           </div>
@@ -844,16 +842,16 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 aria-controls="__table_generated-id"
                 aria-current="true"
                 aria-label="Page 1 of 2"
-                class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-57pcyl-empty-disabled-euiPaginationButton-isActive"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
                 data-test-subj="pagination-button-0"
                 disabled=""
                 type="button"
               >
                 <span
-                  class="euiButtonContent euiButtonEmpty__content"
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text"
                   >
                     1
                   </span>
@@ -866,16 +864,16 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               <a
                 aria-controls="__table_generated-id"
                 aria-label="Page 2 of 2"
-                class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-2bs0sf-empty-text-euiPaginationButton"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
                 data-test-subj="pagination-button-1"
                 href="#__table_generated-id"
                 rel="noreferrer"
               >
                 <span
-                  class="euiButtonContent euiButtonEmpty__content"
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text"
                   >
                     2
                   </span>

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
@@ -122,23 +122,22 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
             class="euiPopover__anchor css-16vtueo-render"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--xSmall css-wvaqcf-empty-text"
+              class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
               data-test-subj="tablePaginationPopoverButton"
               type="button"
             >
               <span
-                class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
               >
                 <span
-                  class="euiButtonContent__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowDown"
-                />
-                <span
-                  class="euiButtonEmpty__text"
+                  class="eui-textTruncate euiButtonEmpty__text"
                 >
                   Rows per page: 2
                 </span>
+                <span
+                  color="inherit"
+                  data-euiicon-type="arrowDown"
+                />
               </span>
             </button>
           </div>
@@ -185,16 +184,16 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
               <a
                 aria-controls="__table_generated-id"
                 aria-label="Page 1 of 2"
-                class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-2bs0sf-empty-text-euiPaginationButton"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiPaginationButton"
                 data-test-subj="pagination-button-0"
                 href="#__table_generated-id"
                 rel="noreferrer"
               >
                 <span
-                  class="euiButtonContent euiButtonEmpty__content"
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text"
                   >
                     1
                   </span>
@@ -208,16 +207,16 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                 aria-controls="__table_generated-id"
                 aria-current="true"
                 aria-label="Page 2 of 2"
-                class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-57pcyl-empty-disabled-euiPaginationButton-isActive"
+                class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
                 data-test-subj="pagination-button-1"
                 disabled=""
                 type="button"
               >
                 <span
-                  class="euiButtonContent euiButtonEmpty__content"
+                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text"
                   >
                     2
                   </span>
@@ -775,23 +774,22 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
             class="euiPopover__anchor css-16vtueo-render"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--xSmall css-wvaqcf-empty-text"
+              class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
               data-test-subj="tablePaginationPopoverButton"
               type="button"
             >
               <span
-                class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
               >
                 <span
-                  class="euiButtonContent__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowDown"
-                />
-                <span
-                  class="euiButtonEmpty__text"
+                  class="eui-textTruncate euiButtonEmpty__text"
                 >
                   Showing all rows
                 </span>
+                <span
+                  color="inherit"
+                  data-euiicon-type="arrowDown"
+                />
               </span>
             </button>
           </div>

diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap