Skip to content

Commit

Permalink
Merge pull request #294 from Automattic/fix/notice-icon-alignment
Browse files Browse the repository at this point in the history
PIE-3778 Make the Notice icon alignment adjust with the Notice content
  • Loading branch information
djalmaaraujo authored Nov 6, 2023
2 parents 060932f + 7cf6358 commit 7fdf656
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 15 deletions.
24 changes: 21 additions & 3 deletions src/system/Notice/Notice.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/** @jsxImportSource theme-ui */
/**
* External dependencies
*/
Expand All @@ -6,7 +7,7 @@
* Internal dependencies
*/
import React from 'react';
import { Notice, Link } from '..';
import { Notice, Link, Heading } from '..';

export default {
title: 'Notice',
Expand Down Expand Up @@ -52,11 +53,11 @@ export const Default = () => (

<Notice
variant="alert"
sx={ { mb: 4 } }
sx={ { mb: 2 } }
title="There are errors in your form"
headingVariant="h2"
>
<ul sx={ { mb: 0 } }>
<ul sx={ { m: 0, pl: 3 } }>
<li>
<Link href="#name">Please enter your name.</Link>
</li>
Expand All @@ -69,6 +70,23 @@ export const Default = () => (
</ul>
</Notice>

<Notice variant="alert" sx={ { mb: 2 } }>
<>
<Heading variant={ 'h4' } sx={ { fontSize: 2 } }>
Alternative way of printing errors
</Heading>

<ul sx={ { m: 0, pl: 3 } }>
<li>
<Link href="#name">Please enter your name.</Link>
</li>
<li>
<Link href="#email">Please enter your email address.</Link>
</li>
</ul>
</>
</Notice>

<Notice variant="alert" sx={ { mb: 4 } }>
Bucket names in Amazon S3 are globally unique, external link ↗. To ensure that shipped data is
delivered to the correct location, the Bucket Name and Bucket Region entered below must match
Expand Down
31 changes: 19 additions & 12 deletions src/system/Notice/Notice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,20 +91,27 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
>
<Flex
sx={ {
alignItems: 'start',
height: '100%', // required for the dynamic height of the icon box to work
} }
>
<Flex
sx={ {
mr: 3,
mt: title ? 2 : 0,
flexShrink: 0,
alignSelf: title ? undefined : 'center',
} }
>
<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
</Flex>

<Box sx={ { minWidth: '32px', mr: 3, mt: 0 } }>
<Flex
sx={ {
flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
minHeight: '20px',
maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
alignItems: 'flex-end', // we want the icon to be aligned to the bottom
height: '100%', // specifying the height will allow the box to match the height of the content.
} }
>
<Box
sx={ {
flex: '1 100%', // we need this empty div to make the icon align to the bottom
} }
></Box>
<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
</Flex>
</Box>
<Box>
{ title && (
<Heading
Expand Down

0 comments on commit 7fdf656

Please sign in to comment.