Skip to content

Commit

Permalink
fix(documentation): width and height percentage sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
leagrdv committed Dec 18, 2024
1 parent 912198c commit 272f842
Show file tree
Hide file tree
Showing 18 changed files with 42 additions and 36 deletions.
6 changes: 6 additions & 0 deletions .changeset/good-spoons-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@swisspost/design-system-nextjs-integration': patch
'@swisspost/design-system-documentation': patch
---

Updated width and height percentage classes in elements to fix their display.
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ To achieve that, you can use classes in the format:
- `.w-{size}` for the xs breakpoint,
- `.w-{breakpoint}-{size}` for breakpoints from sm to xl.

For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
For example, a button with classes `w-full w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.

To learn more about breakpoints, see the <a href="/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
### Lined up

Change the `width` of a `<card-control>` component, by putting it (for example) in a grid.
If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-100` to them.
If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-full` to them.

<Canvas of={CardControlStories.LinedUp} />
<div className="hide-col-default">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ export const LinedUp: Story = {
<div class="col-${12 / args.colCount}">
${Default.render?.(
{
class: args.fullHeight ? 'h-100' : null,
class: args.fullHeight ? 'h-full' : null,
label: `Checkbox${i}`,
description: i === 6 ? '20.- per year' : null,
type: args.type,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw';
### Product Card Group

For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
Ensure consistent height by applying the `.h-100` class to all product cards.
Ensure consistent height by applying the `.h-full` class to all product cards.

<Canvas of={ProductCardStories.Groupped} />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export const Groupped: Story = {
</div>
`,
args: {
cardClasses: ' h-100',
cardClasses: ' h-full',
},
};

Expand Down Expand Up @@ -224,11 +224,11 @@ export const Multipart: Story = {
</div>
<div class="card-body palette-alternate">
<button class="btn btn-secondary w-100 mb-12">
<button class="btn btn-secondary w-full mb-12">
<span>Order Sample Product</span>
</button>
<button class="btn btn-primary w-100">
<button class="btn btn-primary w-full">
<span>Print Sample Product</span>
</button>
</div>
Expand Down Expand Up @@ -311,11 +311,11 @@ export const Multipart: Story = {
</div>
<div class="card-body palette-alternate">
<button class="btn btn-secondary w-100 mb-12">
<button class="btn btn-secondary w-full mb-12">
<span>Order Sample Product</span>
</button>
<button class="btn btn-primary w-100">
<button class="btn btn-primary w-full">
<span>Print Sample Product</span>
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const Checkbox: Story = {
</span>
`;
})}
<div class="mt-32 w-100"></div>
<div class="mt-32 w-full"></div>
${Inline.render?.({ ...context.args, ...Inline.args }, context)}
</div>
`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export const Rating: Story = {
return schemes(
() => html`
<div class="d-flex gap-16 mb-16">
<div class="w-50 d-flex gap-4">readonly: false</div>
<div class="w-50 d-flex gap-4">readonly: true</div>
<div class="w-half d-flex gap-4">readonly: false</div>
<div class="w-half d-flex gap-4">readonly: true</div>
</div>
${bombArgs({
stars: [3, 5, 10],
Expand All @@ -30,10 +30,10 @@ export const Rating: Story = {
(args: Args) =>
html`
<div class="d-flex gap-16">
<div class="w-50">
<div class="w-half">
${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
</div>
<div class="w-50">
<div class="w-half">
${meta.render?.({ ...context.args, ...args, readonly: true }, context)}
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const SegmentedButton: Story = {

return schemes(
scheme => html`
<div class=" d-flex flex-column w-75 gap-16 p-16">
<div class=" d-flex flex-column w-three-quarters gap-16 p-16">
${labelCounts.map(count => {
const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<span [class.visually-hidden]="selectedOption">Default custom-select</span>
<span *ngIf="selectedOption" aria-hidden="true">{{ selectedOption.label }}</span>
</button>
<div aria-labelledby="customSelectButton" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
<div aria-labelledby="customSelectButton" class="w-full max-w-full" ngbDropdownMenu role="listbox">
<button
(click)="toggle.focus()"
(focus)="selectedOption = option"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<label class="form-label" id="customSelectLabel">
Floatinglabel custom-select {{ infoText }}
</label>
<div aria-labelledby="customSelectLabel" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
<div aria-labelledby="customSelectLabel" class="w-full max-w-full" ngbDropdownMenu role="listbox">
<button
(click)="toggle.focus()"
(focus)="selectedOption = option"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ const renderAnimateVariants = (args: Args, customAttrs: { name: string; animatio
${customAttrs.map(
variantArgs =>
html`
<div class="w-50 py-16">
<div class="w-half py-16">
<p class="text-muted fs-tiny">Animation: ${variantArgs.animation}</p>
<post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ export const ColumnBreakExample: Story = {
${args.renderBreakingElement
? html`
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="w-full"></div>
`
: nothing}
<div class="col-3">.col-3</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function FontSizesAndLineheights() {
<table className="table">
<thead>
<tr>
<th className="w-25">Name</th>
<th className="w-quarter">Name</th>
<th>Class</th>
<th>Scss variable</th>
<th>Font Size</th>
Expand Down Expand Up @@ -125,7 +125,7 @@ export function Headings() {
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
<th className="w-quarter">Tag</th>
<th>Visual</th>
</tr>
</thead>
Expand Down Expand Up @@ -190,7 +190,7 @@ export function Paragraphs() {
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
<th className="w-quarter">Tag</th>
<th>Visual</th>
</tr>
</thead>
Expand Down Expand Up @@ -234,7 +234,7 @@ export function Links() {
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
<th className="w-quarter">Tag</th>
<th>Visual</th>
</tr>
</thead>
Expand Down Expand Up @@ -284,7 +284,7 @@ export function Inlines() {
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
<th className="w-quarter">Tag</th>
<th>Visual</th>
</tr>
</thead>
Expand Down Expand Up @@ -402,7 +402,7 @@ export function Lists() {
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
<th className="w-quarter">Tag</th>
<th>Visual</th>
</tr>
</thead>
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/introduction.docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { technologies } from './introduction.data';
))}
</ul>
<div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
<div className="mt-32 mb-16 w-100">
<div className="mt-32 mb-16 w-full">
<a
className="btn btn-primary btn-lg"
href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ export default meta;
type Story = StoryObj;

export const Default: Story = {
render: () => html` <div class="w-50 rounded p-16 elevation-5">I'm elevated!</div> `,
render: () => html` <div class="w-half rounded p-16 elevation-5">I'm elevated!</div> `,
};
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@ export const TextAlign: Story = {

export const TextWrapping: Story = {
render: () => html`
<div class="my-container w-50">
<div class="my-container w-half">
<p class="text-nowrap">
This text should NOT wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
</p>
</div>
<div class="my-container w-50 text-nowrap">
<div class="my-container w-half text-nowrap">
<p class="text-wrap">
This text should wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
</p>
Expand All @@ -78,7 +78,7 @@ export const TextWrapping: Story = {

export const WordBreak: Story = {
render: () => html`
<div class="my-container w-50">
<div class="my-container w-half">
<p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</div>
`,
Expand Down
12 changes: 6 additions & 6 deletions packages/nextjs-integration/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function Home() {
<section className="mt-huge-r">
<div className="row">
<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="2146" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">Umzug melden</p>
Expand All @@ -50,7 +50,7 @@ export default function Home() {
</div>

<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="2026" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">Shop</p>
Expand All @@ -59,7 +59,7 @@ export default function Home() {
</div>

<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="3140" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">
Expand All @@ -70,7 +70,7 @@ export default function Home() {
</div>

<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="2456" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">
Expand All @@ -81,7 +81,7 @@ export default function Home() {
</div>

<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="1012" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">
Expand All @@ -92,7 +92,7 @@ export default function Home() {
</div>

<div className="col-xl-2 col-md-6">
<a href="#" className="card h-100 product-card">
<a href="#" className="card h-full product-card">
<div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
<PostIcon name="1024" className="fs-bigger-big"></PostIcon>
<p className="mt-8 text-center text-muted fs-regular fw-normal">
Expand Down

0 comments on commit 272f842

Please sign in to comment.