search

vektor-inc / x-t9

GNU General Public License v2.0
18 stars 1 forks source link

【2人目確認待ち】[ core/button ] スタイル「輪郭」に設定してあるhas-vk-color-primary-colorの色が反映されないのを修正しました #300

Open mtdkei opened 4 days ago

mtdkei commented 4 days ago

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

https://discord.com/channels/1010092469863587892/1010175825930367019/1286250345361707120

どういう変更をしたか？

パターンライブラリにあるコアのボタン(スタイル「輪郭」)ブロックをX-T9にコピペすると、has-vk-color-primary-colorを使ってプライマリーカラーを設定してある部分が、反映されませんでしたのでその部分を修正しました。

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

ソースコードについて

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。 書いていない場合は書かない理由を記載してください。

その他

変更内容について何を確認したか、どういう方法で確認をしたかなど

https://patterns.vektor-inc.co.jp/vk-patterns/18730/ を編集画面にコピペし、一番最初のボタンブロックにて以下の色が反映されていることを確認しました。

:root .has-vk-color-primary-color, :root .editor-styles-wrapper .has-vk-color-primary-color {
    color: var(--wp--preset--color--vk-color-primary);
}

また、以下のいろいろなボタンブロックのパターンをコピペしてもこのプルリクによる悪影響がないことを確認しました。

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"0","right":"0"}},"color":{"background":"#00000091"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#00000091;padding-top:var(--wp--preset--spacing--70);padding-right:0;padding-bottom:var(--wp--preset--spacing--70);padding-left:0"><!-- wp:heading {"className":"is-style-vk-heading-background_fill_lightgray"} -->
<h2 class="wp-block-heading is-style-vk-heading-background_fill_lightgray">VKボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">塗りつぶし</h4>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button-outer {"blockId":"a08ff941-69c4-4fb1-8cce-570172c4f555"} -->
<div class="wp-block-vk-blocks-button-outer vk_buttons"><div class="vk_buttons_col vk_buttons_col-justify-left"><!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"text-normal","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"88b1e4ac-a662-4cc4-ad22-addcadd7dd50"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background has-white-background-color btn has-text-color has-text-normal-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"#ff0000","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6 vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background has-white-background-color btn has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div><style type="text/css"> .vk_button-f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6 .has-text-color {
                color: #ff0000;
            } </style>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"#83b017","buttonColorCustom":"#f8ffc4","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022fas fa-mobile-alt\u0022\u003e\u003c/i\u003e","blockId":"12ab75d0-3930-489f-8e8a-239f39f48287"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background btn has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="fas fa-mobile-alt vk_button_link_before"></i><span class="vk_button_link_txt">000-0000-0000</span></div></a></div><style type="text/css">.vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 .has-background {
                background-color: #f8ffc4;
                border: 1px solid #f8ffc4;
            } .vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 .has-text-color {
                color: #83b017;
            } </style>
<!-- /wp:vk-blocks/button --></div></div>
<!-- /wp:vk-blocks/button-outer -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">背景なし</h4>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button-outer {"blockId":"a08ff941-69c4-4fb1-8cce-570172c4f555"} -->
<div class="wp-block-vk-blocks-button-outer vk_buttons"><div class="vk_buttons_col vk_buttons_col-justify-left"><!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"767f3a61-461f-4337-8c92-205829844799"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-text-color is-style-outline has-white-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"#e8ff00","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022fas fa-mobile-alt\u0022\u003e\u003c/i\u003e","blockId":"2442b979-5207-4693-b9ec-b6dc76542a4a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-text-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="fas fa-mobile-alt vk_button_link_before"></i><span class="vk_button_link_txt">000-0000-0000</span></div></a></div><style type="text/css">.vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a .has-text-color.is-style-outline {
                background-color: transparent;
                border: 1px solid #e8ff00;
                color: #e8ff00;
            }
            .vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a .has-text-color.is-style-outline:hover {
                background-color: #e8ff00;
                border: 1px solid #e8ff00;
                color: #fff;
            } </style>
<!-- /wp:vk-blocks/button --></div></div>
<!-- /wp:vk-blocks/button-outer -->

<!-- wp:heading {"className":"is-style-vk-heading-background_fill_lightgray"} -->
<h2 class="wp-block-heading is-style-vk-heading-background_fill_lightgray">コアのボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">塗りつぶし</h4>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">ボタンブロック</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"primary-hover","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-hover"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-primary-hover-color has-white-background-color has-text-color has-background has-link-color wp-element-button">000-0000-0000</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"#e6fc00"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#e6fc00">ボタンブロック</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">輪郭</h4>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">何も指定なし</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"vivid-green-cyan","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-green-cyan"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-vivid-green-cyan-color has-white-background-color has-text-color has-background has-link-color wp-element-button">背景白、テキストVivid green cyan</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"bg-primary","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}},"color":{"background":"#ff2200"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-bg-primary-color has-text-color has-background has-link-color wp-element-button" style="background-color:#ff2200">背景カスタムレッド、テキスト白</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#e6fc00","text":"#ff0094d6"},"elements":{"link":{"color":{"text":"#ff0094d6"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="color:#ff0094d6;background-color:#e6fc00">背景カスタム、文字色カスタム</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"#00ffa2"}}},"color":{"text":"#00ffa2"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-link-color wp-element-button" style="color:#00ffa2">背景色なし、テキストカスタム</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"primary","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-color has-text-color has-link-color wp-element-button">背景色なし、テキストプライマリー</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

レビュワーの確認方法・確認する内容など

実装者と同じ確認を行ってください。

レビュワーに回す前の確認事項

レビュワー向け

確認して変更が反映されていない場合の確認事項

goutetsuguma commented 13 hours ago

調整ありがとうございます！確認しました。 どなたか2人目確認お願いします