From 824efd8e9a0e47c583dae05116cdb7620077ead2 Mon Sep 17 00:00:00 2001 From: Kristine White Date: Thu, 30 Oct 2025 13:55:27 -0700 Subject: [PATCH 1/2] feat: remove ul from bass.css file and update components to use list --- .ladle/Welcome.stories.tsx | 41 +++++++++++-------- .../RequirementsList.module.scss | 33 +++++++++------ .../RequirementsList/RequirementsList.tsx | 11 ++--- .../Common/UI/List/List.module.scss | 4 ++ src/components/Employee/Landing/Landing.tsx | 8 ++-- src/styles/_Base.scss | 8 ---- 6 files changed, 56 insertions(+), 49 deletions(-) diff --git a/.ladle/Welcome.stories.tsx b/.ladle/Welcome.stories.tsx index d9b79291f..4a3374830 100644 --- a/.ladle/Welcome.stories.tsx +++ b/.ladle/Welcome.stories.tsx @@ -102,24 +102,29 @@ export const Introduction: Story = () => { Ladle provides several features to help with component development: - + +
  • + Isolated Testing: Develop and test components in isolation from + the rest of the application +
    • +
  • + Interactive Controls: Use controls to test components with + different props and configurations +
    • +
  • + Viewport Sizing: Test components at different screen sizes with + the viewport controls +
    • +
  • + Component Adapter Toggle: Use the toggle button in the + bottom-right corner to switch between the default React Aria and the plain HTML + components +
    • + , + ]} + /> diff --git a/src/components/Common/RequirementsList/RequirementsList.module.scss b/src/components/Common/RequirementsList/RequirementsList.module.scss index 4412a5c62..dd8e94209 100644 --- a/src/components/Common/RequirementsList/RequirementsList.module.scss +++ b/src/components/Common/RequirementsList/RequirementsList.module.scss @@ -2,6 +2,26 @@ .list { position: relative; width: 100%; + list-style-type: none !important; + padding: 0 !important; + gap: 0 !important; + + :global(li) { + margin-bottom: 0 !important; + position: relative; + + &:not(:last-child) .listItem::after { + content: ''; + position: absolute; + left: toRem(14); // center of the icon + top: toRem(32); // just below the icon + width: 0; + height: calc(100% - toRem(32)); //account for the icon height + margin: toRem(7) 0; //adding gap to the line + border-left: 2px dotted var(--g-colorBorder); + z-index: 0; + } + } } .listItem { @@ -9,19 +29,6 @@ align-items: flex-start; gap: toRem(16); position: relative; - - // Draw the vertical dotted line for all but the last item - &:not(:last-child)::after { - content: ''; - position: absolute; - left: toRem(14); // center of the icon - top: toRem(32); // just below the icon - width: 0; - height: calc(100% - toRem(32)); //account for the icon height - margin: toRem(7) 0; //adding gap to the line - border-left: 2px dotted var(--g-colorBorder); - z-index: 0; - } } .listItemIcon { diff --git a/src/components/Common/RequirementsList/RequirementsList.tsx b/src/components/Common/RequirementsList/RequirementsList.tsx index 5aef7486e..87c1219df 100644 --- a/src/components/Common/RequirementsList/RequirementsList.tsx +++ b/src/components/Common/RequirementsList/RequirementsList.tsx @@ -18,12 +18,13 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => { return ( -
      - {requirements + (a.completed ? -1 : 1)) .map((step, i) => { return ( -
    • +
      {step.completed ? (
      @@ -35,10 +36,10 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => { {step.title} {step.description} -
      • + ) })} -
    + />     ) } diff --git a/src/components/Common/UI/List/List.module.scss b/src/components/Common/UI/List/List.module.scss index 83f6edc0b..3df4df39d 100644 --- a/src/components/Common/UI/List/List.module.scss +++ b/src/components/Common/UI/List/List.module.scss @@ -10,6 +10,10 @@ &[data-variant='unordered'] { list-style-type: disc; + display: flex; + flex-direction: column; + gap: toRem(12); + padding: 0 0 0 toRem(24); } .item { diff --git a/src/components/Employee/Landing/Landing.tsx b/src/components/Employee/Landing/Landing.tsx index 06337def0..0800aba51 100644 --- a/src/components/Employee/Landing/Landing.tsx +++ b/src/components/Employee/Landing/Landing.tsx @@ -59,11 +59,9 @@ const Root = ({ employeeId, companyId, className }: SummaryProps) => { {t('stepsSubtitle')} -
      -
    • {t('steps.personalInfo')}
      • -
    • {t('steps.taxInfo')}
      • -
    • {t('steps.bankInfo')}
      • -
    +     diff --git a/src/styles/_Base.scss b/src/styles/_Base.scss index a5a763b03..7f3343711 100644 --- a/src/styles/_Base.scss +++ b/src/styles/_Base.scss @@ -14,14 +14,6 @@ box-sizing: border-box; } - ul { - margin: 0; - display: flex; - flex-direction: column; - gap: toRem(12); - padding: 0 0 0 toRem(24); - } - hr { width: 100%; border-top: 1px solid var(--g-colorBorder); From 33385897e7c09675fa29d95fac5458687a3ec5a2 Mon Sep 17 00:00:00 2001 From: Kristine White Date: Wed, 5 Nov 2025 10:13:43 -0800 Subject: [PATCH 2/2] fix: pr feedback --- .ladle/Welcome.stories.tsx | 32 +++++++++---------- .../RequirementsList.module.scss | 8 ++--- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/.ladle/Welcome.stories.tsx b/.ladle/Welcome.stories.tsx index 4a3374830..6d339da0b 100644 --- a/.ladle/Welcome.stories.tsx +++ b/.ladle/Welcome.stories.tsx @@ -105,23 +105,21 @@ export const Introduction: Story = () => { -
  • - Isolated Testing: Develop and test components in isolation from - the rest of the application -
    • -
  • - Interactive Controls: Use controls to test components with - different props and configurations -
    • -
  • - Viewport Sizing: Test components at different screen sizes with - the viewport controls -
    • -
  • - Component Adapter Toggle: Use the toggle button in the - bottom-right corner to switch between the default React Aria and the plain HTML - components -
    • + Isolated Testing: Develop and test components in isolation from + the rest of the application + , + <> + Interactive Controls: Use controls to test components with + different props and configurations + , + <> + Viewport Sizing: Test components at different screen sizes with + the viewport controls + , + <> + Component Adapter Toggle: Use the toggle button in the + bottom-right corner to switch between the default React Aria and the plain HTML + components , ]} /> diff --git a/src/components/Common/RequirementsList/RequirementsList.module.scss b/src/components/Common/RequirementsList/RequirementsList.module.scss index dd8e94209..51417db51 100644 --- a/src/components/Common/RequirementsList/RequirementsList.module.scss +++ b/src/components/Common/RequirementsList/RequirementsList.module.scss @@ -2,12 +2,12 @@ .list { position: relative; width: 100%; - list-style-type: none !important; - padding: 0 !important; - gap: 0 !important; + list-style-type: none; + padding: 0; + gap: 0; :global(li) { - margin-bottom: 0 !important; + margin-bottom: 0; position: relative; &:not(:last-child) .listItem::after {