ant-design/components/flex/__tests__/__snapshots__/demo.test.ts.snap
ice badfbe3cfe
feat(Button): support variant and color (#50051)
* feat(button): variant & color types

* feat: type -> color/variant

* feat: type -> color/variant

* feat: add variant filled

* test: snap

* refactor(button): rename type -> variant

* docs: add demo

* feat: add danger ghost style

* refactor: remove deprecated

* refactor: eslint

* docs: change color&variant

* test: updated snap

* docs: color-variant

* docs: add debug color&variant

* feat: global token

* refactor: remove comment

* docs: add color&variant docs

* docs: remove default

* docs: add space

* docs: code

* test: update snap

* test: fix snap

* test: btn querySelect

* feat: change filled hoverStyle

* test: fix

* feat: support grey wave

* refactor: enhance

* docs: color/variant -> v 5.21

* test: snap

* feat: add token

* test: to do

* test: fix test

* ci: rebuild

* style: remove

* style: space

* docs: add note & FQA

* feat: add componentsToken

* refactor: remove isNotGrey

* test: add case

* docs: tile button

* test: snap

* docs: site & snap

* Update components/button/index.en-US.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* fix: token color & undef

* docs: site

* docs: responsive

* docs: enhance FAQ

* docs: gap middle

* test: snap

* Update components/theme/interface/maps/colors.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/theme/interface/maps/colors.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/theme/interface/maps/colors.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/button/style/token.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/button/style/token.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* refactor: rename

* docs: prettier

* chore: eslint

* refactor: cls

* test: add solidTextColor case

* refactor: genVariantButtonStyle

* refactor: genVariantButtonStyle

* refactor: genVariantButtonStyle

* fix: rename

* docs: text

* fix: remove border

* feat: add token colorErrorBgFilledHover

* chore: add size-limit

* refactor: rename

---------

Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>
2024-09-03 17:39:02 +08:00

665 lines
12 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/flex/demo/align.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-start ant-flex-gap-middle ant-flex-vertical"
>
<p>
Select justify :
</p>
<div
class="ant-segmented"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="flex-start"
>
flex-start
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="center"
>
center
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="flex-end"
>
flex-end
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="space-between"
>
space-between
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="space-around"
>
space-around
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="space-evenly"
>
space-evenly
</div>
</label>
</div>
</div>
<p>
Select align :
</p>
<div
class="ant-segmented"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="flex-start"
>
flex-start
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="center"
>
center
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="flex-end"
>
flex-end
</div>
</label>
</div>
</div>
<div
class="ant-flex ant-flex-align-flex-start ant-flex-justify-flex-start"
style="width:100%;height:120px;border-radius:6px;border:1px solid #40a9ff"
>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Primary
</span>
</button>
</div>
</div>
`;
exports[`renders components/flex/demo/basic.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="horizontal"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
horizontal
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio ant-wave-target"
>
<input
class="ant-radio-input"
type="radio"
value="vertical"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
vertical
</span>
</label>
</div>
<div
class="ant-flex"
>
<div
style="width:25%;height:54px;background-color:#1677ffbf"
/>
<div
style="width:25%;height:54px;background-color:#1677ff"
/>
<div
style="width:25%;height:54px;background-color:#1677ffbf"
/>
<div
style="width:25%;height:54px;background-color:#1677ff"
/>
</div>
</div>
`;
exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
<div
class="ant-card ant-card-bordered ant-card-hoverable"
style="width:620px"
>
<div
class="ant-card-body"
style="padding:0;overflow:hidden"
>
<div
class="ant-flex ant-flex-justify-space-between"
>
<img
alt="avatar"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
style="display:block;width:273px"
/>
<div
class="ant-flex ant-flex-align-flex-end ant-flex-justify-space-between ant-flex-vertical"
style="padding:32px"
>
<h3
class="ant-typography"
>
“antd is an enterprise-class UI design language and React UI library.”
</h3>
<a
class="ant-btn ant-btn-primary ant-btn-solid"
href="https://ant.design"
tabindex="0"
target="_blank"
>
<span>
Get Started
</span>
</a>
</div>
</div>
</div>
</div>
`;
exports[`renders components/flex/demo/debug.tsx correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
>
<div
style="height:60px;background-color:#1677ffbf"
/>
<div
style="height:60px;background-color:#1677ff"
/>
<div
style="height:60px;background-color:#1677ffbf"
/>
<div
style="height:60px;background-color:#1677ff"
/>
</div>,
<div
class="ant-flex"
style="margin-top:20px"
>
<div
style="width:25%;height:40px;background-color:#1677ffbf"
/>
<div
style="width:25%;height:60px;background-color:#1677ff"
/>
<div
style="width:25%;height:40px;background-color:#1677ffbf"
/>
<div
style="width:25%;height:60px;background-color:#1677ff"
/>
</div>,
]
`;
exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-wave-target ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="small"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
small
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio ant-wave-target"
>
<input
class="ant-radio-input"
type="radio"
value="middle"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
middle
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio ant-wave-target"
>
<input
class="ant-radio-input"
type="radio"
value="large"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
large
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio ant-wave-target"
>
<input
class="ant-radio-input"
type="radio"
value="customize"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
customize
</span>
</label>
</div>
<div
class="ant-flex ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Primary
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
Default
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-dashed"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-link"
type="button"
>
<span>
Link
</span>
</button>
</div>
</div>
`;
exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
Button
</span>
</button>
</div>
`;