Skip to content

feat(Modal): use css vars to set width, add maxWidth #9300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 1, 2023
Merged

feat(Modal): use css vars to set width, add maxWidth #9300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71ef3ae
feat(Modal): use css vars to set width, add maxWidth
kmcfaul Jun 22, 2023
05ac205
account for number input
kmcfaul Jun 22, 2023
74612b8
updated for css width
kmcfaul Jun 22, 2023
f16d2cc
fix space in expected value
kmcfaul Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
variant?: 'small' | 'medium' | 'large' | 'default';
/** Default width of the modal. */
width?: number | string;
/** Maximum width of the modal. */
maxWidth?: number | string;
/** Value to overwrite the randomly generated data-ouia-component-id.*/
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
Expand Down
15 changes: 12 additions & 3 deletions packages/react-core/src/components/Modal/ModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ export interface ModalContentProps extends OUIAProps {
variant?: 'small' | 'medium' | 'large' | 'default';
/** Default width of the modal. */
width?: number | string;
/** Maximum width of the modal. */
maxWidth?: number | string;
/** Value to overwrite the randomly generated data-ouia-component-id.*/
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
Expand Down Expand Up @@ -107,7 +109,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
variant = 'default',
position,
positionOffset,
width = -1,
width,
maxWidth,
boxId,
labelId,
descriptorId,
Expand Down Expand Up @@ -152,7 +155,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
{children}
</ModalBoxBody>
);
const boxStyle = width === -1 ? {} : { width };
const ariaLabelledbyFormatted = (): null | string => {
if (ariaLabelledby === null) {
return null;
Expand All @@ -173,7 +175,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
const modalBox = (
<ModalBox
id={boxId}
style={boxStyle}
className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
variant={variant}
position={position}
Expand All @@ -182,6 +183,14 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
aria-labelledby={ariaLabelledbyFormatted()}
aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
{...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
style={
{
...(width && { '--pf-v5-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
...(maxWidth && {
'--pf-v5-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
})
} as React.CSSProperties
}
>
{showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
{modalBoxHeader}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-integration/cypress/integration/wizarddeprecated.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('Wizard Deprecated Demo Test', () => {
it('Verify wizard in modal launches in a dialog and has a custom width', () => {
cy.get('#launchWiz').click();
cy.get('#modalWizId.pf-v5-c-wizard').should('exist');
cy.get('.pf-v5-c-modal-box').should('have.attr', 'style', 'width: 710px;');
cy.get('.pf-v5-c-modal-box').should('have.attr', 'style', '--pf-v5-c-modal-box--Width:710px;');
cy.focused().click();
});

Expand Down