Skip to content

Commit c226f6b

Browse files
aramos-adobearamos-adobe
committed
feat(combobox): add styling for combobox readonly
1 parent a898418 commit c226f6b

File tree

6 files changed

+68
-16
lines changed

6 files changed

+68
-16
lines changed

‎.changeset/new-doors-fold.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
"@spectrum-css/combobox": major
2+
"@spectrum-css/combobox": minor
33
---
44

55
Adding read only state to combobox

‎components/combobox/index.css

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,6 @@
9090
--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
9191
--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
9292
/* @passthroughs end -- settings for nested Picker Button component */
93-
94-
&.is-readOnly {
95-
pointer-events: none;
96-
}
9793
}
9894

9995
.spectrum-Combobox--sizeS {
@@ -305,6 +301,12 @@
305301
/* TEXTFIELD (wrapper) */
306302
.spectrum-Combobox-textfield {
307303
inline-size: 100%;
304+
305+
/* &.spectrum-Textfield--quiet {
306+
input:read-only {
307+
background-color: transparent;
308+
}
309+
} */
308310
}
309311

310312
/* TEXT INPUT */
@@ -318,12 +320,12 @@
318320
font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size));
319321
font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style));
320322

323+
324+
321325
&::placeholder {
322326
--mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder);
323327
}
324328

325-
326-
327329
/* Hover */
328330
.spectrum-Combobox-textfield:hover &,
329331
&:hover,
@@ -375,6 +377,40 @@
375377
}
376378
}
377379

380+
/* Combobox Read-only */
381+
.spectrum-Textfield.is-readOnly {
382+
input:read-only {
383+
background-color: var(--spectrum-textfield-background-color);
384+
border-color: var(--spectrum-textfield-border-color);
385+
386+
&:hover {
387+
background-color: revert;
388+
border-color: revert;
389+
}
390+
}
391+
392+
&.is-invalid input:read-only {
393+
border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
394+
}
395+
396+
&.is-disabled input:read-only {
397+
background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
398+
border-color: transparent;
399+
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
400+
}
401+
402+
&.spectrum-Textfield--quiet {
403+
input:read-only {
404+
background-color: unset;
405+
border-color: unset;
406+
}
407+
408+
&.is-invalid input:read-only {
409+
border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)));
410+
}
411+
}
412+
}
413+
378414
/* QUIET VARIATION (no visible background) */
379415
.spectrum-Combobox--quiet {
380416
border-radius: 0;

‎components/combobox/metadata/metadata.json

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@
5959
".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
6060
".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
6161
".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
62-
".spectrum-Combobox.is-readOnly",
6362
".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
6463
".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
6564
".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
@@ -71,6 +70,12 @@
7170
".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
7271
".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
7372
".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
73+
".spectrum-Textfield.is-readOnly input:read-only",
74+
".spectrum-Textfield.is-readOnly input:read-only:hover",
75+
".spectrum-Textfield.is-readOnly.is-disabled input:read-only",
76+
".spectrum-Textfield.is-readOnly.is-invalid input:read-only",
77+
".spectrum-Textfield.is-readOnly.spectrum-Textfield--quiet input:read-only",
78+
".spectrum-Textfield.is-readOnly.spectrum-Textfield--quiet.is-invalid input:read-only",
7479
"[dir=\"rtl\"] .spectrum-Combobox-progress-circle"
7580
],
7681
"modifiers": [
@@ -224,6 +229,11 @@
224229
"--spectrum-negative-border-color-focus-hover",
225230
"--spectrum-negative-border-color-hover",
226231
"--spectrum-negative-border-color-key-focus",
232+
"--spectrum-textfield-background-color",
233+
"--spectrum-textfield-background-color-disabled",
234+
"--spectrum-textfield-border-color",
235+
"--spectrum-textfield-border-color-invalid-default",
236+
"--spectrum-textfield-text-color-disabled",
227237
"--spectrum-workflow-icon-size-100",
228238
"--spectrum-workflow-icon-size-200",
229239
"--spectrum-workflow-icon-size-300",
@@ -273,6 +283,8 @@
273283
],
274284
"high-contrast": [
275285
"--highcontrast-combobox-border-color-highlight",
276-
"--highcontrast-combobox-border-color-invalid"
286+
"--highcontrast-combobox-border-color-invalid",
287+
"--highcontrast-textfield-border-color-invalid-default",
288+
"--highcontrast-textfield-text-color-disabled"
277289
]
278290
}

‎components/combobox/stories/combobox.stories.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types";
3+
import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types";
44
import metadata from "../metadata/metadata.json";
55
import packageJson from "../package.json";
66
import { ComboBoxGroup } from "./combobox.test.js";
@@ -41,8 +41,7 @@ export default {
4141
argTypes: {
4242
size: size(["s", "m", "l", "xl"]),
4343
isOpen: {
44-
name: "Open",
45-
table: { category: "State" },
44+
...isOpen,
4645
if: { arg: "isReadOnly", truthy: false },
4746
},
4847
isQuiet,
@@ -172,9 +171,8 @@ QuietGroup.parameters = {
172171
};
173172

174173
/**
175-
* Combo boxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combo box does not have a read-only option if no selection has been made.
174+
* Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made.
176175
*/
177-
178176
export const ReadOnly = Template.bind({});
179177
ReadOnly.tags = ["!dev"];
180178
ReadOnly.args = {
@@ -185,6 +183,8 @@ ReadOnly.parameters = {
185183
chromatic: { disableSnapshot: true }
186184
};
187185

186+
ReadOnly.storyName = "Read-only";
187+
188188
// ********* VRT ONLY ********* //
189189
export const WithForcedColors = ComboBoxGroup.bind({});
190190
WithForcedColors.tags = ["!autodocs", "!dev"];

‎components/combobox/stories/combobox.test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ export const ComboBoxGroup = Variants({
4848
isOpen: false,
4949
isQuiet: true,
5050
value: "United States of America and to the republic",
51+
},
52+
{
53+
testHeading: "Read-only",
54+
isReadOnly: true
5155
}
5256
],
5357
stateData: [

‎components/combobox/stories/template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const Combobox = ({
4343
"is-keyboardFocused": !isDisabled && isKeyboardFocused,
4444
"is-loading": isLoading,
4545
"is-disabled": isDisabled,
46-
"is-readOnly": isReadOnly,
4746
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
4847
})}
4948
id=${ifDefined(id)}
@@ -65,6 +64,7 @@ const Combobox = ({
6564
isLoading,
6665
customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
6766
name: "field",
67+
isReadOnly,
6868
value,
6969
onclick: function () {
7070
if (!isOpen) updateArgs({ isOpen: true });
@@ -86,7 +86,7 @@ const Combobox = ({
8686
isDisabled,
8787
position: "right",
8888
onclick: function () {
89-
if (!isReadOnly) updateArgs({ isOpen: !isOpen });
89+
updateArgs({ isOpen: !isOpen });
9090
},
9191
}, context)}
9292
</div>

0 commit comments

Comments
 (0)