eslint-plugin-smarthr 6.15.0 → 6.16.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.16.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.15.0...eslint-plugin-smarthr-v6.16.0) (2026-05-19)
+
+
+### Features
+
+* design-system-guideline-bulk-action-row-button のlinterルールを追加 ([#1309](https://github.com/kufu/tamatebako/issues/1309)) ([d5934ae](https://github.com/kufu/tamatebako/commit/d5934ae3cc95ef9cb5696c00f22840351b5567ea))
+* InformationPanelを白背景に配置することを禁止するルールを追加 ([#1319](https://github.com/kufu/tamatebako/issues/1319)) ([6b3a9b6](https://github.com/kufu/tamatebako/commit/6b3a9b621956e196eb9fb5984e3acba458893eca))
+
 ## [6.15.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.14.0...eslint-plugin-smarthr-v6.15.0) (2026-05-17)
 
 

package/README.md

@@ -21,8 +21,10 @@
 - [a11y-trigger-has-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-trigger-has-button)
 - [best-practice-for-async-current-target](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-async-current-target)
 - [best-practice-for-button-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-button-element)
+- [best-practice-for-consecutive-definition-list](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-consecutive-definition-list)
 - [best-practice-for-data-test-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-data-test-attribute)
 - [best-practice-for-date](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-date)
+- [best-practice-for-default-props](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-default-props)
 - [best-practice-for-interactive-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element)
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
 - [best-practice-for-nested-attributes-array-index](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index)
@@ -37,8 +39,10 @@
 - [best-practice-for-text-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component)
 - [best-practice-for-unnesessary-early-return](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unnesessary-early-return)
 - [component-name](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name)
+- [design-system-guideline-bulk-action-row-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button)
 - [design-system-guideline-prohibit-dialog-button-icon](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-dialog-button-icon)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
+- [design-system-guideline-prohibit-information-panel-in-white-bg](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-information-panel-in-white-bg)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)
 - [no-import-other-domain](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/no-import-other-domain)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.15.0",
+  "version": "6.16.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/best-practice-for-consecutive-definition-list/index.js

@@ -2,30 +2,22 @@
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
 
-const DEFINITION_LIST_PATTERN = /DefinitionList$/
-
-const getPreviousSibling = (node) => {
-  const parent = node.parent
-  if (!parent || (parent.type !== 'JSXElement' && parent.type !== 'JSXFragment')) {
-    return null
-  }
-
-  const children = parent.children || []
-  const currentIndex = children.indexOf(node)
-
-  for (let i = currentIndex - 1; i >= 0; i--) {
-    const child = children[i]
-
-    if (
-      (child.type !== 'JSXText' || child.value.trim() !== '') &&
-      (child.type !== 'JSXExpressionContainer' || child.expression.type !== 'JSXEmptyExpression')
-    ) {
-      return child
-    }
-  }
-
-  return null
-}
+const DEFINITION_LIST = 'JSXElement[openingElement.name.name=/DefinitionList$/]'
+const WHITESPACE_TEXT = 'JSXText[value=/^\\s*$/]'
+const EMPTY_EXPRESSION = 'JSXExpressionContainer[expression.type="JSXEmptyExpression"]'
+
+// 直接隣接（A + B）
+const ADJACENT_DIRECT = `${DEFINITION_LIST} + ${DEFINITION_LIST}`
+// 空白・改行のみのJSXText経由（A + W + B）
+const ADJACENT_WITH_WHITESPACE = `${DEFINITION_LIST} + ${WHITESPACE_TEXT} + ${DEFINITION_LIST}`
+// JSXコメント（{/* */}、{}）経由（A + E + B）
+const ADJACENT_WITH_COMMENT = `${DEFINITION_LIST} + ${EMPTY_EXPRESSION} + ${DEFINITION_LIST}`
+// 空白・改行 + JSXコメント（A + W + E + B）
+const ADJACENT_WHITESPACE_COMMENT = `${DEFINITION_LIST} + ${WHITESPACE_TEXT} + ${EMPTY_EXPRESSION} + ${DEFINITION_LIST}`
+// JSXコメント + 空白・改行（A + E + W + B）
+const ADJACENT_COMMENT_WHITESPACE = `${DEFINITION_LIST} + ${EMPTY_EXPRESSION} + ${WHITESPACE_TEXT} + ${DEFINITION_LIST}`
+// 空白・改行 + JSXコメント + 空白・改行（A + W + E + W + B）
+const ADJACENT_WHITESPACE_COMMENT_WHITESPACE = `${DEFINITION_LIST} + ${WHITESPACE_TEXT} + ${EMPTY_EXPRESSION} + ${WHITESPACE_TEXT} + ${DEFINITION_LIST}`
 
 module.exports = {
   meta: {
@@ -33,20 +25,23 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    return {
-      [`JSXElement[openingElement.name.name=${DEFINITION_LIST_PATTERN}]`](node) {
-        const prev = getPreviousSibling(node)
-
-        if (prev?.type === 'JSXElement' && DEFINITION_LIST_PATTERN.test(prev.openingElement.name.name)) {
-          context.report({
-            node: node.openingElement.name,
-            message: `DefinitionList が連続しています
+    const reporter = (node) => {
+      context.report({
+        node,
+        message: `DefinitionList が連続しています
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-consecutive-definition-list
  - DefinitionListItem の maxColumns prop を使用して1つにまとめることを検討してください
  - 例外: 意味的に異なるグループの場合は複数のDefinitionListを使用しても問題ありません`,
-          })
-        }
-      },
+      })
+    }
+
+    return {
+      [ADJACENT_DIRECT]: reporter,
+      [ADJACENT_WITH_WHITESPACE]: reporter,
+      [ADJACENT_WITH_COMMENT]: reporter,
+      [ADJACENT_WHITESPACE_COMMENT]: reporter,
+      [ADJACENT_COMMENT_WHITESPACE]: reporter,
+      [ADJACENT_WHITESPACE_COMMENT_WHITESPACE]: reporter,
     }
   },
 }

package/rules/design-system-guideline-bulk-action-row-button/README.md

@@ -0,0 +1,121 @@
+# smarthr/design-system-guideline-bulk-action-row-button
+
+BulkActionRow内では「すべてのオブジェクトを選択」ボタンの実装には Button[variant="tertiary"] を使用することを推奨するルールです
+
+## なぜこのルールが必要なのか
+
+### 1. 視覚的なアクセシビリティのため（Design Systemガイドライン）
+
+BulkActionRowで使用する「すべてのオブジェクトの選択」ボタンは、Button[variant="tertiary"]を使用することで、BulkActionRowの背景色に対してコントラスト比4.5:1を確保できるように内部的に実装されているため、視覚的に見やすくなります。
+
+**参考**:
+
+- [テーブルの一括操作 - SmartHR Design System](https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2)
+- [Table - SmartHR Design System](https://smarthr.design/products/components/table/#h3-2)
+
+### 2. セマンティックなマークアップのため
+
+BulkActionRowは一括操作用の領域であり、内部に設置するクリッカブルな要素は基本的に**画面遷移以外の動作**（削除、編集、選択など）を担います。
+
+- **aタグ、AnchorButton、Link**: 画面遷移（リンク）を示すセマンティックなマークアップ
+- **button要素、Button**: ボタンやその他のインタラクション（フォーム送信、操作実行など）を示すセマンティックなマークアップ
+
+BulkActionRow内のクリッカブルな要素は画面遷移を伴わないため、a要素やAnchorButton、Linkでマークアップするのは不適切です。Buttonコンポーネントを使用してください。
+
+### このルールがチェックする内容
+
+1. **aタグやLinkコンポーネントの使用を検出**: BulkActionRow内でaタグやTextLink、末尾がLinkで終わるコンポーネントを使用している場合にエラーを出します
+2. **prefixが付いたButtonコンポーネントの使用を検出**: BulkActionRow内でAnchorButton、StyledButtonなど、XxxxButtonパターンのコンポーネント（Buttonコンポーネント以外）を使用している場合にエラーを出します
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/design-system-guideline-bulk-action-row-button': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// TextLinkは画面遷移を示すセマンティックなマークアップです
+// BulkActionRowは一括操作用の領域であり、画面遷移以外の動作を担うため、Linkは不適切です
+// また、コントラスト比も確保できません
+<Table>
+  <thead>
+    <BulkActionRow>
+      <Cluster align="center">
+        <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+        <TextLink href={undefined} onClick={toggleAllChecked}>
+          一覧の「オブジェクト名」1000件すべてを選択
+        </TextLink>
+      </Cluster>
+    </BulkActionRow>
+  </thead>
+</Table>
+```
+
+```jsx
+// AnchorButtonはa要素ベースのコンポーネントであり、画面遷移を示すセマンティックなマークアップです
+// BulkActionRowは一括操作用の領域であり、画面遷移以外の動作を担うため、AnchorButtonは不適切です
+<Table>
+  <thead>
+    <BulkActionRow>
+      <Cluster align="center">
+        <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+        <AnchorButton href={undefined} onClick={toggleAllChecked}>
+          一覧の「オブジェクト名」1000件すべてを選択
+        </AnchorButton>
+      </Cluster>
+    </BulkActionRow>
+  </thead>
+</Table>
+```
+
+```jsx
+// prefixが付いたButtonコンポーネントを使用している
+<Table>
+  <thead>
+    <BulkActionRow>
+      <Cluster align="center">
+        <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+        <SelectAllButton>一覧の「オブジェクト名」1000件すべてを選択</SelectAllButton>
+      </Cluster>
+    </BulkActionRow>
+  </thead>
+</Table>
+```
+
+```jsx
+// prefixが付いたButtonコンポーネントを使用している
+<Table>
+  <thead>
+    <BulkActionRow>
+      <Cluster align="center">
+        <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+        <button>一覧の「オブジェクト名」1000件すべてを選択</button>
+      </Cluster>
+    </BulkActionRow>
+  </thead>
+</Table>
+```
+
+## ✅ Correct
+
+```jsx
+// 「すべてのオブジェクトの選択」ボタンにvariant="tertiary"を指定
+<Table>
+  <thead>
+    <BulkActionRow>
+      <Cluster align="center">
+        <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+        <Button variant="tertiary" size="S">
+          一覧の「オブジェクト名」1000件すべてを選択
+        </Button>
+      </Cluster>
+    </BulkActionRow>
+  </thead>
+</Table>
+```

package/rules/design-system-guideline-bulk-action-row-button/index.js

@@ -0,0 +1,67 @@
+const SCHEMA = []
+
+// aタグやLinkコンポーネントを使用している場合
+const DO_NOT_USE_LINK = `BulkActionRow内では「Button」コンポーネントを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - BulkActionRowは一括操作用の領域であり、内部のクリッカブルな要素は画面遷移以外の動作を担います。
+ - a要素、AnchorButton、Linkは画面遷移を示すセマンティックなマークアップのため、BulkActionRow内では不適切です。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+// XxxxButtonパターンのコンポーネントを使用している場合
+const DO_NOT_USE_PREFIXED_BUTTON = `BulkActionRow内では「Button」コンポーネントのみを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - XxxxButtonのようにprefixが付いたButtonコンポーネント（AnchorButton、StyledButtonなど）は使用しないでください。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+// buttonタグを使用している場合
+const DO_NOT_USE_BUTTON_TAG = `BulkActionRow内では「Button」コンポーネントのみを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - buttonタグは使用しないでください。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      // BulkActionRow内でaタグやLinkコンポーネントを使用している場合
+      'JSXElement[openingElement.name.name=/BulkActionRow$/] JSXElement[openingElement.name.name=/^a$|Link$/]'(node) {
+        context.report({
+          node: node.openingElement,
+          message: DO_NOT_USE_LINK,
+        })
+      },
+
+      // BulkActionRow内でprefixが付いたButtonコンポーネントを使用している場合
+      'JSXElement[openingElement.name.name=/BulkActionRow$/] JSXElement[openingElement.name.name=/.+Button$/]'(node) {
+        context.report({
+          node: node.openingElement,
+          message: DO_NOT_USE_PREFIXED_BUTTON,
+        })
+      },
+      // BulkActionRow内でbuttonタグを使用している場合
+      'JSXElement[openingElement.name.name=/BulkActionRow$/] JSXElement[openingElement.name.name=/button$/]'(node) {
+        context.report({
+          node: node.openingElement,
+          message: DO_NOT_USE_BUTTON_TAG,
+        })
+      },
+    }
+  },
+}
+
+module.exports.schema = SCHEMA

package/rules/design-system-guideline-prohibit-information-panel-in-white-bg/README.md

@@ -0,0 +1,163 @@
+# smarthr/design-system-guideline-prohibit-information-panel-in-white-bg
+
+InformationPanelを白背景に配置することを禁止します。
+
+## なぜこのルールが必要か
+
+SmartHR Design Systemのガイドラインに基づき、InformationPanelは白背景に直接配置すべきではありません。
+
+**理由:**
+- InformationPanelのレイヤー順序は3です
+- Baseのレイヤー順序は1です
+- 視覚的に適切な階層関係を保つため、白背景の上に直接配置することは避けるべきです
+
+詳細: https://smarthr.design/products/components/information-panel/#h3-1
+
+## 検出パターン
+
+このルールは以下のパターンを検出します:
+
+### 1. Base内にInformationPanel
+
+```tsx
+// ❌ Bad
+<Base>
+  <InformationPanel>情報</InformationPanel>
+</Base>
+
+<Base>
+  <div>
+    <InformationPanel>情報</InformationPanel>
+  </div>
+</Base>
+```
+
+### 2. Dialog内にInformationPanel（白背景）
+
+contentBgColorが未指定、または"WHITE"が指定されている場合:
+
+```tsx
+// ❌ Bad
+<ActionDialog>
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+
+<FormDialog contentBgColor="WHITE">
+  <InformationPanel>情報</InformationPanel>
+</FormDialog>
+```
+
+## 例外
+
+以下の場合はエラーになりません:
+
+### BaseColumn内にある場合
+
+BaseColumnは背景色を持つため、その中にInformationPanelを配置することは問題ありません:
+
+```tsx
+// ✅ Good
+<Base>
+  <BaseColumn>
+    <InformationPanel>情報</InformationPanel>
+  </BaseColumn>
+</Base>
+```
+
+### DialogでcontentBgColorが指定されている場合
+
+```tsx
+// ✅ Good
+<ActionDialog contentBgColor="COLUMN">
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+
+<FormDialog contentBgColor="OVER_BACKGROUND">
+  <InformationPanel>情報</InformationPanel>
+</FormDialog>
+```
+
+## 正しい使用例
+
+```tsx
+// ✅ Good: Stack/Clusterなどレイアウトコンポーネントで包む
+<Stack>
+  <InformationPanel>情報</InformationPanel>
+</Stack>
+
+<Cluster>
+  <InformationPanel>情報</InformationPanel>
+</Cluster>
+
+// ✅ Good: BaseColumnを使用
+<Base>
+  <BaseColumn>
+    <InformationPanel>情報</InformationPanel>
+  </BaseColumn>
+</Base>
+
+// ✅ Good: DialogでcontentBgColorを指定
+<ActionDialog contentBgColor="COLUMN">
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+
+// ✅ Good: Base外で使用
+<InformationPanel>情報</InformationPanel>
+```
+
+## 誤った使用例
+
+```tsx
+// ❌ Bad: Base内に直接配置
+<Base>
+  <InformationPanel>情報</InformationPanel>
+</Base>
+
+// ❌ Bad: Base内の他要素の中に配置
+<Base>
+  <div>
+    <InformationPanel>情報</InformationPanel>
+  </div>
+</Base>
+
+// ❌ Bad: DialogでcontentBgColorが未指定
+<ActionDialog>
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+
+// ❌ Bad: DialogでcontentBgColor="WHITE"
+<FormDialog contentBgColor="WHITE">
+  <InformationPanel>情報</InformationPanel>
+</FormDialog>
+```
+
+## よくある間違い
+
+### DialogContents内に配置
+
+DialogContents（Dialog内部のコンテンツ領域）はデフォルトで白背景です。そのため、以下のようなコードはエラーになります:
+
+```tsx
+// ❌ Bad
+<ActionDialog>
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+```
+
+**解決方法:**
+1. contentBgColorを指定する（推奨）
+2. BaseColumnで包む
+
+```tsx
+// ✅ Good: contentBgColorを指定
+<ActionDialog contentBgColor="OVER_BACKGROUND">
+  <InformationPanel>情報</InformationPanel>
+</ActionDialog>
+
+// ✅ Good: BaseColumnで包む
+<ActionDialog>
+  <BaseColumn>
+    <InformationPanel>情報</InformationPanel>
+  </BaseColumn>
+</ActionDialog>
+```

package/rules/design-system-guideline-prohibit-information-panel-in-white-bg/index.js

@@ -0,0 +1,85 @@
+/**
+ * InformationPanelを白背景に配置することを禁止するルール
+ *
+ * SmartHR Design System ガイドラインに基づき、InformationPanelを白背景に直接配置することを防ぎます。
+ *
+ * 検出パターン:
+ * 1. Base内にInformationPanel
+ * 2. Dialog内にInformationPanel（contentBgColorが未指定またはWHITE）
+ *
+ * 例外:
+ * - BaseColumn内にある場合（BaseColumnは背景色を持つため）
+ * - DialogでcontentBgColorがWHITE以外の場合
+ *
+ * @see https://smarthr.design/products/components/information-panel/
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      inWhiteBg: 'InformationPanelを白背景に配置しないでください。InformationPanelをBaseColumnで包むか、InformationPanelを包んでいるDialogのcontentBgColorにWHITE以外の値を指定してください。詳細: https://smarthr.design/products/components/information-panel/',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    /**
+     * InformationPanelから親方向に探索し、白背景コンテナをチェック
+     * @param {Node} node - InformationPanelのノード
+     * @param {string|RegExp} targetPattern - 検出対象のコンポーネント名パターン
+     * @returns {{ ok: boolean, targetNode?: Node }} 検出結果
+     */
+    const checkWhiteBg = (node, targetPattern) => {
+      let current = node.parent
+      while (current) {
+        if (current.type === 'JSXElement') {
+          const name = current.openingElement.name.name
+
+          // BaseColumnが見つかったらOK（探索終了）
+          if (name === 'BaseColumn') {
+            return { ok: true }
+          }
+
+          // targetパターンにマッチするか確認
+          const isTarget = typeof targetPattern === 'string'
+            ? name === targetPattern
+            : targetPattern.test(name)
+
+          if (isTarget) {
+            return { ok: false, targetNode: current }
+          }
+        }
+        current = current.parent
+      }
+      return { ok: true } // 何も見つからない場合はOK
+    }
+
+    return {
+      // Base以下のInformationPanel
+      'JSXElement[openingElement.name.name="Base"] JSXElement[openingElement.name.name="InformationPanel"]'(node) {
+        const result = checkWhiteBg(node, 'Base')
+        if (!result.ok) {
+          context.report({ node, messageId: 'inWhiteBg' })
+        }
+      },
+
+      // Dialog以下のInformationPanel
+      'JSXElement[openingElement.name.name=/Dialog$/] JSXElement[openingElement.name.name="InformationPanel"]'(node) {
+        const result = checkWhiteBg(node, /Dialog$/)
+        if (!result.ok) {
+          // contentBgColor属性をチェック
+          const attr = result.targetNode.openingElement.attributes.find(
+            a => a.type === 'JSXAttribute' && a.name.name === 'contentBgColor'
+          )
+          const bgColor = attr?.value?.value
+
+          // contentBgColorが未指定またはWHITEの場合のみエラー
+          if (!bgColor || bgColor === 'WHITE') {
+            context.report({ node, messageId: 'inWhiteBg' })
+          }
+        }
+      }
+    }
+  }
+}

package/test/design-system-guideline-bulk-action-row-button.js

@@ -0,0 +1,162 @@
+const rule = require('../rules/design-system-guideline-bulk-action-row-button')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const messageDoNotUseLink = `BulkActionRow内では「Button」コンポーネントを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - BulkActionRowは一括操作用の領域であり、内部のクリッカブルな要素は画面遷移以外の動作を担います。
+ - a要素、AnchorButton、Linkは画面遷移を示すセマンティックなマークアップのため、BulkActionRow内では不適切です。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+const messageDoNotUsePrefixedButton = `BulkActionRow内では「Button」コンポーネントのみを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - XxxxButtonのようにprefixが付いたButtonコンポーネント（AnchorButton、StyledButtonなど）は使用しないでください。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+const messageDoNotUseButtonTag = `BulkActionRow内では「Button」コンポーネントのみを使用してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-bulk-action-row-button
+ - buttonタグは使用しないでください。
+ - もし「すべてのオブジェクトを選択」ボタンの実装であれば、Button[variant="tertiary"]を使用してください。
+ - 参考:
+  - https://smarthr.design/products/design-patterns/table-bulk-action/#h4-2
+  - https://smarthr.design/products/components/table/#h3-2`
+
+ruleTester.run('design-system-guideline-bulk-action-row-button', rule, {
+  valid: [
+    // BulkActionRow内でButtonを使用
+    {
+      code: `
+        <BulkActionRow>
+          <Button variant="primary">一括削除</Button>
+        </BulkActionRow>
+      `,
+    },
+    //「すべてのオブジェクトの選択」ボタンにvariant="tertiary"を指定
+    {
+      code: `
+        <Table>
+          <thead>
+            <BulkActionRow>
+              <Cluster align="center">
+                <Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
+                <Button variant="tertiary" size="S">
+                  一覧の「オブジェクト名」1000件すべてを選択
+                </Button>
+              </Cluster>
+            </BulkActionRow>
+          </thead>
+        </Table>
+      `,
+    },
+    // ButtonClusterなど、Buttonで終わらないコンポーネントは誤検知しない
+    {
+      code: `
+        <BulkActionRow>
+          <ButtonCluster>
+            <Button>削除</Button>
+            <Button>編集</Button>
+          </ButtonCluster>
+        </BulkActionRow>
+      `,
+    },
+  ],
+  invalid: [
+    // BulkActionRow内でaタグを使用
+    {
+      code: `
+        <BulkActionRow>
+          <a href="#" onClick={toggleAll}>一覧の100件すべてを選択</a>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUseLink }],
+    },
+    // BulkActionRow内でTextLinkを使用
+    {
+      code: `
+        <BulkActionRow>
+          <TextLink href={undefined} onClick={toggleAll}>
+            一覧の100件すべてを選択
+          </TextLink>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUseLink }],
+    },
+    // BulkActionRow内でprefixが付いたButtonコンポーネントを使用
+    {
+      code: `
+        <BulkActionRow>
+          <StyledSelectAllButton>一覧のすべてを選択</StyledSelectAllButton>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUsePrefixedButton }],
+    },
+    // AnchorButtonを使用
+    {
+      code: `
+        <BulkActionRow>
+          <AnchorButton href={undefined} onClick={toggleAllChecked}>
+            一覧のすべてを選択
+          </AnchorButton>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUsePrefixedButton }],
+    },
+    // ネストされた構造でもチェック
+    {
+      code: `
+        <BulkActionRow>
+          <Cluster>
+            <Stack>
+              <CustomButton>操作</CustomButton>
+            </Stack>
+          </Cluster>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUsePrefixedButton }],
+    },
+    // StyledBulkActionRowのようなラッパーコンポーネント内でもチェック
+    {
+      code: `
+        <StyledBulkActionRow>
+          <TextLink href={undefined} onClick={toggleAll}>
+            一覧の100件すべてを選択
+          </TextLink>
+        </StyledBulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUseLink }],
+    },
+    {
+      code: `
+        <CustomBulkActionRow>
+          <AnchorButton href={undefined} onClick={toggleAllChecked}>
+            一覧のすべてを選択
+          </AnchorButton>
+        </CustomBulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUsePrefixedButton }],
+    },
+    {
+      code: `
+        <BulkActionRow>
+          <button>一括削除</button>
+        </BulkActionRow>
+      `,
+      errors: [{ message: messageDoNotUseButtonTag }],
+    },
+  ],
+})

package/test/design-system-guideline-prohibit-information-panel-in-white-bg.js

@@ -0,0 +1,128 @@
+const rule = require('../rules/design-system-guideline-prohibit-information-panel-in-white-bg')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('design-system-guideline-prohibit-information-panel-in-white-bg', rule, {
+  valid: [
+    // InformationPanel単体（Base外）
+    {
+      code: '<InformationPanel>情報</InformationPanel>',
+    },
+
+    // Base > BaseColumn > InformationPanel
+    {
+      code: '<Base><BaseColumn><InformationPanel>情報</InformationPanel></BaseColumn></Base>',
+    },
+
+    // Stack内
+    {
+      code: '<Stack><InformationPanel>情報</InformationPanel></Stack>',
+    },
+
+    // Cluster内
+    {
+      code: '<Cluster><InformationPanel>情報</InformationPanel></Cluster>',
+    },
+
+    // Base > BaseColumn > div > InformationPanel
+    {
+      code: '<Base><BaseColumn><div><InformationPanel>情報</InformationPanel></div></BaseColumn></Base>',
+    },
+
+    // ActionDialog with contentBgColor="COLUMN"
+    {
+      code: '<ActionDialog contentBgColor="COLUMN"><InformationPanel>情報</InformationPanel></ActionDialog>',
+    },
+
+    // FormDialog with contentBgColor="OVER_BACKGROUND"
+    {
+      code: '<FormDialog contentBgColor="OVER_BACKGROUND"><InformationPanel>情報</InformationPanel></FormDialog>',
+    },
+
+    // MessageDialog with contentBgColor="COLUMN"
+    {
+      code: '<MessageDialog contentBgColor="COLUMN"><InformationPanel>情報</InformationPanel></MessageDialog>',
+    },
+
+    // StepFormDialog with contentBgColor="OVER_BACKGROUND"
+    {
+      code: '<StepFormDialog contentBgColor="OVER_BACKGROUND"><InformationPanel>情報</InformationPanel></StepFormDialog>',
+    },
+
+    // Dialog > BaseColumn > InformationPanel
+    {
+      code: '<ActionDialog><BaseColumn><InformationPanel>情報</InformationPanel></BaseColumn></ActionDialog>',
+    },
+  ],
+
+  invalid: [
+    // Base直下
+    {
+      code: '<Base><InformationPanel>情報</InformationPanel></Base>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // Base > div > InformationPanel
+    {
+      code: '<Base><div><InformationPanel>情報</InformationPanel></div></Base>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // Base > Stack > InformationPanel
+    {
+      code: '<Base><Stack><InformationPanel>情報</InformationPanel></Stack></Base>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // Base > BaseColumn > Base > InformationPanel
+    {
+      code: '<Base><BaseColumn><Base><InformationPanel>情報</InformationPanel></Base></BaseColumn></Base>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // ActionDialog（contentBgColor未指定）
+    {
+      code: '<ActionDialog><InformationPanel>情報</InformationPanel></ActionDialog>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // FormDialog（contentBgColor="WHITE"）
+    {
+      code: '<FormDialog contentBgColor="WHITE"><InformationPanel>情報</InformationPanel></FormDialog>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // MessageDialog（contentBgColor未指定）
+    {
+      code: '<MessageDialog><InformationPanel>情報</InformationPanel></MessageDialog>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // StepFormDialog（contentBgColor="WHITE"）
+    {
+      code: '<StepFormDialog contentBgColor="WHITE"><InformationPanel>情報</InformationPanel></StepFormDialog>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // ActionDialog > div > InformationPanel（contentBgColor未指定）
+    {
+      code: '<ActionDialog><div><InformationPanel>情報</InformationPanel></div></ActionDialog>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+
+    // ネスト: Base > div > Base > InformationPanel
+    {
+      code: '<Base><div><Base><InformationPanel>情報</InformationPanel></Base></div></Base>',
+      errors: [{ messageId: 'inWhiteBg' }],
+    },
+  ],
+})