[FooterHelp] Add align property

.changeset/forty-geese-float.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added align property for FooterHelp

polaris-react/src/components/FooterHelp/FooterHelp.module.css

@@ -1,6 +1,7 @@
 .FooterHelp {
   display: flex;
-  justify-content: center;
+  /* stylelint-disable-next-line -- Necessary for layout components */
+  justify-content: var(--pc-footer-help-align);
   margin: var(--p-space-500);
   width: auto;
 }

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
 import {FooterHelp, Link} from '@shopify/polaris';
 
 export default {
   component: FooterHelp,
-} as ComponentMeta<typeof FooterHelp>;
+} as Meta<typeof FooterHelp>;
 
 export function Default() {
   return (
@@ -16,3 +16,25 @@ export function Default() {
     </FooterHelp>
   );
 }
+
+export function LeftAligned() {
+  return (
+    <FooterHelp align="start">
+      Learn more about{' '}
+      <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+        fulfilling orders
+      </Link>
+    </FooterHelp>
+  );
+}
+
+export function RightAligned() {
+  return (
+    <FooterHelp align="end">
+      Learn more about{' '}
+      <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+        fulfilling orders
+      </Link>
+    </FooterHelp>
+  );
+}

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

@@ -5,11 +5,17 @@ import styles from './FooterHelp.module.css';
 export interface FooterHelpProps {
   /** The content to display inside the layout. */
   children?: React.ReactNode;
+  /** Horizontal alignment of the component */
+  align?: 'start' | 'center' | 'end';
 }
 
-export function FooterHelp({children}: FooterHelpProps) {
+export function FooterHelp({children, align = 'center'}: FooterHelpProps) {
+  const style = {
+    '--pc-footer-help-align': align,
+  } as React.CSSProperties;
+
   return (
-    <div className={styles.FooterHelp}>
+    <div className={styles.FooterHelp} style={style}>
       <div className={styles.Text}>{children}</div>
     </div>
   );

polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx

@@ -12,4 +12,16 @@ describe('<FooterHelp />', () => {
       children,
     });
   });
+
+  it('overrides custom properties if they are passed in', () => {
+    const footerHelp = mountWithApp(
+      <FooterHelp align="start">{children}</FooterHelp>,
+    );
+
+    expect(footerHelp).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-footer-help-align': 'start',
+      }) as React.CSSProperties,
+    });
+  });
 });

polaris.shopify.com/content/components/navigation/footer-help.mdx

@@ -17,6 +17,9 @@ examples:
   - fileName: footer-help-default.tsx
     title: Default
     description: Use to direct merchants to more information related to the product or feature they’re working on.
+  - fileName: footer-help-align.tsx
+    title: Align
+    description: Control the horizontal alignment of component using the align prop.
 previewImg: /images/components/navigation/footer-help.png
 ---
 

polaris.shopify.com/pages/examples/footer-help-align.tsx

@@ -0,0 +1,30 @@
+import {BlockStack, FooterHelp, Link} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function FooterHelpAlignExample() {
+  return (
+    <BlockStack gap="1600">
+      <FooterHelp align="start">
+        Start{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+      <FooterHelp align="center">
+        Center{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+      <FooterHelp align="end">
+        End{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+    </BlockStack>
+  );
+}
+
+export default withPolarisExample(FooterHelpAlignExample);