appwrite / pink Goto Github PK

🔖 Feature description

Update Github Stars UI component in website header

Current UI

Proposed Change

🎤 Pitch

I want to change the UI component in site header to show github stars since:

1. The number next to Github icon and label seems ambiguous as it may represent no of forks , etc . Putting star icon next to it represents that it is github stars .
2. No need to write text Github as label next to Github icon .

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

On elements/input-fields page, clicking a button inside the input field (i.e. to show/hide password, or copy text) causes a whole page refresh.

This happens because most of the input field examples are inside a form, so a button click submits the form by default. The issue would be resolved by setting type="button" on all of these buttons.

<form class="form u-width-full-line u-max-width-500">
  <ul class="form-list">
    <li class="form-item">
      <label class="label">Label</label>
      <div class="input-text-wrapper">
        <input type="password" class="input-text" placeholder="Placeholder" />
        <button
          class="show-password-button"
          aria-label="show password"
          type="button"
        >
          <span class="icon-eye" aria-hidden="true"></span>
        </button>
      </div>
    </li>
    ...
  </ul>
</form>

I have a PR ready if all this sounds alright 😄

As for the Code of Conduct below, I'm getting a 404. This seems to be the correct link.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• Open a side-nav menu collapsible
• Click between two links

👍 Expected behavior

Remain as it is

👎 Actual Behavior

Closes the collapsible section

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• Dark theme is enabled
• User selects code panel with syntax highlighting
• Code has low contrast to selection background, and poor legibility

See dark and light mode comparison below.

👍 Expected behavior

The expectation based on usual best practices is that the highlighted text would be something to contrast directly with the highlight/selection colour (the purple is just an example).

👎 Actual Behavior

Screenshot of example when in dark theme.

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Windows

🧱 Your Environment

Pink v0.0.2 via unpkg CDN.
Windows 10
Chrome and Firefox

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

1. Visit https://codepen.io/omar2205/pen/XWBoWKr
2. Open a debug version (https://user-images.githubusercontent.com/1373867/216283364-f2e64c1d-c53f-425e-9eb3-3eb3e5ccf620.png)
3. Switch to responsive / phone

Even if I deleted everything (even the body element), there are still scrollbars.

It's visible even on https://pink.appwrite.io/getting-started (refresh in responsive mode)

Weirdly enough, this behaviour is only happening in dev tools. When testing on an actual phone, it's not visible.

👍 Expected behavior

There shouldn't be scrollbars

👎 Actual Behavior

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

@appwrite.io/fonts is not in the npm registry, or you have no permission to fetch it.

👍 Expected behavior

N/A

👎 Actual Behavior

N/A

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

Im using this whit an astro project, when i copy and paste the code from de the dos it doesn´t show as is spected

this is my code

<li><button class="card s-xciFPC5Srn6Q"><div class="avatar is-size-large s-xciFPC5Srn6Q"><span class="icon-plus s-xciFPC5Srn6Q"></span></div> <h4 class="text u-font-size-20 u-bold s-xciFPC5Srn6Q" style="text-wrap: balance;">Nueva tienda</h4> <p class="text s-xciFPC5Srn6Q" style="text-wrap: pretty;">Crea una nueva tienda donde podras administrar tus productos y poder
    realizar registros de las mismas
    <button class="button s-yu7OS-GWNOYq"><span class="s-yu7OS-GWNOYq">Open Modal</span></button> <dialog class="modal s-yu7OS-GWNOYq" id="dialog" open=""><form class="modal-form s-yu7OS-GWNOYq" method="dialog"><header class="modal-header s-yu7OS-GWNOYq"><div class="u-flex u-main-space-between u-cross-center u-gap-16 s-yu7OS-GWNOYq"><div class="avatar is-color-orange is-medium s-yu7OS-GWNOYq"><span class="icon-exclamation s-yu7OS-GWNOYq" aria-hidden="true"></span></div> <h4 class="modal-title heading-level-5 s-yu7OS-GWNOYq">Modal title</h4> <button class="button is-text is-small is-only-icon s-yu7OS-GWNOYq" aria-label="Close modal"><span class="icon-x s-yu7OS-GWNOYq" aria-hidden="true"></span></button></div></header> <div class="modal-content u-small s-yu7OS-GWNOYq">Modal label text.</div> <div class="modal-footer s-yu7OS-GWNOYq"><div class="u-flex u-main-end u-gap-16 s-yu7OS-GWNOYq"><button class="button is-text s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button> <button class="button is-secondary s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button></div></div></form></dialog></p></button><!--<Team-card>--><!--<New-store-card>--></li>

👍 Expected behavior

it should be looking like this

👎 Actual Behavior

but it looks like this

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Linux

🧱 Your Environment

in runnin on a wsl machine, in an astro project, i just copy it from the demo
https://github.com/appwrite/demos-for-astro
and upgraded all dependecys
but even i've seen this behavior on a codepen instance

https://codepen.io/Trongar/pen/BabyWaP

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

update README.md to :

1. Include documentation site link .
2. Replace words like Pink Design with documentation website to eliminate ambiguity .

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

npm install @appwrite.io/pink doesn't work. It yields the following error:

+ npm install @appwrite.io/pink
+             ~~~~~~~~~
The splatting operator '@' cannot be used to reference variables in an expression. '@appwrite' can be used only as an argument to a
command. To reference variables in an expression use '$appwrite'.
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : SplattingNotPermitted

This is also true of the repository's readme. Fortunately, all you need to do to fix this is enclose the package name in quotes as follows: npm install "@appwrite.io/pink". I'll make a pull request with this change for your convenience.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

I want to add the the transform scale (1.01) or making the cards little bigger while hovering, which can make the UI more cool.

👍 Expected behavior

It would make the cards little bit bigger while hovering with a smooth transitioning

👎 Actual Behavior

While hovering the cards, it does'nt show any effect

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

Running app with pink design installed

👍 Expected behavior

No Warnings should be generated.

👎 Actual Behavior

Console warnings are generating when you use "u-main-end" or "u-cross-end". Suggest using

autoprefixer: end value has mixed support, consider using flex-end instead

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• "@appwrite.io/pink-icons" to your project
• use <div class="icon-login"></div>

👍 Expected behavior

this icon should appear

👎 Actual Behavior

It's an empty div

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

@appwrite.io/pink - 0.0.6-rc.9

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

There is a typo on the documentation for Responsive page.
"...In Pink Desing responsive library, there is no overlap between the different resolutions"
Desing should be Design instead

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

I found this unwanted feature while exploring the showcases in the main website.

Apparently, if the horizontal space is limited, the component gets stretched, so just open the link and shrink the browser window to reproduce this.

👍 Expected behavior

Not to stretch.

👎 Actual Behavior

Ok, viewport not too stretched so there's enough space to grow:

YACK!

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

On the website, All icon sizes are too small.

💭 Description

Some of the input fields on elements/input-fields page have text overlapping with the icon, and with a icon coming from an external source (1Password Chrome extension in this case). Basically, it needs some padding on the right to accommodate the icon.

I classified this as a documentation issue instead of a bug, as it seems there already is a way to handle this, via style="--amount-of-buttons:1" property, it just wasn't applied to these specific examples.

Although, in the last input example, problem is solved by using a u-padding-indline-end-56 class, instead of using that --amount-of-buttons custom property. Which of the 2 approaches is the recommended one?

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🔖 Feature description

Admin template: dark mode support
More components:

🎤 Pitch

It should be good for everyone

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

On the Home page of the build section, there were two code blocks with the copy button but the copy button doesn't work for some reason.

👍 Expected behavior

Copy code when we click on the copy button.

👎 Actual Behavior

The code doesn't copy when we click on the copy button.

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

Visit Pink, Scroll down to bottom (footer).

See -

👍 Expected behavior

Fix the URLs for the Avatar images or use Initials as fallbacks.

👎 Actual Behavior

Broken Images.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Linux

🧱 Your Environment

Pink seems to be using Cloud in the back.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

Something like this fixes this behaviour

[dir=rtl] .switch:where(:checked)::before {
    transform: translateX(-1rem);
}

👍 Expected behavior

To be this

👎 Actual Behavior

Magic URL dir = 'rtl'
Passowrd dir = 'ltr'

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

When I add $theme-dark: ".theme-dark"; to my CSS, the application stops working. See attached image. Note that I included the lang="scss" attribute in the style tag.

I am using Windows 11 but will test on Linux and update my findings.

👍 Expected behavior

Apply the dark theme to the app

👎 Actual Behavior

Application errors out

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

To improve the readme file of pink/apps
/kitchensink/ , It's one of the important part of the repository so it's should have a proper readme file.

I'll made sure to add every feature and usage of the kitchenspink folder in the repository.

Please assign me this issue to improve the file under hacktoberfest label

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🔖 Enhancement description

Update the footer year in the documentation to reflect the current year (2024). This enhancement ensures that users have access to accurate and up-to-date information without manual intervention.

🎤 Pitch

Keeping the footer year up to date is crucial for maintaining the accuracy and credibility of our documentation. Users rely on our documentation to be current and trustworthy, and an outdated footer can undermine their confidence in the information provided.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🔖 Feature description

There are several classes in appwrite pink, let's just assume three classes c1, c2 and c3.

I only use c1, I am also getting c2 and c3 bundled which is just useless load for me, and this thing for applies to other users as well who are using a certain amount of classes and not the entirety.

Can we make it such that only the css you use gets bundled?

🎤 Pitch

Taking in example from Tailwind CSS

"Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project."

• https://tailwindcss.com/docs/optimizing-for-production

Can something similar be done for appwrite pink?

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

hover on the top of the checkbox which is disabled. it will change the cursor to the pointer.

👍 Expected behavior

Ideally, since the checkbox is disabled we should not show a cursor pointer in this case. we can either set the cursor to not-allowed. or just remove the cursor pointer if the checkbox is disabled.
here is an example of how it should work in a disabled state.

👎 Actual Behavior

hover on the top of the checkbox which is disabled. it will change the cursor to the pointer.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• Go to the home page, using a 4k viewport, or a small mobile phone viewport
• Scroll down to the sticky tabs (Design, Build, Collaborate)
• Navigate between sections

👍 Expected behavior

The tabs should accurately dictate which section is currently visible

👎 Actual Behavior

The tabs show an active session other than the one visible

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🔖 Feature description

To improve the user experience and save time, I propose adding a feature that allows users to copy the icon names by simply clicking on the icons. When a user clicks on an icon, the icon name should be automatically copied to their clipboard, allowing them to easily paste it wherever they need it.

This feature would not only save time for users but also reduce the likelihood of errors when manually copying icon names. It would make the Pink application more user-friendly and efficient.

🎤 Pitch

This feature should be implemented because it would make it much easier and faster for users to work with the Pink application's icons. Currently, users have to manually copy the icon names to use them in code or other applications, which can be a tedious and error-prone process. By allowing users to simply click on an icon to copy its name, we can greatly streamline this workflow and save users time and effort.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

💭 Description

When we visit https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md and follow the setup guidelines we see that it instructs us to clone appwrite ui repository eventhough the repository is https://github.com/appwrite/pink, thus this needs to be changed.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

1. Start a new Nuxt3 project: npx nuxi@latest init <project-name>
2. Run command npm install "@appwrite.io/pink"
3. In app.vue, add:

<script>
  import "@appwrite.io/pink-icons"
</script>

4. Start the dev server.

There's an error message from postcss about too much recursion in the Stackblitz example.
Locally, the terminal gets blank and none of the styling is working.
https://stackblitz.com/edit/nuxt-starter-yqsbtw?file=app.vue

👍 Expected behavior

I expect it to work as per the documentation - that I will be able to use the design system on my pages and in my components.

👎 Actual Behavior

There's an error message from postcss about too much recursion in the Stackblitz example.
Locally, the terminal gets blank and none of the styling is working.
https://stackblitz.com/edit/nuxt-starter-yqsbtw?file=app.vue

From Stackblitz:

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• On mobile, go to https://pink.appwrite.io/foundations/border-radius
• Scroll first table to the right

👍 Expected behavior

The description should be larger

👎 Actual Behavior

The description is on a tight space

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

So while I was going through the documentation, and opened this page of Box Model-> https://pink.appwrite.io/utilities/box-model , I see the Github stars were not visible on this particular page in my Edge Browser.

Thus I can work on this issue.

👍 Expected behavior

👎 Actual Behavior

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🔖 Feature description

You should add https://github.com/github/accessibility-alt-text-bot, or have another way (I'll volunteer!) to add alt-text to your images for accessibility.

🎤 Pitch

Since appwrite/pink is accessibility forward, alt-text on images is imperative to meet compliance standards. If you don't want to add a bot, I volunteer to make pull requests to add alt-text to your images. Accessibility is my thing.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

1. Copy the npm install command from the Pink Design Getting Started page

2. Run the command in Powershell

👍 Expected behavior

The npm install should work.

👎 Actual Behavior

The npm install fails.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Windows

🧱 Your Environment

N/A

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

• Go to code panel component page
• Change theme from dark mode to light mode

👍 Expected behavior

Code panel's text color should remain the same

👎 Actual Behavior

The text color changes

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Linux

🧱 Your Environment

Firefox

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

👟 Reproduction steps

When we move to the site and scroll down, we confront "design" section where there is "storage" button. As we click on the button we see it is getting redirected to https://pink.appwrite.io/users.html which shows

👍 Expected behavior

As we click on other buttons of design section we see it gets redirected to the homepage and thus it needs to change in this button too.

👎 Actual Behavior

This happened

🎲 Appwrite version

Version 1.2.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct