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.

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

feat: Headerに言語切替UIを実装 #4613

Merged
merged 1 commit into from
May 15, 2024
Merged

Conversation

masuP9
Copy link
Contributor

@masuP9 masuP9 commented Apr 26, 2024

Related URL

Overview

  • 多言語化のシステムを内製する際に言語切替のUIを統一するためにコンポーネントを実装

What I did

  • <LanguageSwitcher> コンポーネントを実装
  • 主に <Header> 内での利用を想定しているため、/Header 配下に作成しているが、単独でも利用できるように、単独でも export している
  • 背景色が変わっても利用できるように invert のスタイルを実装
  • モバイルなどの狭い画面時にスペースを節約するため、 narrow のスタイルを実装

Capture

スクリーンショット 2024-05-08 14 11 46

Storybook: Navigation(ナビゲーション) / Header / LanguageSwitcher - Docs ⋅ Storybook

@masuP9 masuP9 force-pushed the feat/language-switcher branch 10 times, most recently from be931e7 to 5684a10 Compare May 8, 2024 03:26
Comment on lines +73 to +76
const currentLang = useMemo(
() => locale || defaultLocale || Object.keys(localeMap)[0],
[locale, defaultLocale, localeMap],
)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

LanguageSwitcher では、選択された言語を状態として持たず、Propsから受け取るのみ。

return (
<Dropdown {...props}>
<DropdownTrigger>{narrow ? NarrowTrigger : Trigger}</DropdownTrigger>
<DropdownContent onKeyDown={handleKeyDown} role="presentation">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

<DropdownContent> 内のキーボード操作をキャプチャするために DropdownContentonKeyDown を設定。ESLintのエラー回避のために role="presentation" を付与

@masuP9 masuP9 force-pushed the feat/language-switcher branch 2 times, most recently from 75cc625 to 3e1730b Compare May 8, 2024 05:43
@masuP9 masuP9 marked this pull request as ready for review May 8, 2024 05:48
@masuP9 masuP9 requested a review from a team as a code owner May 8, 2024 05:48
@masuP9 masuP9 requested review from oti, AtsushiM, nabeliwo, k-shirahama, TakahiroHimi and ntfd0 and removed request for a team May 8, 2024 05:48
@masuP9 masuP9 force-pushed the feat/language-switcher branch 2 times, most recently from 1746ea7 to 1bd4c7b Compare May 8, 2024 06:33
@masuP9 masuP9 requested a review from versionfive May 8, 2024 06:38
Copy link
Member

@nabeliwo nabeliwo left a comment

Choose a reason for hiding this comment

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

LGTM 🎉
今使っているプロダクトのコンポーネントを差し替えてもそのまま使えそうでした!

Copy link
Contributor

@oti oti left a comment

Choose a reason for hiding this comment

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

LGTM!

@versionfive
Copy link
Contributor

LGTM!
新しいホームでは微妙な余白調整をしているので、上書きしたいところはありますが、全体的にはよさそうです!!

Copy link
Contributor

@k-shirahama k-shirahama left a comment

Choose a reason for hiding this comment

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

コードfmfmとChromaticの確認をしました!
LGTM 🎉

Copy link

@ntfd0 ntfd0 left a comment

Choose a reason for hiding this comment

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

👍 👍 👍 👍 👍 👍 👍 👍

Copy link
Contributor

@TakahiroHimi TakahiroHimi left a comment

Choose a reason for hiding this comment

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

LGTM!実装超絶感謝です!

@masuP9 masuP9 force-pushed the feat/language-switcher branch from 1bd4c7b to 7c64a3b Compare May 14, 2024 05:58

Verified

This commit was signed with the committer’s verified signature.
marcuslimdw Marcus
@masuP9 masuP9 force-pushed the feat/language-switcher branch from 7c64a3b to 967a227 Compare May 15, 2024 06:12
@masuP9 masuP9 merged commit 3b6e5f8 into master May 15, 2024
8 checks passed
@masuP9 masuP9 deleted the feat/language-switcher branch May 15, 2024 06:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants