Merge pull request #743 from WestpacGEL/develop

Develop

README.md

@@ -73,6 +73,8 @@ Following example shows adding `wbc` theme. You can add other valid brand names
 </html>
 ```
 
+**NOTE:** There are some components that use portals `Modal`, `BottomSheet`, `AutoComplete`. These components will default their portal to where you add your `data-theme` attribute tag so these components can make use of branding. This can be overridden using their `portalContainer` props if you require the portal to be located elsewhere.
+
 Now you can start using the GEL components in your `React.js` application. The following examples show how to use the `Button` component.
 
 For detailed documentation refer to [https://gel.westpacgroup.com.au/design-system](https://gel.westpacgroup.com.au/design-system).

apps/protoform/CHANGELOG.md

@@ -1,5 +1,12 @@
 # protoform
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [243b111]
+  - @westpac/ui@0.18.0
+
 ## 0.1.2
 
 ### Patch Changes

apps/protoform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/site/CHANGELOG.md

@@ -1,5 +1,12 @@
 # site
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [243b111]
+  - @westpac/ui@0.18.0
+
 ## 0.1.4
 
 ### Patch Changes

apps/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "scripts": {
     "build": "next build",

apps/site/src/content/design-system/development/guides/brand/design/using-brands/content.mdoc

@@ -11,6 +11,8 @@ The following example shows adding the `wbc` theme. You can add other valid bran
 `} />
 ```
 
+**NOTE:** There are some components that use portals `Modal`, `BottomSheet`, `AutoComplete`. These components will default their portal to where you add your `data-theme` attribute tag so these components can make use of branding. This can be overridden using their `portalContainer` props if you require the portal to be located elsewhere.
+
 ### Targeting a specific brand with Tailwind CSS
 
 You can target a specific brand by using the `active-theme-[brand_name]` prefix. For example, to target the `wbc` brand, you can use the following prefix.

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.18.0
+
+### Minor Changes
+
+- 243b111: updated components that use Overlay from react-aria to have a default portal that selects where the data-theme attribute is
+
 ## 0.17.0
 
 ### Minor Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

packages/ui/src/components/autocomplete/autocomplete.component.tsx

@@ -112,7 +112,11 @@ export function Autocomplete<T extends object>({
 
       <div ref={outerRef} className={styles.outerWrapper()}>
         <div className={styles.iconWrapper()}>
-          {loadingState ? <ProgressIndicator size={iconSize} /> : <SearchIcon aria-hidden size={iconSize} />}
+          {loadingState ? (
+            <ProgressIndicator size={iconSize} color="muted" />
+          ) : (
+            <SearchIcon aria-hidden size={iconSize} color="muted" />
+          )}
         </div>
         <input
           {...mergeProps(inputProps, inputFocusProps)}

packages/ui/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
     variants: {
       isFocused: {
         true: 'bg-hero !text-white',

packages/ui/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -17,9 +17,12 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
     state,
   );
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   const width = props.triggerRef.current?.getBoundingClientRect().width;
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
 
       <div

packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -4,8 +4,8 @@ export const styles = tv(
   {
     slots: {
       base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
-      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold max-md:px-5',
-      body: 'flex-1 overflow-auto px-7 pb-7 max-md:px-5',
+      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
+      body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
       closeBtn: 'absolute right-3 top-3 p-0',
       buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
       primaryBtn: '',

packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -29,6 +29,9 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   const controls = useAnimation();
   const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   useEffect(() => {
     function handleResize() {
       setIsMobile(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
@@ -65,7 +68,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   }
 
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}

packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -20,8 +20,11 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
     return null;
   }
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
         <div {...modalProps} ref={ref} className={styles.modal()}>
           {children}

packages/ui/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white outline-none',
-      title: 'typography-body-7 pb-4 pt-9 font-bold',
+      base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white text-text outline-none',
+      title: 'typography-body-7 pb-4 pt-9 font-bold text-text',
       close: 'absolute right-0 top-0 block p-3',
     },
     variants: {

packages/ui/src/components/popover/components/panel/panel.styles.ts

@@ -9,8 +9,8 @@ export const styles = tv(
         'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
       closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
-      heading: 'typography-body-9 mb-2 font-bold',
-      body: 'typography-body-10',
+      heading: 'typography-body-9 mb-2 font-bold text-text',
+      body: 'typography-body-10 text-text',
     },
     variants: {
       placement: {