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(combobox): ensure icon scales are consistent #8075

Merged
merged 4 commits into from
Oct 30, 2023
Merged

fix(combobox): ensure icon scales are consistent #8075

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
8ca5d00
fix(combobox): ensure icon scales are consistent
jcfranco Oct 27, 2023
2e51d0b
update scale stories to cover icon scales
jcfranco Oct 27, 2023
f808a2a
remove fixed width set on internal icons
jcfranco Oct 27, 2023
2b4c419
improve open stories
jcfranco Oct 30, 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: 1 addition & 3 deletions packages/calcite-components/src/components/combobox/combobox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,7 @@

.icon-end,
.icon-start {
@apply flex
w-4 cursor-pointer
items-center;
@apply flex cursor-pointer items-center;
}

.icon-end {
Expand Down
58 changes: 41 additions & 17 deletions packages/calcite-components/src/components/combobox/combobox.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,21 +497,45 @@ export const clearDisabled_TestOnly = (): string => html`
`;

export const openInAllScales_TestOnly = (): string => html`
<calcite-combobox open scale="s">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open scale="m">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open scale="l">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<div style="display: flex">
<calcite-combobox open placeholder="choose a number" scale="s">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open placeholder="choose a number" scale="m">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open placeholder="choose a number" scale="l">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
</div>
`;

export const openWithPlaceholderIconInAllScales_TestOnly = (): string => html`
<div style="display: flex">
<calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="s">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="m">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
<br />
<calcite-combobox open placeholder="choose a number" placeholder-icon="number" scale="l">
<calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
<calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
<calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
</calcite-combobox>
</div>
`;
8 changes: 6 additions & 2 deletions packages/calcite-components/src/components/combobox/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import { ComboboxChildElement } from "./interfaces";
import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
import { XButton, CSS as XButtonCSS } from "../functional/XButton";
import { getIconScale } from "../../utils/component";

interface ItemData {
label: string;
Expand Down Expand Up @@ -1294,7 +1295,7 @@ export class Combobox
class="selected-icon"
flipRtl={this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl}
icon={!this.open && selectedItem ? selectedIcon : placeholderIcon}
scale="s"
scale={getIconScale(this.scale)}
/>
</span>
)
Expand All @@ -1305,7 +1306,10 @@ export class Combobox
const { open } = this;
return (
<span class="icon-end">
<calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
<calcite-icon
icon={open ? "chevron-up" : "chevron-down"}
scale={getIconScale(this.scale)}
/>
</span>
);
}
Expand Down
Loading