Component/language drop down #5982

Rounak-stha · 2023-10-11T18:25:47Z

Description

This PR creates LanguageDropDown component. The figma design is followed and the component is tested visually.
This PR also removes the leftover files from the previus design as mentioned in the issue.

Validation

Dark Mode:

Light Mode:

Related Issues

Addresses #5981

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
I have run npx turbo format to ensure the code follows the style guide.
I have run npx turbo test to check if all tests are passing.
I've covered new added functionality with unit tests if necessary.

vercel · 2023-10-11T18:25:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2023 0:12am

components/Common/LanguageDropDown/index.module.css

components/Common/LanguageDropDown/index.stories.tsx

github-actions · 2023-10-11T18:33:58Z

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	95% (285/300)	76.81% (53/69)	93.33% (56/60)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
29	0 💤	0 ❌	0 🔥	6.857s ⏱️

components/Common/LanguageDropDown/index.tsx

ovflowd · 2023-10-11T18:40:07Z

Does the Radix component support a scroll/max amount of items to render / maxheight?

Rounak-stha · 2023-10-12T03:25:37Z

Does the Radix component support a scroll/max amount of items to render / maxheight?

Yes, it does. I've set the max-height and here's what it looks like.

In Firefox

In Chrome

I'm finding a way to change webkit colors in dark mode for webkit.

Radix also ships a Scroll-area component if want to use that.

NOTE: The scrollbar width will be included in the width of the container.

ovflowd · 2023-10-12T08:57:57Z

I'm finding a way to change webkit colors in dark mode for webkit.

I think that is done with color-scheme. Not sure if Storybook is respecting that yet; But we also haven't configured it yet I supposed (on our base-styles) (We might want to add color-scheme: dark for when the [data-theme="dark"] global style being applied.

components/Common/LanguageDropDown/index.tsx

Rounak-stha · 2023-10-12T17:09:44Z

I think that is done with color-scheme. Not sure if Storybook is respecting that yet; But we also haven't configured it yet I supposed (on our base-styles) (We might want to add color-scheme: dark for when the [data-theme="dark"] global style being applied.

I am trying this but it's not working. The media query for preferred-color-scheme: dark always fires as it's the default setting in my machine even when settng the color-scheme.

ovflowd · 2023-10-12T20:32:30Z

I think that is done with color-scheme. Not sure if Storybook is respecting that yet; But we also haven't configured it yet I supposed (on our base-styles) (We might want to add color-scheme: dark for when the [data-theme="dark"] global style being applied.

I am trying this but it's not working. The media query for preferred-color-scheme: dark always fires as it's the default setting in my machine even when settng the color-scheme.

Don't worry about that. That is a Storybook-specific issue. That happens because Storybook itself, sets itself (its own theme) to what matches your system, so it actually overrides whatever we set as color-scheme.

We might be able to disable that on Storybook and I can investigate that, but for now. Don't worry about it not working on your Storybook. You can check the behaviour, if you inspect the iframe HTML element and remove the "color-scheme" that Storybook injects.

Rounak-stha · 2023-10-13T02:57:32Z

I am using the theme() function to use tailwind colors but it results in error when linting (npx turbo lint) and formatting (npx turbo format) .
Any suggestions?

ovflowd · 2023-10-13T11:42:20Z

I am using the theme() function to use tailwind colors but it results in error when linting (npx turbo lint) and formatting (npx turbo format) . Any suggestions?

Can you show how are you using it?

Rounak-stha · 2023-10-13T14:01:17Z

Can you show how are you using it?

Using color-scheme did not work for me even outside storybook.
Instead, I did this.

[data-theme='dark'] .dropDownContent {
  --language-drop-scrollbar-bg: theme('colors.neutral.900');
  --language-drop-scrollthumb-bg: theme('colors.neutral.800');
}

[data-theme='dark'] .scrollbar {
  scrollbar-color: var(--language-drop-scrollthumb-bg)
  var(--language-drop-scrollbar-bg);
}

ovflowd · 2023-10-13T15:18:26Z

Can you show how are you using it?

Using color-scheme did not work for me even outside storybook. Instead, I did this.

[data-theme='dark'] .dropDownContent {
  --language-drop-scrollbar-bg: theme('colors.neutral.900');
  --language-drop-scrollthumb-bg: theme('colors.neutral.800');
}

[data-theme='dark'] .scrollbar {
  scrollbar-color: var(--language-drop-scrollthumb-bg)
  var(--language-drop-scrollbar-bg);
}

Why are you trying to manually style the scrollbar?

Rounak-stha · 2023-10-13T15:49:13Z

Why are you trying to manually style the scrollbar?

because the default is ugly

ovflowd · 2023-10-13T20:24:31Z

Why are you trying to manually style the scrollbar?

because the default is ugly

It changes browser by browser OS by OS. It's not part of our styling to style the scroll wheel.

ovflowd · 2023-10-15T09:53:19Z

@Rounak-stha can you rebase your PR? 👀

- Proper Component Name - Use Predefined Tailwind Class - Pass Handler as Prop

Rounak-stha · 2023-10-15T12:14:46Z

@Rounak-stha can you rebase your PR? 👀

Hey, just did the rebase. 🤞

components/Common/LanguageDropDown/index.module.css

ovflowd

Everything else besides of those two minor things look ok :)

bmuenzenmeyer · 2023-10-15T13:37:34Z

@ovflowd what do you think of wrapping the button in https://www.radix-ui.com/primitives/docs/utilities/accessible-icon ? I noticed this utility just now when creating the ThemeToggle component story

ovflowd · 2023-10-16T07:57:59Z

@ovflowd what do you think of wrapping the button in radix-ui.com/primitives/docs/utilities/accessible-icon ? I noticed this utility just now when creating the ThemeToggle component story

Shouldn't the Icon be wrapped? Not the button? Or whatÄs the difference?

- Replace Tabs with Spaces - Use Tailwind Default Class for Dropdown Content

Rounak-stha · 2023-10-16T12:18:03Z

@ovflowd what do you think of wrapping the button in https://www.radix-ui.com/primitives/docs/utilities/accessible-icon ? I noticed this utility just now when creating the ThemeToggle component story

Isn't the dropdown trigger button already accessible?

ovflowd · 2023-10-16T12:49:32Z

@ovflowd what do you think of wrapping the button in radix-ui.com/primitives/docs/utilities/accessible-icon ? I noticed this utility just now when creating the ThemeToggle component story

Isn't the dropdown trigger button already accessible?

Yeah, I think so... @bmuenzenmeyer?

bmuenzenmeyer · 2023-10-16T13:40:25Z

Keyboard, sure. It mentions screen reader a11y too. I can test if my copy of JAWS still works.

We can consider this non-blocking for this PR and I will look to address globally in another issue.

Rounak-stha requested a review from a team as a code owner October 11, 2023 18:25

vercel bot deployed to Preview October 11, 2023 18:26 View deployment

ovflowd added hacktoberfest This Issue is meant for Hacktoberfest 2023 github_actions:pull-request Trigger Pull Request Checks labels Oct 11, 2023

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Oct 11, 2023

ovflowd deployed to Storybook October 11, 2023 18:32 — with GitHub Actions View deployment