Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: ColorPicker not support compact (#50291)

Browse Source 
* fix: ColorPicker not support compact

* test: update snapshot

* test: update snapshot
pull/50293/head^2
二货爱吃白萝卜 6 months ago committed by GitHub
parent 37abf776f4
commit c23d1875fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 429 additions and 6 deletions
Show Stats Download Patch File Download Diff File

8
components/color-picker/ColorPicker.tsx
Unescape Escape View File

@ -14,6 +14,7 @@ import useSize from '../config-provider/hooks/useSize';
import { FormItemInputContext } from '../form/context';
import type { PopoverProps } from '../popover';
import Popover from '../popover';
import { useCompactItemContext } from '../space/Compact';
import { AggregationColor } from './color';
import type { ColorPickerPanelProps } from './ColorPickerPanel';
import ColorPickerPanel from './ColorPickerPanel';
@ -166,8 +167,12 @@ const ColorPicker: CompoundedComponent = (props) => {
// ================== Form Status ==================
const { status: contextStatus } = React.useContext(FormItemInputContext);
// ==================== Compact ====================
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
// ===================== Style =====================
const mergedSize = useSize(customizeSize);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const rtlCls = { [`${prefixCls}-rtl`]: direction };
@ -178,6 +183,7 @@ const ColorPicker: CompoundedComponent = (props) => {
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large',
},
compactItemClassnames,
colorPicker?.className,
mergedRootCls,
className,

4
components/color-picker/components/ColorTrigger.tsx
Unescape Escape View File

@ -51,10 +51,6 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
}
if (color.isGradient()) {
// return color
// .getColors()
// .map((c) => `${c.color.toRgbString()} ${c.percent}%`)
// .join(', ');
return color.getColors().map((c, index) => {
const inactive = activeIndex !== -1 && activeIndex !== index;

5
components/color-picker/style/index.ts
Unescape Escape View File

@ -1,6 +1,7 @@
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
import { genCompactItemStyle } from '../../style/compact-item';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import genColorBlockStyle from './color-block';
@ -284,6 +285,10 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
...genRtlStyle(token),
},
},
genCompactItemStyle(token, {
focusElCls: `${componentCls}-trigger-active`,
}),
];
};

389
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
Unescape Escape View File

@ -8938,6 +8938,395 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<input
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
placeholder="input here"
type="text"
value=""
/>
<div
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
>
<div
class="ant-color-picker-clear"
/>
</div>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
>
<div
class="ant-color-picker-panel"
>
<div
class="ant-color-picker-select"
>
<div
class="ant-color-picker-palette"
style="position: relative;"
>
<div
style="position: absolute; left: 0%; top: 100%; z-index: 1; transform: translate(-50%, -50%);"
>
<div
class="ant-color-picker-handler"
style="background-color: rgba(0, 0, 0, 0);"
/>
</div>
<div
class="ant-color-picker-saturation"
style="background-color: rgb(255, 0, 0);"
/>
</div>
</div>
<div
class="ant-color-picker-slider-container"
>
<div
class="ant-color-picker-slider-group"
>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="359"
aria-valuemin="0"
aria-valuenow="0"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 0%; transform: translateX(-50%); background: rgb(255, 0, 0);"
tabindex="0"
/>
</div>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 0%; transform: translateX(-50%); background: rgba(0, 0, 0, 0);"
tabindex="0"
/>
</div>
</div>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background: rgba(0, 0, 0, 0);"
/>
</div>
</div>
</div>
<div
class="ant-color-picker-input-container"
>
<div
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="HEX"
>
HEX
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="HEX"
aria-selected="true"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
hex
</div>
<div
aria-label="HSB"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
hsb
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
title="HEX"
>
<div
class="ant-select-item-option-content"
>
HEX
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="HSB"
>
<div
class="ant-select-item-option-content"
>
HSB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="RGB"
>
<div
class="ant-select-item-option-content"
>
RGB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-color-picker-input"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input"
>
<span
class="ant-input-prefix"
>
#
</span>
<input
class="ant-input ant-input-sm"
type="text"
value="000000"
/>
</span>
</div>
<div
class="ant-input-number ant-input-number-sm ant-input-number-outlined ant-color-picker-steppers ant-color-picker-alpha-input"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="true"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="0%"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

21
components/space/__tests__/__snapshots__/demo.test.tsx.snap
Unescape Escape View File

@ -1976,6 +1976,27 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<input
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
placeholder="input here"
type="text"
value=""
/>
<div
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
>
<div
class="ant-color-picker-clear"
/>
</div>
</div>
</div>
</div>
`;

5
components/space/demo/compact.tsx
Unescape Escape View File

@ -4,6 +4,7 @@ import {
AutoComplete,
Button,
Cascader,
ColorPicker,
DatePicker,
Input,
InputNumber,
@ -197,6 +198,10 @@ const App: React.FC = () => (
<InputNumber placeholder="another input" addonBefore="$" />
<InputNumber placeholder="another input" addonAfter="$" />
</Space.Compact>
<Space.Compact>
<Input placeholder="input here" />
<ColorPicker />
</Space.Compact>
</Space>
);

3
mako.config.json
Unescape Escape View File

@ -8,5 +8,6 @@
},
"watch": {
"_nodeModulesRegexes": ["rc-.*"]
}
},
"hmr": false
}

Write Preview
Loading…
Cancel
Save