Skip to content

Commit

Permalink
Merge pull request #881 from oceanbase/dengfuping-dev
Browse files Browse the repository at this point in the history 
fix(ui): multiple Select should vertical align in PageContainer extra
  • Loading branch information
@dengfuping
dengfuping authored Dec 10, 2024
2 parents b187e59 + 1a1ee1a commit 501e330
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 17 deletions.
4 changes: 4 additions & 0 deletions packages/design/src/_util/genStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@ export const genLargeStyle = (token: FullToken<any>): CSSObject => {
fontSize,
},
},
[`${antCls}-select-multiple ${antCls}-select-selection-wrap`]: {
// ref: https://github.com/oceanbase/oceanbase-design/pull/881
height: '100%',
},
// Input
[`${antCls}-input-wrapper`]: {
fontSize,
Expand Down
53 changes: 40 additions & 13 deletions packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<div
class="ant-picker ant-picker-large ant-picker-outlined"
class="ant-picker ant-picker-middle ant-picker-outlined"
>
<div
class="ant-picker-input"
Expand Down Expand Up @@ -412,7 +412,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<div
class="ant-picker ant-picker-range ant-picker-large ant-picker-outlined"
class="ant-picker ant-picker-range ant-picker-middle ant-picker-outlined"
>
<div
class="ant-picker-input"
Expand Down Expand Up @@ -499,7 +499,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<div
class="ant-picker ant-picker-large ant-picker-outlined"
class="ant-picker ant-picker-middle ant-picker-outlined"
>
<div
class="ant-picker-input"
Expand Down Expand Up @@ -544,16 +544,16 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large"
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-middle"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined"
class="ant-input-affix-wrapper ant-input-outlined"
>
<input
class="ant-input ant-input-lg"
class="ant-input"
placeholder="placeholder"
type="text"
value=""
Expand Down Expand Up @@ -593,7 +593,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
Expand Down Expand Up @@ -628,7 +628,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<div
class="ant-select ant-select-lg ant-select-outlined ant-select-single ant-select-show-arrow"
class="ant-select ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width: 100px;"
>
<div
Expand Down Expand Up @@ -659,9 +659,9 @@ exports[`PageContainer > extra and footer 1`] = `
</span>
<span
class="ant-select-selection-item"
title="large"
title="middle"
>
large
middle
</span>
</span>
</div>
Expand Down Expand Up @@ -691,13 +691,40 @@ exports[`PageContainer > extra and footer 1`] = `
</svg>
</span>
</span>
<span
aria-hidden="true"
class="ant-select-clear"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</span>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
class="ant-radio-group ant-radio-group-outline ant-radio-group-middle"
>
<label
class="ant-radio-button-wrapper"
Expand Down Expand Up @@ -763,7 +790,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
type="button"
>
<span>
Expand All @@ -775,7 +802,7 @@ exports[`PageContainer > extra and footer 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
style="padding: 0px 8px;"
type="button"
>
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/PageContainer/demo/extra-footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { EllipsisOutlined, LikeOutlined, CommentOutlined, StarOutlined } from '@

export default () => {
const [loading, setLoading] = useState(false);
const [size, setSize] = useState<SizeType>('large');
const [size, setSize] = useState<SizeType>('middle');
const [inputType, setInputType] = useState('search');

const mockRequest = () => {
Expand Down Expand Up @@ -79,11 +79,11 @@ export default () => {
<Select
key="5"
size={size}
defaultValue="large"
value={size}
allowClear={true}
options={[
{ value: 'large', label: 'large' },
{ value: 'middle', label: 'middle' },
// { value: 'small', label: 'small' },
]}
onChange={value => {
setSize(value);
Expand Down Expand Up @@ -150,7 +150,7 @@ export default () => {
<Space.Compact>
<Button size={size} icon={<LikeOutlined />} />
<Button size={size} icon={<CommentOutlined />} />
<Button icon={<StarOutlined />} />
<Button size={size} icon={<StarOutlined />} />
</Space.Compact>,
<Button size={size}>重置</Button>,
<Button size={size} type="primary">
Expand Down

0 comments on commit 501e330

Please sign in to comment.