Skip to content
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.

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

fix(core/modal): figma - code mismatch #1499

Merged
merged 16 commits into from
Oct 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/clever-rings-sneeze.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@siemens/ix': patch
---

fix(core/modal): figma - code mismatch
4 changes: 2 additions & 2 deletions packages/core/component-doc.json
Original file line number Diff line number Diff line change
Expand Up @@ -11736,7 +11736,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand All @@ -11757,7 +11757,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
}
],
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1676,11 +1676,11 @@ export namespace Components {
/**
* Icon of the Header
*/
"icon": string;
"icon"?: string;
/**
* Icon color
*/
"iconColor": string;
"iconColor"?: string;
}
interface IxModalLoading {
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
display: block;
position: relative;
overflow: auto;
padding: 0.25rem 0.75rem;
padding: 0 0.5rem 0.5rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
@include ix-component;
display: flex;
padding: 0.5rem;
padding-bottom: 0rem;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/components/modal-header/modal-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

@import 'mixins/shadow-dom/component';

:host {
@include ix-component;
display: flex;
padding: 0.5rem;
padding: 0.5rem 0 0.5rem 0.5rem;
align-items: center;
align-self: stretch;
gap: 1rem;

.modal-close {
margin-left: auto;
margin-right: -1rem;
.modal-title {
flex-grow: 1;
}

.modal-icon {
margin-right: 1rem;
.modal-close {
align-self: flex-start;
}
}
26 changes: 12 additions & 14 deletions packages/core/src/components/modal-header/modal-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ export class ModalHeader {
/**
* Icon of the Header
*/
@Prop() icon: string;
@Prop() icon?: string;

@Watch('icon')
onIconChange(icon: string) {
onIconChange(icon?: string) {
if (this.parentDialog) {
if (icon) {
this.parentDialog.classList.add('with-icon');
Expand All @@ -54,15 +54,15 @@ export class ModalHeader {
/**
* Icon color
*/
@Prop() iconColor: string;
@Prop() iconColor?: string;

/**
* Emits when close icon is clicked and closes the modal
* Can be prevented, in which case only the event is triggered, and the modal remains open
*/
@Event() closeClick: EventEmitter<MouseEvent>;
@Event() closeClick!: EventEmitter<MouseEvent>;

private parentDialog: HTMLIxModalElement;
private parentDialog!: HTMLIxModalElement;

componentDidLoad() {
this.parentDialog = closestPassShadow(
Expand All @@ -85,21 +85,19 @@ export class ModalHeader {
return (
<Host>
{this.icon ? (
<ix-icon
class={'modal-icon'}
name={this.icon}
color={this.iconColor}
></ix-icon>
<ix-icon name={this.icon} color={this.iconColor} size="32"></ix-icon>
) : null}
<ix-typography format="h5">
<slot></slot>
</ix-typography>
<div class="modal-title">
<ix-typography format="h5">
<slot></slot>
</ix-typography>
</div>
{!this.hideClose ? (
<ix-icon-button
class="modal-close"
onClick={(event) => this.onCloseClick(event)}
ghost
icon="close"
class={'modal-close'}
></ix-icon-button>
) : null}
</Host>
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/modal/modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,6 @@
:host(.with-icon) {
::slotted(ix-modal-footer),
::slotted(ix-modal-content) {
margin-left: 2.5rem;
margin-left: 3rem;
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/core/src/tests/modal/icon/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<body>
<ix-modal>
<ix-modal-header icon="rocket"
>Dialog title Dialog titleDialog titleDialog titleDialog titleDialog
titleDialog title</ix-modal-header
>Dialog title Dialog title Dialog title Dialog title Dialog title
</ix-modal-header
>
<ix-modal-content>
My Content My Content My Content My Content My Content My Content My
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading