diff --git a/.changeset/forty-geese-float.md b/.changeset/forty-geese-float.md new file mode 100644 index 00000000000..1a2a7a155c0 --- /dev/null +++ b/.changeset/forty-geese-float.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added align property for FooterHelp diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.module.css b/polaris-react/src/components/FooterHelp/FooterHelp.module.css index 49dca9b8721..d4a450dd4b8 100644 --- a/polaris-react/src/components/FooterHelp/FooterHelp.module.css +++ b/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; } diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx index 4e3b89148b1..134fc6a7849 100644 --- a/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx +++ b/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; +} as Meta; export function Default() { return ( @@ -16,3 +16,25 @@ export function Default() { ); } + +export function LeftAligned() { + return ( + + Learn more about{' '} + + fulfilling orders + + + ); +} + +export function RightAligned() { + return ( + + Learn more about{' '} + + fulfilling orders + + + ); +} diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.tsx index 01fe6024082..333971bb854 100644 --- a/polaris-react/src/components/FooterHelp/FooterHelp.tsx +++ b/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 ( -
+
{children}
); diff --git a/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx b/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx index 1a0c27f18ca..4a48931e609 100644 --- a/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx +++ b/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx @@ -12,4 +12,16 @@ describe('', () => { children, }); }); + + it('overrides custom properties if they are passed in', () => { + const footerHelp = mountWithApp( + {children}, + ); + + expect(footerHelp).toContainReactComponent('div', { + style: expect.objectContaining({ + '--pc-footer-help-align': 'start', + }) as React.CSSProperties, + }); + }); }); diff --git a/polaris.shopify.com/content/components/navigation/footer-help.mdx b/polaris.shopify.com/content/components/navigation/footer-help.mdx index 9a7e99ebe03..7afb270f83d 100644 --- a/polaris.shopify.com/content/components/navigation/footer-help.mdx +++ b/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 --- diff --git a/polaris.shopify.com/pages/examples/footer-help-align.tsx b/polaris.shopify.com/pages/examples/footer-help-align.tsx new file mode 100644 index 00000000000..75dfdd2caf7 --- /dev/null +++ b/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 ( + + + Start{' '} + + fulfilling orders + + + + Center{' '} + + fulfilling orders + + + + End{' '} + + fulfilling orders + + + + ); +} + +export default withPolarisExample(FooterHelpAlignExample);