fix: 順序なしリストと定義リストの余白を reset (#4419)

kufu · Mar 11, 2024 · 830b026 · 830b026
1 parent 66006ca
commit 830b026
Show file tree

Hide file tree

Showing 24 changed files with 19 additions and 46 deletions.
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -15,7 +15,7 @@ export default {
 }
 
 export const All: StoryFn = () => (
-  <Stack as="dl" gap={3} className="shr-my-[unset] [&_dd]:shr-ms-[unset]">
+  <Stack as="dl" gap={3}>
     <Stack>
       <DtText>種類</DtText>
       <dd>

diff --git a/src/components/Base/Base.stories.tsx b/src/components/Base/Base.stories.tsx
@@ -98,13 +98,8 @@ export const BaseStory: StoryFn = () => {
 BaseStory.storyName = 'Base'
 
 const DescriptionList = styled.dl`
-  margin-block-start: unset;
   padding: 24px;
   background-color: #eee;
-
-  dd {
-    margin-inline-start: unset;
-  }
 `
 
 const List = styled.ul`

diff --git a/src/components/Base/BaseColumn/BaseColumn.stories.tsx b/src/components/Base/BaseColumn/BaseColumn.stories.tsx
@@ -11,7 +11,7 @@ export default {
 }
 
 export const All: StoryFn = () => (
-  <Stack as="ul" className="shr-my-[unset] shr-list-none shr-ps-[unset]">
+  <Stack as="ul" className="shr-list-none">
     <li>
       <p>padding / bgColor で余白と背景色を変えることもできます</p>
     </li>

diff --git a/src/components/ComboBox/VRTComboBox.stories.tsx b/src/components/ComboBox/VRTComboBox.stories.tsx
@@ -83,7 +83,6 @@ VRTMultiForcedColors.parameters = {
 }
 
 const WrapperList = styled.ul`
-  margin-block: unset;
   padding: 0 24px;
   list-style: none;
   & > li {

diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
@@ -103,7 +103,7 @@ export const Default: StoryFn = () => {
                 data-test="dialog-datepicker"
               />
             </Content>
-            <Fieldset title="Fruits">
+            <Fieldset title="Fruits" innerMargin={0.5}>
               <RadioList>
                 <li>
                   <RadioButton name="Apple" checked={value === 'Apple'} onChange={onChangeValue}>
@@ -357,7 +357,7 @@ export const Form_Dialog: StoryFn = () => {
         id="dialog-form"
         data-test="form-dialog-content"
       >
-        <Fieldset title="fruits">
+        <Fieldset title="fruits" innerMargin={0.5}>
           <RadioList>
             <li>
               <RadioButton name="Apple" checked={value === 'Apple'} onChange={onChange}>
@@ -1083,9 +1083,7 @@ const Content = styled.div`
 const StyledHeading = styled(Heading)`
   margin: 8px 24px;
 `
-const RadioList = styled.ul`
-  margin: 16px 24px;
-  padding: 0;
+const RadioList = styled(Cluster).attrs({ forwardedAs: 'ul', gap: 1.25 })`
   list-style: none;
 `
 const Footer = styled.div`

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -300,6 +300,5 @@ const Bottom = styled.div`
   height: 500px;
 `
 const RadioButtonList = styled.ul`
-  padding-inline-start: unset;
   list-style: none;
 `
diff --git a/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx b/src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx
@@ -232,8 +232,6 @@ const Description = styled.p`
   padding: 100px 0;
 `
 const RadioButtonList = styled.ul`
-  margin-block: unset;
-  padding-inline-start: unset;
   list-style: none;
 `
 

diff --git a/src/components/FormControl/FormControl.stories.tsx b/src/components/FormControl/FormControl.stories.tsx
@@ -13,7 +13,7 @@ export default {
 }
 
 export const All: StoryFn = () => (
-  <Stack gap={2} as="dl" className="shr-my-[unset] [&_dd]:shr-ms-[unset]">
+  <Stack gap={2} as="dl">
     <Stack>
       <Text italic color="TEXT_GREY" as="dt">
         基本

diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
@@ -56,7 +56,6 @@ const StyledPageHeading = styled(PageHeading)`
 `
 
 const List = styled.ul`
-  margin-block: unset;
   padding: 0 2.4rem;
   list-style: none;
 

diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -55,7 +55,7 @@ export const AltText: StoryFn = () => (
     <p>
       <span id="text">連絡帳</span>
     </p>
-    <dl className="shr-my-[unset] [&_dd]:shr-ms-[unset]">
+    <dl>
       <dt>visually hidden text</dt>
       <dd>
         <FaAddressBookIcon alt="連絡帳" />
@@ -167,9 +167,5 @@ const ItemWrapper = styled(BaseColumn)`
     flex-direction: column;
     align-items: center;
     gap: ${space(0.5)};
-
-    dd {
-      margin-inline-start: unset;
-    }
   `}
 `
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -129,8 +129,6 @@ export const Currency: StoryFn = () => {
 Currency.storyName = 'CurrencyInput'
 
 const ListStack = styled(Stack).attrs({ forwardedAs: 'ul' })`
-  margin-block: unset;
-  padding-inline-start: unset;
   list-style-type: none;
 `
 const StyledInput = styled(Input)`

diff --git a/src/components/NewFieldset/Fieldset.stories.tsx b/src/components/NewFieldset/Fieldset.stories.tsx
@@ -17,7 +17,7 @@ export default {
 }
 
 export const All: StoryFn = () => (
-  <Stack gap={2} as="dl" className="shr-my-[unset] [&_dd]:shr-ms-[unset]">
+  <Stack gap={2} as="dl">
     <Stack>
       <Text italic color="TEXT_GREY" as="dt">
         基本

diff --git a/src/components/NotificationBar/NotificationBar.stories.tsx b/src/components/NotificationBar/NotificationBar.stories.tsx
@@ -120,13 +120,8 @@ export const All: StoryFn = () => {
 
 const RootStack = styled(Stack).attrs({ forwardedAs: 'dl', gap: 1.5 })`
   ${({ theme: { color, spacingByChar } }) => css`
-    margin-block: unset;
     background-color: ${color.BACKGROUND};
     padding: ${spacingByChar(1.5)};
-
-    dd {
-      margin-inline-start: unset;
-    }
   `}
 `
 

diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx
@@ -69,7 +69,6 @@ RegFocus.play = () => userEvent.tab()
 
 const List = styled.ul`
   list-style-type: none;
-  margin-block: unset;
   padding: 0 20px;
 
   & > li {

diff --git a/src/components/RadioButtonPanel/RadioButtonPanel.stories.tsx b/src/components/RadioButtonPanel/RadioButtonPanel.stories.tsx
@@ -18,7 +18,7 @@ export const All: StoryFn = () => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => setCheckedName(e.currentTarget.name)
 
   return (
-    <Stack as="ul" gap={2} className="shr-my-[unset] shr-ps-[unset]">
+    <Stack as="ul" gap={2}>
       <Stack as="li">
         <Fieldset title="標準的な使い方" titleType="blockTitle">
           <Stack as="ul" gap={0.5} className="shr-ps-[unset]">

diff --git a/src/components/SmartHRLogo/SmartHRLogo.stories.tsx b/src/components/SmartHRLogo/SmartHRLogo.stories.tsx
@@ -39,7 +39,6 @@ export const All: Story = () => (
 All.storyName = 'all'
 
 const List = styled.ul`
-  margin: 0;
   padding: 0;
 
   li {

diff --git a/src/components/SpreadsheetTable/SpreadsheetTable.stories.tsx b/src/components/SpreadsheetTable/SpreadsheetTable.stories.tsx
@@ -38,7 +38,7 @@ export const All: StoryFn = () => {
   ]
 
   return (
-    <Stack gap={2} as="dl" className="shr-my-[unset] [&_dd]:shr-ms-[unset]">
+    <Stack gap={2} as="dl">
       <Stack>
         <Text italic color="TEXT_GREY" as="dt">
           基本

diff --git a/src/components/StatusLabel/StatusLabel.stories.tsx b/src/components/StatusLabel/StatusLabel.stories.tsx
@@ -64,11 +64,6 @@ All.storyName = 'all'
 
 const WrapperStack = styled(Stack).attrs({ forwardedAs: 'dl', gap: 1.5 })`
   ${({ theme: { spacingByChar } }) => css`
-    margin-block: unset;
     padding: ${spacingByChar(1.5)};
-
-    dd {
-      margin-inline-start: unset;
-    }
   `}
 `
diff --git a/src/components/TabBar/TabBar.stories.tsx b/src/components/TabBar/TabBar.stories.tsx
@@ -15,7 +15,7 @@ export default {
 }
 
 export const All: StoryFn = () => (
-  <Stack as="ul" className="shr-my-[unset] shr-list-none shr-ps-[unset]">
+  <Stack as="ul" className="shr-list-none">
     <li>
       <p>標準</p>
       <Template subid={1} />

diff --git a/src/components/TextLink/TextLink.stories.tsx b/src/components/TextLink/TextLink.stories.tsx
@@ -56,7 +56,6 @@ const Wrapper = styled.ul(
   ({ theme: { spacingByChar } }) => css`
     list-style: none;
     margin: ${spacingByChar(1.5)};
-    padding-inline-start: unset;
 
     li + li {
       margin-top: ${spacingByChar(1)};

diff --git a/src/components/TextLink/VRTTextLink.stories.tsx b/src/components/TextLink/VRTTextLink.stories.tsx
@@ -100,7 +100,6 @@ const Wrapper = styled.ul(
   ({ theme: { spacingByChar } }) => css`
     list-style: none;
     margin: ${spacingByChar(1.5)};
-    padding-inline-start: unset;
 
     li + li {
       margin-top: ${spacingByChar(1)};

diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
@@ -104,7 +104,6 @@ RegInput.play = async ({ canvasElement }) => {
 }
 
 const ListStack = styled(Stack).attrs({ forwardedAs: 'ul', gap: 1.5 })`
-  margin-block: unset;
   padding: 0 24px;
   list-style: none;
 `
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -285,7 +285,6 @@ const List = styled.dl`
     }
     dd {
       margin-top: 5px;
-      margin-inline-start: unset;
 
       &.limit {
         width: 200px;

diff --git a/src/smarthr-ui-preset.ts b/src/smarthr-ui-preset.ts
@@ -347,9 +347,16 @@ export default {
           lineHeight: theme('lineHeight.normal'),
           color: theme('colors.black'),
         },
-        p: {
+        'p, dl': {
           marginBlock: 'unset',
         },
+        ul: {
+          marginBlock: 'unset',
+          paddingInlineStart: 'unset',
+        },
+        dd: {
+          marginInlineStart: 'unset',
+        },
         'button, input, textarea, select': {
           fontFamily: 'inherit',
         },