fix: lint エラーを修正 (#4549)

kufu · Apr 8, 2024 · c251602 · c251602
1 parent 11fc83e
commit c251602
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 45 deletions.
diff --git a/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -6,7 +6,6 @@ import { FormControl } from '../../FormControl'
 import { Cluster, Stack } from '../../Layout'
 import { Fieldset } from '../../NewFieldset'
 import { RadioButton } from '../../RadioButton'
-import { Section } from '../../SectioningContent'
 import { Select } from '../../Select'
 import { Dropdown } from '../Dropdown'
 import { DropdownCloser } from '../DropdownCloser'
@@ -83,48 +82,46 @@ export const SortDropdown: FC<Props & ElementProps> = ({
       </DropdownTrigger>
       <DropdownContent controllable>
         <DropdownScrollArea>
-          <Section>
-            <Stack className={bodyStyle}>
-              <FormControl title={sortFieldLabel}>
-                <Select
-                  name="sortFields"
-                  options={innerFields}
-                  onChange={handleChange}
-                  className={selectStyle}
-                />
-              </FormControl>
-              <Fieldset title={sortOrderLabel} innerMargin={0.5}>
-                <Cluster gap={1.25}>
-                  <RadioButton
-                    name="sortOrder"
-                    value="asc"
-                    defaultChecked={innerCheckedOrder === 'asc'}
-                    onChange={() => setCheckedInnerOrder('asc')}
-                  >
-                    {ascLabel}
-                  </RadioButton>
-                  <RadioButton
-                    name="sortOrder"
-                    value="desc"
-                    defaultChecked={innerCheckedOrder === 'desc'}
-                    onChange={() => setCheckedInnerOrder('desc')}
-                  >
-                    {descLabel}
-                  </RadioButton>
-                </Cluster>
-              </Fieldset>
-            </Stack>
-            <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
-              <DropdownCloser>
-                <Button onClick={onCancel}>{cancelButtonLabel}</Button>
-              </DropdownCloser>
-              <DropdownCloser>
-                <Button variant="primary" onClick={handleApply}>
-                  {applyButtonLabel}
-                </Button>
-              </DropdownCloser>
-            </Cluster>
-          </Section>
+          <Stack className={bodyStyle}>
+            <FormControl title={sortFieldLabel}>
+              <Select
+                name="sortFields"
+                options={innerFields}
+                onChange={handleChange}
+                className={selectStyle}
+              />
+            </FormControl>
+            <Fieldset title={sortOrderLabel} innerMargin={0.5}>
+              <Cluster gap={1.25}>
+                <RadioButton
+                  name="sortOrder"
+                  value="asc"
+                  defaultChecked={innerCheckedOrder === 'asc'}
+                  onChange={() => setCheckedInnerOrder('asc')}
+                >
+                  {ascLabel}
+                </RadioButton>
+                <RadioButton
+                  name="sortOrder"
+                  value="desc"
+                  defaultChecked={innerCheckedOrder === 'desc'}
+                  onChange={() => setCheckedInnerOrder('desc')}
+                >
+                  {descLabel}
+                </RadioButton>
+              </Cluster>
+            </Fieldset>
+          </Stack>
+          <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
+            <DropdownCloser>
+              <Button onClick={onCancel}>{cancelButtonLabel}</Button>
+            </DropdownCloser>
+            <DropdownCloser>
+              <Button variant="primary" onClick={handleApply}>
+                {applyButtonLabel}
+              </Button>
+            </DropdownCloser>
+          </Cluster>
         </DropdownScrollArea>
       </DropdownContent>
     </Dropdown>

diff --git a/src/components/Dropdown/SortDropdown/useSortDropdown.ts b/src/components/Dropdown/SortDropdown/useSortDropdown.ts
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 
-import { FaSortAmountDownIcon, FaSortAmountUpIcon } from '../../Icon'
+import { FaArrowDownWideShortIcon, FaArrowUpWideShortIcon } from '../../Icon'
 
 import { SortDropdown } from './SortDropdown'
 import { sortDropdownStyle } from './style'
@@ -67,7 +67,7 @@ export const useSortDropdown = ({ sortFields, defaultOrder, onApply, decorators
   }, [ascLabel, descLabel, selectedLabel, checkedOrder])
 
   const SortIcon = useMemo(
-    () => (checkedOrder === 'asc' ? FaSortAmountDownIcon : FaSortAmountUpIcon),
+    () => (checkedOrder === 'asc' ? FaArrowUpWideShortIcon : FaArrowDownWideShortIcon),
     [checkedOrder],
   )
 

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -7,12 +7,14 @@ import {
   FaAnglesLeft,
   FaAnglesRight,
   FaArrowDown,
+  FaArrowDownWideShort,
   FaArrowLeft,
   FaArrowRight,
   FaArrowRotateLeft,
   FaArrowRotateRight,
   FaArrowUp,
   FaArrowUp19,
+  FaArrowUpWideShort,
   FaArrowsRotate,
   FaBabyCarriage,
   FaBan,
@@ -170,6 +172,8 @@ export const FaArrowRightIcon = /*#__PURE__*/ createIcon(FaArrowRight)
 export const FaArrowRotateLeftIcon = /*#__PURE__*/ createIcon(FaArrowRotateLeft)
 export const FaArrowRotateRightIcon = /*#__PURE__*/ createIcon(FaArrowRotateRight)
 export const FaArrowUp19Icon = /*#__PURE__*/ createIcon(FaArrowUp19)
+export const FaArrowUpWideShortIcon = /*#__PURE__*/ createIcon(FaArrowUpWideShort)
+export const FaArrowDownWideShortIcon = /*#__PURE__*/ createIcon(FaArrowDownWideShort)
 export const FaArrowUpIcon = /*#__PURE__*/ createIcon(FaArrowUp)
 export const FaArrowsRotateIcon = /*#__PURE__*/ createIcon(FaArrowsRotate)
 export const FaBabyCarriageIcon = /*#__PURE__*/ createIcon(FaBabyCarriage)