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

feat(block): add component tokens #8790

Merged
merged 13 commits into from
Mar 5, 2024
Merged

feat(block): add component tokens #8790

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a2f67bc
feat(block): add component tokens
jcfranco Feb 20, 2024
f90cad4
tidy up
jcfranco Feb 21, 2024
cac8446
merge base branch
jcfranco Feb 29, 2024
fcbb0d1
follow fallback pattern
jcfranco Feb 29, 2024
23d4af2
fix heading space issue
jcfranco Mar 2, 2024
58e6b7e
tidy up
jcfranco Mar 2, 2024
5da8c32
merge epic/7180-component-tokens
jcfranco Mar 2, 2024
9bf724e
Merge branch 'epic/7180-component-tokens' into jcfranco/7180-add-comp…
jcfranco Mar 2, 2024
8dbffd7
restore font-size
jcfranco Mar 2, 2024
862704d
add mapped token placeholders
jcfranco Mar 2, 2024
7cf2c4e
Merge branch 'epic/7180-component-tokens' into jcfranco/7180-add-comp…
jcfranco Mar 2, 2024
0a15fd7
restore host text color
jcfranco Mar 4, 2024
e606e2a
fix status icon color
jcfranco Mar 4, 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
93 changes: 50 additions & 43 deletions packages/calcite-components/src/components/block/block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,42 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
* @prop --calcite-block-background-color: Specifies the background color of the component.
* @prop --calcite-block-border-color: Specifies the border color of the component.
* @prop --calcite-block-description-text-color: Specifies the text color of the component's description.
* @prop --calcite-block-header-background-color: Specifies the background color of the component's header.
* @prop --calcite-block-heading-text-color: Specifies the text color of the component's heading.
* @prop --calcite-block-padding: **deprecated** use `--calcite-block-space` instead - Specifies the padding of the component's `default` slot.
jcfranco marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-block-space: Specifies the space of the component's `default` slot.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think padding here is more descriptive - space is a bit ambiguous. Maybe calcite-block-content-padding ?

Copy link
Member

Choose a reason for hiding this comment

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

I think spacing makes more sense. That way we could internally swap between padding/margin/whatever if need be. Do we want to be specific with padding or margin?

Copy link
Member

Choose a reason for hiding this comment

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

We should decide on space vs spacing too :)

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, even content-space could make sense I guess. But space could be anything - space between text, slots, etc. In Modal we do use --calcite-modal-content-padding. In the future "content areas" could be ::parts with defaults.

Copy link
Member

Choose a reason for hiding this comment

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

We already have spacing vars like --calcite-spacing-xxs so it only makes sense to have component spacing vars like --calcite-block-spacing- IMO.

Copy link
Member

Choose a reason for hiding this comment

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

For Panel, we added calcite-panel-footer-space

Copy link
Contributor

Choose a reason for hiding this comment

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

calcite-block-content-space works for me. We can update elsewhere we currently use padding to follow this. As long as it has a context and isn't just component-space.

Copy link
Member Author

Choose a reason for hiding this comment

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

I knew this seemed familiar. We had a similar discussion in #8629 (comment) and landed on --calcite-tab-content-block-padding.

calcite-block-content-space works for me. We can update elsewhere we currently use padding to follow this. As long as it has a context and isn't just component-space.

SGTM, but I'd like for @alisonailea to chime on this too. If we needed separate props later on for block/inline values, would we introduce --calcite-component-space-<block|inline>? If so, we could add an example of this in our component token guidelines.

We should decide on space vs spacing too :)

We decided on space to align with size (vs. sizing).

Copy link
Contributor

Choose a reason for hiding this comment

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

Given that our design system is not necessarily web specific, we need to use platform agnostic naming conventions. space is the preferred terminology here.

Copy link
Member Author

Choose a reason for hiding this comment

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

For posterity, if we need custom space props that only apply horizontally or vertically, we can use something like --calcite-component-<part>-space-<x|y> (see #8852 (comment)).

* @prop --calcite-block-toggle-icon-color: Specifies the color of the component's toggle icon.
*/

@import "../../assets/styles/animation";
jcfranco marked this conversation as resolved.
Show resolved Hide resolved
@import "../../assets/styles/header";
jcfranco marked this conversation as resolved.
Show resolved Hide resolved

:host {
@extend %component-host;
jcfranco marked this conversation as resolved.
Show resolved Hide resolved
--calcite-block-background-color: var(--calcite-color-foreground-1);
--calcite-block-border-color: var(--calcite-color-border-3);
--calcite-block-description-text-color: var(--calcite-color-text-3);
--calcite-block-header-background-color: transparent;
--calcite-block-heading-text-color: var(--calcite-color-text-2);
--calcite-block-toggle-icon-color: var(--calcite-color-text-3);

--calcite-internal-block-padding-inline: var(
--calcite-block-padding,
var(--calcite-block-space, theme("spacing[2.5]"))
);
--calcite-internal-block-padding-block: var(--calcite-block-padding, var(--calcite-block-space, theme("spacing.2")));

@include base-host();
@extend %component-spacing;
jcfranco marked this conversation as resolved.
Show resolved Hide resolved
@apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0
flex-col border-0 border-b border-solid p-0 duration-150;
@apply border-0 border-b border-solid duration-150 ease-cubic
flex flex-col flex-grow-0 flex-shrink-0 p-0 transition-margin;
flex-basis: auto;
}

@include disabled();

@import "../../assets/styles/animation";
@import "../../assets/styles/header";
border-color: var(--calcite-block-border-color);
background-color: var(--calcite-block-background-color);
}

.header {
@apply justify-start p-0;
Expand Down Expand Up @@ -48,10 +69,11 @@
border-none
p-0;
text-align: initial;
background-color: var(--calcite-block-header-background-color);

background-color: transparent;
&:hover {
@apply bg-foreground-2;
--calcite-block-header-background-color: var(--calcite-color-foreground-2);
--calcite-block-toggle-icon-color: var(--calcite-color-text-1);
}
&:focus {
@apply focus-inset;
Expand All @@ -72,24 +94,26 @@ calcite-handle {
padding: theme("spacing.3");
}

.header .title .heading {
.heading {
@apply text-n1
text-color-2
word-break
transition-color
p-0
font-medium
leading-tight
duration-150
ease-in-out;

color: var(--calcite-block-heading-text-color);
}

.description {
@apply text-n2-wrap
text-color-3
word-break
mt-0.5
p-0;

color: var(--calcite-block-description-text-color);
}

.icon {
Expand All @@ -99,39 +123,23 @@ calcite-handle {
}

.status-icon.valid {
color: theme("colors.success");
color: var(--calcite-color-status-success);
}

.status-icon.invalid {
color: theme("colors.danger");
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
color: var(--calcite-color-status-danger);
}

.toggle-icon {
@apply text-color-3
transition-color
@apply duration-150
ease-in-out
justify-self-end
my-3
self-center
justify-self-end
duration-150
ease-in-out;
transition-color;
margin-inline-end: theme("spacing.3");
margin-inline-start: auto;
}

.toggle:hover .toggle-icon {
@apply text-color-1;
color: var(--calcite-block-toggle-icon-color);
}

.container {
Expand All @@ -140,8 +148,8 @@ calcite-handle {

.content {
@apply animate-in flex-1 relative min-h-0;
padding-block: var(--calcite-block-padding, theme("spacing.2"));
padding-inline: var(--calcite-block-padding, theme("spacing[2.5]"));
padding-block: var(--calcite-internal-block-padding-block);
padding-inline: var(--calcite-internal-block-padding-inline);
}

.control-container {
Expand All @@ -154,11 +162,10 @@ calcite-action-menu {
}

:host([open]) {
@apply my-2;
--calcite-block-heading-text-color: var(--calcite-color-text-1);

.header .title .heading {
@apply text-color-1;
}
@apply my-2;
}

@include disabled();
@include base-component();
Loading