Skip to content
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

fix(documentation): width and height percentage sizing #4328

Merged
merged 2 commits into from
Dec 19, 2024
Merged

fix(documentation): width and height percentage sizing #4328

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
272f842
fix(documentation): width and height percentage sizing
leagrdv Dec 18, 2024
598e17d
Update .changeset/good-spoons-tie.md
leagrdv Dec 19, 2024
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
6 changes: 6 additions & 0 deletions .changeset/good-spoons-tie.md
View file
Open in desktop
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.
leagrdv marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/components/button/button.docs.mdx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/components/card-control/card-control.docs.mdx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ...s/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/components/card-product/card-product.docs.mdx
View file
Open in desktop
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
10 changes: 5 additions & 5 deletions packages/documentation/src/stories/components/card-product/card-product.stories.ts
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
View file
Open in desktop
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
8 changes: 4 additions & 4 deletions packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ...ocumentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ...ges/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/foundations/icons/icon.stories.ts
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
View file
Open in desktop
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
12 changes: 6 additions & 6 deletions packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
View file
Open in desktop
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> `,
};
6 changes: 3 additions & 3 deletions packages/documentation/src/stories/utilities/text/text.stories.ts
View file
Open in desktop
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
View file
Open in desktop
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
Loading