updating CHANGELOG.md and testing snapshoots

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
BigSamu · Oct 30, 2023 · d5dd922 · d5dd922
1 parent fe28556
commit d5dd922
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 156 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -57,6 +57,7 @@
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
 - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
+- Add `shrink` and `basis` props to OuiFlexItem ([#1126](https://github.com/opensearch-project/oui/pull/1126))
 
 ### 🐛 Bug Fixes
 

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1464,7 +1464,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                 >
                   <OuiI18n
                     default="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`OuiBasicTable with initial selection 1`] = `
                 grow={false}
               >
                 <div
-                  className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                  className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                 />
               </OuiFlexItem>
             </div>

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
@@ -111,14 +111,14 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
                 <OuiFlexItem
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
               </div>
@@ -355,7 +355,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiPopover
                       anchorPosition="upRight"
@@ -456,7 +456,7 @@ exports[`OuiInMemoryTable behavior pagination 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiPagination
                       activePage={1}
@@ -904,7 +904,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   >
                     <OuiI18n
                       default="Select all rows"
@@ -950,7 +950,7 @@ exports[`OuiInMemoryTable with initial selection 1`] = `
                   grow={false}
                 >
                   <div
-                    className="ouiFlexItem ouiFlexItem--flexGrowZero"
+                    className="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
                   />
                 </OuiFlexItem>
               </div>

diff --git a/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -42,15 +42,15 @@ exports[`OuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
           data-test-subj="DTS"
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -76,14 +76,14 @@ exports[`OuiCollapsibleNavGroup props iconSize is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -109,14 +109,14 @@ exports[`OuiCollapsibleNavGroup props iconType is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem ouiFlexItem--flexGrowZero"
+        class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
       >
         <span
           data-ouiicon-type="bolt"
         />
       </div>
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -142,7 +142,7 @@ exports[`OuiCollapsibleNavGroup props title is rendered 1`] = `
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h3
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -168,7 +168,7 @@ exports[`OuiCollapsibleNavGroup props titleElement can change the rendered eleme
       class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
     >
       <div
-        class="ouiFlexItem"
+        class="ouiFlexItem ouiFlexItem--flexShrink1"
       >
         <h2
           class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -229,7 +229,7 @@ exports[`OuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
           class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
         >
           <div
-            class="ouiFlexItem"
+            class="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <h3
               class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"
@@ -287,7 +287,7 @@ exports[`OuiCollapsibleNavGroup when isCollapsible is true will render an accord
           class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
         >
           <div
-            class="ouiFlexItem"
+            class="ouiFlexItem ouiFlexItem--flexShrink1"
           >
             <h3
               class="ouiTitle ouiTitle--xxsmall ouiCollapsibleNavGroup__title"

diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -803,7 +803,7 @@ exports[`renders inline OuiColorPicker 1`] = `
     role="listbox"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #54B399 as the color"
@@ -814,7 +814,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #6092C0 as the color"
@@ -825,7 +825,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #D36086 as the color"
@@ -836,7 +836,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #9170B8 as the color"
@@ -847,7 +847,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #CA8EAE as the color"
@@ -858,7 +858,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #D6BF57 as the color"
@@ -869,7 +869,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #B9A888 as the color"
@@ -880,7 +880,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #DA8B45 as the color"
@@ -891,7 +891,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #AA6556 as the color"
@@ -902,7 +902,7 @@ exports[`renders inline OuiColorPicker 1`] = `
       />
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <button
         aria-label="Select #E7664C as the color"

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -1104,7 +1104,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1131,7 +1131,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1158,7 +1158,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1185,7 +1185,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1212,7 +1212,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1239,7 +1239,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1266,7 +1266,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1293,7 +1293,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"
@@ -1320,7 +1320,7 @@ exports[`props options list is rendered 1`] = `
               class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
             >
               <span
-                class="ouiFlexItem ouiFilterSelectItem__content"
+                class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
               >
                 <span
                   class="ouiComboBoxOption__contentWrapper"

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
   class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentSpaceBetween ouiFlexGroup--directionRow"
 >
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <div
       class="ouiPopover ouiPopover--anchorUpRight"
@@ -37,7 +37,7 @@ exports[`OuiDataGrid pagination renders 1`] = `
     </div>
   </div>
   <div
-    class="ouiFlexItem ouiFlexItem--flexGrowZero"
+    class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
   >
     <nav
       aria-label="Pagination for preceding grid: test grid"

diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
@@ -63,12 +63,12 @@ exports[`OuiEmptyPrompt props actions renders an array 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterMedium ouiFlexGroup--alignItemsCenter ouiFlexGroup--justifyContentCenter ouiFlexGroup--directionColumn ouiFlexGroup--responsive"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       action1
     </div>
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       action2
     </div>

diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
@@ -12,14 +12,14 @@ exports[`OuiFilterSelectItem is rendered 1`] = `
     class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
   >
     <div
-      class="ouiFlexItem ouiFlexItem--flexGrowZero"
+      class="ouiFlexItem ouiFlexItem--flexGrowZero ouiFlexItem--flexShrink1"
     >
       <span
         data-ouiicon-type="empty"
       />
     </div>
     <span
-      class="ouiFlexItem ouiFilterSelectItem__content"
+      class="ouiFlexItem ouiFlexItem--flexShrink1 ouiFilterSelectItem__content"
     />
   </span>
 </button>