Feat/update toast #482

keiya01 · 2022-07-19T09:32:21Z

Toastをアップデートし、以下の要素を追加しました。

先頭にinformation iconが表示されるようになりました
- variant="information"の時は非表示できます
close buttonの追加
variantの追加(information, confirmation, error)
複数表示のサポート

information	confirmation	error

TODO

approve後にcommitをまとめます
今回のToastをベースにSnack Barを実装します

reg-suit · 2022-07-19T09:32:23Z

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴🔴🔴🔴
⚪⚪⚪⚪⚪⚪⚪
⚫
🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

github-actions · 2022-07-19T09:39:36Z

Visit the preview URL for this PR (updated for commit d1dd07a):

https://ameba-spindle--pr482-feat-update-toast-jyt8819o.web.app

_{(expires Sat, 17 Sep 2022 03:25:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

keiya01 · 2022-07-19T10:04:39Z

Toastのbundlesizeが1.1kbを超えてしまった、、

herablog · 2022-07-19T11:23:25Z

packages/spindle-ui/src/Toast/Toast.css

@@ -1,5 +1,31 @@
 :root {
  --Toast-z-index: 1;
+
+  /* Information */
+  --Toast-IconButton--information-color: var(


Q: スタイルをカスタマイズできる要望は結構ありそうですかな。Toastはvariantである程度スタイル分かれてるのでそれでよかったりしないか確認したいかもです！

カスタマイズできなくて良さそうでした:pray:

修正しました！
757ae1e

packages/spindle-ui/src/Toast/Toast.css

packages/spindle-ui/src/Toast/Toast.tsx

keiya01 · 2022-07-20T03:06:50Z

packages/spindle-ui/bundlesize.config.json

+      "path": "./dist/Toast/*.mjs",
+      "maxSize": "1.5 kB"


Toastのmjsだけbundlesize増やしました

くぅ、惜しいｗ

947b71f
ああ、、コンフリクトの解決おかしくなっていたので修正しました:bow:

keiya01 · 2022-07-20T03:07:36Z

packages/spindle-ui/src/Toast/Toast.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { CheckCircleFill, CrossBold, Information } from '../Icon';
 import { IconButton } from '../IconButton';
+import '../IconButton/IconButton.css';


Dialogと同様にIconButton.cssはToast内で読み込むようにしました

fa3995f
cssで読み込むようにしました

packages/spindle-ui/src/Toast/Toast.tsx

herablog · 2022-07-20T04:22:52Z

packages/spindle-ui/src/Toast/Toast.tsx

-  hasError?: boolean;
-};
+} & (
+  | { variant: Variant['information']; hasInfoIcon: boolean }


(他の箇所での実例がまだなさそう？だけど、) 表示、非表示系のbooleanはhide*, show* or display* にしようかと思っているのですがどでしょう。あと以下の前提だと、表示がデフォルトでもよさそうですが、その辺仕様確認したいです〜。

variant="information"の時は非表示できます

あとも一点、「informationのときにだけアイコン消せる」仕様の重要度や意図確認しておきたいです！重要度が高ければこのままコードでも担保するでよしで、あくまでガイドレベルであればvariant関わらず利用時に指定するでもいいかもしれないです。

f8dc16d
修正しました！

packages/spindle-ui/src/Toast/Toast.tsx

herablog · 2022-07-20T05:43:47Z

packages/spindle-ui/src/Toast/Toast.stories.mdx

-        variant={hasError ? 'danger' : 'outlined'}
-        onClick={() => setMessage('Toast Content')}
+        variant={variant === "error" ? 'danger' : 'outlined'}
+        onClick={() => setMessage(_message || 'Toast Content')}


今更で恐縮なのですが、Storyのテキストをより実態に合わせた日本語にしていこうプロジェクト #162 がありまして、程よいタイミングで変えていきたいデス！Figmaの例に合わせても良い気がしてます。

8aa0ceb
修正しました！

herablog · 2022-07-20T07:23:01Z

packages/spindle-ui/src/Toast/Toast.tsx

      ref={transitionElementRef}
    >
      <div
-        className={`${BLOCK_NAME}--content ${errorContentClassName}`}
+        className={`${BLOCK_NAME}-content ${BLOCK_NAME}-content--${variant}`}
        tabIndex={0}


Q: ここをフォーカスする機能はなくしてもいいかなっていう話があった気がしますが、今回含めず別途にしますかな

この状態で出すのも微妙な気がするのでこのPRで修正しちゃいます:pray:
#482 (comment)

5bc833c
focus外しました！

itsminadesu

💬

packages/spindle-ui/src/Toast/Toast.css

keiya01 · 2022-07-21T08:36:03Z

position=bottomが動いてなかったので修正しました:pray:
b9f0da9

keiya01 · 2022-07-21T08:36:41Z

203110f
iconについての説明をdocsに追記しました

herablog · 2022-07-22T02:12:16Z

packages/spindle-ui/src/Toast/Toast.tsx


 type Props = {
  children?: React.ReactNode;
+  id?: string;


Q: こりは何用だったけっかな

b6dd283
消し忘れでした:pray:

herablog · 2022-07-22T02:14:53Z

packages/spindle-ui/src/Toast/Toast.tsx

+  [K in Position]?: number;
+};
+
+type Variant = {


今の使い方だとUnionでも行けそうな気もするけど、なにか理由あったっけかな。

981e0f1
修正しました！

takami-shunsuke

LGTMです

herablog · 2022-07-25T07:58:17Z

おっ、testコケが

herablog · 2022-07-25T08:06:44Z

packages/spindle-ui/src/Toast/Toast.css

-  z-index: -1;
+.spui-Toast-contentText {
+  font-family: inherit;
+  font-size: 14px;


Q: ここの絶対値は意図した記述ですかな

43340ea
修正しました:pray:

keiya01 · 2022-07-25T09:07:19Z

デザインレビューいただいた部分含めて3つほどコミット追加しました

最初のoffsetのみスペースを取るように修正 ... fix: position offset
close buttonのtransitionEnd eventをpropagateしないように修正 ... fix: fix animation speed and prevent propagating close button's transitionEnd event
refactor: remove unnecessary ref
style: support responsive

takami-shunsuke

挙動、ロジック問題なさそうです！
IMOで細かいところだけ挙げました（前回レビュー漏れですみません）🙏

packages/spindle-ui/src/Toast/Toast.css

packages/spindle-ui/src/Toast/Toast.tsx

takami-shunsuke

keiya01 · 2022-08-01T06:01:39Z

errorのスタイルだけ微修正しました
style: fix error style

herablog · 2022-08-01T08:01:14Z

Formatが必要かも！ (testコケ太郎)

herablog · 2022-08-01T08:13:12Z

packages/spindle-ui/src/Toast/Toast.css

  box-sizing: border-box;
-  color: var(--color-text-accent-primary);
  cursor: default;


これは前からだたけど...default指定しないと問題ありでしたっけかな

これは、、おそらく不要なやつです、、

keiya01 · 2022-08-01T09:19:43Z

storybookでz-indexが効いていなかったので修正しました。合わせて説明も追記しました
test: fix storybook z-index

herablog

BREAKING CHANGE: it changes some behaivior and adds new props

keiya01 requested review from herablog, itsminadesu and takami-shunsuke July 19, 2022 09:32

keiya01 self-assigned this Jul 19, 2022

keiya01 removed request for herablog, itsminadesu and takami-shunsuke July 19, 2022 09:32

keiya01 force-pushed the feat/update-toast branch from b341f15 to 7a24bef Compare July 19, 2022 09:58

keiya01 requested review from herablog, itsminadesu and takami-shunsuke July 19, 2022 10:00

keiya01 force-pushed the feat/update-toast branch from 7a24bef to 2e06cf0 Compare July 19, 2022 10:07

herablog reviewed Jul 19, 2022

View reviewed changes

takami-shunsuke reviewed Jul 20, 2022

View reviewed changes

keiya01 commented Jul 20, 2022

View reviewed changes

herablog reviewed Jul 20, 2022

View reviewed changes

packages/spindle-ui/src/Toast/Toast.tsx Outdated Show resolved Hide resolved

herablog reviewed Jul 20, 2022

View reviewed changes

takami-shunsuke reviewed Jul 20, 2022

View reviewed changes

packages/spindle-ui/src/Toast/Toast.tsx Outdated Show resolved Hide resolved

herablog requested a review from yasuda-shin July 20, 2022 04:57

herablog reviewed Jul 20, 2022

View reviewed changes

itsminadesu reviewed Jul 20, 2022

View reviewed changes

keiya01 force-pushed the feat/update-toast branch from 17169ce to 27cd5bd Compare July 21, 2022 05:47

keiya01 force-pushed the feat/update-toast branch from 203110f to 7d2682d Compare July 21, 2022 08:40

itsminadesu approved these changes Jul 21, 2022 •

edited

Loading

View reviewed changes

herablog reviewed Jul 22, 2022

View reviewed changes

takami-shunsuke approved these changes Jul 25, 2022

View reviewed changes

herablog reviewed Jul 25, 2022

View reviewed changes

herablog mentioned this pull request Jul 26, 2022

feat(spindle-ui): add pagination component #440

Merged

takami-shunsuke reviewed Jul 26, 2022

View reviewed changes

packages/spindle-ui/src/Toast/Toast.css Outdated Show resolved Hide resolved

packages/spindle-ui/src/Toast/Toast.tsx Outdated Show resolved Hide resolved

packages/spindle-ui/src/Toast/Toast.tsx Outdated Show resolved Hide resolved

keiya01 force-pushed the feat/update-toast branch from d680965 to 6e11fd8 Compare July 29, 2022 09:41

takami-shunsuke approved these changes Jul 29, 2022

View reviewed changes

herablog reviewed Aug 1, 2022

View reviewed changes

herablog approved these changes Aug 2, 2022

View reviewed changes

keiya01 force-pushed the feat/update-toast branch 3 times, most recently from 23589bd to d1dd07a Compare August 18, 2022 03:18

feat(spindle-ui): update Toast

45727db

BREAKING CHANGE: it changes some behaivior and adds new props

keiya01 force-pushed the feat/update-toast branch from d1dd07a to 45727db Compare August 18, 2022 03:19

keiya01 merged commit 1500a3d into main Aug 18, 2022

keiya01 deleted the feat/update-toast branch August 18, 2022 05:18

Feat/update toast #482

Feat/update toast #482

Conversation

keiya01 commented Jul 19, 2022

TODO

reg-suit bot commented Jul 19, 2022 • edited Loading

github-actions bot commented Jul 19, 2022 • edited Loading

keiya01 commented Jul 19, 2022

herablog Jul 19, 2022 • edited Loading

Choose a reason for hiding this comment

keiya01 Jul 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsminadesu left a comment

Choose a reason for hiding this comment

keiya01 commented Jul 21, 2022 • edited Loading

keiya01 commented Jul 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takami-shunsuke left a comment

Choose a reason for hiding this comment

herablog commented Jul 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keiya01 commented Jul 25, 2022 • edited Loading

takami-shunsuke left a comment

Choose a reason for hiding this comment

takami-shunsuke left a comment

Choose a reason for hiding this comment

keiya01 commented Aug 1, 2022

herablog commented Aug 1, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keiya01 commented Aug 1, 2022

herablog left a comment

Choose a reason for hiding this comment

reg-suit bot commented Jul 19, 2022 •

edited

Loading

github-actions bot commented Jul 19, 2022 •

edited

Loading

herablog Jul 19, 2022 •

edited

Loading

keiya01 Jul 20, 2022 •

edited

Loading

keiya01 commented Jul 21, 2022 •

edited

Loading

keiya01 commented Jul 25, 2022 •

edited

Loading