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

fix(list-item, stack): stretch action-menu and handle when placed inside a list-item or stack. #8185

Merged
merged 4 commits into from
Nov 16, 2023
Merged

fix(list-item, stack): stretch action-menu and handle when placed inside a list-item or stack. #8185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
62b303a
fix(list-item, stack): stretch action-menu when placed inside a list-…
driskull Nov 16, 2023
2b65385
fix(list-item, stack): stretch action-menu and handle when placed ins…
driskull Nov 16, 2023
01c20b8
modify stories
driskull Nov 16, 2023
67e3035
update stories
driskull Nov 16, 2023
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
4 changes: 3 additions & 1 deletion packages/calcite-components/src/components/list-item/list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,9 @@ td:focus {

.actions-start,
.actions-end {
::slotted(calcite-action) {
::slotted(calcite-action),
::slotted(calcite-action-menu),
::slotted(calcite-handle) {
@apply self-stretch;

color: inherit;
Expand Down
20 changes: 20 additions & 0 deletions packages/calcite-components/src/components/list/list.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,26 @@ export const onlyLabelVersusOnlyDescription_TestOnly = (): string => html`
</calcite-list>
`;

export const stretchSlottedContent = (): string => html`
<calcite-list ${knobsHTML()}>
<calcite-list-item label="This has no description.">
<calcite-handle slot="actions-start"></calcite-handle>
<calcite-action
slot="actions-start"
appearance="transparent"
text="Banana"
icon="banana"
text-enabled
></calcite-action>
<calcite-action-menu appearance="transparent" slot="actions-end">
<calcite-action appearance="transparent" text="Plus" icon="plus" text-enabled></calcite-action>
<calcite-action appearance="transparent" text="Minus" icon="minus" text-enabled></calcite-action>
<calcite-action appearance="transparent" text="Table" icon="table" text-enabled></calcite-action>
</calcite-action-menu>
</calcite-list-item>
</calcite-list>
`;

export const nestedItems = (): string => html`
<calcite-list ${knobsHTML()}>
<calcite-list-item
Expand Down
4 changes: 3 additions & 1 deletion packages/calcite-components/src/components/stack/stack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@

.actions-start,
.actions-end {
::slotted(calcite-action) {
::slotted(calcite-action),
::slotted(calcite-action-menu),
::slotted(calcite-handle) {
@apply self-stretch;

color: inherit;
Expand Down
15 changes: 15 additions & 0 deletions packages/calcite-components/src/components/stack/stack.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,21 @@ const simpleHTML = html`<calcite-stack>

export const simple = (): string => simpleHTML;

export const stretchSlottedContent = (): string => html`
<calcite-stack>
<calcite-handle slot="actions-start"></calcite-handle>
<calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
Hello World
<calcite-avatar slot="content-end" thumbnail="${thumbnailImage}" scale="s"> </calcite-avatar>
<calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
<calcite-action-menu slot="actions-end" appearance="transparent">
<calcite-action appearance="transparent" text="Plus" icon="plus" text-enabled></calcite-action>
<calcite-action appearance="transparent" text="Minus" icon="minus" text-enabled></calcite-action>
<calcite-action appearance="transparent" text="Table" icon="table" text-enabled></calcite-action>
</calcite-action-menu>
</calcite-stack>
`;

export const simpleDarkMode_TestOnly = (): string => simpleHTML;
simpleDarkMode_TestOnly.parameters = { modes: modesDarkDefault };

Expand Down
Loading