pixiv / charcoal Goto Github PK

View Code? Open in Web Editor NEW

316.0 7.0 35.0 31.98 MB

Design system library by pixiv

Home Page: https://charcoal-web.pixiv.design/

License: Apache License 2.0

JavaScript 12.26% TypeScript 72.74% Shell 0.06% CSS 10.49% HTML 0.56% MDX 3.88%

design-systems ui-library ui-design

charcoal's People

Contributors

Stargazers

Watchers

charcoal's Issues

Feat: 高さがbodyを超えるModalをスクロールできるようにする

必要だと思う機能の内容を書いてください

高さがbodyを超えるModalをスクロールできるようにする

この機能が必要と考えられる理由を書いてください

内部でスクロールせず、コンテンツが多いモーダルを作成したい

この機能があった場合にどういう動きをするかの例を書いてください

No response

Feat: Tabの実装[charcoal]

必要だと思う機能の内容を書いてください

Tabの実装をお願いします 🙇‍♀️

デザインは Figma の
[Latest]Web Components
をご確認ください

この機能が必要と考えられる理由を書いてください

コンテンツ種別によって表示を切り替えるUIが必要なため

この機能があった場合にどういう動きをするかの例を書いてください

Tabをクリックすると、下のコンテンツが入れ替わる
コンテンツはpaddingなど、中身の見え方などは一切持たない
横に何個表示するのか、スクロールをこちらが持つのか(→月曜日に決めます)

Bug: TextField multilineでフォーカスを外した時のアニメーションがない

できる限り詳細に、不具合の内容と再現方法を報告してください

2023-02-27.18.24.01.mov

&:focus-within {の中でo.outline.defaultを使っているとtransitionがフォーカス外すときに反映されない？

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

styled: テーマ定義用のcss variablesをグローバルではなく局所的に変更可能にする

現状では:rootに対してcss variablesが展開されてしまうため、局所的に別のテーマにしたい場合などで困る。またcreatePortalなどを利用した場合に、htmlのコンテキストは異なったreactのコンテキストを加味したテーマスコープを定義できるようにする必要がある。

テーマのスコープを定義するTokenProviderの追加
<html data-theme=...> 以外の任意の要素に対してdata-theme=...をセットできるようにする

Feat: InputFieldのprefixにReactNodeを入れられるようにする

必要だと思う機能の内容を書いてください

InputFieldのprefixにReactNodeを入れられるようにする

この機能が必要と考えられる理由を書いてください

pixivの検索バーなど、アイコンが中に入っているGUIを作成したいため。

この機能があった場合にどういう動きをするかの例を書いてください

<TextField label='Search' prefix={<pixiv-icon name='16/Search' />} />

Feat: Dropdown Selector に見出しラベルを追加したい, Separatorを任意にしたい

必要だと思う機能の内容を書いてください

見出しがあるパターン(画像右)
見出しがないパターン(画像**下)
- 見出しは必要ないが、選択肢をグルーピングしたいという要望です。

(画像左、画像**上は既に実装していただいてるものです)

この機能が必要と考えられる理由を書いてください

選択肢が多い場合、グルーピングする必要があるため

この機能があった場合にどういう動きをするかの例を書いてください

見出しありパターン

HTMLで言う optgroup に相当するやつです。

見出し(1つ)、選択項目(複数)で、選択項目の最後にborder-bottomを入れてください。

選択項目に任意のタイミングでSeparatorを追加したいパターン

選択項目にborderを挟めるようになる or 選択項目にborder-bottom あり・なしパターンを指定できる(今Figma上のコンポーネントはこちらになってます)

Feat: TextFieldの名前を変更する[charcoal]

必要だと思う機能の内容を書いてください

Storybook

現状TextFieldは Single-line , Multi-line の2種類の実装となっていますが、

Single-line → TextField
Multi-line → TextArea

に名称を変更してください。
(Figmaもそれに合わせて変更対応予定です)

この機能が必要と考えられる理由を書いてください

tree-shakingの問題
refの型の問題

などなどを解決する前の整備として

この機能があった場合にどういう動きをするかの例を書いてください

No response

Feat: Reactのimportを削除する

必要だと思う機能の内容を書いてください

新しい JSX トランスフォームへのアップグレードに従って以下の対応を行う。

未使用import React from 'react'の自動削除スクリプトの実行
eslint-pulugin-reactの以下のルールを無効化
- react/jsx-uses-react
- react/react-in-jsx-scope

tsconfig.baseのcompilerOptions更新

jsx: react → jsx: react-jsx

Reactのimportが不要なった_jsx形式に対応する為に変更。

この機能が必要と考えられる理由を書いてください

React v17からJSXを使用する為にReactをインポートする必要が無くなったため。

この機能があった場合にどういう動きをするかの例を書いてください

_jsx形式（Reactのimportが不要）のプロダクトで、Charcoalのコンポーネントを使った時に発生していたReactの未使用エラーを回避出来る。が、代わりにReact16.x系との後方互換が無くなる破壊的変更でもある。

Feat: tailwind-configのドキュメントを書く

必要だと思う機能の内容を書いてください

tailwind-config そのものの使い方と、生成されるtailwindのクラス名のガイドを用意する

この機能が必要と考えられる理由を書いてください

使い方を示すため

この機能があった場合にどういう動きをするかの例を書いてください

No response

Bug: forkされたリポジトリからのPullRequestだとPreview環境へのデプロイができない

できる限り詳細に、不具合の内容と再現方法を報告してください

forkしたリポジトリからのPullRequestだと「Deploy to Preview Channel」でエラーになります

使用している charcoal および周辺環境

pixiv/charcoal以外からのPullRequest全部

コード例へのリンク

#275

現在の挙動

https://github.com/pixiv/charcoal/actions/runs/4497669665/jobs/7913487137?pr=275

charcoal/.github/workflows/docs-hosting-pr.yml

Lines 47 to 52 in 7732691

 - id: auth 

 uses: google-github-actions/auth@v1 

 with: 

 workload_identity_provider: ${{ env.WORKLOAD_IDENTITY_PROVIDER }} 

 service_account: ${{ env.SERVICE_ACCOUNT_EMAIL }} 

 create_credentials_file: true

で下記のようなエラーが出ます。

Error: google-github-actions/auth failed with: retry function failed after 1 attempt: gitHub Actions did not inject $ACTIONS_ID_TOKEN_REQUEST_TOKEN or $ACTIONS_ID_TOKEN_REQUEST_URL into this job. This most likely means the GitHub Actions workflow permissions are incorrect, or this job is being run from a fork. For more information, please see https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token

期待される挙動

エラーにならない

Bug: TextFieldのprefixがinputの背景色の影響を受ける

できる限り詳細に、不具合の内容と再現方法を報告してください

TextFieldのprefixがinputの背景色の影響を受ける。surface3を上書きした際などに影響が顕著に出る。

下の画像は分かりやすくするためにinputの背景を赤い半透明にしたもの。

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Bug: Modal does not work in StrictMode

できる限り詳細に、不具合の内容と再現方法を報告してください

FocusScope.tsx:516 Uncaught TypeError: Cannot set properties of undefined (setting 'nodeToRestore')

related issue: adobe/react-spectrum#3704

This will be fixed with the new @react-aria/focus.
adobe/react-spectrum#3954 (comment)

使用している charcoal および周辺環境

React 18 StrictMode

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Feat: DropdownSelectorで多くの項目に対応する

必要だと思う機能の内容を書いてください

DropdownSelectorで100個近いリストを表示可能にする

この機能が必要と考えられる理由を書いてください

多くの項目を表示するとその分Popoverが大きくなってしまうため。

この機能があった場合にどういう動きをするかの例を書いてください

現在選択されている項目はPopoverの中心に表示されるようにする。
Popoverは表示可能領域が広い方に対して、表示可能な最大の高さで表示する。

Feat: MultiSelectのpropsを更新する

必要だと思う機能の内容を書いてください

hasErrorをinvalidに変更
forceCheckedを削除
ドキュメントを更新

この機能が必要と考えられる理由を書いてください

hasErrorをinvalidに変更
- 命名を統一するため
forceCheckedを削除
- selectedより指定する用途で十分なため

この機能があった場合にどういう動きをするかの例を書いてください

No response

semver への影響が不明な Pull Request はマージできないようにしたい

必要だと思う機能の内容を書いてください

「この Pull Request をマージすると、次のリリースは major/minor/patch/prerelease のどれになるか」が分かるようにしたい

この機能が必要と考えられる理由を書いてください

現状バージョニングポリシーとして概ね以下の内容を定めている

- major
    - 破壊的変更
- minor
    - 機能追加
    - コンポーネントの追加など
- patch
    - バグ修正
    - 依存関係の更新（ dependabot など ）
- prerelease
    - beta
        - メジャーバージョンの前に雑にあげるときに使う

以前はこういうポリシーがなかったので、PR が approve されたら即座にマージしていた。

が、今後は「この PR は major まで待つ」とかをちゃんとわかるようにしたい（人間が気をつけるだけでは難しい）。

related: #287

また、以前は conventional commit + commitlint を使ってバージョニングの自動計算をしていたが、
運用した感想としては「コミット単位で破壊的変更かを意識するのは難しいし、別にうれしくない（レビューする人間は PR 単位でそれを判断したい）」という結論になった。したがって conventional commit は長期的に廃止したい。

この機能があった場合にどういう動きをするかの例を書いてください

たとえば、特定のラベルが付いていない PR はマージを禁止するなど。

https://github.com/yogevbd/enforce-label-action （ちょっとメンテ状況が怪しい）

これは major minor patch などのラベルの「どれか1つ以上」みたいな条件しか指定できない（間違って2つつけたケースを検知するのは難しい？）。が、少なくともつけ忘れた PR を誤ってマージすることは防げるだろう。

Q. マージされた PR のタグの内容からバージョンを自動計算することは可能か？

これをやるためには「2つのタグの間にあるマージコミット、およびその PR 番号の一覧」がとれる必要がある。

cli/cli#3095 (comment)

これは人間がマージコミットのメッセージをデフォルトのままから変更しない（ Merge pull request # のままである）必要がある。

Feat: Tooltip の実装

必要だと思う機能の内容を書いてください

デザインは Figma の [[Latest]Web Components](https://www.figma.com/file/BBn59QNBqoCwM8wTHKIydC/%5BLatest%5D-Web-Components?node-id=20152%3A8663) をご確認ください。

(不明点は Slack で murokaco 宛にお尋ねください 🙇‍♀️)

この機能が必要と考えられる理由を書いてください

常に表示する必要はないが、補足テキストがないと情報が不十分な場合があるため

例: リンクテキストの情報だけだとユーザーがページ遷移を躊躇うのを「特典がある」と補足することで遷移を促している

この機能があった場合にどういう動きをするかの例を書いてください

表示条件: 対象(リンクや ?アイコンなど)をhover, focusする
配置について: defaultは対象の上に**揃えで表示
- ウインドウサイズよりはみ出る場合
  - 上にはみ出る場合は下に表示
  - 左にはみ出る場合はウインドウにあわせて左寄せで表示する
  - 右にはみでる場合はウインドウにあわせて右寄せで表示する

Bug: CharcoalProviderでTokenInjectorのbackgroundを指定できない

できる限り詳細に、不具合の内容と再現方法を報告してください

CharcoalProviderでTokenInjectorのbackgroundを指定できない．

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

TokenInjectorのbackgroundをCharcoalProviderから指定できる様にする．

Bug: DropdownSelectorの要素のfocus時に背景色がはみ出る

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Bug: 全てのコンポーネントで Props 型を exportして欲しい

できる限り詳細に、不具合の内容と再現方法を報告してください

Checkbox を拡張したコンポーネントを実装しようとしたところ、 CheckboxProps が export されていないため extends した Props が定義できなかった。

一旦、CheckboxProps の定義をコピーして利用しているが、保守性に欠けるので可能であれば型情報も export して欲しい。
これ以外にも対象となるコンポーネントがあるかもしれないので、確認をお願いします。

使用している charcoal および周辺環境

@charcoal-ui/icons, @charcoal-ui/react, @charcoal-ui/theme, @charcoal-ui/tailwind-config

全て 2.6.0

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Doc: docs中に表示されていない画像がある

できる限り詳細に、不具合の内容と再現方法を報告してください

https://github.com/pixiv/charcoal/blob/main/docs/pages/index.md にて、
図・フローチャートの画像が表示されていない。

使用している charcoal および周辺環境

(略)

コード例へのリンク

(略)

現在の挙動

期待される挙動

No response

Bug: ダークテーマのときborderの色が一瞬おかしい

できる限り詳細に、不具合の内容と再現方法を報告してください

ダークテーマのときborderの色が一瞬おかしい。

borderの色はvar(--ではなくrgba(で直接指定されているのが原因だと思われる。

2023-02-15.16.52.21.mov

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Bug: DropdownSelectorが複数ある時PopOverのスタイルがおかしい

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Bug: charcoal-ui/[email protected] is not work with Next.js

できる限り詳細に、不具合の内容と再現方法を報告してください

as title. please check reproduction repository.

使用している charcoal および周辺環境

@charcoal-ui/[email protected]
[email protected]

コード例へのリンク

https://github.com/toshusai/nextjs-charcoal-v2.0.0

現在の挙動

get server error

期待される挙動

no error

Bug: アイコンの色をtext4からtext3に変更して欲しい

できる限り詳細に、不具合の内容と再現方法を報告してください

text4ではコントラスト比が低く、視認性が悪いため、text3に変更したい

該当箇所

textfield の prefix icon:

使用している charcoal および周辺環境

storybook👀

コード例へのリンク

https://pixiv.github.io/charcoal/?path=/story/textfield--prefix-icon

現在の挙動

No response

期待される挙動

No response

Bug: Checkboxのラベル文言が長い場合に表示が崩れる

できる限り詳細に、不具合の内容と再現方法を報告してください

こちらをご参照ください 🙇‍♀️
https://www.notion.so/pixiv/charcoal-Checkbox-white_check_mark-e03e8baa0b79482c917f8a20f130c00c

使用している charcoal および周辺環境

わかりません🙏

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Feat: Dropdown Selector の実装

必要だと思う機能の内容を書いてください

<select> と <option> の実装をお願いします 🙇‍♀️

デザインは Figma の
[Latest]Web Components
をご確認ください(コンポーネント整理中ですが)

この機能が必要と考えられる理由を書いてください

<select> と <option> はよく使われるタグなので。

この機能があった場合にどういう動きをするかの例を書いてください

こちらも[Latest]Web Components にデザインがあるのでご確認お願いします！

Feat: Modal内の左右paddingの調整

必要だと思う機能の内容を書いてください

Figma

非モバイルサイズ(width 984px以上)におけるModal内のpadding調整をお願いします。
左右のpaddingを24px→16pxに変更してください。

この機能が必要と考えられる理由を書いてください

モバイルサイズ(width 984px未満)におけるModal内の左右paddingとの共通化のため。

この機能があった場合にどういう動きをするかの例を書いてください

No response

Bug: TextField(multiline)でerrorよりfocusのoutlineが優先されてしまう

できる限り詳細に、不具合の内容と再現方法を報告してください

TextField(multiline)でerrorよりfocusのoutlineが優先されてしまう

invalid, multilineをtrue
TextFieldにフォーカスする

https://pixiv.github.io/charcoal/?path=/story/textfield--default&args=invalid:true;multiline:false

使用している charcoal および周辺環境

charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

2022-08-04.16.56.13.mov

期待される挙動

focusよりinvalidのアウトラインを優先する

Feat: Radioのpropsを更新する

必要だと思う機能の内容を書いてください

hasErrorをinvalidに変更
forceCheckedを削除
ドキュメントを更新

この機能が必要と考えられる理由を書いてください

hasErrorをinvalidに変更
- 命名を統一するため
forceCheckedを削除
- selectedで十分なため

この機能があった場合にどういう動きをするかの例を書いてください

No response

Bug: `<Button>` を使ったときに Button のスタイルよりも Clickable のスタイルが優先されてしまう

できる限り詳細に、不具合の内容と再現方法を報告してください

Next.js で charcoal-ui/react の <Button> コンポーネントを利用しているページで奇妙な挙動が起きる。

別のページから SPA 遷移してきたときには Button が正しい見た目で表示されるが、ページをリロードするとスタイルが当たらなくなってしまう。

インスペクタで見ると Button の color や background-color が clickableCss に上書きされて inherit になってしまっていることがわかる。スタイルの優先順位が不定になっていそう？

charcoal/packages/react/src/components/Clickable/index.tsx

Line 92 in d2e8ec9

${clickableCss}

使用している charcoal および周辺環境

styled-components 5.3.0+ の環境で @charcoal-ui/react を使うと起きる
（ 5.3.0 に下げると直る）

コード例へのリンク

No response

現在の挙動

Button の color や background-color が不定になる

期待される挙動

Button の color や background-color が優先されて表示される

Bug: sample is not working.

できる限り詳細に、不具合の内容と再現方法を報告してください

sample next.js is not working.

I got error

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_2__.button is not a function

I think cause is install 'styled-components' in top node_modules instead of packages/sample/node_modules.

使用している charcoal および周辺環境

current main branch 7b2b87b

コード例へのリンク

git clone [email protected]:pixiv/charcoal.git
cd charcoal
yarn
yarn build

add Button from '@charcoal-ui/react'

import { createTheme, useTheme } from '@charcoal-ui/styled'
+import { Button } from '@charcoal-ui/react'
const theme = createTheme(styled)

const Home: NextPage = () => {
  const [theme, setTheme, system] = useTheme()

  return (
    <div>
+      <Button>hoge</Button>

yarn dev
open http://localhost:3000/

現在の挙動

get error.

Server Error
TypeError: styled_components__WEBPACK_IMPORTED_MODULE_2__.button is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

期待される挙動

no error

Feat: v3.0.0のDropdownSelectorでSectionに対応する

必要だと思う機能の内容を書いてください

v3.0.0のDropdownSelectorでSectionに対応する

この機能が必要と考えられる理由を書いてください

当該の機能がv3.0.0-betaで実装されていないため

この機能があった場合にどういう動きをするかの例を書いてください

No response

Bug: DropdownSelectorを画面下側で開くと選択肢が見えなくなる

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

charcoal-ui/styled のメンテナビリティを何とかする

必要だと思う機能の内容を書いてください

@charcoal-ui/styled のメンテナビリティを何とかしたい。具体的には以下

利用者向けのドキュメントを充実させる
開発者向けのドキュメントを充実させる
テストを加える
リファクタリングをする

この機能が必要と考えられる理由を書いてください

@charcoal-ui/styled はコンポーネントの基盤となるユーティリティだが、以下の問題を抱えている

ドキュメントが簡易なものしかない
- https://pixiv.github.io/charcoal/docs/#/pages/utilities/styled?id=api
- 利用できるユーティリティが Intellisense で出るようになってるが、入門にやさしいものは別途あったほうが良い
機能追加が難しい
- 全体的にメタプロで成り立ってるのと、src/index.ts にべったり書かれている状況なので新しいユーティリティを追加するのが難しい
- あとテストがない

この機能があった場合にどういう動きをするかの例を書いてください

No response

Feat: Tag Item の実装

必要だと思う機能の内容を書いてください

tagの実装をお願いします 🙇‍♀️

デザインは Figma の
[Latest]Web Components
をご確認ください

この機能が必要と考えられる理由を書いてください

ユーザーがコンテンツに辿り着きやすくなる

この機能があった場合にどういう動きをするかの例を書いてください

タグをクリックすると
- Default の場合: タグの一覧ページに遷移する
- Activeの場合: タグ自体を削除する(例: https://www.pixiv.net/users/14601125/illustrations/ONEPIECE)
background-color について
- Figma: Foundationsにある Tag (9色)を指定できるようになっている
- Figmaブランチにも例がありますが、Dafultは tag color 5 が指定してある感じです。
文字が長くなる場合はellipsisする
テキスト部分は max-width: 152px; としているようです

Bug: DropdownSelectorのButtonがtype=submitになっている

できる限り詳細に、不具合の内容と再現方法を報告してください

不具合の内容

<form>タグ内でDropdownSelectorを使用すると、DropdownButtonのtypeが初期値のsubmitであるために、formがsubmitされてしまう。

再現方法

<form>タグ内でDropdownSelectorを使用する。

使用している charcoal および周辺環境

"@charcoal-ui/react": "3.0.0"

コード例へのリンク

No response

現在の挙動

DropdownButtonを押すとsubmitされる

期待される挙動

DropdownButtonを押してもsubmitされずに選択肢を選択することができる

バンドルサイズが大きすぎる問題

charcoal-ui/react が特に大きそう

Feat: tailwind-config と styled で CSS Variables の命名を揃える

必要だと思う機能の内容を書いてください

tailwind-config と styled で CSS Variables の命名を揃えたい

この機能が必要と考えられる理由を書いてください

tailwind-config と styled はほぼ同じ CSS Variables を提供しているのに、命名が違う。

したがって、@charcoal-ui/tailwind-config と @charcoal-ui/react を両方使っているリポジトリでは、無駄に多くの CSS Variables が定義されてしまう。

この機能があった場合にどういう動きをするかの例を書いてください

@charcoal-ui/utils に変数名を組み立てる良い感じの関数があって、両方が同じものを使うようになる。

一応 tailwind-config 視点では破壊的変更になるだろう

モーダルの実装

ダークテーマのときリンクのコントラストが低い

ダークテーマのときリンクの色が暗く、アクセシビリティが低くなります。Lighthouseで警告が出ます。

Feat: tailwind-diff のドキュメントを書く

必要だと思う機能の内容を書いてください

https://charcoal-web.pixiv.design/ に https://github.com/pixiv/charcoal/tree/main/packages/tailwind-diff についてのドキュメントを書く

この機能が必要と考えられる理由を書いてください

tailwind-config のアプデ時にチェックできるツールとしてみんなに認識して欲しい

この機能があった場合にどういう動きをするかの例を書いてください

No response

Bug: DropDownSelectorの幅を指定したい

できる限り詳細に、不具合の内容と再現方法を報告してください

詳細こちらご参照ください 🙇‍♀️
https://www.notion.so/pixiv/DropdownSelector-width-2779221f1cc44a6394e88efa201a2388

使用している charcoal および周辺環境

わからない…

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

yarn → pnpm 移行（各パッケージの依存のインストール忘れを検知できるようにする）

必要だと思う機能の内容を書いてください

各パッケージの依存のインストール忘れを検知できるようにするツールを使いたい。

選択肢としては以下の通り

Yarn の PnP モードに移行する
- #240
Yarn をやめて pnpm に移行する
- #250
パッケージマネージャはそのままで、eslint-plugin-import などでおかしな import を検知する
- https://zenn.dev/yusukehirao/articles/no-extraneous-dependencies

この機能が必要と考えられる理由を書いてください

#226

現状だとモノレポ内のすべてのパッケージが同じ node_modules を共有しており、各パッケージの package.json に必要な依存が書かれていなかったとしてもなんとなく動いてしまう問題がある。

（たとえば、 @types/react をインストールし忘れてるパッケージがいくつかあるが、特に型エラーにならないので放置されたり気づかないままになってたりする）

これにより、本来 dependencies として追加されてほしいものが誤って devDependencies から読まれてしまう、意図しないものがバンドルされてしまうなどの問題が起こっている

この機能があった場合にどういう動きをするかの例を書いてください

雑に星取表を書くと以下のようになるはず。詳しくは各ツールの PR を参照

	Yarn PnP	pnpm	eslint-plugin-import
依存追加忘れ	インストール時エラー	インストール時エラー	lintエラー
peer dependencies	つど package.json に追加	auto install あり	何もしない
エディタサポート	プラグインが必要（VSCodeのみサポート）	制限なし	制限なし

コンポーネント: Select (Radioの複数選択可能版)

Bug: LoadingSpinner が box-sizing: border-box; で壊れる

できる限り詳細に、不具合の内容と再現方法を報告してください

下記のようなリセットがあるとLoadingSpinnerの表示がおかしくなる

* {
    box-sizing: border-box;
}

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

Feat: TextFieldにautofocus propを追加する

必要だと思う機能の内容を書いてください

HTMLのTextFieldにあるautofocusを実装する

この機能が必要と考えられる理由を書いてください

プロダクトでrefを使ってすでに実装が行われており、特別な機能でもないのでcharcoalで実装すべきであると考えるため

この機能があった場合にどういう動きをするかの例を書いてください

いずれかの手法がある

HTMLのautofocusをそのまま使う
refを使って実装、必要に応じてrefをマージできるようにする

Q. すべてのコンポーネントは className?: string および ref を受け取るべきか

背景

コンポーネントによって className?: string を受け取ったり受け取らなかったりがある
コンポーネントによって forwardRef をしてたりしてなかったりがある
コンポーネントによって（ Web 標準に親しい内容だが） HTMLProps<HTMLInputElement> に準拠してなかったりする

この点について方針が決まってないので、決めたい。

Feat: Badgeのデザイン変更

必要だと思う機能の内容を書いてください

文字色をtext3 ⇒ text2に変更する
paddingを6pxから4pxに変更

詳しい経緯はこちらをご確認ください

この機能が必要と考えられる理由を書いてください

バッジの視認性が低いという問題を解消するため

この機能があった場合にどういう動きをするかの例を書いてください

No response

v2.0.0 をリリースする

#69 をリリースする前にやるべきこと

アイコンが壊れてるのを直したい
- svg を js 文字列で export する
- icons の custom elements で ↑ を使う @fsubal @mimokmt
  - loader の設計を見直す（ extend と ↑ を両立させる）
  - #149
- js 文字列で export されるようになった結果 README が変わるところを直す @mimokmt
- icons/svg/* を消す @mimokmt
- .svg を import するコードを生成するのをやめる? @mimokmt
  - https://github.com/pixiv/charcoal/pull/170/files が来ないようにする
命名が Figma と違うのを直したい
- Select → MultiSelect だけやる @toshusai
independent versioning をやめる
それ以外は後回しで良い

Bug: DropdownSelectorのborderを削除する

できる限り詳細に、不具合の内容と再現方法を報告してください

デザインと一致していないのでDropdownSelectorのトリガーからborderを削除する

使用している charcoal および周辺環境

@charcoal-ui/[email protected]

コード例へのリンク

No response

現在の挙動

No response

期待される挙動

No response

	- id: auth
	uses: google-github-actions/auth@v1
	with:
	workload_identity_provider: ${{ env.WORKLOAD_IDENTITY_PROVIDER }}
	service_account: ${{ env.SERVICE_ACCOUNT_EMAIL }}
	create_credentials_file: true

pixiv / charcoal Goto Github PK

charcoal's People

Contributors

Stargazers

Watchers

Forkers

charcoal's Issues

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

見出しありパターン

選択項目に任意のタイミングでSeparatorを追加したいパターン

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

新しい JSX トランスフォームへのアップグレードに従って以下の対応を行う。

tsconfig.baseのcompilerOptions更新

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

Q. マージされた PR のタグの内容からバージョンを自動計算することは可能か？

必要だと思う機能の内容を書いてください

この機能が必要と考えられる理由を書いてください

この機能があった場合にどういう動きをするかの例を書いてください

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動

できる限り詳細に、不具合の内容と再現方法を報告してください

使用している charcoal および周辺環境

コード例へのリンク

現在の挙動

期待される挙動