Skip to content

feat: remove ul from bass.css file and update components to use list #733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 5, 2025
+54 −49
Merged

feat: remove ul from bass.css file and update components to use list #733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
824efd8
feat: remove ul from bass.css file and update components to use list
krisxcrash Oct 30, 2025
3338589
fix: pr feedback
krisxcrash Nov 5, 2025
08d7955
Merge branch 'main' into kw/GWS-5723-FINAL
krisxcrash Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions .ladle/Welcome.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,24 +102,27 @@ export const Introduction: Story = () => {
<Components.Text className={styles.paragraph}>
Ladle provides several features to help with component development:
</Components.Text>
<ul className={styles.list}>
<li className={styles.listItem}>
<strong>Isolated Testing:</strong> Develop and test components in isolation from the
rest of the application
</li>
<li className={styles.listItem}>
<strong>Interactive Controls:</strong> Use controls to test components with
different props and configurations
</li>
<li className={styles.listItem}>
<strong>Viewport Sizing:</strong> Test components at different screen sizes with the
viewport controls
</li>
<li className={styles.listItem}>
<strong>Component Adapter Toggle:</strong> Use the toggle button in the bottom-right
corner to switch between the default React Aria and the plain HTML components
</li>
</ul>
<Components.UnorderedList
items={[
<>
Copy link
Contributor

@jeffredodd jeffredodd Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So a few things, if you look at the UnorderedList component, you'll see it actually provides the LI's. So we just need to provide the text here since the component will render this on each item.

          <li key={key} className={styles.item}>
            {item}
          </li>
        )```

Copy link
Contributor Author

@krisxcrash krisxcrash Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let me fix that!

<strong>Isolated Testing:</strong> Develop and test components in isolation from
the rest of the application
</>,
<>
<strong>Interactive Controls:</strong> Use controls to test components with
different props and configurations
</>,
<>
<strong>Viewport Sizing:</strong> Test components at different screen sizes with
the viewport controls
</>,
<>
<strong>Component Adapter Toggle:</strong> Use the toggle button in the
bottom-right corner to switch between the default React Aria and the plain HTML
components
</>,
]}
/>
</Flex>
</Components.Card>

Expand Down
33 changes: 20 additions & 13 deletions src/components/Common/RequirementsList/RequirementsList.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,33 @@
.list {
position: relative;
width: 100%;
list-style-type: none;
padding: 0;
gap: 0;

:global(li) {
margin-bottom: 0;
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 {
display: flex;
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 {
Expand Down
11 changes: 6 additions & 5 deletions src/components/Common/RequirementsList/RequirementsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => {

return (
<Flex flexDirection="column" alignItems="flex-start" gap={8}>
<ul className={styles.list}>
{requirements
<Components.UnorderedList
className={styles.list}
items={requirements
.sort((a, b) => (a.completed ? -1 : 1))
.map((step, i) => {
Copy link
Contributor

@jeffredodd jeffredodd Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good cause of how its returning an array w/o LIs :)

Copy link
Contributor Author

@krisxcrash krisxcrash Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yay! :)

return (
<li key={`${id}-${i}-${step.description}`} className={styles.listItem}>
<div key={`${id}-${i}-${step.description}`} className={styles.listItem}>
{step.completed ? (
<div className={classNames(styles.listItemIcon, styles.success)}>
<SuccessCheck width={16} height={16} />
Expand All @@ -35,10 +36,10 @@ export const RequirementsList = ({ requirements }: RequirementsListProps) => {
<Components.Heading as="h4">{step.title}</Components.Heading>
<Components.Text variant="supporting">{step.description}</Components.Text>
</Flex>
</li>
</div>
)
})}
</ul>
/>
</Flex>
)
}
4 changes: 4 additions & 0 deletions src/components/Common/UI/List/List.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 3 additions & 5 deletions src/components/Employee/Landing/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,9 @@ const Root = ({ employeeId, companyId, className }: SummaryProps) => {
</Flex>
<Flex flexDirection="column" gap={8}>
<Components.Heading as="h3">{t('stepsSubtitle')}</Components.Heading>
<ul>
<li>{t('steps.personalInfo')}</li>
<li>{t('steps.taxInfo')}</li>
<li>{t('steps.bankInfo')}</li>
</ul>
<Components.UnorderedList
items={[t('steps.personalInfo'), t('steps.taxInfo'), t('steps.bankInfo')]}
/>
</Flex>
<Flex flexDirection="column" alignItems="center" gap={8}>
<ActionsLayout justifyContent="center">
Expand Down
8 changes: 0 additions & 8 deletions src/styles/_Base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down