Feat: New Compound Tag Component #381

HarshMN2345 · 2025-10-29T14:18:56Z

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.)

changeset-bot · 2025-10-29T14:19:02Z

⚠️ No Changeset found

Latest commit: cf1b6a2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

appwrite · 2025-10-29T14:19:02Z

Pink

Project ID: 688b850d003678e26eb4

Sites (1)

Site	Status	Logs	Preview	QR
pink `688b852d002905ceebe1`	Ready	View Logs	Preview URL

Tip

Cursor pagination performs better than offset pagination when loading further pages.

coderabbitai · 2025-10-29T14:19:27Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat-SER-464-Compound-Tag

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-10-29T14:19:58Z

🚀 Previews available on pkg.vc!

📦 `@appwrite.io/pink-svelte`

Install @appwrite.io/pink-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cf1b6a2

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte~feat-SER-464-Compound-Tag
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte!381

📦 `@appwrite.io/pink-icons-svelte`

Install @appwrite.io/pink-icons-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@cf1b6a2

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte~feat-SER-464-Compound-Tag
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte!381

TorstenDittmann · 2025-10-29T14:52:29Z

v2/pink-sb/src/lib/CompoundTag/Child.svelte

+    /* Size variants */
+    :global(.compound-tag.xs) .child {
+        --p-compound-tag-child-font-size: var(--font-size-xs);
+        --p-compound-tag-child-padding-block: var(--space-1);
+        --p-compound-tag-child-padding-inline: var(--space-3);
+    }
+
+    :global(.compound-tag.s) .child {
+        --p-compound-tag-child-padding-block: var(--space-1);
+        --p-compound-tag-child-padding-inline: var(--space-3);
+    }


we should avoid using :globals 👍🏻

we can try and use context for it

TorstenDittmann · 2025-10-29T14:53:18Z

v2/pink-sb/src/lib/CompoundTag/Child.svelte

+        > * {
+            display: inline-flex;
+            align-items: center;
+            vertical-align: middle;
+        }


this one might not work, since svelte considers this an unused class

TorstenDittmann · 2025-10-29T14:53:32Z

v2/pink-sb/src/lib/CompoundTag/Child.svelte

+<style lang="scss">
+    @use '../../scss/mixins/transitions';
+
+    .child {


you can just do button { here 👍🏻

TorstenDittmann · 2025-10-29T14:54:05Z

v2/pink-sb/src/lib/CompoundTag/Child.svelte

+    class="child"
+    class:code={variant === 'code'}
+    class:selected
+    class:disabled


i dont see this class being used 👍🏻

HarshMN2345 added 2 commits October 20, 2025 09:47

compound tag

b429c6a

added stories

b9bf637

HarshMN2345 changed the base branch from main to next October 29, 2025 14:19

HarshMN2345 and others added 2 commits October 29, 2025 14:24

removed extra stories

f61dd8d

Merge branch 'next' into feat-SER-464-Compound-Tag

b92d102

HarshMN2345 requested review from ItzNotABug and TorstenDittmann October 29, 2025 14:24

HarshMN2345 added 2 commits October 29, 2025 14:30

lint fixes

d40a62b

added on:click

a438881

TorstenDittmann reviewed Oct 29, 2025

View reviewed changes

fixes and design changes

7c771ee

HarshMN2345 requested a review from TorstenDittmann October 31, 2025 06:44

Merge branch 'next' into feat-SER-464-Compound-Tag

cf1b6a2

HarshMN2345 changed the base branch from next to feat-SER-205-new-expansion-table-component November 4, 2025 11:54

HarshMN2345 changed the base branch from feat-SER-205-new-expansion-table-component to next November 4, 2025 11:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat: New Compound Tag Component #381

Feat: New Compound Tag Component #381

Uh oh!

HarshMN2345 commented Oct 29, 2025

Uh oh!

changeset-bot bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

appwrite bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 29, 2025

Review skipped

Uh oh!

github-actions bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

TorstenDittmann Oct 29, 2025

Uh oh!

TorstenDittmann Oct 29, 2025

Uh oh!

TorstenDittmann Oct 29, 2025

Uh oh!

TorstenDittmann Oct 29, 2025

Uh oh!

TorstenDittmann Oct 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Feat: New Compound Tag Component #381

Are you sure you want to change the base?

Feat: New Compound Tag Component #381

Uh oh!

Conversation

HarshMN2345 commented Oct 29, 2025

What does this PR do?

Test Plan

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

Uh oh!

changeset-bot bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

appwrite bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pink

Uh oh!

coderabbitai bot commented Oct 29, 2025

Review skipped

Uh oh!

github-actions bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Previews available on pkg.vc!

📦 @appwrite.io/pink-svelte

📦 @appwrite.io/pink-icons-svelte

Uh oh!

TorstenDittmann Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

TorstenDittmann Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

TorstenDittmann Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

TorstenDittmann Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

TorstenDittmann Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Oct 29, 2025 •

edited

Loading

appwrite bot commented Oct 29, 2025 •

edited

Loading

github-actions bot commented Oct 29, 2025 •

edited

Loading

📦 `@appwrite.io/pink-svelte`

📦 `@appwrite.io/pink-icons-svelte`