Skip to content

feat(popover, action): add component tokens #10253

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

Merged
Elijbet merged 31 commits into from
Sep 23, 2024
Merged

feat(popover, action): add component tokens #10253

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
10668af
feat(popover): add component tokens
Elijbet Sep 9, 2024
d0c1d93
themed e2e test
Elijbet Sep 9, 2024
81df053
import CSS variables from resources
Elijbet Sep 9, 2024
d410806
custom theme
Elijbet Sep 10, 2024
69e0cbc
import FloatingCSS and clean up resources
Elijbet Sep 11, 2024
e70e1b7
remove unused style
Elijbet Sep 11, 2024
a94882a
remove redundant story
Elijbet Sep 11, 2024
c43eab3
inline html and cleanup
Elijbet Sep 12, 2024
ea7c73d
restore transparentBG_TestOnly story
Elijbet Sep 12, 2024
ef7ba80
remove inline styling and add albel with layout inline instead
Elijbet Sep 12, 2024
7925ef0
merge dev
Elijbet Sep 12, 2024
879d71e
add inline label for stories formatting
Elijbet Sep 13, 2024
f3c7b69
merge dev
Elijbet Sep 13, 2024
38795c5
calcite-action rounded corner
Elijbet Sep 13, 2024
0a71e83
add action public tokens
Elijbet Sep 17, 2024
f047f66
fine grained --calcite-internal-action-corner-radius-start/end for fo…
Elijbet Sep 17, 2024
852b2a0
cleanup
Elijbet Sep 18, 2024
9a56f70
additional corner radius action tokens
Elijbet Sep 18, 2024
8daa1b5
add container class and cleanup
Elijbet Sep 18, 2024
25219e9
token to match css prop
Elijbet Sep 18, 2024
c9ddd1d
bring back selectors
Elijbet Sep 18, 2024
356f005
cleanup
Elijbet Sep 18, 2024
6d1a74c
e2e test for additional props
Elijbet Sep 18, 2024
087cbf7
cleanup
Elijbet Sep 18, 2024
2383c60
remove internal prop docs
Elijbet Sep 19, 2024
9897306
rename container
Elijbet Sep 19, 2024
8cc2cd4
rename container css class
Elijbet Sep 19, 2024
a02d0b4
merge dev
Elijbet Sep 23, 2024
dde6eee
merge dev
Elijbet Sep 23, 2024
435d74c
remove internal variables
Elijbet Sep 23, 2024
cb068f6
cleanup
Elijbet Sep 23, 2024
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
155 changes: 155 additions & 0 deletions packages/calcite-components/src/components/action/action.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ describe("calcite-action", () => {
expect(liveRegion.getAttribute("role")).toBe("region");
expect(liveRegion.textContent).toBe("Indicator present");
});

describe("themed", () => {
describe("default", () => {
themed(html`calcite-action`, {
Expand Down Expand Up @@ -285,5 +286,159 @@ describe("calcite-action", () => {
},
);
});
describe("corner radius", () => {
themed(html`calcite-action`, {
"--calcite-action-corner-radius": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-end-end": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-end-start": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-start-end": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-start-start": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
});
});
});
});
37 changes: 37 additions & 0 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
* @prop --calcite-action-background-color: Specifies the component's background color.
* @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
* @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.
* @prop --calcite-action-corner-radius: Specifies the component's corner radius.
* @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
Comment thread
jcfranco marked this conversation as resolved.
* @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start.
* @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
Comment thread
Elijbet marked this conversation as resolved.
* @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
* @prop --calcite-action-text-color: Specifies the text color of the component.
* @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
*/
Expand All @@ -16,6 +21,38 @@
@apply flex bg-transparent;
}

:host,
button {
border-end-end-radius: var(
--calcite-action-corner-radius-end-end,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
Comment thread
Elijbet marked this conversation as resolved.
Outdated
)
);
border-end-start-radius: var(
--calcite-action-corner-radius-end-start,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
)
);
border-start-end-radius: var(
--calcite-action-corner-radius-start-end,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
)
);
border-start-start-radius: var(
--calcite-action-corner-radius-start-start,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
)
);
}

@mixin action-indicator() {
position: relative;
&::after {
Expand Down
64 changes: 64 additions & 0 deletions packages/calcite-components/src/components/popover/popover.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
openClose,
renders,
t9n,
themed,
} from "../../tests/commonTests";
import { CSS } from "./resources";

Expand Down Expand Up @@ -699,4 +700,67 @@ describe("calcite-popover", () => {
});
});
});

describe("theme", () => {
describe("default", () => {
themed(
html`
<calcite-popover heading="I'm a heading in the header using the 'heading' prop!">
Lorem Ipsum
</calcite-popover>
`,
{
"--calcite-popover-background-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "backgroundColor",
},
"--calcite-popover-border-color": [
{
shadowSelector: `.${CSS.container}`,
targetProp: "borderColor",
},
{
shadowSelector: `.${CSS.header}`,
targetProp: "borderBlockEndColor",
},
],
"--calcite-popover-corner-radius": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderRadius",
},
"--calcite-popover-text-color": [
{
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
{
shadowSelector: `.${CSS.headerContainer}`,
targetProp: "color",
},
],
},
);
});
describe("closable", () => {
themed(
html`
<calcite-popover heading="I'm a heading in the header using the 'heading' prop!" closable>
Lorem Ipsum
</calcite-popover>
`,
{
"--calcite-popover-corner-radius": [
{
shadowSelector: `.${CSS.closeButtonContainer}`,
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.closeButtonContainer}`,
targetProp: "borderEndEndRadius",
},
],
},
);
});
});
});
48 changes: 28 additions & 20 deletions packages/calcite-components/src/components/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-popover-background-color: Specifies the background color of the component.
* @prop --calcite-popover-border-color: Specifies the border color of the component.
* @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-popover-text-color: Specifies the text color of the component.
* @prop --calcite-popover-z-index: Sets the z-index value for the component.

@jcfranco jcfranco Sep 18, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidebar: can we deprecate component-specific z-indices? We should be using the semantic z-indices instead to adjust different layers. cc @alisonailea @driskull @macandcheese

*/

@macandcheese macandcheese Sep 12, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might expect a --calcite-popover-shadow css property here.

@Elijbet Elijbet Sep 12, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any shadow related styling on the component. Can you expand on that?

@macandcheese macandcheese Sep 12, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's coming from floating ui - but I don't think a user would need to know that, so maybe a pattern q of how to set that up. As a user I'd want to just set it at the component level like the other adjustments to border color, corner radius, etc.

@alisonailea alisonailea Sep 13, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's leave the floating-ui tokens separately.


Expand Down Expand Up @@ -46,42 +50,40 @@
}

.calcite-floating-ui-anim {
@apply bg-foreground-1
border-color-3
rounded
border
@apply border
border-solid;
}

.arrow::before {
outline: 1px solid var(--calcite-color-border-3);
background-color: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
border-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
}

.header {
@apply border-b-color-3
flex
@apply flex
flex-auto
items-stretch
justify-start
border-0
border-b
border-solid;

border-block-end-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
}

.heading {
@apply text-color-1
word-break
@apply word-break
m-0
block
flex-auto
self-center
whitespace-normal
font-medium;

color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
}

.container {
@apply text-color-1
relative
.headerContainer {
@apply relative
flex
h-full
flex-row
Expand All @@ -90,6 +92,8 @@
&.has-header {
@apply flex-col;
}

color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
}

.content {
Expand All @@ -105,12 +109,16 @@
.close-button-container {
@apply flex overflow-hidden;
flex: 0 0 auto;
border-start-end-radius: theme("borderRadius.DEFAULT");
border-end-end-radius: theme("borderRadius.DEFAULT");
}

.has-header .close-button-container {
border-end-end-radius: none;
border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
--calcite-internal-action-corner-radius-start-end: var(
Comment thread
Elijbet marked this conversation as resolved.
Outdated
--calcite-popover-corner-radius,
var(--calcite-corner-radius-sharp)
);
--calcite-internal-action-corner-radius-end-end: var(
--calcite-popover-corner-radius,
var(--calcite-corner-radius-sharp)
);
}

::slotted(calcite-panel),
Expand Down
Loading