canonical / canonical/vanilla-framework

p-divider: Allow removal of specific dividers

Open
#4,877 7 comments 0 reactions 0 assignees View on GitHub
P3 Triaged Triaged: v4
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Pattern to amend

`p-divider`

## Visual
Before:
![image](https://github.com/canonical/vanilla-framework/assets/58276363/9d514445-e42c-4dca-8a4f-d2490b6e1f76)
After:
![image](https://github.com/canonical/vanilla-framework/assets/58276363/877e746f-e3ad-46db-b977-79bad85004ca)

## Code

```
.p-divider {
.p-divider__block.no-divider {
&::before {
content: none;
}
}
}
```

## Context

Design required a section of p-dividers without the initial divider, [see figma](https://www.figma.com/file/mCV6YajRJtsnEsctbUNgI3/23.10-U.com---Why-Ubuntu-Pro?node-id=168%3A6220&mode=dev). Could also be used to remove any other dividers

Contributor guide

Open the contributing guide

Research direction

Start by locating the p-divider pattern styles and reviewing how its divider elements are generated. Implement the requested way to suppress selected dividers, then verify visually that the initial divider and any other targeted dividers can be removed without affecting the remaining ones.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, sass
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.