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.

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(tip-manager): add component tokens #8782

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
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
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,8 @@
max-inline-size: var(--calcite-tip-max-width);
}

calcite-tip {
//TODO: sub-component tokens
}

@include base-component();
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
@import "../../assets/styles/header";

/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-height: The maximum height of the component.
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.
*
*/
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tip-max-width: [Deprecated] in favor of setting `max-width` on tips directly - Specifies the maximum width of a slotted `calcite-tip` within the component.
* @prop --calcite-tip-manager-height: [Deprecated] use `--calcite-tip-manager-content-height` instead - Specifies the maximum height of a slotted `calcite-tip` within the component.
* @prop --calcite-tip-manager-background-color: The background color of the component.
* @prop --calcite-tip-manager-heading-text-color: The heading text color of the component.
* @prop --calcite-tip-manager-text-color: The text color of the component.
* @prop --calcite-tip-manager-border-color: The border color of the component.
*
* @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
*/

:host {
@apply bg-foreground-1
text-color-2
text-n1h
@apply text-n1h
box-border
block;

* {
@apply box-border;
}

--calcite-tip-manager-height: 19vh;
background-color: var(--calcite-tip-manager-background-color, var(--calcite-color-foreground-1));
color: var(--calcite-tip-manager-text-color, var(--calcite-color-text-2));
}

:host([closed]) {
Expand All @@ -35,20 +40,21 @@
@include header();

.header {
@apply border-color-3
border-0
@apply border-0
border-b
border-solid
py-0;

padding-inline-end: theme("padding.0");
padding-inline-start: theme("padding.4");
border-color: var(--calcite-tip-manager-border-color, var(--calcite-color-border-3));

.heading {
@apply text-color-1
text-1h
@apply text-1h
p-0
font-bold;

color: var(--calcite-tip-manager-heading-text-color, var(--calcite-color-text-1));
}
}

Expand All @@ -72,15 +78,14 @@
p-4;
animation-name: none;
animation-duration: var(--calcite-animation-timing);
block-size: var(--calcite-tip-manager-height);
block-size: var(--calcite-tip-manager-content-height, 19vh);
&:focus {
@apply focus-outset;
}
}

::slotted(calcite-tip) {
@apply m-0 border-none;
max-inline-size: var(--calcite-tip-max-width);
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
}

.tip-container--advancing {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,31 @@ export const bosnianLocale_TestOnly = (): string =>
html`<calcite-tip-manager heading-level="1" lang="bs">
<calcite-tip id="one" heading="test"><p>no pre-selected attribute</p></calcite-tip>
</calcite-tip-manager>`;

export const themed_TestOnly = (): string => html`
<calcite-tip-manager
style="
--calcite-tip-max-height: 200px;
--calcite-tip-manager-background-color: orange;
--calcite-tip-manager-text-color: red;
--calcite-tip-manager-border-color: purple;
"
>
<calcite-tip-group group-title="Astronomy">
<calcite-tip heading="The Red Rocks and Blue Water">
<img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
<p>
This tip is how a tip should really look. It has a landscape or square image and a small amount of text
content. This paragraph is in an "info" slot.
</p>
<a href="http://www.esri.com">This is the "link" slot.</a>
</calcite-tip>
<calcite-tip heading="The Long Trees">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
<p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
<p>In astronomy, the terms object and body are often used interchangeably.</p>
<a href="http://www.esri.com">View Esri</a>
</calcite-tip>
</calcite-tip-group>
</calcite-tip-manager>
`;
Loading