Rename Inline to HorizontalStack

.changeset/afraid-lizards-know.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Renamed Inline to HorizontalStack

polaris-react/src/components/AccountConnection/AccountConnection.tsx

@@ -6,7 +6,7 @@ import {buttonFrom} from '../Button';
 import {SettingAction} from '../SettingAction';
 import {AlphaCard} from '../AlphaCard';
 import {Box} from '../Box';
-import {Inline} from '../Inline';
+import {HorizontalStack} from '../HorizontalStack';
 import {Text} from '../Text';
 import {VerticalStack} from '../VerticalStack';
 
@@ -71,13 +71,13 @@ export function AccountConnection({
   return (
     <AlphaCard>
       <SettingAction action={actionElement}>
-        <Inline gap="4">
+        <HorizontalStack gap="4">
           {avatarMarkup}
           <VerticalStack gap="2">
             {titleMarkup}
             {detailsMarkup}
           </VerticalStack>
-        </Inline>
+        </HorizontalStack>
       </SettingAction>
       {termsOfServiceMarkup}
     </AlphaCard>

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -9,7 +9,7 @@ import {Badge} from '../../../Badge';
 import {Text} from '../../../Text';
 import styles from '../../ActionList.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
-import {Inline} from '../../../Inline';
+import {HorizontalStack} from '../../../HorizontalStack';
 import {Box} from '../../../Box';
 
 export type ItemProps = ActionListItemDescriptor;
@@ -89,12 +89,12 @@ export function Item({
   const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
 
   const contentElement = (
-    <Inline blockAlign="center" gap="4">
+    <HorizontalStack blockAlign="center" gap="4">
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}
       {suffixMarkup}
-    </Inline>
+    </HorizontalStack>
   );
 
   const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;

polaris-react/src/components/AlphaFilters/AlphaFilters.tsx

@@ -11,7 +11,7 @@ import {UnstyledButton} from '../UnstyledButton';
 import {classNames} from '../../utilities/css';
 import type {AppliedFilterInterface, FilterInterface} from '../../types';
 import {Link} from '../Link';
-import {Inline} from '../Inline';
+import {HorizontalStack} from '../HorizontalStack';
 import {Box} from '../Box';
 import {Spinner} from '../Spinner';
 
@@ -232,7 +232,7 @@ export function AlphaFilters({
           md: '3',
         }}
       >
-        <Inline
+        <HorizontalStack
           align="start"
           blockAlign="center"
           gap={{
@@ -264,7 +264,7 @@ export function AlphaFilters({
             />
           </div>
           {additionalContent}
-        </Inline>
+        </HorizontalStack>
       </Box>
     </div>
   );
@@ -358,7 +358,7 @@ export function AlphaFilters({
         </div>
         {hideQueryField ? (
           <Box paddingInlineEnd="2" paddingBlockStart="2">
-            <Inline
+            <HorizontalStack
               align="start"
               blockAlign="center"
               gap={{
@@ -367,7 +367,7 @@ export function AlphaFilters({
               }}
             >
               {additionalContent}
-            </Inline>
+            </HorizontalStack>
           </Box>
         ) : null}
       </div>

polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx

@@ -8,7 +8,7 @@ import {Button} from '../../../Button';
 import {VerticalStack} from '../../../VerticalStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
-import {Inline} from '../../../Inline';
+import {HorizontalStack} from '../../../HorizontalStack';
 import {UnstyledButton} from '../../../UnstyledButton';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
 import {classNames} from '../../../../utilities/css';
@@ -116,7 +116,7 @@ export function FilterPill({
 
   const activator = (
     <div className={buttonClasses}>
-      <Inline gap="0" wrap={false}>
+      <HorizontalStack gap="0" wrap={false}>
         <UnstyledButton
           onFocus={setFocusedTrue}
           onBlur={setFocusedFalse}
@@ -125,7 +125,12 @@ export function FilterPill({
           type="button"
           disabled={disabled}
         >
-          <Inline wrap={false} align="center" blockAlign="center" gap="0">
+          <HorizontalStack
+            wrap={false}
+            align="center"
+            blockAlign="center"
+            gap="0"
+          >
             {selected ? (
               <>{wrappedLabel}</>
             ) : (
@@ -136,7 +141,7 @@ export function FilterPill({
                 </div>
               </>
             )}
-          </Inline>
+          </HorizontalStack>
         </UnstyledButton>
 
         {selected ? (
@@ -152,7 +157,7 @@ export function FilterPill({
             </div>
           </UnstyledButton>
         ) : null}
-      </Inline>
+      </HorizontalStack>
     </div>
   );
 

polaris-react/src/components/AlphaTabs/components/Tab/Tab.tsx

@@ -34,7 +34,7 @@ import {Popover} from '../../../Popover';
 import {ActionList} from '../../../ActionList';
 import {Modal} from '../../../Modal';
 import {Badge} from '../../../Badge';
-import {Inline} from '../../../Inline';
+import {HorizontalStack} from '../../../HorizontalStack';
 import {Text} from '../../../Text';
 import type {AlphaTabPropsWithAddedMethods, AlphaTabAction} from '../../types';
 import styles from '../../AlphaTabs.scss';
@@ -304,7 +304,12 @@ export const Tab = forwardRef(
         onClick={handleClick}
         onKeyDown={handleKeyDown}
       >
-        <Inline gap="2" align="center" blockAlign="center" wrap={false}>
+        <HorizontalStack
+          gap="2"
+          align="center"
+          blockAlign="center"
+          wrap={false}
+        >
           <Text
             as="span"
             variant={mdDown ? 'bodyMd' : 'bodySm'}
@@ -313,7 +318,7 @@ export const Tab = forwardRef(
             {icon ?? content}
           </Text>
           {badgeMarkup}
-        </Inline>
+        </HorizontalStack>
         {disclosureMarkup}
       </BaseComponent>
     );

polaris-react/src/components/Banner/Banner.stories.tsx

@@ -5,7 +5,7 @@ import {
   Banner,
   Button,
   LegacyCard,
-  Inline,
+  HorizontalStack,
   Link,
   List,
   Modal,
@@ -194,14 +194,14 @@ export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
       <VerticalStack gap="1">
-        <Inline gap="4" align="space-between">
+        <HorizontalStack gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
           </Text>
           <Link external url="https://example.com">
             Logs
           </Link>
-        </Inline>
+        </HorizontalStack>
         <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
       </VerticalStack>
     </Banner>

polaris-react/src/components/BulkActions/BulkActions.tsx

@@ -13,7 +13,7 @@ import type {
 } from '../../types';
 import {ActionList} from '../ActionList';
 import {Popover} from '../Popover';
-import {Inline} from '../Inline';
+import {HorizontalStack} from '../HorizontalStack';
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../EventListener';
 
@@ -300,10 +300,10 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
     const groupContent =
       promotedActionsMarkup || actionsPopover ? (
-        <Inline gap="3">
+        <HorizontalStack gap="3">
           {promotedActionsMarkup}
           {actionsPopover}
-        </Inline>
+        </HorizontalStack>
       ) : null;
 
     if (!groupContent) {

polaris-react/src/components/DropZone/DropZone.stories.tsx

@@ -9,7 +9,7 @@ import {
   Page,
   VerticalStack,
   Thumbnail,
-  Inline,
+  HorizontalStack,
 } from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 
@@ -33,7 +33,7 @@ export function Default() {
     <div style={{padding: '0'}}>
       <VerticalStack gap="4">
         {files.map((file, index) => (
-          <Inline gap="4" align="center" key={index}>
+          <HorizontalStack gap="4" align="center" key={index}>
             <Thumbnail
               size="small"
               alt={file.name}
@@ -50,7 +50,7 @@ export function Default() {
                 {file.size} bytes
               </Text>
             </div>
-          </Inline>
+          </HorizontalStack>
         ))}
       </VerticalStack>
     </div>
@@ -89,7 +89,7 @@ export function WithImageFileUpload() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -102,7 +102,7 @@ export function WithImageFileUpload() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );
@@ -146,7 +146,7 @@ export function WithSingleFileUpload() {
 
   const fileUpload = !file && <DropZone.FileUpload />;
   const uploadedFile = file && (
-    <Inline gap="4">
+    <HorizontalStack gap="4">
       <Thumbnail
         size="small"
         alt={file.name}
@@ -163,7 +163,7 @@ export function WithSingleFileUpload() {
           {file.size} bytes
         </Text>
       </div>
-    </Inline>
+    </HorizontalStack>
   );
 
   return (
@@ -188,7 +188,7 @@ export function WithDropOnPage() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -205,7 +205,7 @@ export function WithDropOnPage() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );
@@ -250,7 +250,7 @@ export function AcceptsOnlySVGFiles() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -263,7 +263,7 @@ export function AcceptsOnlySVGFiles() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );
@@ -313,7 +313,7 @@ export function Nested() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -330,7 +330,7 @@ export function Nested() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );
@@ -385,7 +385,7 @@ export function WithCustomFileUploadText() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -402,7 +402,7 @@ export function WithCustomFileUploadText() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );
@@ -434,7 +434,7 @@ export function WithCustomFileDialogTrigger() {
   const uploadedFiles = files.length > 0 && (
     <VerticalStack gap="4">
       {files.map((file, index) => (
-        <Inline gap="4" align="center" key={index}>
+        <HorizontalStack gap="4" align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -451,7 +451,7 @@ export function WithCustomFileDialogTrigger() {
               {file.size} bytes
             </Text>
           </div>
-        </Inline>
+        </HorizontalStack>
       ))}
     </VerticalStack>
   );