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: tab buttons touch target #170

Merged
merged 3 commits into from
Oct 10, 2024
Merged

fix: tab buttons touch target #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d0635a6
fix: tab buttons touch target
phoebus-84 Oct 10, 2024
d98e657
fix: feedback close button touch target
phoebus-84 Oct 10, 2024
ea30f34
tests: update tests
phoebus-84 Oct 10, 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
4 changes: 2 additions & 2 deletions src/components/feedback/d-feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ export class DFeedback {
<div class="w-6 h-6">{this.type === 'success' ? successIcon : errorIcon}</div>
<d-text>{this.feedback}</d-text>
</div>
<button onClick={this.onClose} class="w-12 h-12 flex items-center justify-end">
<div class="w-5 h-5">{closeIcon}</div>
<button onClick={this.onClose}>
<div class="w-12 h-12 flex items-center justify-end">{closeIcon}</div>
</button>
</div>
{this.message && (
Expand Down
4 changes: 2 additions & 2 deletions src/components/feedback/test/d-feedback.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ describe('d-feedback', () => {
</div>
<d-text></d-text>
</div>
<button class="w-12 h-12 flex items-center justify-end">
<div class="h-5 w-5">
<button>
<div class="w-12 h-12 flex items-center justify-end">
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
<g id="x">
<path clip-rule="evenodd" d="M4.29279 4.29259C4.48031 4.10512 4.73462 3.99981 4.99979 3.99981C5.26495 3.99981 5.51926 4.10512 5.70679 4.29259L9.99979 8.58559L14.2928 4.29259C14.385 4.19708 14.4954 4.1209 14.6174 4.06849C14.7394 4.01608 14.8706 3.9885 15.0034 3.98734C15.1362 3.98619 15.2678 4.01149 15.3907 4.06177C15.5136 4.11205 15.6253 4.18631 15.7192 4.2802C15.8131 4.37409 15.8873 4.48574 15.9376 4.60864C15.9879 4.73154 16.0132 4.86321 16.012 4.99599C16.0109 5.12877 15.9833 5.25999 15.9309 5.382C15.8785 5.504 15.8023 5.61435 15.7068 5.70659L11.4138 9.99959L15.7068 14.2926C15.8889 14.4812 15.9897 14.7338 15.9875 14.996C15.9852 15.2582 15.88 15.509 15.6946 15.6944C15.5092 15.8798 15.2584 15.985 14.9962 15.9873C14.734 15.9895 14.4814 15.8888 14.2928 15.7066L9.99979 11.4136L5.70679 15.7066C5.51818 15.8888 5.26558 15.9895 5.00339 15.9873C4.74119 15.985 4.49038 15.8798 4.30497 15.6944C4.11956 15.509 4.01439 15.2582 4.01211 14.996C4.00983 14.7338 4.11063 14.4812 4.29279 14.2926L8.58579 9.99959L4.29279 5.70659C4.10532 5.51907 4 5.26476 4 4.99959C4 4.73443 4.10532 4.48012 4.29279 4.29259Z" fill="currentColor" fill-rule="evenodd" id="Vector"></path>
Expand Down
10 changes: 7 additions & 3 deletions src/components/icon/d-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export class DIcon {
@Prop() outline: boolean = false;
@Prop() size: number = 24;
@State() private pathData: { d: string; fill?: string; stroke?: string }[];
@State() private fillAndStroke: { fill: string; stroke: string };
@State() private pathList: HTMLElement[];
@State() private visible = false;
private intersectionObserver: IntersectionObserver;
Expand All @@ -22,6 +23,7 @@ export class DIcon {
this.visible = true;
await this.loadIconPathData();
this.generatePathList();
this.getFillAndStroke();
});
}

Expand All @@ -37,18 +39,20 @@ export class DIcon {
}

render() {
const fill = this.outline ? 'none' : 'currentColor';
const stroke = this.outline ? 'currentColor' : 'none';
const { size } = this;
return (
<Host>
<svg xmlns="http://www.w3.org/2000/svg" fill={fill} stroke={stroke} height={size} width={size} viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 24 24" {...this.fillAndStroke}>
{this.pathList}
</svg>
</Host>
);
}

@Watch('outline') private getFillAndStroke(): void {
this.fillAndStroke = this.outline ? { fill: 'none', stroke: 'currentColor' } : { fill: 'currentColor', stroke: 'none' };
}

@Watch('icon') private async loadIconPathData(): Promise<void> {
const { icon, visible } = this;
if (!Build.isBrowser || !icon || !visible) {
Expand Down
3 changes: 2 additions & 1 deletion src/components/tab-button/d-tab-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class DTabButton {
const icon = icons[this.tab];
if (!icon) return null;

return <d-icon icon={icon} size={28} {...(this.active ? {} : { outline: true })} />;
return <d-icon icon={icon} size={28} outline={!this.active} />;
};

return (
Expand All @@ -32,6 +32,7 @@ export class DTabButton {
tab={this.tab}
href={`/${this.tab}`}
class={{
'h-12 w-12 block': true,
'text-on-alt': !this.active,
'text-on': this.active,
}}
Expand Down
2 changes: 1 addition & 1 deletion src/components/tab-button/test/d-tab-button.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('d-tab-button', () => {
expect(page.root).toEqualHtml(`
<d-tab-button tab="home">
<mock:shadow-root>
<ion-tab-button class="text-on-alt" href="/home" tab="home">
<ion-tab-button class="block h-12 text-on-alt w-12" href="/home" tab="home">
<div class="relative w-fit">
<d-icon icon="home" outline="" size="28"></d-icon>
</div>
Expand Down