From 0689435f3bd83e433246e41679de49f0b767eb30 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Thu, 20 Mar 2025 12:35:37 -0700 Subject: [PATCH] migrates padding reset --- src/components/PaddingReset/PaddingReset.mdx | 49 ++++++++++++ .../PaddingReset/PaddingReset.stories.svelte | 70 +++++++++--------- .../PaddingReset/PaddingReset.svelte | 16 ++-- src/components/PaddingReset/shark.jpg | Bin 0 -> 105346 bytes .../PaddingReset/stories/docs/component.md | 35 --------- 5 files changed, 93 insertions(+), 77 deletions(-) create mode 100644 src/components/PaddingReset/PaddingReset.mdx create mode 100644 src/components/PaddingReset/shark.jpg delete mode 100644 src/components/PaddingReset/stories/docs/component.md diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx new file mode 100644 index 00000000..c2fa743d --- /dev/null +++ b/src/components/PaddingReset/PaddingReset.mdx @@ -0,0 +1,49 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as PaddingResetStories from './PaddingReset.stories.svelte'; + + + +# PaddingReset + +Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width. + +```svelte + + + + + Alt text + + + +

A caption for the image that is padded when Block is fluid.

+
+
+``` + + + +## Conditional padding + +You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do. + +```svelte + + + + Alt text + + + +

A caption for the image that is padded when Block is fluid.

+
+
+``` diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte index e85df8e5..015e1869 100644 --- a/src/components/PaddingReset/PaddingReset.stories.svelte +++ b/src/components/PaddingReset/PaddingReset.stories.svelte @@ -1,51 +1,49 @@ - - - + + + + shark + +

+ A caption for the image that is padded when Block is fluid. +

+
+
+
diff --git a/src/components/PaddingReset/PaddingReset.svelte b/src/components/PaddingReset/PaddingReset.svelte index abc7dda6..60b1e309 100644 --- a/src/components/PaddingReset/PaddingReset.svelte +++ b/src/components/PaddingReset/PaddingReset.svelte @@ -1,12 +1,16 @@ - - - - ... - -

A caption for the image that will still be padded.

-
-
-``` - -You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do. - -```svelte - - - - ... - -

A caption for the image that will be padded when Block is fluid.

-
-
-```