Skip to content

Commit bfd2a6e

Browse files
eljefe223eljefe223
authored
[fix] remove non-theming text from drawer stories (#34380)
1 parent c6046b9 commit bfd2a6e

4 files changed

Lines changed: 76 additions & 102 deletions

File tree

‎change/@fluentui-web-components-d531c495-234e-434c-8df1-5e11c0ea1532.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "[fix] drawer title should use h2 tag",
4+
"packageName": "@fluentui/web-components",
5+
"email": "jes@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/web-components/.storybook/docs-root.css‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
border-top: 1px solid #ebebeb;
6464
}
6565

66-
#storybook-docs .sbdocs h2 {
66+
#storybook-docs .sbdocs h2:not([slot]) {
6767
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
6868
sans-serif;
6969
font-size: 24px;
@@ -139,10 +139,12 @@
139139

140140
#storybook-docs .sbdocs-preview {
141141
border-radius: 16px;
142-
background: #fff; /* --colorBrandBackgroundInverted */
142+
background: #fff;
143+
/* --colorBrandBackgroundInverted */
143144
padding: 0;
144145
box-shadow: none;
145-
border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
146+
border: 1px solid #d1d1d1;
147+
/* --colorNeutralStroke1 */
146148
}
147149

148150
/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
@@ -300,7 +302,8 @@
300302
display: inline-block;
301303
background-color: rgba(17, 16, 15, 0.1);
302304
border-radius: 2px;
303-
width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
305+
width: fit-content;
306+
/* prevent wrapping kebab-case words when they'll fit on one line */
304307
}
305308

306309
.os-content-glue {
@@ -409,9 +412,11 @@ h1.fluent {
409412

410413
h1 .fluent-version {
411414
display: block;
412-
font-size: 24px; /* --font-size-base-600 */
415+
font-size: 24px;
416+
/* --font-size-base-600 */
413417
line-height: 32px;
414-
color: #707070; /* --color-neutral-foreground-3 */
418+
color: #707070;
419+
/* --color-neutral-foreground-3 */
415420
}
416421

417422
h2.fluent {
@@ -444,7 +449,8 @@ h2.fluent {
444449
padding: 12px;
445450
width: 100%;
446451
top: 0;
447-
box-sizing: border-box; /* keep from overflowing body making x scroll bar*/
452+
box-sizing: border-box;
453+
/* keep from overflowing body making x scroll bar*/
448454
background: #fff;
449455
box-shadow: 0 0 3px rgb(0 0 0 / 22%);
450456
z-index: 10;

‎packages/web-components/src/drawer-body/drawer-body.styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,10 @@ export const styles = css`
2828
justify-content: flex-start;
2929
gap: ${spacingHorizontalM};
3030
}
31+
32+
::slotted([slot='title']) {
33+
font: inherit;
34+
padding: 0;
35+
margin: 0;
36+
}
3137
`;

‎packages/web-components/src/drawer/drawer.stories.ts‎

Lines changed: 50 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -36,105 +36,60 @@ const hideDrawer = (drawerID: string) => {
3636
};
3737

3838
const storyTemplate = html<StoryArgs<FluentDrawer>>`
39-
<style>
40-
#docs-root .innerZoomElementWrapper > div,
41-
#docs-root .innerZoomElementWrapper > div > div {
42-
padding: 0;
43-
}
44-
45-
.demo {
46-
display: flex;
47-
align-items: center;
48-
min-height: 22rem;
49-
width: 100%;
50-
}
51-
52-
.demo-content {
53-
grid-area: content;
54-
padding: 48px 24px;
55-
}
56-
57-
.demo:has([position='end']) [position='end'] {
58-
order: 1;
59-
}
60-
</style>
39+
<fluent-button appearance="primary" @click="${() => toggleDrawer('drawer-default')}"> Toggle Drawer </fluent-button>
40+
<fluent-drawer
41+
id="drawer-default"
42+
position="${story => story.position}"
43+
size="${story => story.size}"
44+
type="${story => story.type}"
45+
style="${story => (story['--drawer-width'] !== '' ? `--drawer-width: ${story['--drawer-width']};` : '')} ${story =>
46+
story['--dialog-backdrop'] !== '' ? `--dialog-backdrop: ${story['--dialog-backdrop']};` : ''}"
47+
>
48+
<fluent-drawer-body>
49+
<h2 slot="title">Drawer Header</h2>
50+
<fluent-button
51+
slot="close"
52+
appearance="transparent"
53+
icon-only
54+
aria-label="close"
55+
@click="${() => hideDrawer('drawer-default')}"
56+
>
57+
${dismissed20Regular}
58+
</fluent-button>
59+
<div>
60+
<fluent-text>
61+
The drawer gives users a quick entry point to configuration and information. It should be used when retaining
62+
context is beneficial to users. An overlay is optional depending on whether or not interacting with the
63+
background content is beneficial to the user's context/scenario. An overlay makes the drawer blocking and
64+
signifies that the users full attention is required when making configurations.
65+
</fluent-text>
6166
62-
<div class="demo">
63-
<fluent-drawer
64-
id="drawer-default"
65-
position="${story => story.position}"
66-
size="${story => story.size}"
67-
type="${story => story.type}"
68-
style="${story =>
69-
story['--drawer-width'] !== '' ? `--drawer-width: ${story['--drawer-width']};` : ''} ${story =>
70-
story['--dialog-backdrop'] !== '' ? `--dialog-backdrop: ${story['--dialog-backdrop']};` : ''}"
71-
>
72-
<fluent-drawer-body>
73-
<span slot="title"> Drawer Header</span>
74-
<fluent-button
75-
slot="close"
76-
appearance="transparent"
77-
icon-only
78-
aria-label="close"
79-
@click="${() => hideDrawer('drawer-default')}"
80-
>
81-
${dismissed20Regular}
82-
</fluent-button>
8367
<div>
84-
<fluent-text>
85-
The drawer gives users a quick entry point to configuration and information. It should be used when
86-
retaining context is beneficial to users. An overlay is optional depending on whether or not interacting
87-
with the background content is beneficial to the user's context/scenario. An overlay makes the drawer
88-
blocking and signifies that the users full attention is required when making configurations.
89-
</fluent-text>
90-
91-
<div>
92-
<fluent-field>
93-
<label slot="label">Please select an option</label>
94-
<fluent-radio-group id="demo-options" slot="input" orientation="vertical">
95-
<fluent-field label-position="after">
96-
<label for="option-one" slot="label">Option 1</label>
97-
<fluent-radio id="option-one" slot="input" name="demo-options" value="1"></fluent-radio>
98-
</fluent-field>
99-
<fluent-field label-position="after">
100-
<label for="option-two" slot="label">Option 2</label>
101-
<fluent-radio id="option-two" slot="input" name="demo-options" value="2"></fluent-radio>
102-
</fluent-field>
103-
<fluent-field label-position="after">
104-
<label for="option-three" slot="label">Option 3</label>
105-
<fluent-radio id="option-three" slot="input" name="demo-options" value="3"></fluent-radio>
106-
</fluent-field>
107-
</fluent-radio-group>
108-
</fluent-field>
109-
</div>
110-
</div>
111-
<div slot="footer">
112-
<fluent-button appearance="primary" @click="${() => hideDrawer('drawer-default')}">Close</fluent-button>
113-
<fluent-button appearance="secondary">Do Something</fluent-button>
68+
<fluent-field>
69+
<label slot="label">Please select an option</label>
70+
<fluent-radio-group id="demo-options" slot="input" orientation="vertical">
71+
<fluent-field label-position="after">
72+
<label for="option-one" slot="label">Option 1</label>
73+
<fluent-radio id="option-one" slot="input" name="demo-options" value="1"></fluent-radio>
74+
</fluent-field>
75+
<fluent-field label-position="after">
76+
<label for="option-two" slot="label">Option 2</label>
77+
<fluent-radio id="option-two" slot="input" name="demo-options" value="2"></fluent-radio>
78+
</fluent-field>
79+
<fluent-field label-position="after">
80+
<label for="option-three" slot="label">Option 3</label>
81+
<fluent-radio id="option-three" slot="input" name="demo-options" value="3"></fluent-radio>
82+
</fluent-field>
83+
</fluent-radio-group>
84+
</fluent-field>
11485
</div>
115-
</fluent-drawer-body>
116-
</fluent-drawer>
117-
<div class="demo-content">
118-
<fluent-text font="base" size="300" weight="regular" as="p">
119-
<p>
120-
The Drawer gives users a quick entry point to configuration and information. It should be used when retaining
121-
context is beneficial to users.
122-
</p>
123-
</fluent-text>
124-
<br />
125-
<br />
126-
<fluent-text font="monospace" size="300" weight="regular">
127-
<code>fluent-drawer</code>
128-
</fluent-text>
129-
<br />
130-
<br />
131-
<div>
132-
<fluent-button appearance="primary" @click="${() => toggleDrawer('drawer-default')}"
133-
>Toggle Drawer</fluent-button
134-
>
13586
</div>
136-
</div>
137-
</div>
87+
<div slot="footer">
88+
<fluent-button appearance="primary" @click="${() => hideDrawer('drawer-default')}">Close</fluent-button>
89+
<fluent-button appearance="secondary">Do Something</fluent-button>
90+
</div>
91+
</fluent-drawer-body>
92+
</fluent-drawer>
13893
`;
13994

14095
export default {

0 commit comments

Comments
 (0)