Skip to content

Commit e19e55f

Browse files
blunteshwarRajdeepc
blunteshwar
and
Rajdeepc
authored
fix(color-field): color handle positioning within scrollable containers (#5322)
* fix(color-field): add CSS styles to properly define the positioning of colo-field * ci: update default golden images hash in config.yml * chore(color-field): update color-field.css * fix(color-field): introduce predefined color constants for stories * ci: update default golden images hash in config.yml * ci: update default golden images hash in config.yml * chore(color-field): add changeset --------- Co-authored-by: Rajdeep Chandra <[email protected]>
1 parent dd0c8db commit e19e55f

File tree

7 files changed

+124
-4
lines changed

7 files changed

+124
-4
lines changed

‎.changeset/khaki-phones-accept.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/color-field': minor
3+
---
4+
5+
Fix Color Handle Positioning in Scrollable Containers

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ parameters:
1414
# 3. Commit this change to the PR branch where the changes exist.
1515
current_golden_images_hash:
1616
type: string
17-
default: 3df09ec1cfa022d70e30b5c420c09e6382acca79
17+
default: be780955358effb497f871bc1ae942e092ffc75b
1818
wireit_cache_name:
1919
type: string
2020
default: wireit

‎packages/color-field/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"development": "./src/ColorField.dev.js",
3030
"default": "./src/ColorField.js"
3131
},
32+
"./src/color-field.css.js": "./src/color-field.css.js",
3233
"./src/index.js": {
3334
"development": "./src/index.dev.js",
3435
"default": "./src/index.js"

‎packages/color-field/src/ColorField.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ import {
1818
import { property } from '@spectrum-web-components/base/src/decorators.js';
1919
import { ColorController } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
2020
import { TextfieldBase } from '@spectrum-web-components/textfield';
21-
21+
import styles from './color-field.css.js';
2222
/**
2323
* @element sp-color-field
2424
* @fires input - The value of the color-field has changed.
2525
* @fires change - An alteration to the value of the color-field has been committed by the user.
2626
*/
2727
export class ColorField extends TextfieldBase {
2828
public static override get styles(): CSSResultArray {
29-
return [...super.styles];
29+
return [...super.styles, styles];
3030
}
3131

3232
@property({ type: Boolean, attribute: 'view-color' })

‎packages/color-field/src/color-field.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*!
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License./
11+
*/
12+
13+
:host {
14+
position: relative;
15+
}

‎packages/color-field/stories/color-field.stories.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import { TemplateResult } from '@spectrum-web-components/base';
12+
import { html, TemplateResult } from '@spectrum-web-components/base';
1313
import '@spectrum-web-components/color-field/sp-color-field.js';
1414
import { ColorFieldMarkup } from './template.js';
1515
import { argTypes } from './args.js';
16+
import { DEFAULT_COLOR, DEMO_COLORS } from './colors.js';
1617

1718
export default {
1819
component: 'sp-color-field',
@@ -61,6 +62,27 @@ viewColor.args = {
6162
viewColor: true,
6263
value: 'rgb(255,255,0)',
6364
};
65+
export const Multiple = (args?: Properties): TemplateResult => {
66+
return html`
67+
<div
68+
style="width: 20%; padding: 20px; margin: 10px; display: flex; flex-direction: column; gap: 16px; height: 200px; overflow-y: auto;"
69+
>
70+
${DEMO_COLORS.map((color, index) =>
71+
ColorFieldMarkup({
72+
...args,
73+
label: `Color ${index + 1}`,
74+
value: color,
75+
viewColor: true,
76+
})
77+
)}
78+
</div>
79+
`;
80+
};
81+
82+
Multiple.args = {
83+
viewColor: true,
84+
value: DEFAULT_COLOR,
85+
};
6486

6587
export const WrongInput = (args?: Properties): TemplateResult =>
6688
ColorFieldMarkup(args);

‎packages/color-field/stories/colors.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/*
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
/**
14+
* A collection of predefined colors in different formats (RGB and HEX)
15+
* for use in color field demos, stories, and tests.
16+
*/
17+
export const DEMO_COLORS = [
18+
'rgb(255,0,0)', // Red
19+
'#00FF00', // Green
20+
'rgb(0,0,255)', // Blue
21+
'#FFFF00', // Yellow
22+
'rgb(255,0,255)', // Magenta
23+
'#00FFFF', // Cyan
24+
'rgb(255,165,0)', // Orange
25+
'#800080', // Purple
26+
'rgb(165,42,42)', // Brown
27+
'#008080', // Teal
28+
'rgb(255,192,203)', // Pink
29+
'#32CD32', // Lime Green
30+
'rgb(70,130,180)', // Steel Blue
31+
'#FF6347', // Tomato
32+
'rgb(128,0,0)', // Maroon
33+
'#4B0082', // Indigo
34+
'rgb(0,128,128)', // Dark Cyan
35+
'#800000', // Dark Red
36+
'rgb(0,100,0)', // Dark Green
37+
'#000080', // Navy
38+
'rgb(188,143,143)', // Rosy Brown
39+
'#556B2F', // Dark Olive Green
40+
'rgb(255,215,0)', // Gold
41+
'#C0C0C0', // Silver
42+
];
43+
44+
/**
45+
* Named color map for semantic reference.
46+
*/
47+
export const NAMED_COLORS = {
48+
red: 'rgb(255,0,0)',
49+
green: '#00FF00',
50+
blue: 'rgb(0,0,255)',
51+
yellow: '#FFFF00',
52+
magenta: 'rgb(255,0,255)',
53+
cyan: '#00FFFF',
54+
orange: 'rgb(255,165,0)',
55+
purple: '#800080',
56+
brown: 'rgb(165,42,42)',
57+
teal: '#008080',
58+
pink: 'rgb(255,192,203)',
59+
limeGreen: '#32CD32',
60+
steelBlue: 'rgb(70,130,180)',
61+
tomato: '#FF6347',
62+
maroon: 'rgb(128,0,0)',
63+
indigo: '#4B0082',
64+
darkCyan: 'rgb(0,128,128)',
65+
darkRed: '#800000',
66+
darkGreen: 'rgb(0,100,0)',
67+
navy: '#000080',
68+
rosyBrown: 'rgb(188,143,143)',
69+
darkOliveGreen: '#556B2F',
70+
gold: 'rgb(255,215,0)',
71+
silver: '#C0C0C0',
72+
};
73+
74+
/**
75+
* Default color for stories.
76+
*/
77+
export const DEFAULT_COLOR = 'rgb(255,255,0)'; // Yellow

0 commit comments

Comments
 (0)