diff --git a/README.md b/README.md index b3e2a274f65..5fd84995d20 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
driskull @@ -60,8 +60,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Erik Harper
anveshmekala @@ -104,8 +104,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Ali Stump
caripizza @@ -148,8 +148,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Kumar Jayaram Gayatri
kat10140 @@ -192,8 +192,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Max Patiiuk
ffaubry @@ -236,8 +236,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Jack Rowlingson
crowjonah @@ -280,8 +280,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Mike Horn
Apahadi73 @@ -324,8 +324,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Aine Fitzgerald Coleman
anveshrmekala @@ -368,8 +368,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Nathan Whittaker
oknoway @@ -412,8 +412,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Drew Tate
allieorth @@ -428,8 +428,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m Aaron Shetland
diff --git a/packages/calcite-components/THIRD-PARTY-LICENSES.md b/packages/calcite-components/THIRD-PARTY-LICENSES.md index 00b76be6ef7..49d754f1b52 100644 --- a/packages/calcite-components/THIRD-PARTY-LICENSES.md +++ b/packages/calcite-components/THIRD-PARTY-LICENSES.md @@ -32,26 +32,26 @@ interactjs Copyright (c) 2012-present Taye Adeyemi -Permission is hereby granted, free of charge, to any person -obtaining a copy of this software and associated -documentation files (the "Software"), to deal in the Software -without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, -and/or sell copies of the Software, and to permit persons to -whom the Software is furnished to do so, subject to the +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the Software +without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, +and/or sell copies of the Software, and to permit persons to +whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall -be included in all copies or substantial portions of the +The above copyright notice and this permission notice shall +be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY -KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE -WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR -PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR -COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR -OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY +KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE +WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR +PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --- @@ -66,15 +66,15 @@ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this -list of conditions and the following disclaimer. + list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, -this list of conditions and the following disclaimer in the documentation -and/or other materials provided with the distribution. + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -102,15 +102,15 @@ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this -list of conditions and the following disclaimer. + list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, -this list of conditions and the following disclaimer in the documentation -and/or other materials provided with the distribution. + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -141,15 +141,15 @@ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this -list of conditions and the following disclaimer. + list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, -this list of conditions and the following disclaimer in the documentation -and/or other materials provided with the distribution. + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -175,7 +175,7 @@ MIT @types/sortablejs @types/trusted-types - MIT License +MIT License Copyright (c) Microsoft Corporation. @@ -513,15 +513,15 @@ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this -list of conditions and the following disclaimer. + list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, -this list of conditions and the following disclaimer in the documentation -and/or other materials provided with the distribution. + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its -contributors may be used to endorse or promote products derived from -this software without specific prior written permission. + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -545,7 +545,7 @@ DocumentCloud and Investigative Reporters & Editors This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history -available at https://github.com/lodash/lodash +available at The following license applies to all parts of this software except as documented below: @@ -577,7 +577,7 @@ Copyright and related rights for sample code are waived via CC0. Sample code is defined as all source code displayed within the prose of the documentation. -CC0: http://creativecommons.org/publicdomain/zero/1.0/ +CC0: ==== @@ -642,7 +642,7 @@ SOFTWARE. parse5 -Copyright (c) 2013-2019 Ivan Nikulin (ifaaan@gmail.com, https://github.com/inikulin) +Copyright (c) 2013-2019 Ivan Nikulin (, ) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -791,7 +791,7 @@ type-fest MIT License -Copyright (c) Sindre Sorhus (https://sindresorhus.com) +Copyright (c) Sindre Sorhus () Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts index 93ab1a303be..b76aa2e0b37 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts @@ -1,6 +1,9 @@ import { describe } from "vitest"; -import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests"; +import { defaults, disabled, hidden, reflects, renders, slots, themed } from "../../tests/commonTests"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; +import { html } from "../../../support/formatting"; import { SLOTS } from "./resources"; +import { CSS } from "./resources"; describe("calcite-combobox-item", () => { describe("defaults", () => { @@ -46,4 +49,120 @@ describe("calcite-combobox-item", () => { describe("disabled", () => { disabled("calcite-combobox-item", { focusTarget: "none" }); }); + + describe("theme", () => { + describe("default", () => { + const comboboxHTML = html` `; + + const comboboxItemTokens: ComponentTestTokens = { + "--calcite-combobox-item-text-color": [ + { + shadowSelector: ` .${CSS.label} `, + selector: "calcite-combobox-item", + targetProp: "color", + }, + { + shadowSelector: `.${CSS.iconCustom}`, + selector: "calcite-combobox-item", + targetProp: "color", + }, + ], + "--calcite-combobox-item-text-color-hover": [ + { + shadowSelector: ` .${CSS.label} `, + selector: "calcite-combobox-item", + targetProp: "color", + state: "hover", + }, + { + shadowSelector: ` .${CSS.label} `, + selector: "calcite-combobox-item", + targetProp: "color", + state: { press: { attribute: "class", value: CSS.label } }, + }, + { + shadowSelector: `.${CSS.iconCustom}`, + selector: "calcite-combobox-item", + targetProp: "color", + state: "hover", + }, + { + shadowSelector: `.${CSS.iconCustom}`, + selector: "calcite-combobox-item", + targetProp: "color", + state: { press: { attribute: "class", value: CSS.iconCustom } }, + }, + ], + "--calcite-combobox-item-background-color-active": { + shadowSelector: ` .${CSS.label} `, + selector: "calcite-combobox-item", + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.label } }, + }, + "--calcite-combobox-item-background-color-hover": { + shadowSelector: ` .${CSS.label} `, + selector: "calcite-combobox-item", + targetProp: "backgroundColor", + state: "hover", + }, + "--calcite-combobox-description-text-color": [ + { + shadowSelector: `.${CSS.description}`, + selector: "calcite-combobox-item", + targetProp: "color", + }, + { + shadowSelector: `.${CSS.shortText}`, + selector: "calcite-combobox-item", + targetProp: "color", + }, + ], + "--calcite-combobox-description-text-color-press": [ + { + shadowSelector: `.${CSS.description}`, + selector: "calcite-combobox-item", + targetProp: "color", + state: { press: { attribute: "class", value: CSS.description } }, + }, + { + shadowSelector: `.${CSS.shortText}`, + selector: "calcite-combobox-item", + targetProp: "color", + state: { press: { attribute: "class", value: CSS.shortText } }, + }, + ], + "--calcite-combobox-heading-text-color": { + shadowSelector: `.${CSS.heading}`, + selector: "calcite-combobox-item", + targetProp: "color", + }, + }; + themed(comboboxHTML, comboboxItemTokens); + }); + + describe("selected", () => { + const selectedComboboxItemHTML = html` `; + const comboboxItemTokens: ComponentTestTokens = { + "--calcite-combobox-selected-icon-color": { + shadowSelector: ` .${CSS.icon} `, + selector: "calcite-combobox-item", + targetProp: "color", + }, + }; + themed(selectedComboboxItemHTML, comboboxItemTokens); + }); + }); }); diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss index b523d6461ca..900d503fd59 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss @@ -1,3 +1,19 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-combobox-item-text-color: Specifies the text color of the component. + * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the component when hovered. + * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active. + * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered. + * @prop --calcite-combobox-selected-icon-color: Specifies the color of the selected indicator icon. + * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected. + * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description & short-heading. + * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading when hovered. + * @prop --calcite-combobox-heading-text-color: Specifies the text color of the component heading. + */ + @include base-component(); .scale--s { @@ -47,8 +63,7 @@ ul:focus { } .label { - @apply text-color-3 - focus-base + @apply focus-base relative box-border flex @@ -57,7 +72,6 @@ ul:focus { cursor-pointer items-center no-underline - duration-150 ease-in-out; @include word-break(); justify-content: space-around; @@ -65,6 +79,9 @@ ul:focus { padding-block: var(--calcite-combobox-item-spacing-unit-s); padding-inline-end: var(--calcite-combobox-item-spacing-unit-l); padding-inline-start: var(--calcite-combobox-item-indent-value); + + color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3)); + transition-duration: var(--calcite-animation-timing); } :host([disabled]) .label { @@ -75,24 +92,25 @@ ul:focus { @apply focus-inset; } +.label:hover { + background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2)); + color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1)); +} + +.label:active { + background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3)); +} + :host([selected]) .label, .label:active { - @apply text-color-1; + color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1)); .description, .short-text { - @apply text-color-2; + color: var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2)); } } -.label:hover { - @apply text-color-1 bg-foreground-2; -} - -.label:active { - background-color: var(--calcite-color-foreground-3); -} - .icon { @apply inline-flex opacity-0 @@ -102,7 +120,7 @@ ul:focus { :host([selected]) .icon { @apply opacity-100; - color: theme("backgroundColor.brand"); + color: var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand)); } .icon--custom { @@ -124,12 +142,12 @@ ul:focus { white-space: nowrap; } -.title { - color: var(--calcite-color-text-1); +.heading { + color: var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1)); } :host([selected]) { - .title { + .heading { @apply font-medium; } } @@ -138,7 +156,7 @@ ul:focus { .label:hover { .description, .short-text { - @apply text-color-3; + color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3)); } } diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index 0e6fc172514..e4a25e569c3 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -235,7 +235,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent { return this.icon ? ( {this.renderIcon(icon)}
-
+
{highlightText({ text: headingText, pattern: filterTextMatchPattern, diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts index 362e554208a..ec6fdcf2275 100644 --- a/packages/calcite-components/src/components/combobox-item/resources.ts +++ b/packages/calcite-components/src/components/combobox-item/resources.ts @@ -4,7 +4,7 @@ export const CSS = { active: "label--active", centerContent: "center-content", container: "container", - custom: "icon--custom", + iconCustom: "icon--custom", description: "description", icon: "icon", label: "label", @@ -12,7 +12,7 @@ export const CSS = { shortText: "short-text", single: "label--single", textContainer: "text-container", - title: "title", + heading: "heading", }; export const SLOTS = { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index a98ea872f05..19fdc91ced7 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -21,7 +21,7 @@ import { calciteSwitch } from "./custom-theme/switch"; import { card, cardThumbnail, cardTokens } from "./custom-theme/card"; import { checkbox, checkboxTokens } from "./custom-theme/checkbox"; import { chips, chipTokens } from "./custom-theme/chips"; -import { comboboxItem } from "./custom-theme/combobox-item"; +import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item"; import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker"; import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown"; import { flow, flowTokens } from "./custom-theme/flow"; @@ -146,6 +146,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem} + ${selectedComboboxItem}
${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel} ${shellPanel} @@ -176,6 +177,7 @@ const componentTokens = { ...cardTokens, ...checkboxTokens, ...chipTokens, + ...comboboxItemTokens, ...datePickerTokens, ...DropdownTokens, ...DropdownItemTokens, diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts index 1ac6f6c3966..83b230b7e20 100644 --- a/packages/calcite-components/src/custom-theme/combobox-item.ts +++ b/packages/calcite-components/src/custom-theme/combobox-item.ts @@ -1,7 +1,29 @@ import { html } from "../../support/formatting"; -export const comboboxItem = html``; + +export const selectedComboboxItem = html``;