diff --git a/.changeset/beige-peaches-explain.md b/.changeset/beige-peaches-explain.md new file mode 100644 index 000000000..81af374af --- /dev/null +++ b/.changeset/beige-peaches-explain.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +fixed button groups hover glitch; updated footer story shield margin; updated space below alert title; updated search icon size in automcomplete diff --git a/apps/protoform/src/app/credit-cards/address/page.tsx b/apps/protoform/src/app/credit-cards/address/page.tsx index 9671115c1..22d156f66 100644 --- a/apps/protoform/src/app/credit-cards/address/page.tsx +++ b/apps/protoform/src/app/credit-cards/address/page.tsx @@ -60,7 +60,7 @@ export default function Address() { -
+
diff --git a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx index b5601fe2e..1180f7003 100644 --- a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx +++ b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx @@ -42,6 +42,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) { +
{children} diff --git a/apps/protoform/src/components/cta/cta.tsx b/apps/protoform/src/components/cta/cta.tsx index dc05d6d2a..6f9b7b8c2 100644 --- a/apps/protoform/src/components/cta/cta.tsx +++ b/apps/protoform/src/components/cta/cta.tsx @@ -19,7 +19,7 @@ export function Cta({ tertiaryOnClick?: () => void; }) { return ( -
+
diff --git a/apps/protoform/src/components/custom-footer/custom-footer.tsx b/apps/protoform/src/components/custom-footer/custom-footer.tsx index 1479a8ef4..8c8e09bae 100644 --- a/apps/protoform/src/components/custom-footer/custom-footer.tsx +++ b/apps/protoform/src/components/custom-footer/custom-footer.tsx @@ -12,7 +12,7 @@ export function CustomFooter() {
diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx index 724e8ec10..53a331e5d 100644 --- a/apps/protoform/src/components/custom-header/custom-header.tsx +++ b/apps/protoform/src/components/custom-header/custom-header.tsx @@ -25,7 +25,7 @@ export function CustomHeader() { leftIcon={isMobile ? 'arrow' : undefined} leftOnClick={() => router.back()} logoLink="/" - className="z-[100] m-auto max-w-[1922px] md:sticky md:top-0" + className="z-[100] m-auto max-w-[1922px] md:fixed md:top-0 w-full" > )}
+ <> <>
( <>

Default

-

Info

+

Info

Heads up! This alert needs your attention, but it’s not super important. Link -

Success

+

Success

Well done! You successfully read this important alert message. Link -

Warning

+

Warning

Warning! Better check yourself, you’re not looking too good. Link -

Danger

+

Danger

Oh snap! Change a few things up and try submitting again. Link -

System

+

System

System Error 8942: The server is no responding. Please try again later. Sorry for the inconvenience. Link -

Custom Icon Sizes

-

Medium

+

Custom Icon Sizes

+

Medium

Medium This alert has a medium icon. Link -

Small

+

Small

Small This alert has a small icon. Link -

Extra Small

+

Extra Small

Extra Small This alert has an extra small icon. Link diff --git a/packages/ui/src/components/alert/alert.styles.ts b/packages/ui/src/components/alert/alert.styles.ts index 335473e35..541296dae 100644 --- a/packages/ui/src/components/alert/alert.styles.ts +++ b/packages/ui/src/components/alert/alert.styles.ts @@ -6,7 +6,7 @@ export const styles = tv( base: 'typography-body-10 relative mb-4 xsl:flex', icon: 'float-left flex-none', body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline', - heading: 'typography-body-9 mb-2 font-bold', + heading: 'typography-body-9 mb-1 font-bold', close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80', }, variants: { diff --git a/packages/ui/src/components/autocomplete/autocomplete.component.tsx b/packages/ui/src/components/autocomplete/autocomplete.component.tsx index 02b7d906c..e6dae3730 100644 --- a/packages/ui/src/components/autocomplete/autocomplete.component.tsx +++ b/packages/ui/src/components/autocomplete/autocomplete.component.tsx @@ -101,16 +101,6 @@ export function Autocomplete({ searchProps.value.length, ]); - const iconSize = useMemo(() => { - switch (size) { - case 'small': - case 'medium': - return 'small'; - default: - return 'medium'; - } - }, [size]); - return (
{props.label && } @@ -120,9 +110,9 @@ export function Autocomplete({
{loadingState ? ( - + ) : ( - + )}
{ const style = styles({ color: 'primary', type: 'pill' }); // TODO: use some variants for test expect(style).toBe( - 'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center', + 'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 flex h-4 items-center rounded-xl px-[0.4375rem] font-medium leading-none', ); }); }); diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx index 3eb25660c..3373ccb0c 100644 --- a/packages/ui/src/components/badge/badge.stories.tsx +++ b/packages/ui/src/components/badge/badge.stories.tsx @@ -149,7 +149,7 @@ export const Buttons = () => (
{SIZES.map(size => (