About Custom CSS and Button Types

the-red commented 2 years ago

Version

kintone-ui-component v1.5.0

Environment

Operating System: macOS 12.5.1
Browser: Chrome 105.0.5195.125
Node.js version: v14.18.1

Current Behavior

https://github.com/kintone-labs/kintone-ui-component/issues/1172 こちらとも少し関係するのですが、ボタンに対してカスタムCSSで色を変更したときに、元のボタンタイプによって、見た目が若干変わります。

submitの色を、いろいろなパターンにCSSをあてて再現してみました。

submit

まず、元がsubmitだと、全く同じになります。他の色に変えて並べても、サイズ的に違和感ありません。

  const a = new Button({
    type: 'submit',
    text: 'default submit',
  })
  headerMenuSpaceElement.appendChild(a)

  const b = new Button({
    type: 'submit',
    text: 'css changed submit',
    className: 'blue-button',
  })
  headerMenuSpaceElement.appendChild(b)

normal

次にnormalに対してsubmitの色を当てると、 box-shadowがついてしまって、左上だけがnormalっぽい色味になってしまいます。

  const a = new Button({
    type: 'submit',
    text: 'default submit',
  })
  headerMenuSpaceElement.appendChild(a)

  const b = new Button({
    type: 'normal',
    text: 'css changed normal',
    className: 'blue-button',
  })
  headerMenuSpaceElement.appendChild(b)

  const c = new Button({
    type: 'normal',
    text: 'default normal',
  })
  headerMenuSpaceElement.appendChild(c)

alert

alertは、前のIssue https://github.com/kintone-labs/kintone-ui-component/issues/1172 で書いたとおりボタンが小さいので、 CSS適用後も小さいボタンになってしまいます。

  const a = new Button({
    type: 'submit',
    text: 'default submit',
  })
  headerMenuSpaceElement.appendChild(a)

  const b = new Button({
    type: 'alert',
    text: 'css changed alert',
    className: 'blue-button',
  })
  headerMenuSpaceElement.appendChild(b)

  const c = new Button({
    type: 'alert',
    text: 'default alert',
  })
  headerMenuSpaceElement.appendChild(c)

Expected Behavior

type関係なく、カスタムCSSを当てると同じ見た目になるようになると一番うれしいです。

ただ、type: submitを常に使えば綺麗になるのは分かったので、せめてドキュメントに一言注意書きを入れてもらえると有り難いです。

https://kintone-ui-component.netlify.app/docs/ja/components/desktop/button#custom-css ドキュメントのサンプルコードには「submit」にはなっていますね。これはやはり、「暗黙のsubmit推奨」ということだったのでしょうか？

TomokoMiyake commented 2 years ago

@the-red issue の登録ありがとうございます。 type ごとに CSS を指定しているため、Custom CSS を適用した場合でも Custom CSS プロパティとして上書きした部分以外は元の type ごとの CSS を継承します。 type ごとの CSS 差分の必要性については改めて確認して必要に応じて修正対応を入れたいと思います。

submit type を推奨しているわけではないです。用途に応じて使い分けていただけると嬉しいです。よろしくお願いします。

the-red commented 2 years ago

@TomokoMiyake ありがとうございます。 CSSカスタマイズの仕様というよりは、もともとのコンポの仕様ということですね。であれば、あまり深堀りすることはなさそうなのでCloseしようと思います。

https://github.com/kintone-labs/kintone-ui-component/issues/1172 こちらの対応含めて、 CSS差分の必要性や、ドキュメントのわかりやすさは検討お願いします。

自分の中では「CSSカスタマイズ時はsubmitしか使わない」という運用対応にしますｗ

TomokoMiyake commented 2 years ago

@the-red 承知いたしました。ご指摘いただいた部分は、CSS 設定内容を改めて確認の上改善していきたいと思います。

kintone-labs / kintone-ui-component