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

fix(select&cascader&dropdown&upload): 修改列表菜单项高度 #2612

Merged
merged 2 commits into from
Oct 8, 2023
Merged

fix(select&cascader&dropdown&upload): 修改列表菜单项高度 #2612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
832360b
fix(select&cascader&dropdown): 修改下拉菜单高度
zyprepare Sep 27, 2023
b75d677
chore(upload): item上边距改为6px
zyprepare Oct 8, 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
10 changes: 10 additions & 0 deletions .changeset/clever-rabbits-smoke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@hi-ui/cascader": patch
"@hi-ui/check-cascader": patch
"@hi-ui/check-select": patch
"@hi-ui/dropdown": patch
"@hi-ui/select": patch
"@hi-ui/upload": patch
---

fix: 修改下拉菜单高度为32px
5 changes: 5 additions & 0 deletions .changeset/fresh-garlics-attack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hi-ui/hiui": patch
---

Select CheckSelect Cascader CheckCascader Upload Dropdown fix: 修改下拉菜单高度为32px
8 changes: 4 additions & 4 deletions packages/ui/cascader/src/styles/cascader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ $prefix: '#{$component-prefix}-cascader' !default;
min-width: 140px;
max-height: 260px;
overflow: auto;
padding: 4px 8px;
padding: 0 use-spacing(4);
border-right: use-border-size('normal') use-color('gray', 200);

&:last-of-type {
Expand All @@ -81,16 +81,16 @@ $prefix: '#{$component-prefix}-cascader' !default;

&-item {
width: 100%;
padding: use-spacing(1) 0;
// padding: use-spacing(1) 0;
position: relative;
cursor: pointer;
display: flex;
}

&-option {
padding: 0 use-spacing(4);
padding: use-spacing(1) use-spacing(3);
box-sizing: border-box;
height: use-height-size(7);
height: use-height-size(8);
width: 100%;
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/cascader/stories/select-change.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const SelectChange = () => {
{
id: '0-2',
title: '0-2',
disabled: true,
disabled: false,
children: [
{
id: '0-2-0',
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/check-cascader/src/styles/check-cascader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ $prefix: '#{$component-prefix}-check-cascader' !default;

&-item {
width: 100%;
padding: use-spacing(1) 0;
// padding: use-spacing(1) 0;
position: relative;
cursor: pointer;
display: flex;
Expand All @@ -107,9 +107,9 @@ $prefix: '#{$component-prefix}-check-cascader' !default;
}

&-option {
padding: 0 use-spacing(4);
padding: use-spacing(1) use-spacing(3);
box-sizing: border-box;
height: use-height-size(7);
height: use-height-size(8);
width: 100%;
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/check-cascader/stories/select-change.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const SelectChange = () => {
id: '0-2',
title: '0-2',
checkable: true,
disabled: true,
disabled: false,
children: [
{
id: '0-2-0',
Expand Down
7 changes: 3 additions & 4 deletions packages/ui/check-select/src/styles/check-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ $prefix: '#{$component-prefix}-check-select' !default;

.#{$prefix} {
&-option {
margin-top: use-spacing(1);
margin-bottom: use-spacing(1);
box-sizing: border-box;
width: 100%;
display: flex;
Expand All @@ -25,10 +23,11 @@ $prefix: '#{$component-prefix}-check-select' !default;
}

&__title {
display: inline-block;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: use-spacing(2) use-spacing(3);
padding: use-spacing(3) use-spacing(3);
font-size: inherit;
text-size-adjust: none;
font-weight: inherit;
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/appearance.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import CheckSelect from '../src'
export const Appearance = () => {
const [value, setValue] = React.useState<React.ReactText[]>(['2'])
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/clearable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import CheckSelect from '../src'
*/
export const Clearable = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/controlled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import CheckSelect from '../src'
export const Controlled = () => {
const [value, setValue] = React.useState<React.ReactText[]>(['3'])
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/display-render.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import CheckSelect from '../src'
*/
export const DisplayRender = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/filter-options.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import CheckSelect from '../src'
*/
export const FilterOptions = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { PlusOutlined } from '@hi-ui/icons'
*/
export const Footer = () => {
const [data, setData] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/pinyin.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { match } from 'pinyin-pro'
*/
export const Pinyin = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
5 changes: 2 additions & 3 deletions packages/ui/check-select/stories/tip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import Checkbox from '@hi-ui/checkbox'
*/
export const Tip = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边超级长文案展示生活周边超级长文案展示', id: '5' },
{ title: '办公', id: '6' },
])
Expand All @@ -32,7 +32,6 @@ export const Tip = () => {
disabled={item.disabled}
style={{
width: '100%',
display: 'inline-block',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/title-render.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import CheckSelect from '../src'
*/
export const TitleRender = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/check-select/stories/uncontrolled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import CheckSelect from '../src'
*/
export const Uncontrolled = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/dropdown/src/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
onClick,
onButtonClick,
overlayClassName,
size = 'lg',
size = 'md',
...rest
},
ref
Expand Down
3 changes: 0 additions & 3 deletions packages/ui/dropdown/stories/size.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,6 @@ export const Size = () => {
<Dropdown
size="lg"
data={list}
width={120}
title="左键单击"
trigger={'click'}
onClick={console.log}
Expand All @@ -229,7 +228,6 @@ export const Size = () => {
<Dropdown
size="md"
data={list}
width={120}
title="左键单击"
trigger={'click'}
onClick={console.log}
Expand All @@ -238,7 +236,6 @@ export const Size = () => {
<Dropdown
size="sm"
data={list}
width={120}
title="左键单击"
trigger={'click'}
onClick={console.log}
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/select/src/styles/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
$prefix: '#{$component-prefix}-select' !default;

.#{$prefix}-option {
margin-top: use-spacing(1);
margin-bottom: use-spacing(1);
// margin-top: use-spacing(1);
// margin-bottom: use-spacing(1);
box-sizing: border-box;
width: 100%;
display: flex;
Expand All @@ -27,7 +27,7 @@ $prefix: '#{$component-prefix}-select' !default;
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: use-spacing(2);
padding: use-spacing(3);
font-size: inherit;
font-weight: inherit;
color: inherit;
Expand All @@ -43,7 +43,7 @@ $prefix: '#{$component-prefix}-select' !default;
color: use-color-mode('primary');
}

&--focused {
&--focused:not(.#{$prefix}-option--selected) {
background-color: use-color('gray', 100);
}

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/appearance.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import Select from '../src'
export const Appearance = () => {
const [value, setValue] = React.useState<React.ReactText>('0')
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/basic.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Select from '../src'
*/
export const Basic = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{
title: '生活周边超长文案展示超长文案展示',
id: '5',
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/clearable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import Select from '../src'
*/
export const Clearable = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/controlled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Select from '../src'
export const Controlled = () => {
const [value, setValue] = React.useState<React.ReactText>('3')
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/display-render.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import Select from '../src'
*/
export const DisplayRender = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/filter-options.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Select from '../src'
*/
export const FilterOptions = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { PlusOutlined } from '@hi-ui/icons'
*/
export const Footer = () => {
const [data, setData] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/select/stories/pinyin.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { match } from 'pinyin-pro'
*/
export const Pinyin = () => {
const [data] = React.useState([
{ title: '电视', id: '3', disabled: true },
{ title: '电视', id: '3', disabled: false },
{ title: '手机', id: '2' },
{ title: '笔记本', id: '4', disabled: true },
{ title: '笔记本', id: '4', disabled: false },
{ title: '生活周边', id: '5' },
{ title: '办公', id: '6' },
])
Expand Down
Loading