Skip to content

Commit

Permalink
design updates to the Modal component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifrim
ifrim committed Nov 2, 2024
1 parent cefa0ce commit bb214e2
Show file tree
Hide file tree
Showing 16 changed files with 212 additions and 195 deletions.
2 changes: 1 addition & 1 deletion lib/index.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/index.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/tyk-ui.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@tyk-technologies/tyk-ui",
"version": "4.4.3",
"version": "4.4.4",
"description": "Tyk UI - ui reusable components",
"main": "src/index.js",
"scripts": {
Expand Down
157 changes: 71 additions & 86 deletions src/components/Modal/Modal.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
:root {
--tyk-modal-body-padding: var(--spacing-lg);
--tyk-modal-footer-padding: var(--spacing-lg);

/* Deprecated Modal.Header and Modal.Title */
--tyk-modal-header-padding: var(--spacing-lg);
--tyk-modal-borders-color: var(--color-secondary-dark);

/* End of deprecated styles */
}

.tyk-modal {
Expand Down Expand Up @@ -49,57 +45,38 @@
}
}

.tyk-modal__theme-header {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
block-size: var(--theme-header-height);
border-start-start-radius: var(--general-border-radius);
border-start-end-radius: var(--general-border-radius);

.tyk-icon {
position: absolute;
inset-inline-start: calc(50% - var(--theme-header-icon-size) / 2);
inset-block-start: calc((var(--theme-header-icon-size) - var(--theme-header-height)) / -2);
inline-size: var(--theme-header-icon-size);
block-size: var(--theme-header-icon-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--xxl-font-size);
color: white;
}
.tyk-modal--theme-default {
--tyk-modal-background-color: white;
--tyk-modal-border-color: var(--color-secondary-dark);
--tyk-modal-title-color: var(--color-text-dark);
}

.tyk-modal--theme-success {
.tyk-modal__theme-header {
background-color: var(--color-success-base);
.tyk-modal--theme-info {
--tyk-modal-background-color: var(--color-info-extra-light);
--tyk-modal-border-color: var(--color-info-light);
--tyk-modal-icon-color: var(--color-info-base);
--tyk-modal-title-color: var(--color-text-informative-default);
}

.tyk-icon {
background-color: var(--color-success-base);
}
}
.tyk-modal--theme-success {
--tyk-modal-background-color: var(--color-success-extra-light);
--tyk-modal-border-color: var(--color-success-light);
--tyk-modal-icon-color: var(--color-success-base);
--tyk-modal-title-color: var(--color-text-success-default);
}

.tyk-modal--theme-warning {
.tyk-modal__theme-header {
background-color: var(--color-warning-base);

.tyk-icon {
background-color: var(--color-warning-base);
}
}
--tyk-modal-background-color: var(--color-warning-extra-light);
--tyk-modal-border-color: var(--color-warning-light);
--tyk-modal-icon-color: var(--color-warning-base);
--tyk-modal-title-color: var(--color-text-warning-default);
}

.tyk-modal--theme-danger {
.tyk-modal__theme-header {
background-color: var(--color-danger-base);

.tyk-icon {
background-color: var(--color-danger-base);
}
}
--tyk-modal-background-color: var(--color-danger-extra-light);
--tyk-modal-border-color: var(--color-danger-light);
--tyk-modal-icon-color: var(--color-danger-base);
--tyk-modal-title-color: var(--color-text-critical-default);
}

.tyk-modal__dialog {
Expand All @@ -123,20 +100,60 @@
}

.tyk-modal__content {
background: white;
border-radius: var(--general-border-radius);
background-color: var(--tyk-modal-background-color, pink);
border: 2px solid var(--tyk-modal-border-color);
border-radius: 8px;
padding-block: 16px;
padding-inline-start: 16px;
display: flex;
flex-direction: column;
position: relative;
inline-size: 100%;
box-shadow: 0 16px 32px 0 #09092314;
}

.tyk-modal__theme-icon {
position: absolute;
font-size: var(--md-font-size);
color: var(--tyk-modal-icon-color);

~ .tyk-modal__header,
~ .tyk-modal__body {
padding-inline-start: 36px;
}
}

.tyk-modal__close-icon {
position: absolute;
inset-inline-end: 18px;
cursor: pointer;
color: var(--color-icon-neutral-inactive);
}

.tyk-modal__header {
display: flex;
align-items: center;
inline-size: 100%;
padding-inline-end: 36px;

+ .tyk-modal__body {
padding-block-start: 8px;
}
}

.tyk-modal__title {
color: var(--tyk-modal-title-color);
font-family: var(--font-family-regular);
font-weight: 600;
margin: 0;
inline-size: 100%;
}

.tyk-modal__body {
flex: 1;
overflow: auto;
padding-block-start: calc(var(--tyk-modal-body-padding) + (var(--theme-header-icon-size) - var(--theme-header-height)) / 2);
padding-block-end: var(--tyk-modal-body-padding);
padding-inline: var(--tyk-modal-body-padding);
padding-block-end: 8px;
padding-inline-end: 36px;

&.no-padding {
padding: 0;
Expand All @@ -147,7 +164,9 @@
align-items: center;
display: flex;
justify-content: flex-end;
padding: var(--tyk-modal-footer-padding);
padding-block-start: 8px;
border-block-start: var(--general-border-width) solid var(--color-secondary-dark);
margin-inline-end: 16px;

>:not(:first-child) {
margin-inline-start: var(--spacing-xs);
Expand All @@ -174,37 +193,3 @@
z-index: 9;
}
}

/* Deprecated Modal.Header and Modal.Title */
.tyk-modal__header {
padding-block-start: calc(var(--tyk-modal-header-padding) + (var(--theme-header-icon-size) - var(--theme-header-height)) / 2);
padding-block-end: var(--tyk-modal-header-padding);
padding-inline: var(--tyk-modal-header-padding);
align-items: center;
border-block-end: 1px solid var(--tyk-modal-borders-color);
display: flex;
inline-size: 100%;

.tyk-modal--theme-none & {
padding-block-start: var(--tyk-modal-header-padding);
}

button {
margin-inline-start: auto;
padding-block: 0;
padding-inline: 5px;
}

+ .tyk-modal__body {
padding-block-start: var(--tyk-modal-body-padding);
}
}

.tyk-modal__title {
font-family: var(--font-family-medium);
font-weight: 500;
margin: 0;
inline-size: 100%;
}

/* End of deprecated styles */
23 changes: 2 additions & 21 deletions src/components/Modal/Modal.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('Modal', () => {
const cssClasses = {
tykModal: 'tyk-modal',
opened: 'opened',
themeNone: 'tyk-modal--theme-none',
themeDefault: 'tyk-modal--theme-default',
modalDialog: 'tyk-modal__dialog',
themeSuccess: 'tyk-modal--theme-success',
backDrop: 'tyk-modal__backdrop',
Expand All @@ -39,7 +39,7 @@ describe('Modal', () => {
.should('exist')
.and('have.class', cssClasses.tykModal)
.and('have.class', cssClasses.opened)
.and('have.class', cssClasses.themeNone);
.and('have.class', cssClasses.themeDefault);
});

it('the modal is not rendered when opened is set to false ', () => {
Expand Down Expand Up @@ -118,23 +118,4 @@ describe('Modal', () => {
.should('exist')
.and('have.class', cssClasses.widthLg);
});

it('console warns a message if Modal.Header or Modal.Title is used', () => {
cy.window()
.its('console')
.then((console) => cy.spy(console, 'warn').as('warn'));

cy.mount(
<Component opened theme="success">
<Modal.Header>
<Modal.Title>modal title</Modal.Title>
</Modal.Header>
<Modal.Body>modal body</Modal.Body>
</Component>,
)
.get('@warn')
.then((warn) => {
expect(warn).to.be.calledTwice;
});
});
});
Loading

0 comments on commit bb214e2

Please sign in to comment.