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

DialogPrimitive - Fix issue with box-sizing inheritance #2442

Merged
merged 3 commits into from
Sep 23, 2024
Merged

DialogPrimitive - Fix issue with box-sizing inheritance #2442

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
fc893b8
removed `all: unset` declaration from `hds-dialog-primitive__wrapper`…
didoo Sep 23, 2024
252ea95
changeset
didoo Sep 23, 2024
1a878d5
updated version-history and tags in website documentation
didoo Sep 23, 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
7 changes: 7 additions & 0 deletions .changeset/hot-timers-complain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": patch
---

`DialogPrimitive` - Fixed issue with `box-sizing` inheritance

`Modal`/`Flyout` - Updated `box-sizing` inheritance via `DialogPrimitive` fix
11 changes: 6 additions & 5 deletions packages/components/src/styles/components/dialog-primitive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,25 @@ $hds-dialog-primitive-vertical-padding: 16px;

// WRAPPER CONTAINER (<dialog>)

// The special declaration below is used to allow the `<dialog>` to unset
// all its predefined styles and set them at `Modal/Flyout` level
// The special declaration below is used to override the `<dialog>` predefined styles
// Note: some of these style will then be set (again) at `Modal/Flyout` level too
//
// Since the `:where()` selector has a specificity of `0` (see https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
// the styles declared below are applied to the `<dialog>` element, but are overwritten by any other style applied via classname
//

:where(.hds-dialog-primitive__wrapper) {
// -----------
all: unset; // removes default dialog & inherited styles. Must be the first style to be applied
// -----------
// override default `<dialog>` styles
position: initial;
Copy link
Contributor

Choose a reason for hiding this comment

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

I like that we're being explicit about what we are overriding from <dialog>, makes it easier to understand!

inset: initial;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: var(--token-color-surface-primary);
border: none;
}


Expand Down
3 changes: 2 additions & 1 deletion website/docs/components/flyout/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ previewImage: assets/illustrations/components/flyout.jpg
navigation:
keywords: ['drawer', 'panel', 'side', 'modal']
status:
updated: 4.10.0
updated: 4.11.1
---

<section data-tab="Guidelines">
Expand All @@ -32,6 +32,7 @@ status:
</section>

<section data-tab="Version history">
@include "partials/version-history/4.11.1.md"
@include "partials/version-history/4.10.0.md"
@include "partials/version-history/4.7.0.md"
</section>
5 changes: 5 additions & 0 deletions website/docs/components/flyout/partials/version-history/4.11.1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 4.11.1

### Updated

Fixed issue with `box-sizing` inheritance due to a `all: unset` CSS rule applied to the `DialogPrimitive` subcomponent
3 changes: 2 additions & 1 deletion website/docs/components/modal/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ previewImage: assets/illustrations/components/modal.jpg
navigation:
keywords: ['flyout', 'popover', 'popup', 'dialog']
status:
updated: 4.10.0
updated: 4.11.1
---

<section data-tab="Guidelines">
Expand All @@ -32,6 +32,7 @@ status:
</section>

<section data-tab="Version history">
@include "partials/version-history/4.11.1.md"
@include "partials/version-history/4.10.0.md"
@include "partials/version-history/4.7.0.md"
</section>
5 changes: 5 additions & 0 deletions website/docs/components/modal/partials/version-history/4.11.1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 4.11.1

### Updated

Fixed issue with `box-sizing` inheritance due to a `all: unset` CSS rule applied to the `DialogPrimitive` subcomponent
3 changes: 2 additions & 1 deletion website/docs/utilities/dialog-primitive/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ links:
navigation:
keywords: ['modal', 'flyout']
status:
updated: 4.10.0
updated: 4.11.1
---

<section data-tab="Guidelines">
Expand All @@ -32,6 +32,7 @@ status:
</section>

<section data-tab="Version history">
@include "partials/version-history/4.11.1.md"
@include "partials/version-history/4.10.0.md"
@include "partials/version-history/4.7.0.md"
</section>
5 changes: 5 additions & 0 deletions website/docs/utilities/dialog-primitive/partials/version-history/4.11.1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 4.11.1

### Updated

Fixed issue with `box-sizing` inheritance due to a `all: unset` CSS rule