diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png new file mode 100644 index 00000000000..7ce2481f0b1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:941a54965451987d524dae2a678b78af0d30bf5284798fa8c2be63c4d022cfa6 +size 1961 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png new file mode 100644 index 00000000000..9f8d828c5a9 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:12ec4e01e502d01cec02b70a679bf2d8ab00462a714c67697268d0efe05dd037 +size 1937 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png new file mode 100644 index 00000000000..b1d7b5f7d77 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4ef057723203d9c5330c4b60d3ad40b81d6c51d3228eb2130513a32fb27f10ea +size 1961 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..5a69ef17869 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:197f5dccf1076e1f5e62a1627314a5894e124f6fe14ac367eca8111233f2a339 +size 2016 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png new file mode 100644 index 00000000000..32c5464a91e --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:96c32f534c0c290a82fcd14983730ec0fe2b313be9fc851c2bcc550035b50713 +size 1940 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..1061e7e039f --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:40b5881b8540db333db50207cee6cb4bd8e622162ec80d7ea41b02363227d23a +size 1966 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022.png new file mode 100644 index 00000000000..829bb621a4d --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d10594fef7b6bc2f6460b3678b415d30747891041e1f1236bfec1ba447aa32e2 +size 1783 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022Dark.png new file mode 100644 index 00000000000..7e409a01993 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/chrome2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7455bac9a637752caa2cf18e99aba88e3a99baac135cdd22d052d44f408cd0eb +size 1668 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022.png new file mode 100644 index 00000000000..4f08aba61ea --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6d1ba042558464eacffb433101bb3980e53200ce8ecf7ddb6a25498b59f183aa +size 1708 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022Dark.png new file mode 100644 index 00000000000..e3d9f94ecb0 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/firefox2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8cd1db2e9d0e1ed5c1dcab127540a67be550be09f54287f879df31ddc6d1f137 +size 1599 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022.png b/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022.png new file mode 100644 index 00000000000..006a987a208 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:286409d0a3c29ec9ce42d5d97531f815d4f46a3c27d6a79823ccedc9b54a3c4f +size 73710 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022Dark.png new file mode 100644 index 00000000000..5be9e2c21cf --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/chrome2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:102d66b21beee916d9a90416f5db46319d4aa382145ea675717dc150140f00cd +size 76436 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022.png b/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022.png new file mode 100644 index 00000000000..f2a6a3718d9 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e1e55d14ef0b0330c846f2568f78ede4441418bc5dbe92fc00e54398dc4bf18b +size 86385 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022Dark.png new file mode 100644 index 00000000000..b191d421691 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/firefox2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1aa6a20d1bb933ee6d7ec46a645522e4dcf886e5480c1091c6b9781abdf49a6f +size 87301 diff --git a/packages/react-ui/.creevey/images/Link/Focused Styled Link/tab press/firefox2022/tabPressHovered.png b/packages/react-ui/.creevey/images/Link/Focused Styled Link/tab press/firefox2022/tabPressHovered.png index d7376641711..70838ff6ec5 100644 --- a/packages/react-ui/.creevey/images/Link/Focused Styled Link/tab press/firefox2022/tabPressHovered.png +++ b/packages/react-ui/.creevey/images/Link/Focused Styled Link/tab press/firefox2022/tabPressHovered.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ad5ce98a4d5a3028e7cc83aebdbe6b5040a2fb1fda8888e910e51360be598310 -size 1332 +oid sha256:8ef4fb6d6619d3d3fb4a2c2f6b57c04cff1b2db51194941cc1dfcd005f087a35 +size 1447 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022.png new file mode 100644 index 00000000000..de72c58a703 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:11680a63f5b6ec43dfd49361ea9109e64b12ba97f5b0b5499fda21289af51302 +size 1969 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022Dark.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022Dark.png new file mode 100644 index 00000000000..2a76598b5c4 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/chrome2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f5a114a8740c33d59fb5515719695a005e1d3d0b99d3189a150e117695cfd358 +size 1952 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022.png new file mode 100644 index 00000000000..7f1d82709a9 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b1341a6b081dcc91165737e5fb022a0f92c10051b21d3be4f94572ef5f0181e0 +size 2103 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022Dark.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022Dark.png new file mode 100644 index 00000000000..44e06a895dc --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/firefox2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:30c175515954fda00ddbc9b3abb4365fe20320a21861e29f901a5ab4a3dc83c7 +size 2102 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022.png b/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022.png new file mode 100644 index 00000000000..d9ed3e26c2d --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a547d5555e0da8f417f96f99357f3c815812b6f2ee71dea1c0fc7ff79169d37b +size 47940 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022Dark.png b/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022Dark.png new file mode 100644 index 00000000000..81671010f38 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/chrome2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:084e54b0ab4a4a7af63f515ed71a46b63b99b41958d8c6c2b02ab72c51924e98 +size 47878 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022.png b/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022.png new file mode 100644 index 00000000000..33bd2acf45b --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:372e2ab0e49ad87ae50ec55bdad02c56f291d7ab0168b356ce953b02c5322436 +size 48335 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022Dark.png b/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022Dark.png new file mode 100644 index 00000000000..ab5f29adf89 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/firefox2022Dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:572d2bb4c3011b3d57044a787aaac6eccfbc109b2d00971ce789ce2a1f200770 +size 48191 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022/hover.png b/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022/hover.png index ec594a5b39c..99d57bc524b 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022/hover.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f42dd601bfa666eae86e7f61255b9bcfa527da00677abcb4599aac840c8d0de3 -size 6202 +oid sha256:92712ca51aabb98d1c0cb3885e741fb41983cd7e5a7fb09cc56c2c87a739009c +size 10809 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022Dark/hover.png b/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022Dark/hover.png index e399282958c..1fabf6d2a72 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022Dark/hover.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/hover/firefox2022Dark/hover.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:430c612536736dd3b44333bf437ac22ac152d06e08f77090632bd6e3bdbc9d7f -size 6281 +oid sha256:ce986d9a086774e925380085850ac90c73c7a33938e80e7e62fed9b8f98ae4e1 +size 10725 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022/idle.png index f49a0f03206..ebea9440cc5 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022/idle.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fd78c93f84171aaabccebc23687c8e678c3629e265342445d49a9bc3640c1ee5 -size 6573 +oid sha256:bb239a05f2b1017e79d283d0f7e00f59fd019d1228819b07b0247b24cf92a79c +size 10646 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022Dark/idle.png index ab9b3006e63..744ef292ad9 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022Dark/idle.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/idle/chrome2022Dark/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fd2cdbec3e9fde0b484dd2a282353f02b640334691bae25abee2a6e787721894 -size 6452 +oid sha256:b26161c025ca4acd824ab333728c71945dd7eac6c5e755ec07bce41417a7bc94 +size 10605 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022/idle.png index 2dc3454bd34..dcc4974d4f3 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022/idle.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:280665dff3b5b421eccd0fc3aec1eb2a500e07aae5d2aaa3540500e9c58a6503 -size 6198 +oid sha256:e26f5210d4ebfb146795e5244db5333b5215da800d140519c7d983ef6690be15 +size 10809 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022Dark/idle.png index 1e11219c8d7..9035c9c5b02 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022Dark/idle.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/idle/firefox2022Dark/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aded080490f56cce7b6a32dedaa355d2dce422f8bf4afcdcd208c0da6139d05b -size 6122 +oid sha256:9fc08bf339f88703243376233fedd4eaf1bc7a0831f4ea7ae3f8b07e736b63fd +size 10554 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPress.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPress.png index 4708afff2d7..86555b36669 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPress.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPress.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0507c617925b991e544ed52664a6d7ece3b6feced30b5540bfad53a1201957f0 -size 6767 +oid sha256:fce2e7c38a8c1e2014d21b9b017724fe13d9757bf1c3c98a210033137ad0d788 +size 10805 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPressHovered.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPressHovered.png index 4708afff2d7..86555b36669 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPressHovered.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022/tabPressHovered.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0507c617925b991e544ed52664a6d7ece3b6feced30b5540bfad53a1201957f0 -size 6767 +oid sha256:fce2e7c38a8c1e2014d21b9b017724fe13d9757bf1c3c98a210033137ad0d788 +size 10805 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPress.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPress.png index 7a39a9e3077..5910eed4c41 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPress.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPress.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da66723e80f41b9711d3a7b50e6ed167e7043c091df464cdefb6ede623b95b91 -size 7094 +oid sha256:600c0199cf14fb22b1fdae1032987bd093a1938b674272f50a349559d5501f78 +size 11127 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPressHovered.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPressHovered.png index 7a39a9e3077..5910eed4c41 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPressHovered.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/chrome2022Dark/tabPressHovered.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da66723e80f41b9711d3a7b50e6ed167e7043c091df464cdefb6ede623b95b91 -size 7094 +oid sha256:600c0199cf14fb22b1fdae1032987bd093a1938b674272f50a349559d5501f78 +size 11127 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPress.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPress.png index 2dc3454bd34..fb458eeb051 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPress.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPress.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:280665dff3b5b421eccd0fc3aec1eb2a500e07aae5d2aaa3540500e9c58a6503 -size 6198 +oid sha256:1140f22e208e385b521b7acfb0ccd57399d29d4f0a0adccf16f1a9a4d4d5c6f4 +size 10961 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPressHovered.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPressHovered.png index ec594a5b39c..fb458eeb051 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPressHovered.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022/tabPressHovered.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f42dd601bfa666eae86e7f61255b9bcfa527da00677abcb4599aac840c8d0de3 -size 6202 +oid sha256:1140f22e208e385b521b7acfb0ccd57399d29d4f0a0adccf16f1a9a4d4d5c6f4 +size 10961 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPress.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPress.png index 1e11219c8d7..ddb9326f51b 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPress.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPress.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aded080490f56cce7b6a32dedaa355d2dce422f8bf4afcdcd208c0da6139d05b -size 6122 +oid sha256:ee3881082328478107df05f3b95dcfac128b46e6387015e325ed248d272d939d +size 10869 diff --git a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPressHovered.png b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPressHovered.png index e399282958c..ddb9326f51b 100644 --- a/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPressHovered.png +++ b/packages/react-ui/.creevey/images/Link/With Icon/tab press/firefox2022Dark/tabPressHovered.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:430c612536736dd3b44333bf437ac22ac152d06e08f77090632bd6e3bdbc9d7f -size 6281 +oid sha256:ee3881082328478107df05f3b95dcfac128b46e6387015e325ed248d272d939d +size 10869 diff --git a/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022/idle.png index 43aad1c9f13..35358a05730 100644 --- a/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022/idle.png +++ b/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d32d34b5ae0f7eaf40c2ccdd45692d8a9c0f8ef6574e12f8a09d3077f7ee5438 -size 2589 +oid sha256:c1ec7cc6f8edb5a977d26c17e63d42ad65fc2855f8be7e6cd363cd4238bd2f81 +size 2590 diff --git a/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022Dark/idle.png index d93b678ddfa..596ae37d39b 100644 --- a/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022Dark/idle.png +++ b/packages/react-ui/.creevey/images/Select/use link with icon/idle/chrome2022Dark/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:999d29e1c5e05c9dd7c02ef4d64f59cbb137a72c8ce5f7183722db43f8a2a69a +oid sha256:2e8eb17c04cebdb76d781f2b43e0822ca76d8f52c3c1976fb3f74d45161f118c size 2546 diff --git a/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022/selected item.png b/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022/selected item.png index 94585537b28..01077baafcb 100644 --- a/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022/selected item.png +++ b/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022/selected item.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0110f4e9a03b16acefec1dafcfef1de662da20bc8e00c0f967553e94e201a8b7 -size 1268 +oid sha256:cbf257c86e5a6e4f55980c4b046604cd5f85199d3e8d11a9ceec2869108fc83d +size 1271 diff --git a/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022Dark/selected item.png b/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022Dark/selected item.png index df38e55f578..35c5f1f1931 100644 --- a/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022Dark/selected item.png +++ b/packages/react-ui/.creevey/images/Select/use link with icon/selected item/chrome2022Dark/selected item.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bab3e8f2c2d81e00e06dd4c66da1203f9560b3d186b771cbd3368c6d2c0a15f3 -size 1278 +oid sha256:32b081e5e47b4d1f740210a3997efa07d1ab0cdec369249230a8a8684699ea61 +size 1280 diff --git a/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022/idle.png index 6fc4cc39eab..e80d37f9526 100644 --- a/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022/idle.png +++ b/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:158c561e1804304a19e38f1ea9e7f5e9571ac44fedc09d8427202374733a9ad3 -size 2548 +oid sha256:ce7f59331a1abaa810a378cb58686b11edf61ef0063532b0bbc10718d9ca8244 +size 2550 diff --git a/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022Dark/idle.png index b8c0829805c..e018c9955db 100644 --- a/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022Dark/idle.png +++ b/packages/react-ui/.creevey/images/Select/use link/idle/chrome2022Dark/idle.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b53614e6edf9733387c79dc8e9071aabbd3eeeafba50372384f4b902aa20efdb -size 2507 +oid sha256:f8560df07012e4b89bbbdc20da504a5b81af1cad60fe65a47bbda46bf64ebce3 +size 2506 diff --git a/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022/selected item.png b/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022/selected item.png index 982510b5362..bc0aad9ec3f 100644 --- a/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022/selected item.png +++ b/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022/selected item.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0af6a3438c4086ca4c094f31af944bed76f3ad3b76046d517803324ff29a4312 -size 1215 +oid sha256:a8abd474cb01eac7f16c87369ddac0d390097b5eec2c60aa8b81c54d710bb290 +size 1219 diff --git a/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022Dark/selected item.png b/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022Dark/selected item.png index 34226496268..6e439f36d79 100644 --- a/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022Dark/selected item.png +++ b/packages/react-ui/.creevey/images/Select/use link/selected item/chrome2022Dark/selected item.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a22a892af05d4f2040be56344c3ff50fec666e5891aaa2829ab313e6acc3a22 -size 1234 +oid sha256:c8fd68e368d327d2f8c0d988277ec89b93121f7ff0a99e61f14b493821949e86 +size 1235 diff --git a/packages/react-ui/components/Button/Button.md b/packages/react-ui/components/Button/Button.md index 4da57022a21..c31c45c17c9 100644 --- a/packages/react-ui/components/Button/Button.md +++ b/packages/react-ui/components/Button/Button.md @@ -1,9 +1,17 @@ -Базовый пример кнопки. +По умолчанию, кнопка принимает все пропы `HTMLButtonElement`. ```jsx harmony import { Button } from '@skbkontur/react-ui'; -; +; +``` + +Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента. + +```jsx harmony +import { Button } from '@skbkontur/react-ui'; + + ``` У кнопки есть различные стили. @@ -212,7 +220,6 @@ const renderExampleRow = (title, styles, index) => { ``` - Кнопка может быть узкой. ```jsx harmony diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index ba6ae0f228c..f6b86d0b383 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -1,6 +1,6 @@ import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; -import { resetButton, resetText } from '../../lib/styles/Mixins'; +import { resetButton, resetText, disableTextSelect } from '../../lib/styles/Mixins'; import { buttonUseMixin, @@ -16,6 +16,7 @@ export const globalClasses = prefix('button')({ caption: 'caption', text: 'text', innerShadow: 'inner-shadow', + disabled: 'disabled', }); export const styles = memoizeStyle({ @@ -23,6 +24,7 @@ export const styles = memoizeStyle({ return css` ${resetButton()}; ${resetText()}; + ${disableTextSelect()}; transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction} ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''}; @@ -59,13 +61,13 @@ export const styles = memoizeStyle({ width: 0; } - &:hover:enabled svg { + &:hover svg { color: ${t.btnIconHoverColor}; } - &:disabled svg { + &.${globalClasses.disabled} svg { color: ${t.btnIconDisabledColor}; } - &:enabled svg { + & svg { color: ${t.btnIconColor}; } `; @@ -324,6 +326,7 @@ export const styles = memoizeStyle({ disabled(t: Theme) { return css` cursor: default; + pointer-events: none; box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor}; background-image: none; @@ -389,7 +392,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -400,7 +403,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.default(t)}; } `; @@ -417,7 +420,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -428,7 +431,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.primary(t)} } `; @@ -445,7 +448,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -456,7 +459,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.success(t)} } `; @@ -473,7 +476,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -484,7 +487,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.danger(t)} } `; @@ -501,7 +504,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -512,7 +515,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.pay(t)} } `; @@ -522,13 +525,13 @@ export const styles = memoizeStyle({ return css` &, &:enabled, - &:hover:enabled { + &:hover { box-shadow: none; } ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, t.btnBorderWidth)}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -539,7 +542,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.text(t)} } `; @@ -552,7 +555,7 @@ export const styles = memoizeStyle({ color: ${t.btnDefaultTextColor}; background: transparent; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -563,7 +566,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.backless(t)} } `; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index a398b2e14ef..0177a9f4205 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,19 +1,20 @@ -import React, { AriaAttributes, HTMLAttributes } from 'react'; +import React, { HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; -import { HTMLProps } from '../../typings/html'; +import { ButtonLinkAllowedValues } from '../../lib/types/button-link'; import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper'; +import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { createPropsGetter } from '../../lib/createPropsGetter'; -import { Link, LinkProps } from '../Link'; +import { Link } from '../Link'; import { SizeProp } from '../../lib/types/props'; +import { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component'; import { styles, activeStyles, globalClasses } from './Button.styles'; import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; @@ -24,14 +25,7 @@ import { LoadingButtonIcon } from './LoadingButtonIcon'; export type ButtonType = 'button' | 'submit' | 'reset'; export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless'; -export interface ButtonProps - extends CommonProps, - Pick< - AriaAttributes, - 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded' - >, - Pick, 'role' | 'id'>, - Pick { +export interface ButtonInnerProps extends CommonProps { /** @ignore */ _noPadding?: boolean; @@ -106,41 +100,6 @@ export interface ButtonProps */ narrow?: boolean; - /** - * HTML-событие `onblur`. - */ - onBlur?: React.FocusEventHandler; - - /** - * HTML-событие `onclick`. - */ - onClick?: React.MouseEventHandler; - - /** - * HTML-событие `onfocus`. - */ - onFocus?: React.FocusEventHandler; - - /** - * HTML-событие `keydown`. - */ - onKeyDown?: React.KeyboardEventHandler; - - /** - * HTML-событие `onmouseenter`. - */ - onMouseEnter?: React.MouseEventHandler; - - /** - * HTML-событие `mouseleave`. - */ - onMouseLeave?: React.MouseEventHandler; - - /** - * HTML-событие `onmouseover`. - */ - onMouseOver?: React.MouseEventHandler; - /** * Задаёт размер кнопки. * @@ -162,6 +121,9 @@ export interface ButtonProps * Стиль кнопки. * * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`. + * + * **Вариант `link` устарел.** + * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`. */ use?: ButtonUse; @@ -185,6 +147,11 @@ export interface ButtonProps theme?: ThemeIn; } +export const BUTTON_DEFAULT_COMPONENT: ButtonLinkAllowedValues = 'button'; + +export type ButtonProps = + PolymorphicPropsWithoutRef; + export interface ButtonState { focusedByTab: boolean; } @@ -195,10 +162,17 @@ export const ButtonDataTids = { spinner: 'Button__spinner', } as const; -type DefaultProps = Required>; +type DefaultProps = Required, 'use' | 'size' | 'type' | 'component'>>; + +const SpanComponent: React.FunctionComponent> = ({ children, ...rest }) => { + return {children}; +}; @rootNode -export class Button extends React.Component { +export class Button extends React.Component< + ButtonProps, + ButtonState +> { public static __KONTUR_REACT_UI__ = 'Button'; public static displayName = 'Button'; public static __BUTTON__ = true; @@ -206,7 +180,11 @@ export class Button extends React.Component { public static defaultProps: DefaultProps = { use: 'default', size: 'small', + // By default the type attribute is 'submit'. IE8 will fire a click event + // on this button if somewhere on the page user presses Enter while some + // input is focused. So we set type to 'button' by default. type: 'button', + component: BUTTON_DEFAULT_COMPONENT, }; private getProps = createPropsGetter(Button.defaultProps); @@ -216,7 +194,7 @@ export class Button extends React.Component { }; private theme!: Theme; - private node: HTMLButtonElement | null = null; + private node: HTMLElement | null = null; private setRootNode!: TSetRootNode; public componentDidMount() { @@ -224,6 +202,10 @@ export class Button extends React.Component { keyListener.isTabPressed = true; this.focus(); } + // warning( + // this.props.use !== 'link', + // `[Button]: Use 'Link' has been deprecated. Please, use Link with 'component=button' prop instead.`, + // ); } public static getDerivedStateFromProps(props: ButtonProps) { @@ -252,18 +234,29 @@ export class Button extends React.Component { {(theme) => { this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; - return this.renderMain(); + return ( + + {this.renderMain} + + ); }} ); } - private renderLinkRootWithoutHandlers(props: LinkProps) { - const { onClick, onFocus, onBlur, children, ...rest } = props; - return {children}; + private getTabIndex({ + disableFocus, + disabled, + tabIndex = 0, + }: Pick) { + if (disableFocus || disabled) { + return -1; + } + + return tabIndex; } - private renderMain() { + private renderMain = (props: CommonWrapperRestProps) => { const { corners, active, @@ -274,6 +267,7 @@ export class Button extends React.Component { warning, loading, narrow, + arrow, icon, rightIcon, _noPadding, @@ -281,26 +275,16 @@ export class Button extends React.Component { visuallyFocused, align, disableFocus, - onMouseEnter, - onMouseLeave, - onMouseOver, - onMouseDown, - onMouseUp, - onKeyDown, - onClick, - onClickCapture, width, - children, - 'aria-describedby': ariaDescribedby, - 'aria-haspopup': ariaHasPopup, - 'aria-controls': ariaControls, - 'aria-label': ariaLabel, - 'aria-checked': ariaChecked, - 'aria-expanded': ariaExpanded, - role, - id, - } = this.props; - const { use, type, size } = this.getProps(); + tabIndex, + component: _component, + use: useProp, + size: sizeProp, + theme, + ...rest + } = props; + const { use, size, component, children } = this.getProps(); + const sizeClass = this.getSizeClassName(); const isFocused = this.state.focusedByTab || visuallyFocused; @@ -330,6 +314,7 @@ export class Button extends React.Component { borderless && styles.borderless(), use === 'backless' && styles.backlessDisabled(this.theme), use === 'text' && styles.textDisabled(), + globalClasses.disabled, ] : [ active && !checked && activeStyles[use](this.theme), @@ -341,35 +326,16 @@ export class Button extends React.Component { ); const rootProps = { - // By default the type attribute is 'submit'. IE8 will fire a click event - // on this button if somewhere on the page user presses Enter while some - // input is focused. So we set type to 'button' by default. - type, - role, - 'aria-describedby': ariaDescribedby, - 'aria-haspopup': ariaHasPopup, - 'aria-controls': ariaControls, - 'aria-label': ariaLabel, - 'aria-checked': ariaChecked, - 'aria-expanded': ariaExpanded, + ...rest, className: rootClassName, style: { textAlign: align, ...corners, }, - disabled: disabled || loading, - onClick, + disabled: trueDisabled, onFocus: this.handleFocus, onBlur: this.handleBlur, - onKeyDown, - onMouseEnter, - onMouseLeave, - onMouseOver, - onMouseDown, - onMouseUp, - onClickCapture, - tabIndex: disableFocus ? -1 : 0, - title: this.props.title, + tabIndex: this.getTabIndex({ disableFocus, disabled: trueDisabled, tabIndex }), }; const wrapProps = { @@ -420,12 +386,13 @@ export class Button extends React.Component { [styles.linkLineHeight()]: !isSafari, [styles.linkLineHeightSafariFallback()]: isSafari, [styles.linkFocus(this.theme)]: isFocused, - [styles.linkDisabled(this.theme)]: disabled || loading, + [styles.linkDisabled(this.theme)]: trueDisabled, }); Object.assign(wrapProps, { className: cx(styles.wrap(this.theme), styles.wrapLink()), style: { width: wrapProps.style.width }, }); + rootProps.style.textAlign = undefined; } @@ -454,33 +421,35 @@ export class Button extends React.Component { if (isLink && !loading) { captionNode = ( - - {children} - + { + + focused={isFocused} + disabled={disabled} + icon={this.renderIcon2022(icon)} + rightIcon={this.renderIcon2022(rightIcon)} + tabIndex={-1} + component={SpanComponent} + > + {children} + + } ); } + const Root: React.ElementType = component; + return ( - - - - - + + + {innerShadowNode} + {outlineNode} + {arrowNode} + {captionNode} + + ); - } + }; private renderIcon2022(icon: React.ReactElement | undefined) { if (icon && isKonturIcon(icon)) { @@ -527,7 +496,7 @@ export class Button extends React.Component { } } - private handleFocus = (e: React.FocusEvent) => { + private handleFocus = (e: React.FocusEvent) => { if (!this.props.disabled && !this.props.disableFocus) { // focus event fires before keyDown eventlistener // so we should check tabPressed in async way @@ -540,14 +509,14 @@ export class Button extends React.Component { } }; - private handleBlur = (e: React.FocusEvent) => { + private handleBlur = (e: React.FocusEvent) => { this.setState({ focusedByTab: false }); if (!this.props.disabled && !this.props.disableFocus) { this.props.onBlur?.(e); } }; - private _ref = (node: HTMLButtonElement | null) => { + private _ref = (node: HTMLElement | null) => { this.node = node; }; } diff --git a/packages/react-ui/components/Button/ButtonArrow.tsx b/packages/react-ui/components/Button/ButtonArrow.tsx index c1e42499f5a..c6790a98683 100644 --- a/packages/react-ui/components/Button/ButtonArrow.tsx +++ b/packages/react-ui/components/Button/ButtonArrow.tsx @@ -6,10 +6,13 @@ import { Theme } from '../../lib/theming/Theme'; import { ArrowRightIcon } from './ArrowRightIcon'; import { ArrowLeftIcon } from './ArrowLeftIcon'; -import { Button, ButtonProps } from './Button'; +import { Button, ButtonInnerProps } from './Button'; import { globalClasses, styles } from './Button.styles'; -type ButtonArrowProps = Pick & { +type ButtonArrowProps = Pick< + ButtonInnerProps, + 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning' +> & { isFocused: boolean; }; diff --git a/packages/react-ui/components/Button/ButtonIcon.tsx b/packages/react-ui/components/Button/ButtonIcon.tsx index 1b032926849..71b1267cacb 100644 --- a/packages/react-ui/components/Button/ButtonIcon.tsx +++ b/packages/react-ui/components/Button/ButtonIcon.tsx @@ -6,11 +6,11 @@ import { cx } from '../../lib/theming/Emotion'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { SizeProp } from '../../lib/types/props'; -import { ButtonProps } from './Button'; +import { ButtonInnerProps } from './Button'; import { styles } from './ButtonIcon.styles'; import { LoadingButtonIcon } from './LoadingButtonIcon'; -export interface ButtonIconProps extends Pick { +export interface ButtonIconProps extends Pick { position: 'right' | 'left'; hasChildren: boolean; hasBothIcons?: boolean; diff --git a/packages/react-ui/components/Button/__creevey__/Button.creevey.ts b/packages/react-ui/components/Button/__creevey__/Button.creevey.ts index e0d1934d043..415774f96ec 100644 --- a/packages/react-ui/components/Button/__creevey__/Button.creevey.ts +++ b/packages/react-ui/components/Button/__creevey__/Button.creevey.ts @@ -90,6 +90,22 @@ kind('Button', () => { buttonTests(); }); + story('ButtonAsLinkIconColor', ({ setStoryParameters }) => { + setStoryParameters({ + skip: { + 'focus goes out of page and breaks other tests': { + tests: ['pressed', 'clicked', 'tabPress'], + }, + 'hover does not work in chrome': { + in: /^(?!\b(firefox.*)\b)/, + tests: ['hover'], + }, + }, + }); + + buttonTests(); + }); + story('BtnTextBgHoverActive', ({ setStoryParameters }) => { setStoryParameters({ skip: { diff --git a/packages/react-ui/components/Button/__stories__/Button.stories.tsx b/packages/react-ui/components/Button/__stories__/Button.stories.tsx index d8eadd9cc34..2f3b98ab0ce 100644 --- a/packages/react-ui/components/Button/__stories__/Button.stories.tsx +++ b/packages/react-ui/components/Button/__stories__/Button.stories.tsx @@ -22,7 +22,7 @@ export default { title: 'Button', }; -type ButtonState = Partial; +type ButtonState = Partial>; const useStates2022: ButtonState[] = [ { use: 'default' }, @@ -41,6 +41,31 @@ const testingButtonUseStates2022: ButtonState[] = [ { use: 'backless' }, { use: 'link' }, ]; + +const buttonAsLinkUseStates: ButtonState[] = [ + { use: 'default' }, + { use: 'primary' }, + { use: 'danger' }, + { use: 'pay' }, + { use: 'success' }, + { use: 'text' }, + { use: 'backless' }, +]; + +const buttonAsLinkTestingProps: ButtonState[] = [ + { children: 'Link' }, + { disabled: true }, + { loading: true }, + { icon: }, + { icon: , disabled: true }, + { rightIcon: }, + { rightIcon: , disabled: true }, + { icon: , rightIcon: }, + { icon: , rightIcon: , disabled: true }, + { error: true }, + { warning: true }, +]; + const testingLinkState: ButtonState[] = [{ use: 'link' }]; const getButtonUseStates = () => { @@ -567,6 +592,38 @@ export const BtnBacklessBgHoverActive: Story = () => { ); }; +export const ButtonAsLink: Story = () => { + return ( + ({ props: x }))} + rows={buttonAsLinkTestingProps.map((x) => ({ props: x }))} + presetProps={{ children: 'Link', component: 'a' }} + /> + ); +}; + +export const ButtonAsLinkIconColor: Story = () => { + return ( + + ); +}; + +export const ButtonAsLinkIconDisabledColor: Story = () => { + return ( + + ); +}; + export const BtnTextBgHoverActive: Story = () => { const myTheme = ThemeFactory.create( { diff --git a/packages/react-ui/components/Button/__tests__/Button-test.tsx b/packages/react-ui/components/Button/__tests__/Button-test.tsx index c1c2c015e82..8d299d2373f 100644 --- a/packages/react-ui/components/Button/__tests__/Button-test.tsx +++ b/packages/react-ui/components/Button/__tests__/Button-test.tsx @@ -25,7 +25,7 @@ describe('Button', () => { }); }); - it('handels click event', async () => { + it('handles click event', async () => { const onClick = jest.fn(); render(); + + const button = screen.getByRole('button'); + expect(button).not.toHaveClass('', { exact: true }); + }); + + it(`data-tid prop shouldn't override value on root`, () => { + const props = { 'data-tid': 'foo' }; + + render(); + const button = screen.getByRole('button'); + + expect(button).toHaveAttribute('data-tid', ButtonDataTids.rootElement); + }); + describe('with use=link prop', () => { const handleSubmit = jest.fn(); const handleReset = jest.fn(); @@ -241,4 +258,44 @@ describe('Button', () => { expect(handleReset).toHaveBeenCalled(); }); }); + + describe('with component=a prop', () => { + it('should render tag', () => { + render( + , + ); + + expect(screen.getByRole('link')).toBeInTheDocument(); + }); + + it('should render ); + + expect(screen.getByRole('button')).toBeInTheDocument(); + }); + + it.each([{ disabled: true }, { loading: true }])(`shouldn't be focusable when %p`, (prop) => { + render( + , + ); + + userEvent.tab(); + expect(screen.getByRole('link')).not.toHaveFocus(); + }); + + it(`should have correct tabIndex`, () => { + render( + // eslint-disable-next-line jsx-a11y/tabindex-no-positive + , + ); + + expect(screen.getByRole('link')).toHaveAttribute('tabindex', '1'); + }); + }); }); diff --git a/packages/react-ui/components/Link/Link.md b/packages/react-ui/components/Link/Link.md index 688ea1eef65..7c12969df97 100644 --- a/packages/react-ui/components/Link/Link.md +++ b/packages/react-ui/components/Link/Link.md @@ -1,7 +1,28 @@ -Базовый пример ссылки. +По умолчанию, ссылка принимает все пропы `HTMLAnchorElement`. ```jsx harmony -Обычная ссылка +Обычная ссылка +``` + +Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. Cсылка принимает все пропы переданного в `component` компонента. + +Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки. + +```jsx harmony +import { Link } from '@skbkontur/react-ui'; + +Кнопка, но выглядит как ссылка +``` + +Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента. + +```jsx static +import { Link } from '@skbkontur/react-ui'; +import { Link as RouterLink, BrowserRouter } from 'react-router-dom'; + + + react-router-dom link + ``` Ссылка может иметь различные стили, а также быть отключенной. @@ -158,4 +179,3 @@ const renderExampleRow = (title, styles, index) => { {renderExampleRow('Изменение цвета ссылки', differentColorStyles)} ``` - diff --git a/packages/react-ui/components/Link/Link.styles.ts b/packages/react-ui/components/Link/Link.styles.ts index cabe92eb76e..e7ea1d6e80e 100644 --- a/packages/react-ui/components/Link/Link.styles.ts +++ b/packages/react-ui/components/Link/Link.styles.ts @@ -25,6 +25,9 @@ const oldLineText = function (t: Theme) { export const styles = memoizeStyle({ root(t: Theme) { return css` + cursor: pointer; + position: relative; + border-radius: 1px; text-decoration: ${t.linkTextDecoration}; text-decoration-style: ${t.linkTextDecorationStyle}; @@ -166,4 +169,34 @@ export const styles = memoizeStyle({ margin-left: ${t.linkIconMarginLeft}; `; }, + + content() { + return css` + position: relative; + `; + }, + + outline(t: Theme) { + return css` + border-radius: ${t.btnLinkBorderRadius}; + position: absolute; + box-shadow: none; + left: -2px; + right: -2px; + bottom: -2px; + top: -2px; + `; + }, + + outlineWarning(t: Theme) { + return css` + background-color: ${t.btnWarningSecondary}; + `; + }, + + outlineError(t: Theme) { + return css` + background-color: ${t.btnErrorSecondary}; + `; + }, }); diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index c9bb08ba8b2..93a9ed2c9ca 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,8 +1,9 @@ -import React, { AriaAttributes } from 'react'; -import PropTypes from 'prop-types'; +import React from 'react'; import { globalObject } from '@skbkontur/global-object'; -import { Override } from '../../typings/utility-types'; +import { ButtonLinkAllowedValues } from '../../lib/types/button-link'; +import { resetButton, disableTextSelect } from '../../lib/styles/Mixins'; +import { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; @@ -17,70 +18,64 @@ import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils import { styles } from './Link.styles'; import { LinkIcon } from './LinkIcon'; -export interface LinkProps - extends Pick, - CommonProps, - Override< - React.AnchorHTMLAttributes, - { - /** - * Отключенное состояние. - */ - disabled?: boolean; - /** - * HTML-атрибут `href`. - */ - href?: string; - /** - * Добавляет ссылке иконку слева. - */ - icon?: React.ReactElement; - /** - * Добавляет ссылке иконку справа. - */ - rightIcon?: React.ReactElement; - /** - * Тема ссылки. - */ - use?: 'default' | 'success' | 'danger' | 'grayed'; - /** - * @ignore - */ - _button?: boolean; - /** - * @ignore - */ - _buttonOpened?: boolean; - /** - * HTML-атрибут `tabindex`. - */ - tabIndex?: number; - /** - * Переводит ссылку в состояние загрузки. - */ - loading?: boolean; - /** - * HTML-событие `onclick`. - */ - onClick?: (event: React.MouseEvent) => void; - - /** - * Обычный объект с переменными темы. - * Он будет объединён с темой из контекста. - */ - theme?: ThemeIn; - /** - * Компонент, используемый в качестве корневого узла. - * @ignore - */ - as?: React.ElementType | keyof React.ReactHTML; - /** - * @ignore - */ - focused?: boolean; - } - > {} +export interface LinkInnerProps extends CommonProps { + /** + * Отключенное состояние. + */ + disabled?: boolean; + /** + * Добавляет ссылке иконку слева. + */ + icon?: React.ReactElement; + /** + * Добавляет ссылке иконку справа. + */ + rightIcon?: React.ReactElement; + /** + * Тема ссылки. + */ + use?: 'default' | 'success' | 'danger' | 'grayed'; + /** + * @ignore + */ + _button?: boolean; + /** + * @ignore + */ + _buttonOpened?: boolean; + /** + * HTML-атрибут `tabindex`. + */ + tabIndex?: number; + /** + * Переводит ссылку в состояние загрузки. + */ + loading?: boolean; + /** + * Обычный объект с переменными темы. + * Он будет объединён с темой из контекста. + */ + theme?: ThemeIn; + /** + * @ignore + */ + focused?: boolean; + /** + * Состояние валидации при ошибке. + */ + error?: boolean; + /** + * Состояние валидации при предупреждении. + */ + warning?: boolean; +} + +const LINK_DEFAULT_COMPONENT: ButtonLinkAllowedValues = 'a'; +export type LinkProps = PolymorphicPropsWithoutRef< + LinkInnerProps, + C +>; export interface LinkState { focusedByTab: boolean; } @@ -89,31 +84,23 @@ export const LinkDataTids = { root: 'Link__root', } as const; -type DefaultProps = Required>; -type DefaultizedLinkProps = DefaultizedProps; +type DefaultProps = Required, 'use' | 'component'>>; +type DefaultizedLinkProps = DefaultizedProps, DefaultProps>; /** * Элемент ссылки из HTML. */ @rootNode -export class Link extends React.Component { +export class Link extends React.Component< + LinkProps, + LinkState +> { public static __KONTUR_REACT_UI__ = 'Link'; public static displayName = 'Link'; - public static propTypes = { - disabled: PropTypes.bool, - - href: PropTypes.string, - - icon: PropTypes.node, - - use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']), - }; - public static defaultProps: DefaultProps = { - href: '', use: 'default', - as: 'a', + component: LINK_DEFAULT_COMPONENT, }; private getProps = createPropsGetter(Link.defaultProps); @@ -140,19 +127,43 @@ export class Link extends React.Component { ); } + private getTabIndex = ({ + nonInteractive, + tabIndex = 0, + }: { + nonInteractive: boolean | undefined; + tabIndex: number | undefined; + }) => { + return nonInteractive ? -1 : tabIndex; + }; + + private getRel = () => { + if (isAnchorProps(this.props)) { + const { rel, href } = this.props; + if (!rel && href) { + return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; + } + return rel; + } + + return undefined; + }; + private renderMain = (props: CommonWrapperRestProps) => { const { disabled, - href, icon, rightIcon, use, loading, _button, _buttonOpened, - rel: relOrigin, - as: Component, + component: Root, focused = false, + error, + warning, + tabIndex, + theme, ...rest } = props; @@ -161,20 +172,30 @@ export class Link extends React.Component { arrow = ; } - let rel = relOrigin; - if (typeof rel === 'undefined' && href) { - rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; - } - const isFocused = !disabled && (this.state.focusedByTab || focused); const leftIconElement = icon && ; const rightIconElement = rightIcon && ( ); - const linkProps = { + const nonInteractive = disabled || loading; + + const outlineNode = ( +
+ ); + + const rootProps = { + ...rest, className: cx({ [styles.root(this.theme)]: true, + [resetButton()]: Root === 'button', + [disableTextSelect()]: disabled || loading, [styles.focus(this.theme)]: isFocused, [styles.disabled(this.theme)]: disabled || loading, [styles.useDefault(this.theme)]: use === 'default', @@ -189,21 +210,23 @@ export class Link extends React.Component { [styles.lineFocusDanger(this.theme)]: isFocused && use === 'danger', [styles.lineFocusGrayed(this.theme)]: isFocused && use === 'grayed', }), - href, - rel, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, - tabIndex: disabled || loading ? -1 : this.props.tabIndex, + tabIndex: this.getTabIndex({ nonInteractive, tabIndex }), + rel: this.getRel(), }; return ( - - {leftIconElement} - {this.props.children} - {rightIconElement} - {arrow} - + + {outlineNode} + + {leftIconElement} + {this.props.children} + {rightIconElement} + {arrow} + + ); }; @@ -223,14 +246,15 @@ export class Link extends React.Component { this.setState({ focusedByTab: false }); }; - private handleClick = (event: React.MouseEvent) => { + private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading } = this.props; - const href = this.getProps().href; - if (!href) { - event.preventDefault(); - } + if (onClick && !disabled && !loading) { onClick(event); } }; } + +const isAnchorProps = (props: LinkProps): props is LinkProps<'a'> => { + return props.component === 'a'; +}; diff --git a/packages/react-ui/components/Link/__stories__/Link.stories.tsx b/packages/react-ui/components/Link/__stories__/Link.stories.tsx index c081fb7e65b..34ea7aec654 100644 --- a/packages/react-ui/components/Link/__stories__/Link.stories.tsx +++ b/packages/react-ui/components/Link/__stories__/Link.stories.tsx @@ -3,7 +3,9 @@ import OkIcon from '@skbkontur/react-icons/Ok'; import { CheckAIcon16Light } from '@skbkontur/icons/icons/CheckAIcon'; import { Story } from '../../../typings/stories'; -import { Link } from '../Link'; +import { ComponentTable } from '../../../internal/ComponentTable'; +import { Link, LinkProps } from '../Link'; +import { Button } from '../../Button'; import { Toast } from '../../Toast'; import { Gapped } from '../../Gapped'; import { ThemeContext } from '../../../lib/theming/ThemeContext'; @@ -24,6 +26,9 @@ export const WithIcon: Story = () => { Both Icons Link }>Right Icon Link + } rightIcon={} error> + Both Icons Link Error + }> @@ -35,6 +40,9 @@ export const WithIcon: Story = () => { }> Right Icon Link + } rightIcon={} warning> + Both Icons Link Warning + ); @@ -85,3 +93,45 @@ export const FocusedStyledLink: Story = () => { ); }; + +type LinkState = Partial>; + +const linkUseStates: LinkState[] = [{ use: 'default' }, { use: 'danger' }, { use: 'success' }, { use: 'grayed' }]; +const componentPropStates: LinkState[] = [ + { children: 'Button' }, + { disabled: true }, + { icon: }, + { icon: , loading: true }, + { rightIcon: }, + { rightIcon: , loading: true }, + { icon: , rightIcon: }, + { icon: , rightIcon: , loading: true }, + { warning: true }, + { error: true }, +]; + +export const LinkAsButton: Story = () => { + return ( + ({ props: state }))} + rows={componentPropStates.map((x) => ({ props: x }))} + presetProps={{ children: 'Button', component: 'button' }} + /> + ); +}; + +export const LinkAsButtonValidation: Story = () => { + return ( + + + Warning + + Error + + ); +}; diff --git a/packages/react-ui/components/Link/__tests__/Link-test.tsx b/packages/react-ui/components/Link/__tests__/Link-test.tsx index b6a5b5e7b9d..e1150c7c679 100644 --- a/packages/react-ui/components/Link/__tests__/Link-test.tsx +++ b/packages/react-ui/components/Link/__tests__/Link-test.tsx @@ -79,9 +79,45 @@ describe('Link', () => { describe('a11y', () => { it('sets value for aria-label attribute', () => { const ariaLabel = 'aria-label'; - render(); + render(); expect(screen.getByTestId(LinkDataTids.root)).toHaveAttribute('aria-label', ariaLabel); }); }); + + describe('with component prop', () => { + it('should render tag when omitted', () => { + renderRTL({ href: 'https://kontur.ru' }); + + expect(screen.getByRole('link')).toBeInTheDocument(); + }); + + it('should render