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

Jump to bottom

feat: pink v2 cleanup #1621

Merged
merged 3 commits into from
Jan 22, 2025
Merged

feat: pink v2 cleanup #1621

merged 3 commits into from
Jan 22, 2025

Conversation

TorstenDittmann
Copy link
Contributor

What does this PR do?

(Provide a description of what this PR does.)

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

ArmanNik
ArmanNik reviewed Jan 21, 2025
View reviewed changes
src/lib/elements/forms/inputDate.svelte
Comment on lines 58 to +95

<svelte:component this={wrapper} {fullWidth}>
<Label {required} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
<Label {required} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>

<div class="input-text-wrapper">
<input
{id}
{disabled}
{readonly}
{required}
step=".001"
{min}
{max}
autocomplete={autocomplete ? 'on' : 'off'}
type="date"
style={disabled ? '' : 'cursor: pointer;'}
class="input-text"
bind:value
bind:this={element}
on:invalid={handleInvalid}
on:click={function () {
this.showPicker();
}}
style:--amount-of-buttons={isNullable ? 2.75 : 1}
style:--button-size={isNullable ? '2rem' : '1rem'} />
{#if isNullable}
<ul
class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
<li class="buttons-list-item">
<NullCheckbox checked={value === null} on:change={handleNullChange} />
</li>
</ul>
{/if}
</div>
{#if error}
<Helper type="warning">{error}</Helper>
<div class="input-text-wrapper">
<input
{id}
{disabled}
{readonly}
{required}
step=".001"
{min}
{max}
autocomplete={autocomplete ? 'on' : 'off'}
type="date"
style={disabled ? '' : 'cursor: pointer;'}
class="input-text"
bind:value
bind:this={element}
on:invalid={handleInvalid}
on:click={function () {
this.showPicker();
}}
style:--amount-of-buttons={isNullable ? 2.75 : 1}
style:--button-size={isNullable ? '2rem' : '1rem'} />
{#if isNullable}
<ul
class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
<li class="buttons-list-item">
<NullCheckbox checked={value === null} on:change={handleNullChange} />
</li>
</ul>
{/if}
</svelte:component>
</div>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
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 we need to wrap the component in a Stack otherwise the label and the error might be have the wrong gap with the input depending on the parent

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh yeah, these should be replaced completely anyway by pinkv2 component

src/lib/elements/forms/inputDateTime.svelte
Comment on lines +62 to +93
<Label {required} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>

<div class="input-text-wrapper">
<input
{id}
{disabled}
{readonly}
{required}
{value}
{step}
autocomplete={autocomplete ? 'on' : 'off'}
type="datetime-local"
class="input-text"
bind:this={element}
on:input={handleInput}
on:invalid={handleInvalid}
style:--amount-of-buttons={isNullable ? 2.75 : 1}
style:--button-size={isNullable ? '2rem' : '1rem'} />
{#if isNullable}
<ul
class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
<li class="buttons-list-item">
<NullCheckbox checked={value === null} on:change={handleNullChange} />
</li>
</ul>
{/if}
</div>
{#if error}
<Helper type="warning">{error}</Helper>
<div class="input-text-wrapper">
<input
{id}
{disabled}
{readonly}
{required}
{value}
{step}
autocomplete={autocomplete ? 'on' : 'off'}
type="datetime-local"
class="input-text"
bind:this={element}
on:input={handleInput}
on:invalid={handleInvalid}
style:--amount-of-buttons={isNullable ? 2.75 : 1}
style:--button-size={isNullable ? '2rem' : '1rem'} />
{#if isNullable}
<ul
class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
<li class="buttons-list-item">
<NullCheckbox checked={value === null} on:change={handleNullChange} />
</li>
</ul>
{/if}
</FormItem>
</div>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}
Copy link
Member

Choose a reason for hiding this comment

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

This one need to be wrapped too

src/lib/elements/forms/inputOTP.svelte
<div class="options-list">
<slot name="options" />
</div>
{#if label}
Copy link
Member

Choose a reason for hiding this comment

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

Needs to be wrapped?

src/lib/elements/forms/inputOTP.svelte
{/if}

<div class="input-text-wrapper">
<input
Copy link
Member

Choose a reason for hiding this comment

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

We have an OTP component in Pink 2

src/lib/elements/forms/inputTags.svelte
</div>
<input
Copy link
Member

Choose a reason for hiding this comment

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

We have input Tags in Pink 2

src/lib/elements/forms/inputTags.svelte
</Drop>
{/if}
</Label>
<input
Copy link
Member

Choose a reason for hiding this comment

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

Wrap

src/lib/elements/forms/inputTime.svelte
<Label {required} {optionalText} hide={!showLabel} for={id}>
{label}
</Label>
<Label {required} {optionalText} hide={!showLabel} for={id}>
Copy link
Member

Choose a reason for hiding this comment

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

Wrap

src/lib/layout/logs.svelte
@@ -347,7 +346,7 @@
Logs are retained in rolling {hoursToDays(limit)} intervals
with the {tier} plan.
{#if $organization.billingPlan === BillingPlan.FREE}
<Button link href={$upgradeURL}>Upgrade</Button> to increase
<Button href={$upgradeURL}>Upgrade</Button> to increase
Copy link
Member

Choose a reason for hiding this comment

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

We need to use the Link component here

src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -259,7 +258,7 @@
<Label class="label u-margin-block-start-16">Select plan</Label>
<p class="text">
For more details on our plans, visit our
<Button href="https://appwrite.io/pricing" external link>pricing page</Button>.
<Button href="https://appwrite.io/pricing" external>pricing page</Button>.
Copy link
Member

Choose a reason for hiding this comment

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

Use Link component

src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
Comment on lines +66 to +73
per resource listed below. <Button on:click={() => ($showUsageRatesModal = true)}
>Learn more about plan usage limits.</Button>
</p>
{:else if $organization.billingPlan === BillingPlan.PRO}
<p class="text">
On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
per resource listed below. <Button
on:click={() => ($showUsageRatesModal = true)}
link>Learn more about plan usage limits.</Button>
per resource listed below. <Button on:click={() => ($showUsageRatesModal = true)}
>Learn more about plan usage limits.</Button>
Copy link
Member

Choose a reason for hiding this comment

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

Link component

@TorstenDittmann TorstenDittmann marked this pull request as ready for review January 22, 2025 22:56
@TorstenDittmann TorstenDittmann merged commit a74835c into feat-pink-v2 Jan 22, 2025
0 of 2 checks passed
@TorstenDittmann TorstenDittmann deleted the feat-pink-v2-partly-cleanup branch January 22, 2025 22:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ArmanNik ArmanNik ArmanNik left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@TorstenDittmann @ArmanNik