fix: BulkActionRow に tertiary が使われる時に色を調整

kufu · Oct 16, 2024 · 394a84a · 394a84a
1 parent d8e757b
commit 394a84a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/smarthr-ui/src/components/Table/BulkActionRow.tsx b/packages/smarthr-ui/src/components/Table/BulkActionRow.tsx
@@ -9,6 +9,8 @@ const bulkActionRow = tv({
  cell: [
  'shr-bg-action-background shr-p-1 shr-text-base',
  'forced-colors:shr-border-t-shorthand',
+ // コントラスト比が足りないため上書き（smarthr-ui-Button/AnchorButton では variants を特定できないため色を指定）
+ '[&_.smarthr-ui-Button.shr-text-link]:shr-text-link-darken [&_.smarthr-ui-AnchorButton.shr-text-link]:shr-text-link-darken',
  ],
  },
 })

diff --git a/packages/smarthr-ui/src/components/Table/Table.stories.tsx b/packages/smarthr-ui/src/components/Table/Table.stories.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { Base } from '../Base'
 import { Button } from '../Button'
+import { FaPencilIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { Text } from '../Text'
 
@@ -277,7 +278,21 @@ export const All: StoryFn = () => (
  <Th>Protein (g)</Th>
  <Th>Button</Th>
  </tr>
- <BulkActionRow>Bulk action area</BulkActionRow>
+ <BulkActionRow>
+ <Cluster align="center">
+ <p>50件のオブジェクトが選択されています。</p>
+ <Button
+ variant="tertiary"
+ size="s"
+ // className="shr-bg-transparent shr-text-main shr-font-normal hover:shr-bg-transparent"
+ >
+ 一覧のオブジェクト9,999件をすべて選択
+ </Button>
+ <Button size="s" prefix={<FaPencilIcon />}>
+ 一括操作
+ </Button>
+ </Cluster>
+ </BulkActionRow>
  </thead>
  <tbody>
  {data.map(({ name, calories, fat, carbs, protein }, i) => (