Custom Button Color - Githubissues

the-red commented 3 years ago

Component

Button

Why

標準で用意されている normal submit alert以外に、もっとボタンのカラーバリエーションを追加したい場合があります。

https://github.com/kintone-labs/kintone-ui-component/issues/518 ここに書いたCustom Attributeと同じ方法で、 button.style.color = 'green'とかやるとできますが、疑似要素:hover :focusなどまで対応しようとするとかなり難しく、コンストラクタで色を指定できるようにしていただけるととても嬉しいです。

What

たとえばこんな感じで colorsプロパティがあればその色が優先して使われるとか、いかがでしょう？

  new Button({
    className: 'csv-button',
    text: 'CSV出力',
    colors: {
      text: '#ffffff',
      background: '#3498db',
      activeBackground: '#1d6fa5', // :hover, :focus, :active の3種類に適用
    },
  })

TomokoMiyake commented 3 years ago

@the-red ご意見、仕様のアイデアまでありがとうございます！ id プロパティをつけて階層潜ってスタイルをつけるという方法はありますが、書いていただいている "プロパティとして提供するアイデア" も検討しても良いかもしれません。参考にさせていただきます。

これは Button Component だけでなく、色味をつける他のものも同じイメージでしょうか？（Notification など）

[EN] Thank you for the opinion and the spec idea! There is a way to add id property, go deeper, and attach additional style, but it might be considered to provide as property. Your idea will be useful for our next development.

Do you have the same idea as other components which can select colors? (e.g. Notification)

the-red commented 3 years ago

@TomokoMiyake そうですね。Notificationも似たような感じだと思います。ただ、個人的には圧倒的にButtonの使用頻度が高いので、まずはButtonだけで全然嬉しいですｗ

the-red commented 2 years ago

こちら、めっちゃ待ってるんですけど状況いかがでしょうか・・・？まだ当面は実装されないようでしたら、ひとまずボタンは自分で作る方に舵を切ろうかと思ってます。

TomokoMiyake commented 2 years ago

@the-red お待たせしております。Custom CSS の提供など来年検討を進める予定です。そのために ShadowRoot 対応やアレンジ領域の決めなども必要になりそうなので、すぐにとはいかなさそうです。

the-red commented 2 years ago

@TomokoMiyake ありがとうございます。了解です！また動きあったら教えて下さいませ〜。

TomokoMiyake commented 2 years ago

@the-red お待たせしました。Custom CSS の対応について、Discussions の方に実現アイデアを書き込みました。ご確認の上ご意見いただけると幸いです。 https://github.com/kintone-labs/kintone-ui-component/discussions/963

[EN] I posted the idea for supporting Custom CSS on the Discussions page. Please check it and it will be great if you could give us your opinion. https://github.com/kintone-labs/kintone-ui-component/discussions/963

Thank you!

the-red commented 2 years ago

@TomokoMiyake 確認遅くなって申し訳ないです 🙏 class経由で適用するのですね。とても良いと思います！個人的にほしかったものは、これで完璧に実現できそうです。ありがとうございます 😄

ちなみに、background-color: red;のように標準のCSSプロパティを<style>内に書いた場合は、無視される感じでしょうか？（仕様として気になっただけです）

TomokoMiyake commented 2 years ago

@the-red お忙しいところご確認ありがとうございます！良かったです。 className プロパティを指定して、それ経由でスタイルを追加する形です。 className プロパティで指定した値は最上位の kuc タグに付与されるので、そのタグ階層でハンドリングできる標準の CSS プロパティであれば使えます。ものによっては階層潜って例えば button タグまでいかないとアレンジできないものもあります。なので、回答としては無視はされないです。

the-red commented 2 years ago

@TomokoMiyake 理解しました〜。ありがとうございます 👍

TomokoMiyake commented 2 years ago

@the-red お待たせいたしました。Custom CSS の機能を本日 v1.5.0 でリリースしました。まずは Button, Text コンポーネントのみ対応していて、順次他のコンポーネントもサポートする予定です。詳細はこちらをご確認ください。 https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.5.0

We have released the Custom CSS feature today on v1.5.0. First, we provided it for Button and Text components and other components will be supported in the future one by one. For more details, please check this note. https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.5.0

the-red commented 2 years ago

@TomokoMiyake 待ってましたぁー！！試させてもらいますね！

TomokoMiyake commented 2 years ago

@the-red ありがとうございます。お気づきの点がございましたらまたご連絡ください。

TomokoMiyake commented 2 years ago

@the-red こちらの issue はクローズさせていただいてもいいでしょうか？

the-red commented 2 years ago

@TomokoMiyake 遅くなりすみません！ようやく試せました。いい感じです！！！これでかなり楽にボタンの色を変えることができそうです！ Issueはクローズしてもらって大丈夫です。

一点だけドキュメントについてお願いです。ドキュメントには背景色のプロパティしか載っていませんでした。 https://kintone-ui-component.netlify.app/docs/ja/components/desktop/button#custom-css

当てずっぽうで--kuc-button-text-colorを入れてみたら普通に使えたので、おそらく載せ忘れですよね？ここだけ対応お願いしますー。

TomokoMiyake commented 2 years ago

@the-red お試しいただきありがとうございます！いい感じでよかったです。ドキュメントについて、ご指摘助かりました。以下が漏れていたので追記します。 --kuc-button-height --kuc-button-text-color

次のリリースからまた順次対応コンポーネントも増やしていきますので楽しみにしていてください。

こちらの issue はクローズいたします。

kintone-labs / kintone-ui-component

Custom Button Color #519

Component

Why

What