story

• gw-3281
• slack 連携ボタンのデザインを刷新する

task

• ボタン作成

ゴール

slack button を押下したときにアニメーションが正常に動作する。

ゴールイメージ

• これまで
  
• これから
  • 編集部分
    
  • コメント部分
    

アプローチ

• 本タスクは shintaro-o より引き継いだ経緯がある。

  • 理由は、cloudサイドで差込のタスクが入ったためだ。

• アクションの実装や、サイズ・色の実装は終了しているところから始まる。

• 本タスクは fb 修正から始まる。

  • fb 内容
    • 1回目
      • svg内の不要なものを取り除く。clear
      • セレクタの指定。 clear
      • atomic design の理解

atomic design について

• ５つの phase からなる

  • atom
  • molecules
  • organism
  • template
  • page

【共有したい事項】

• atom や molecules でデザインを指定すればそれがどこでも通用する。
• 一方、色の指定は今回 light と dark があるので このスタイルは atom に指定するのではなく、scss/theme に指定するべき

fb を受けて改善したこと

これまでは

• .grw-slack-otification のスタイルは _on-edit.scss に記載していた。

これからは

• .grw-slack-notification という molecules をどこでも使えるようにしたいので、molecules にデフォルトで使用できるものを作成した。
  • 今回で言えば、edit と comment

【共有したい事項】

• before
• after
• デザイナーが作成した image の設置の仕方。
  • svg file として作成した場合、 background-image: url で特定の url を指定する。

苦戦したところ

comment 部分の slack button が反応しないという事態に陥った。

• コメント部分

• 実際のアプローチ

  • SlackNotification.jsx で指定している BS4 の適応順序が違うと思い強弱関係を洗い出した。
  • 問題を単純にしていく。
    • BS4 の修飾をどんどん外していく。
    • すると、htmlfor の部分で挙動が悪い方向で一致する。
      • yusuketk に相談した。　　
      • 開発者ツールを用いて、仮の id 渡し、id を一意に決定した。
      • 無事想定された挙動になる。

【共有したい事項】

• 修飾を外す。単純化して考える
• id の一意性

まとめ

• 共有したいこと
  • atomic design
  • before
  • after
  • デザイナーが作成した image の設置の仕方。
    • svg file として作成した場合、 background-image: url で特定の url を指定する。
  • 修飾を外す。単純化して考える
  • id の一意性