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.

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

Jump to bottom

fix(fab): using new dom #618

Merged
merged 5 commits into from
Apr 24, 2023
Merged

fix(fab): using new dom #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5b759aa
fix(fab): using new dom
LeeJim Apr 23, 2023
cd35639
fix(fab): resolve test and ts errors
LeeJim Apr 23, 2023
28debe8
test(fab): update
LeeJim Apr 23, 2023
86bd29e
test(fab): update
LeeJim Apr 23, 2023
c449192
fix: resolve lint errors
LeeJim Apr 23, 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
258 changes: 136 additions & 122 deletions src/fab/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,99 @@
// Vitest Snapshot v1

exports[`Fab > Fab displayVue demo works fine 1`] = `
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
exports[`Fab > Fab advanceVue demo works fine 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<!---->
<span
class="t-button__content"
>

<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!--v-if-->

</span>
<!---->
</button>
</div>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>

按钮文字

</span>
<!---->
</button>
`;

exports[`Fab > Fab baseVue demo works fine 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>



</span>
<!---->
</button>
`;

exports[`Fab > Fab mobileVue demo works fine 1`] = `
<div
class="tdesign-mobile-demo"
data-v-38a07a02=""
>
<h1
class="title"
data-v-38a07a02=""
>
Fab 悬浮按钮
</h1>
<p
class="summary"
data-v-38a07a02=""
>
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
</p>
<div
class="tdesign-mobile-demo-block"
data-v-38a07a02=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<h2
class="tdesign-mobile-demo-block__title"
>
01 类型
01 组件类型
</h2>
<p
class="tdesign-mobile-demo-block__summary"
Expand All @@ -67,119 +102,98 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot"
class="tdesign-mobile-demo-block__slot with-padding"
>

<div
class="toast-demo"
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-38a07a02=""
role="button"
type="button"
>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
role="button"
type="button"
>
<!---->
<span
class="t-button__content"
>

基础使用

</span>
<!---->
</button>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
role="button"
type="button"
<!---->
<span
class="t-button__content"
>
<!---->
<span
class="t-button__content"
>

进阶使用

</span>
<!---->
</button>
</div>

纯图标悬浮按钮

</span>
<!---->
</button>

</div>
</div>
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
<div
class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
data-v-38a07a02=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<!--v-if-->
<p
class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
>
图标加文字悬浮按钮
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot with-padding"
>
<!---->
<span
class="t-button__content"

<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-38a07a02=""
role="button"
type="button"
>

<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
<!---->
<span
class="t-button__content"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!--v-if-->

</span>
<!---->
</button>

图标加文字悬浮按钮

</span>
<!---->
</button>

</div>
</div>
<!--v-if-->
</div>
`;

exports[`Fab > Fab textVue demo works fine 1`] = `
<div>
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--outline t-button--primary t-button--round t-fab"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
data-v-38a07a02=""
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<!---->
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
style="font-size: 24px;"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__content"
>

<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-fab__text"
>
按钮文字
</span>


</span>
<!---->
</button>
<!--v-if-->
</div>
`;
33 changes: 16 additions & 17 deletions src/fab/__test__/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,31 @@
exports[`fab > slots > : icon 1`] = `
<button
aria-disabled="false"
class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab"
class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
role="button"
style="right: 16px; bottom: 32px;"
type="button"
>
<!---->

<svg
class="t-icon t-icon-app"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>

<span
class="t-button__content"
>


<svg
class="t-icon t-icon-app"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>

<!--v-if-->

</span>
<!---->
Expand Down
8 changes: 4 additions & 4 deletions src/fab/__test__/demo.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
*/

import { mount } from '@vue/test-utils';
import displayVue from '@/fab/demos/display.vue';
import advanceVue from '@/fab/demos/advance.vue';
import baseVue from '@/fab/demos/base.vue';
import mobileVue from '@/fab/demos/mobile.vue';
import textVue from '@/fab/demos/text.vue';

const mapper = {
displayVue,
advanceVue,
baseVue,
mobileVue,
textVue,
};

describe('Fab', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/fab/__test__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('fab', () => {
const wrapper = mount(Fab, {
props: { text },
});
const textContainer = wrapper.find('.t-fab__text');
const textContainer = wrapper.find('.t-button__content');
expect(textContainer.text()).toBe(text);
});

Expand Down
Loading