他のバリアントと同列ではなく、TailwindCSS独自のユーティリティ機能を使った例のように見えて、わざわざバリアントとして並べるのは違和感がある気がする。

解決策として考えられるのは、ドキュメントにして、使用例などで示す、その際にTailwindCSSのユーティリティだということもしっかり明記しておいたほうがある意味フェアじゃないだろうか？（うちで作ったものではないため）

現在aria-label属性とdata-label属性に同じような文字列が設定されており、それによってdata-labelがないのであればツールチップを表示しないような使い分けが可能になっています

https://github.com/tuqulore/tuqulore-ui/blob/6dbffb7ed1a19aa6db9d627bd06ed3f539dbeda3/packages/tailwindcss/stories/IconButton.stories.js#L8-L10

https://github.com/tuqulore/tuqulore-ui/blob/6dbffb7ed1a19aa6db9d627bd06ed3f539dbeda3/packages/tailwindcss/iconButton.js#L26-L27

現在のスタイルはツールチップがあらかじめ考慮されているので、ツールチップを表示しないことが考えにくいのであれば、aria-labelのみ設定する想定にしてもよいかと思いました

• リリース作業をおこなう
• 作業後 #21 でドキュメンテーションする
• developブランチを廃止する #43

どのケースでどのように使うか、どのように使うべきでないか、といった文章による説明が必要。

mdx形式で表現するのがやりやすいと思われる
https://storybook.js.org/docs/html/api/mdx#writing-stories

ringのバリアントはstoryにて示す。

最近は整形はeslintではなくprettierにまかせたほうがいいのではないかと思っているため

• どのようなコンポーネントが必要か
• どのようなドキュメンテーションが必要か

を検討したプロトタイプがあるので、それをwebsiteディレクトリに移行する

#41 の残タスク

OGP画像の見せかたは比較的パターンが決まっており、他のCSSフレームワークなどと比較するときの参考になったりする

packages/tailwindcss/docs/ARCHITECTURE.md のようなドキュメンテーションファイルを用意し、現状のCSS設計、スタイルの方針を文書としてまとめる。

関連: #25 #39

• 必ず一番上のストーリーとして表示される
• 文章が記述される #29

参考: https://circuit.sumup.com/?path=/story/introduction-welcome--page

いいねが有効の際のみせかたは検討したほうがいいのか気になりました

Likedというバリアントで表現されていたのですでに実装としては存在していますね
いいねがアクティブになっているように認識できていなかった、という話でしょうか(デザインにおける指摘)

Originally posted by @knokmki612 in #54 (comment)

#19 でlernaをセットアップしたがどのようにリリースするのか決まっていない

現在のスタイルの設計方針として

BEMとの比較

• Block: Component
• Element: クラスとしては定義しない。疑似要素、タグセレクタなどによって表現する
• Modifier: クラスとしては定義しない。Utilityとの組み合わせで表現するか、異なるComponentとして表現する

となっている。

この方針には .is-active のようなインタラクティブな要素で用いるModifierがカバーできないという問題点がある。

ARIAで提供されているロールの一部は aria-expanded などのような属性が用意されているので、それを使用して回避する。

個人的主観かもしれないのでご意見伺いたい。 @knokmki612 @Tomo416
多分Font Awesome Proの細くて小さいサイズだとまだマシに見えるかも。（これも主観）

TODO: レビュー

https://inside.pixiv.blog/2021/07/01/151500 を読んだ

• Components: デザインの統一性○ 実装の制約○ 実装の柔軟性×
• Utilities: デザインの統一性○ 実装の制約○ 実装の柔軟性○
• Constrants: デザインの統一性× 実装の制約× 実装の柔軟性○

とはいえUtilitiesだけだと付与するクラスがとても多くなる

Utilitiesと組み合わされることを考慮したComponentsが欲しい

• buttonの文字の大きさ
  • 余白をemでつける
  • text-base text-xl などつけたらいい感じに余白がつく

コンポーネントをちょっと変えたいというケースってなに

• 色: 設定で管理できるのでは
• ちょっとみせかたを変えてオリジナリティを出す: そういうのって淘汰されがち
  • あまりよくやることではないしよくやるべきではない
  • tuqulore uiとしてはカバーしたくない

Componentsと組み合わせるUtilitiesは、BEM的にはModifierになりそう
必要なUtilitiesがあまりに多いのであれば、別のComponentsとして分けるとよいのか
例: .button と .outlined-button があるけどそれらは独立していて組み合わせる必要がない

.card-title .card-body .card-image のようなBEM的にElementsになるものはあまり用意しなくていいのでは
Utilitiesで表現できる複雑でないものだと思うから

.button がどの範囲でカスタマイズして使えて、アウトラインなデザインが欲しければ .outlined-button を使ってね、というのはドキュメンテーションのスコープで取り組む

まずはButtonについてStorybook上で @Hidetaro7 が作業して @knokmki612 もみてみて議論することが必要そう

Fontawesomeはfree版だと使いにくい（ルックアンドフィール的に）
もう少しスタイリッシュなものにしたい。
かといってPro版だと汎用性にかける。

以前の話だと、他のアイコンでも実装できることを考えたものにするということもあったが、
ここで見せるサンプルはFontawesome以外のものを使うことに決めたほうがよさそう。。

メモしとく。。

現在ツクロアのUIコンポーネントはFigmaのコンポーネントとして作成され公開される予定。

Figma to React Component https://www.figma.com/community/plugin/959795830541939498/Figma-to-React-Component でReactコンポーネントを生成して配置することも方法の一つとして考えられる。

その場合はtailwindcssは使わないこともあり得る

コンポーネント内で多用しており、コンポーネントクラス以外でも参照するニーズがあると考えられる

拡張するユーティリティ

• width
• height
• mergin
• padding

インナーを取り除くことは出来ないでしょうか。

出来ないのであれば

            "&:only-child": {

のような擬似クラスで表現できますでしょうか。

Originally posted by @knokmki612 in #26 (comment)

TODO: レビュー

#ebebec この程度でいてほしい。

FilledTagに揃えたい

https://github.com/tuqulore/tuqulore-ui/blob/9a8aa2817d502893d8ba437e834325972a14c755/packages/tailwindcss/stories/FillTag.stories.js

プラグインとして作成すると、theme()関数でthemeに定義された変数を参照することはできるが、逆に言えばtheme()関数を使わなければtailwindcssのベーススタイルを反映したスタイルを組まないことになる。

上記を問題点を解決するため、
applyしたクラス群のスタイルを書き、全体あるいは個別のコンポーネント単位で

• tailwindcssで変換済みのcssファイル
• 変換前(applyが展開される前)のcssファイル(ただしsassでuse()などしていたのであればそれらがバンドルされているもの)
• 変換前(applyが展開される前)のsassファイル

のようなバリエーションでimportして使えるような形で提供する。

https://github.com/tuqulore/tuqulore-ui/blob/09a0ee3614f9d9f5341dfcfad16c310895fb9926/packages/tailwindcss/typography.js でtypographyを定義していますが、

@tailwindcss/typography を使用するのであれば不要なのかな？とも思います

いかがでしょう？ @Hidetaro7

このリポジトリより新しいtailwindcss pluginのスタイルが別のプライベートリポジトリに存在するので反映する。

Tagの中にbuttonを使用した場合は閉じるボタンとしてスタイルされる
Tag自身もクリッカブルにしたい場合はbuttonタグでマークアップしたほうがよいが
おそらくbuttonタグのネストはHTMLの仕様に不適合

推奨するマークアップについての議論が必要

なぜしないのか？その理由をドキュメンテーションする。

• 状況によっていくつかのスタイルを使い分ける必要がある、例えば名前のフィールドと複数のチェックボックスだとレイアウトが異なる
• コンセプトとして、デザイナーがある程度意図としているスタイルを付与できるためのフレームワークである、そのため、label要素を強制的にスタイルで縛るのはコンセプトに合致しない
• 他のフレームワークとの差別化という意味でも、開発者がこのフレームワークを選ぶか選ばないかという判断がしやすくなる

といった理由が上げられる。

ChatはGalleryとして用意して、内部で使っている要素をコンポーネントにする

• message-content: Balloonとしてコンポーネント化する
• message-share: Galleryとして用意する
• message-image: 未定
• chat-date: 未定

TODO: レビュー

現状だとprepareが走るタイミングでビルドが走るが、ソースを編集したらビルドが走る状態にしてローカルでのプレビューができるようにしたい

ブラウザの下記のWarningが表示されている

react-dom.development.js:88 Warning: Invalid DOM property `class`. Did you mean `className`?
    in i (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by page)
    in AddContext (created by page)
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer

Originally posted by @Hidetaro7 in #79 (review)

roounded じゃなくて rounded に修正

現在はdemoディレクトリ内でstyle.cssを吐き出すところまでタスクを用意しているが、ローカルプレビュー用のサーバーを立てるなどは手動でおこなう必要がある。

https://github.com/tuqulore/tailwindcss-tuqulore/blob/ea98945ca957ac1a4a00604b0e3ab14c21f10b7d/package.json#L30

• TabをTabsにリネーム
  • ファイル名: Tabs.stories.js, tabs.js, BoxedTabs.stories.js, boxedTabs.js
• TabからBoxedを分離
  • スタイルの共通化はおこなわない
• マークアップにARIAを使用する 参考: https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role#example
• .is-active を取り除く

500が600より暗い。
そもそもどのような経緯で定義を行ってきたのかを忘れているので、再度、カラーの確認をして、ここにメモを残す。

現在 hideki-trial に随時新しいコミットが入っていっていますが、レビューと新規のコミットがいたちごっごのようになり取り扱いにくく感じています。

そこで

• develop ブランチを作る
• 現在の hideki-trial の差分は main ブランチではなく develop ブランチにマージ
• develop ブランチをベースブランチとして、各コンポーネントの粒度でプルリクエストにする
• issueに対応する作業は(可能な範囲で)個別にプルリクエストにする

という方針をとることでプルリクエストが大きくなりすぎず課題解決していけると考えます。いかがでしょうか @Hidetaro7

画面遷移が生じるものについてはaタグ、そうでないものはbuttonタグで用意できた方がよい。その際、同じコンポーネントのスタイルであれば同じ見え方がされていてほしい

#39 に関係するのだが、どこまで実装するべきか一定のルールは決めておきたい。

無理に利用する必要はないと言われているし、WAI-ARIAの仕様も広いしやりだしたらキリがないほど冗長になる。
個人的には必要最低限、例えばaria-selectedなど、状態管理が必須な場合cssクラスで識別しない方法としては有用だと思うがその他の利用についても確認しておきたい。

aria-role : テキスト

役割を示す。例えば <nav>...</nav>と<div role="navigation">...</div>は同じ役割として認識される。
ナビゲーションが目的ならnav要素で良いが、HTML要素を詳細に要素名で役割を認識させるには限界があるため、roleがその役割を担う。
SVGにalt属性が存在しないため、altの代替としても利用可能。

buttonのようなコンポーネントまで付与するべきか？現在、icon-buttonおよびtabsに使っているが強い理由はない。
他の有名フレームワーク（Bootstrap, Bulma, Ant Design）を見ると、buttonに使っているケースは見受けられない。

aria-selected : boolean

選択状態を示す、従来はclass="is-xxxx"として使っていたが、それよりは価値が高いと感じるのでこちらは積極的に使っていきたい。

aria-controls : id名

ID識別子を付与して、他要素との関連付けを行う。
例えばタブやモーダルウインドウなど、ボタンに対してコントロールしたい要素に紐付けるなど。

現状、tabsで使っている。

aria-current : boolean

サイト内の現在地が自分自身だった場合などに使用する。

aria-busy : boolean

何かを処理中、例えば非同期ローディングなどをしめす

GitHub Actionsで設定する

いつもどおり
https://github.com/tailwindlabs/tailwindcss-typography
の通り導入してもエラーが起こる。

今後ドキュメントを書くときなど必要と考えている。

TODO: 移行するStoryのリストアップ

• Accordion
• Avatar
• Badge
• Balloon
• BoxedTab
• Button
• Card
• Chat
• FilledTag
• IconButton
• Input
• Introduction
• LabeledLikeButton
• LikeButton
• LoadingCard
• LoginCard
• OutlinedButton
• ProfileCard
• Select
• SignUpCard
• Spinner
• Tab
• Tag
• TextButton
• Textarea
• ToggleSwitch

React、Vue向けのコンポーネントで

• スタイル: tailwindcss plugin
• コンポーネント: headless ui

実装がすみわけできてよいのでは

ボタン内の文字数によって適切に感じるパディングが変わってくるように思います。

たとえば、現状のStorybook上のボタンは「ボタン」という文字なので、特に左右に多めにパディングが必要ですが、もう少し長い文字数であれば異なるパディングが必要ではないでしょうか。

https://github.com/tuqulore/tuqulore-ui/blob/6dbffb7ed1a19aa6db9d627bd06ed3f539dbeda3/packages/tailwindcss/lib/buttonStyle.js#L8

どのように対処するとよいかから議論させてください。

prettierのembeddedLanguageFormattingを有効にしたが、 "html``" のようなタグテンプレート内でしか整形されないことが分かった。

• タグテンプレートに用いるhtmlを定義するか、定義済みのものがあれば利用する

https://prettier.io/blog/2020/08/24/2.1.0.html#add---embedded-language-formattingautooff-option-7875httpsgithubcomprettierprettierpull7875-by-bakkothttpsgithubcombakkot-8825httpsgithubcomprettierprettierpull8825-by-fiskerhttpsgithubcomfisker

• Accordion
• Avatar
• Badge
• Balloon
• BoxedTab
• Button
• Card
• Chat
• FilledTag
• IconButton
• Input
• Introduction
• LabeledLikeButton
• LikeButton
• LoadingCard
• LoginCard
• OutlinedButton
• ProfileCard
• Select
• SignUpCard
• Spinner
• Tab
• Tag
• TextButton
• Textarea
• ToggleSwitch

https://github.com/tuqulore/tailwindcss-tuqulore/blob/main/theme.js にあるプライマリカラーがリニューアル前のものなので、新しいものに変更する