検索結果のラベルが二重になってしまっている。

[machida]

同じclassがあるので、divの方を消す。

[machida]

@hirano-vm4
good first issueの次として、こちらをアサインさせていただきました🙏

[hirano-vm4]

@komagata @machida

お疲れ様です！

1点確認になります🙏こちらのissueでは重複して同じクラスが指定されていることにより、同じCSSがあたっているため（<span>と<div>）、それを解消するIssueになります。

その修正方法についてのご相談と提案になります。

結論

まず、結論からお伝えすると、重複してしまっているclassを削除するのはdiv側と指定されていますが、span側でも問題ないでしょうか？という確認になります。

理由

この部分はReactで作成されています。
該当ファイル：app/javascript/components/Searchable.jsx

該当箇所の呼び出し部分

        {!searchable.is_user && (
          <div className="card-list-item__label">{labelContent}</div>
        )}

呼び出されているlabelContent

  const labelContent =
    searchable.model_name === 'regular_event' ? (
      <span className="card-list-item__label-inner is-sm">
        定期
        <br />
        イベント
      </span>
    ) : searchable.model_name === 'event' ? (
      <span className="card-list-item__label-inner is-sm">
        特別
        <br />
        イベント
      </span>
    ) : searchable.model_name === 'practice' ? (
      <span className="card-list-item__label-inner">
        プラク
        <br />
        ティス
      </span>
    ) : (
      <span className="card-list-item__label"> // こちら
        {searchable.model_name_with_i18n}
      </span>
    )

呼び出し側にもclassName="card-list-item__label"、呼び出される側のelse部分もclassName="card-list-item__label"が指定されているため、「定期イベント」「特別インベント」「プラクティス」は通常表示され（これらはclassName="card-list-item__label"を呼び出し側で適用させた上でinnerのCSSが正しくあたっている）、それ以外のイベントについては再び同じクラスを指定しているため、結果今回のようなバグに繋がっています🧐

div側を削除すると、「定期イベント」「特別インベント」「プラクティス」すべての三項演算子の条件式に

<span className="card-list-item__label card-list-item__label-inner">

のように書かなければならなくなるのと、CSSクラスが適用される要素の階層が同じなのが問題なのか表示がずれてしまいます。

これを解決するには、

 const labelContent =
    searchable.model_name === 'regular_event' ? (
      <div className="card-list-item__label">
        <span className="card-list-item__label-inner is-sm">
          定期
          <br />
          イベント
        </span>
      </div>
    ) : searchable.model_name === 'event' ? (
      <div className="card-list-item__label">
        <span className="card-list-item__label-inner is-sm">
          特別
          <br />
          イベント
        </span>
      </div>
    ) : searchable.model_name === 'practice' ? (
      <div className="card-list-item__label">
        <span className="card-list-item__label-inner">
          プラク
          <br />
          ティス
        </span>
      </div>
    ) : (
      <span className="card-list-item__label">
        {searchable.model_name_with_i18n}
      </span>
    )

このようにすべての条件に改めてそれぞれdivで条件をあてる必要があり、かなり冗長になってしまいそうです🧐（すいません。私の能力的に良い方法が思いつかないだけの可能性もあります🙏その場合は、ご指摘ください。）

今回提案したspan側のほうのclassName="card-list-item__label"を削除すると一箇所のみの修正で済み、表示のずれもありません。

  const labelContent =
    searchable.model_name === 'regular_event' ? (
      <span className="card-list-item__label-inner is-sm">
        定期
        <br />
        イベント
      </span>
    ) : searchable.model_name === 'event' ? (
      <span className="card-list-item__label-inner is-sm">
        特別
        <br />
        イベント
      </span>
    ) : searchable.model_name === 'practice' ? (
      <span className="card-list-item__label-inner">
        プラク
        <br />
        ティス
      </span>
    ) : (
      <span>　// この部分のみの修正
        {searchable.model_name_with_i18n}
      </span>
    )

この方向性で修正して良いかの確認になります！お忙しいかと思いますが、お手隙の際に回答いただけると助かります🙏

[machida]

@hirano-vm4 ありがとうございます！spanの削除でも大丈夫そうですね！これでいきましょう🙆‍♂️

[hirano-vm4]

@machida
遅くまでお疲れ様です！回答いただきありがとうございました🙏引き続き、よろしくお願いいたします🙇‍♂️

[hirano-vm4]

本番環境で問題なくmergeされていることを確認したためIssueをcloseします。