axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
125 stars 18 forks source link

axa-modal: allow height configurable #2421

Open MarekLacoAXA opened 1 year ago

MarekLacoAXA commented 1 year ago

Hi! pls. allow the height of axa-modal content to be user-configurable.

(OR maybe better: expand the contents automatically to its full height)

Currently it is hardcoded to 70% which isn't enough sometimes: https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/src/components/30-organisms/modal/index.scss#L119

Thanks.


Here's a workaround I am using now in React to expand Modal's height:

import * as React from 'react';

/**
 * Within <axa-modal> adjusts its height
 */
export const ModalHeight: React.FC<{ height?: string }> = ({ height = '90vh' }) => {
  const nodeRef = React.useRef<HTMLElement | null>(null);
  React.useEffect(
    () => {
      const update = () => {
        const modalContent = nodeRef.current?.closest('axa-modal')?.shadowRoot?.querySelector('.o-modal__content');
        if (modalContent) {
          (modalContent as HTMLElement).style.maxHeight = height;
        }
      };
      window.setTimeout(update, 0); // defer to next tick to allow modal content creation
    },
    [],
  );
  return (
    <span ref={nodeRef}/>
  );
};