Skip to content
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

Jump to bottom

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

Merged
merged 31 commits into from
Sep 23, 2024
+406 −26
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Next Next commit
additional corner radius action tokens
  • Loading branch information
@Elijbet
Elijbet committed Sep 18, 2024
commit 9a56f7021bf18402d29789c53db14162fef0ac3b
65 changes: 23 additions & 42 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,42 +7,52 @@
* @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-start-end: Specifies the component's corner radius start end.
* @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.
jcfranco marked this conversation as resolved.
Show resolved Hide 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.
Elijbet marked this conversation as resolved.
Show resolved Hide 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.
* @prop --calcite-internal-action-corner-radius-end-end:: Specifies the component's internal corner radius end end.
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-internal-action-corner-radius-end-start: Specifies the component's internal corner radius end start.
* @prop --calcite-internal-action-corner-radius-start-end: Specifies the component's internal corner radius start end.
* @prop --calcite-internal-action-corner-radius-start-start: Specifies the component's internal corner radius start start.
*/

:host {
@extend %component-host;
@apply flex bg-transparent;
}

border-start-start-radius: var(
--calcite-action-corner-radius-start-start,
:host,
button {
border-end-end-radius: var(
--calcite-action-corner-radius-end-end,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
)
);
border-start-end-radius: var(
--calcite-action-corner-radius-start-end,
border-end-start-radius: var(
--calcite-action-corner-radius-end-start,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
)
);
border-end-start-radius: var(
--calcite-action-corner-radius-end-start,
border-start-end-radius: var(
--calcite-action-corner-radius-start-end,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
)
);
border-end-end-radius: var(
--calcite-action-corner-radius-end-end,
border-start-start-radius: var(
--calcite-action-corner-radius-start-start,
var(
--calcite-action-corner-radius,
var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
)
);
}
Expand Down Expand Up @@ -77,35 +87,6 @@

background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));
color: var(--calcite-action-text-color, var(--calcite-color-text-3));

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))
)
);
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-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-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))
)
);
text-align: unset;
flex: 1 0 auto;

Expand Down
5 changes: 0 additions & 5 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 @@ -133,9 +133,4 @@
@apply h-full;
}

calcite-action {
border-start-end-radius: var(--calcite-action-corner-radius-start-end);
border-end-end-radius: var(--calcite-action-corner-radius-end-end);
}

@include base-component();
3 changes: 1 addition & 2 deletions packages/calcite-components/src/custom-theme/handle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,5 @@ export const handleTokens = {
export const handle = html`
<calcite-label layout="inline">
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
<calcite-handle></calcite-handle>
<calcite-label> </calcite-label
></calcite-label>
</calcite-label>
`;
Loading