Skip to content

Fix imported modal button position off #2487

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
itsyme merged 13 commits into from
Apr 12, 2024
Merged

Fix imported modal button position off #2487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
75e8d28
Fix the x button position is off
yiwen101 Mar 30, 2024
eb12670
Rebuild asset and update test
yiwen101 Mar 30, 2024
59e5b80
Merge branch 'master' into modal_in_box
yiwen101 Mar 30, 2024
358a772
Revert "Rebuild asset and update test"
yiwen101 Mar 30, 2024
a20c22e
Update Box.spec.js.snap
yiwen101 Mar 30, 2024
a2478f3
Merge branch 'master' into modal_in_box
yiwen101 Mar 30, 2024
8d1a52f
Merge branch 'master' into modal_in_box
yiwen101 Apr 3, 2024
7ac9991
Merge branch 'master' into modal_in_box
yucheng11122017 Apr 5, 2024
c57b515
Merge branch 'master' into modal_in_box
yiwen101 Apr 8, 2024
f2fbfeb
Add test
yiwen101 Apr 12, 2024
0b79d0e
Merge branch 'master' into modal_in_box
yiwen101 Apr 12, 2024
8813cca
Update test expected
yiwen101 Apr 12, 2024
8940f7f
Merge branch 'master' into modal_in_box
yiwen101 Apr 12, 2024
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
11 changes: 11 additions & 0 deletions packages/cli/test/functional/test_site/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,6 +654,17 @@ <h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#pan
<p><strong>Panel content inside modal</strong></p>
</panel>
</modal>
<p><strong>The button of modal inside dismissible box should be properly positioned</strong></p>
<box dismissible>
<div>
<p>
<trigger for="modal-a">modal trigger</trigger>.
</p>
<modal id="modal-a"><template #header>modal header</template>
Lorem ipsum
</modal>
</div>
</box>
<p><strong>Unexpanded panel</strong></p>
<panel panelId="unexpanded-panel-header"><template #header>
<h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header" onclick="event.stopPropagation()"></a></h2>
Expand Down
5 changes: 4 additions & 1 deletion packages/cli/test/functional/test_site/expected/index.page-vue-render.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions packages/cli/test/functional/test_site/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,13 @@ and **this**.
</panel>
</modal>

**The button of modal inside dismissible box should be properly positioned**
<box dismissible>

<include src="testModal/DismissibleBox.md#example"/>

</box>

**Unexpanded panel**

<panel header="## Unexpanded panel header">
Expand Down
9 changes: 9 additions & 0 deletions packages/cli/test/functional/test_site/testModal/DismissibleBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div id="example">

<trigger for="modal-a">modal trigger</trigger>.

<modal header="modal header" id="modal-a" >
Lorem ipsum
</modal>

</div>
8 changes: 4 additions & 4 deletions packages/vue-components/src/Box.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<!-- Header wrapper, not rendered if there is no header attribute -->
<div
v-if="headerBool()"
:class="['box-header-wrapper', { 'alert-dismissible': dismissible }]"
:class="['box-header-wrapper', { 'alert-dismissible-box': dismissible }]"
>
<!-- icon on the left of the header -->
<div
Expand Down Expand Up @@ -64,7 +64,7 @@
:class="[
'box-body-wrapper',
{
'alert-dismissible': dismissible && !headerBool(),
'alert-dismissible-box': dismissible && !headerBool(),
'box-body-wrapper-with-heading': headerBool(),
},
]"
Expand Down Expand Up @@ -328,7 +328,7 @@ export default {
padding-top: 0.5rem;
}

.alert-dismissible {
.alert-dismissible-box {
padding-right: 4rem;
}

Expand All @@ -354,7 +354,7 @@ export default {
vertical-align: text-top;
}

.alert-dismissible .btn-close {
.alert-dismissible-box .btn-close {
padding: 1rem;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/vue-components/src/__tests__/__snapshots__/Box.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -778,7 +778,7 @@ exports[`Box with dismissible option renders correctly 1`] = `
<!---->

<div
class="box-body-wrapper alert-dismissible"
class="box-body-wrapper alert-dismissible-box"
>
<!---->

Expand Down