Merge pull request #1120 from kufu/update-smarthr-ui-v46.0.1

🆙 smarthr-ui v46.0.1 に追従
kufu · Apr 12, 2024 · 576154f · 576154f
2 parents b9966e8 + 6c3ef2f
commit 576154f
Show file tree

Hide file tree

Showing 9 changed files with 572 additions and 79 deletions.
diff --git a/content/articles/products/components/button.mdx b/content/articles/products/components/button.mdx
@@ -3,7 +3,7 @@ title: 'Button'
 description: ' '
 ---
 
-import { Button, Cluster, FaCaretDownIcon, FaCloudDownloadAltIcon, FaFilterIcon, FaPlusCircleIcon } from 'smarthr-ui'
+import { Button, Cluster, FaCaretDownIcon, FaCloudArrowDownIcon, FaFilterIcon, FaCirclePlusIcon } from 'smarthr-ui'
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
 import { ComponentStory } from '@Components/ComponentStory'
 
@@ -38,10 +38,10 @@ SmartHR UIのButtonには意図しない`submit`を防ぐために、`type="butt
 ```tsx editable codeBlock
 <>
   <Button variant="primary">ボタン</Button>
-  <Button variant="primary" prefix={<FaPlusCircleIcon />}>ボタン</Button>
+  <Button variant="primary" prefix={<FaCirclePlusIcon />}>ボタン</Button>
   <Button variant="primary" suffix={<FaCaretDownIcon />}>ボタン</Button>
   <Button variant="primary" square>
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
 </>
 ```
@@ -55,10 +55,10 @@ SmartHR UI では特に種類の指定をしない場合はSecondaryになりま
 ```tsx editable codeBlock
 <>
   <Button>ボタン</Button>
-  <Button prefix={<FaPlusCircleIcon />}>ボタン</Button>
+  <Button prefix={<FaCirclePlusIcon />}>ボタン</Button>
   <Button suffix={<FaCaretDownIcon />}>ボタン</Button>
   <Button square>
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
 </>
 ```
@@ -73,10 +73,10 @@ SmartHR UI では特に種類の指定をしない場合はSecondaryになりま
 ```tsx editable codeBlock
 <>
   <Button variant="danger">ボタン</Button>
-  <Button variant="danger" prefix={<FaPlusCircleIcon />}>ボタン</Button>
+  <Button variant="danger" prefix={<FaCirclePlusIcon />}>ボタン</Button>
   <Button variant="danger" suffix={<FaCaretDownIcon />}>ボタン</Button>
   <Button variant="danger" square>
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
 </>
 ```
@@ -89,10 +89,10 @@ Secondaryボタンよりもさらに優先度が低いアクションのボタ
 ```tsx editable codeBlock
 <>
   <Button variant="text">ボタン</Button>
-  <Button variant="text" prefix={<FaPlusCircleIcon />}>ボタン</Button>
+  <Button variant="text" prefix={<FaCirclePlusIcon />}>ボタン</Button>
   <Button variant="text" suffix={<FaCaretDownIcon />}>ボタン</Button>
   <Button variant="text" square>
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
 </>
 ```
@@ -121,8 +121,8 @@ SmartHR UIでは、サイズ（`size`props）で指定できます。
 
 | 種類 | 表示例 | 説明 |
 | :--- | :--- | :--- |
-| `通常` | <Button prefix={<FaPlusCircleIcon />} size="default">ボタン</Button> | 通常のサイズです。 |
-| `小` | <Button prefix={<FaPlusCircleIcon />} size="s">ボタン</Button> | レイアウトの都合上、どうしようもない場合に使うサイズです。 |
+| `通常` | <Button prefix={<FaCirclePlusIcon />} size="default">ボタン</Button> | 通常のサイズです。 |
+| `小` | <Button prefix={<FaCirclePlusIcon />} size="s">ボタン</Button> | レイアウトの都合上、どうしようもない場合に使うサイズです。 |
 
 ### アイコンの有無
 
@@ -134,7 +134,7 @@ SmartHR UIでは、プレフィックス（`prefix`props）およびサフィッ
 
 | 種類 | 表示例 | アイコンの役割 |
 | :--- | :--- | :--- |
-| `アイコン付き（左）` | <Cluster><Button prefix={<FaPlusCircleIcon />}>項目を追加</Button><Button prefix={<FaCloudDownloadAltIcon />}>ダウンロード</Button></Cluster> | ボタンのアクション（機能）を表すために使います。<br />同じアクションのボタンには、同じアイコンを採用してください。 |
+| `アイコン付き（左）` | <Cluster><Button prefix={<FaCirclePlusIcon />}>項目を追加</Button><Button prefix={<FaCloudArrowDownIcon />}>ダウンロード</Button></Cluster> | ボタンのアクション（機能）を表すために使います。<br />同じアクションのボタンには、同じアイコンを採用してください。 |
 | `アイコン付き（右）` | <Cluster><Button suffix={<FaCaretDownIcon />}>一括操作</Button><Button suffix={<FaFilterIcon />}>絞り込み</Button></Cluster> | ドロップダウンのように、ボタン押下後に表示するUIを想起させるために使います。<br />（例：[ドロップダウンメニューボタン](/products/components/dropdown/dropdown-menu-button/)、[Dropdown](/products/components/dropdown/)、[FilterDropdown](/products/components/dropdown/filter-dropdown/)） |
 
 #### アイコンボタン
@@ -144,10 +144,10 @@ SmartHR UIでは、プレフィックス（`prefix`props）およびサフィッ
 ```tsx editable codeBlock
 <>
   <Button square>
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
   <Button square size="s">
-    <FaPlusCircleIcon alt="追加" />
+    <FaCirclePlusIcon alt="追加" />
   </Button>
 </>
 ```
@@ -169,9 +169,9 @@ SmartHR UIでは、プレフィックス（`prefix`props）およびサフィッ
 
 ```tsx editable codeBlock noIframe
 <>
-  <Button variant="primary" prefix={<FaPlusCircleIcon />} disabled>ボタン</Button>
-  <Button prefix={<FaPlusCircleIcon />} disabled>ボタン</Button>
-  <Button prefix={<FaPlusCircleIcon />} disabled disabledDetail={{ message: '無効状態の理由（理由を配置するスペースがない場合）' }}>ボタン</Button>
+  <Button variant="primary" prefix={<FaCirclePlusIcon />} disabled>ボタン</Button>
+  <Button prefix={<FaCirclePlusIcon />} disabled>ボタン</Button>
+  <Button prefix={<FaCirclePlusIcon />} disabled disabledDetail={{ message: '無効状態の理由（理由を配置するスペースがない場合）' }}>ボタン</Button>
 </>
 ```
 

diff --git a/content/articles/products/components/dropdown/index.mdx b/content/articles/products/components/dropdown/index.mdx
@@ -7,7 +7,13 @@ import { ComponentStory } from '@Components/ComponentStory'
 
 ボタンを押すとパネルが開く機能の抽象コンポーネントです。大きく分けるとパネルを開くための引き金となる DropdownTrigger とパネル自体を指す DropdownContent から構成されます。
 
-Dropdown を使用したより詳細なコンポーネントに [DropdownMenuButton](../dropdown-menu-button) と [FilterDropdown](../filter-dropdown) があります。どちらも開発で頻繁に利用する実装をコンポーネント化したものです。
+## Dropdown を使用したコンポーネント
+
+開発で頻繁に利用する実装をコンポーネント化しています。
+
+- [DropdownMenuButton](../dropdown-menu-button)
+- [FilterDropdown](../filter-dropdown)
+- [SortDropdown](../sort-dropdown)
 
 <ComponentStory name="Dropdown" />
 

diff --git a/content/articles/products/components/dropdown/sort-dropdown.mdx b/content/articles/products/components/dropdown/sort-dropdown.mdx
@@ -0,0 +1,18 @@
+---
+title: 'SortDropdown'
+description: ''
+---
+import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { ComponentStory } from '@Components/ComponentStory'
+
+主に表の並べ替え操作を統一するためのコンポーネントです。並べ替え項目と並び順を指定でき、ボタンラベルとアイコンで現在の並び順を表します。
+
+<ComponentStory name="SortDropdown" />
+
+## 使用上の注意
+
+テーブルではないコレクションを並べ替える時に使います。テーブルの場合は[Th](/products/components/table/)の`sort`プロパティを使ってください。
+
+## Props
+
+<ComponentPropsTable name="SortDropdown" />
diff --git a/content/articles/products/components/icon.mdx b/content/articles/products/components/icon.mdx
@@ -7,11 +7,6 @@ import { ComponentPreview } from '@Components/ComponentPreview'
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
 import { ComponentStory } from '@Components/ComponentStory'
 import {
-  FaAddressBookIcon,
-  FaAddressCardIcon,
-  FaAnglesDownIcon,
-  FaAnglesLeftIcon,
-  FaAnglesRightIcon,
   FaUpRightFromSquareIcon,
   FaCirclePlusIcon,
   FaCircleQuestionIcon
@@ -32,19 +27,9 @@ Font Awesomeアイコンはプロダクトに必要なアイコンのみイン
 
 ## 種類
 
-Font Awesomeのアイコンをすべて網羅したものではありません。
+Font Awesomeから必要なものを取り込んでいます。
 
-実際に登録されてるアイコンを確認する際は、[Storybook](https://story.smarthr-ui.dev/?path=/story/media（メディア）-icon--all)を確認してください。
-
-```tsx editable codeBlock
-<>
-  <FaAddressBookIcon />
-  <FaAddressCardIcon />
-  <FaAnglesDownIcon />
-  <FaAnglesLeftIcon />
-  <FaAnglesRightIcon />
-</>
-```
+実際に登録されてるアイコンは、[Storybook](https://story.smarthr-ui.dev/?path=/story/media（メディア）-icon--all)を確認してください。
 
 ## 状態
 
@@ -82,4 +67,4 @@ Font Awesomeのアイコンをすべて網羅したものではありません
 
 ## Props
 
-<ComponentPropsTable name="FaAddressBookIcon" />
+<ComponentPropsTable name="FaUpRightFromSquareIcon" />
diff --git a/content/articles/products/components/range-separator.mdx b/content/articles/products/components/range-separator.mdx
@@ -0,0 +1,14 @@
+---
+title: 'RangeSeparator'
+description: ''
+---
+import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { ComponentStory } from '@Components/ComponentStory'
+
+期間や範囲を表すためのコンポーネントです。`〜` や `–` といった文字に適切な意味を与えられます。
+
+<ComponentStory name="RangeSeparator" />
+
+## Props
+
+<ComponentPropsTable name="RangeSeparator" />
diff --git a/content/articles/products/components/tooltip.mdx b/content/articles/products/components/tooltip.mdx
@@ -4,10 +4,10 @@ description: ''
 ---
 import {
   BaseColumn,
-  FaArrowAltCircleDownIcon,
-  FaArrowAltCircleLeftIcon,
-  FaArrowAltCircleRightIcon,
-  FaArrowAltCircleUpIcon,
+  FaArrowDownIcon,
+  FaArrowLeftIcon,
+  FaArrowRightIcon,
+  FaArrowUpIcon,
   FaExternalLinkAltIcon,
   FaQuestionCircleIcon,
   FaInfoCircleIcon,
@@ -104,7 +104,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="left"
     vertical="bottom">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleUpIcon color="TEXT_LINK" />
+      <FaArrowUpIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">left & bottom</Text>
     </Cluster>
   </DynamicTooltip>
@@ -115,7 +115,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="center"
     vertical="bottom">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleUpIcon color="TEXT_LINK" />
+      <FaArrowUpIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">center & bottom</Text>
     </Cluster>
   </DynamicTooltip>
@@ -126,7 +126,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="right"
     vertical="bottom">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleUpIcon color="TEXT_LINK" />
+      <FaArrowUpIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">right & bottom</Text>
     </Cluster>
   </DynamicTooltip>
@@ -140,7 +140,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="left"
     vertical="top">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleDownIcon color="TEXT_LINK" />
+      <FaArrowDownIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">left & top</Text>
     </Cluster>
   </DynamicTooltip>
@@ -151,7 +151,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="center"
     vertical="top">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleDownIcon color="TEXT_LINK" />
+      <FaArrowDownIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">center & top</Text>
     </Cluster>
   </DynamicTooltip>
@@ -162,7 +162,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="right"
     vertical="top">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleDownIcon color="TEXT_LINK" />
+      <FaArrowDownIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">right & top</Text>
     </Cluster>
   </DynamicTooltip>
@@ -176,7 +176,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="left"
     vertical="middle">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleRightIcon color="TEXT_LINK" />
+      <FaArrowRightIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">left & middle</Text>
     </Cluster>
   </DynamicTooltip>
@@ -186,7 +186,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="right"
     vertical="middle">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleLeftIcon color="TEXT_LINK" />
+      <FaArrowLeftIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">right & middle</Text>
     </Cluster>
   </DynamicTooltip>
@@ -202,7 +202,7 @@ export const DynamicTooltip = ({children, ...props}) => {
     horizontal="auto"
     vertical="auto">
     <Cluster align="center" gap={0.25}>
-      <FaArrowAltCircleDownIcon color="TEXT_LINK" />
+      <FaArrowDownIcon color="TEXT_LINK" />
       <Text color="TEXT_LINK">auto & auto</Text>
     </Cluster>
   </DynamicTooltip>

diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "react-instantsearch-dom": "^6.40.4",
     "react-live": "^4.1.5",
     "react-string-replace": "^1.1.1",
-    "smarthr-ui": "^44.0.0",
+    "smarthr-ui": "^46.0.1",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {