Skip to content

Commit d572d38

Browse files
youda97youda97
committed
Fix stories to work in center alignment
1 parent 90b19a7 commit d572d38

File tree

6 files changed

+103
-92
lines changed

6 files changed

+103
-92
lines changed

‎src/dialog/overflow-menu/overflow-menu.stories.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ storiesOf("Overflow Menu", module)
2424
.addDecorator(withKnobs)
2525
.add("Basic", () => ({
2626
template: `
27-
<ibm-overflow-menu>
27+
<ibm-overflow-menu [flip]="flip">
2828
<ibm-overflow-menu-option (selected)="selected($event)" (click)="click($event)">
2929
An example option that is really long to show what should be done to handle long text
3030
</ibm-overflow-menu-option>
@@ -36,25 +36,11 @@ storiesOf("Overflow Menu", module)
3636
<ibm-overflow-menu-option disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
3737
<ibm-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
3838
</ibm-overflow-menu>
39-
40-
<span>Flipped OverflowMenu</span>
41-
<ibm-overflow-menu flip="true" style="display: inline-block;">
42-
<ibm-overflow-menu-option>
43-
An example option that is really long to show what should be done to handle long text
44-
</ibm-overflow-menu-option>
45-
<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
46-
<li class="bx--overflow-menu-options__option">
47-
<button class="bx--overflow-menu-options__btn">A fully custom option</button>
48-
</li>
49-
<ibm-overflow-menu-option>Option 4</ibm-overflow-menu-option>
50-
<ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
51-
<ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
52-
</ibm-overflow-menu>
53-
<ibm-dialog-placeholder></ibm-dialog-placeholder>
5439
`,
5540
props: {
5641
click: () => console.log("click"),
57-
selected: () => console.log("selected")
42+
selected: () => console.log("selected"),
43+
flip: boolean("Flip overflow to open on the left", false)
5844
}
5945
}))
6046
.add("Dynamic", () => ({

‎src/dropdown/dropdown.stories.ts‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@ storiesOf("Dropdown", module)
2121
.addDecorator(withKnobs)
2222
.add("Basic", () => ({
2323
template: `
24-
<ibm-dropdown
25-
[theme]="theme"
26-
placeholder="Select"
27-
[disabled]="disabled"
28-
(selected)="selected($event)"
29-
(onClose)="onClose($event)">
30-
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
31-
</ibm-dropdown>
24+
<div style="width: 300px">
25+
<ibm-dropdown
26+
[theme]="theme"
27+
placeholder="Select"
28+
[disabled]="disabled"
29+
(selected)="selected($event)"
30+
(onClose)="onClose($event)">
31+
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
32+
</ibm-dropdown>
33+
</div>
3234
`,
3335
props: {
3436
disabled: boolean("disabled", false),
@@ -45,14 +47,16 @@ storiesOf("Dropdown", module)
4547
}))
4648
.add("Multi-select", withNotes({ text: "Notes on multi select" })(() => ({
4749
template: `
48-
<ibm-dropdown
49-
type="multi"
50-
placeholder="Multi-select"
51-
[disabled]="disabled"
52-
(selected)="selected($event)"
53-
(onClose)="onClose($event)">
54-
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
55-
</ibm-dropdown>
50+
<div style="width: 300px">
51+
<ibm-dropdown
52+
type="multi"
53+
placeholder="Multi-select"
54+
[disabled]="disabled"
55+
(selected)="selected($event)"
56+
(onClose)="onClose($event)">
57+
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
58+
</ibm-dropdown>
59+
</div>
5660
`,
5761
props: {
5862
disabled: boolean("disabled", false),
@@ -68,14 +72,16 @@ storiesOf("Dropdown", module)
6872
})))
6973
.add("With ngModel", () => ({
7074
template: `
71-
<ibm-dropdown
72-
placeholder="Select"
73-
[disabled]="disabled"
74-
[(ngModel)]="model"
75-
value="content">
76-
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
77-
</ibm-dropdown>
78-
<span>{{model | json}}</span>
75+
<div style="width: 300px">
76+
<ibm-dropdown
77+
placeholder="Select"
78+
[disabled]="disabled"
79+
[(ngModel)]="model"
80+
value="content">
81+
<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
82+
</ibm-dropdown>
83+
<span>{{model | json}}</span>
84+
</div>
7985
`,
8086
props: {
8187
disabled: boolean("disabled", false),

‎src/pagination/pagination.stories.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ storiesOf("Pagination", module).addDecorator(
5858
.addDecorator(withKnobs)
5959
.add("default", () => ({
6060
template: `
61-
<app-pagination [totalDataLength]="totalDataLength"></app-pagination>
61+
<div style="width: 800px">
62+
<app-pagination [totalDataLength]="totalDataLength"></app-pagination>
63+
</div>
6264
`,
6365
props: {
6466
totalDataLength: number("totalDataLength", 105)

‎src/select/select.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
3333
'bx--select--inline': display === 'inline',
3434
'bx--select--light': theme === 'light'
3535
}"
36-
class="bx--select">
36+
class="bx--select"
37+
style="width: 100%">
3738
<label [attr.for]="id" class="bx--label">{{label}}</label>
3839
<select
3940
#select

‎src/select/select.stories.ts‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,20 @@ storiesOf("Select", module).addDecorator(
1212
.addDecorator(withKnobs)
1313
.add("Basic", () => ({
1414
template: `
15-
<ibm-select [theme]="theme" [display]="display">
16-
<option value="" disabled selected hidden>Choose an option</option>
17-
<option value="solong">A much longer option that is worth having around to check how text flows</option>
18-
<optgroup label="Category 1">
19-
<option value="option1">Option 1</option>
20-
<option value="option2">Option 2</option>
21-
</optgroup>
22-
<optgroup label="Category 2">
23-
<option value="option1">Option 1</option>
24-
<option value="option2">Option 2</option>
25-
</optgroup>
26-
</ibm-select>
15+
<div style="width: 165px">
16+
<ibm-select [theme]="theme" [display]="display">
17+
<option value="" disabled selected hidden>Choose an option</option>
18+
<option value="solong">A much longer option that is worth having around to check how text flows</option>
19+
<optgroup label="Category 1">
20+
<option value="option1">Option 1</option>
21+
<option value="option2">Option 2</option>
22+
</optgroup>
23+
<optgroup label="Category 2">
24+
<option value="option1">Option 1</option>
25+
<option value="option2">Option 2</option>
26+
</optgroup>
27+
</ibm-select>
28+
</div>
2729
`,
2830
props: {
2931
theme: select("Theme", ["dark", "light"], "dark"),
@@ -32,14 +34,16 @@ storiesOf("Select", module).addDecorator(
3234
}))
3335
.add("With ngModel", () => ({
3436
template: `
35-
<ibm-select [(ngModel)]="model">
36-
<option value="default" disabled selected hidden>Choose an option</option>
37-
<option value="option1">Option 1</option>
38-
<option value="option2">Option 2</option>
39-
<option value="option3">Option 3</option>
40-
</ibm-select>
41-
<br>
42-
<span>Selected: {{ model }}</span>
37+
<div style="width: 165px">
38+
<ibm-select [(ngModel)]="model">
39+
<option value="default" disabled selected hidden>Choose an option</option>
40+
<option value="option1">Option 1</option>
41+
<option value="option2">Option 2</option>
42+
<option value="option3">Option 3</option>
43+
</ibm-select>
44+
<br>
45+
<span>Selected: {{ model }}</span>
46+
</div>
4347
`,
4448
props: {
4549
model: "default"

‎src/table/table.stories.ts‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -435,13 +435,15 @@ storiesOf("Table", module).addDecorator(
435435
.addDecorator(withKnobs)
436436
.add("default", () => ({
437437
template: `
438-
<app-table
439-
[model]="model"
440-
[size]="size"
441-
[showSelectionColumn]="showSelectionColumn"
442-
[striped]="striped"
443-
[sortable]="sortable">
444-
</app-table>
438+
<div style="width: 650px">
439+
<app-table
440+
[model]="model"
441+
[size]="size"
442+
[showSelectionColumn]="showSelectionColumn"
443+
[striped]="striped"
444+
[sortable]="sortable">
445+
</app-table>
446+
</div>
445447
`,
446448
props: {
447449
model: simpleModel,
@@ -453,13 +455,15 @@ storiesOf("Table", module).addDecorator(
453455
}))
454456
.add("with no data", () => ({
455457
template: `
456-
<app-table
457-
[model]="model"
458-
[size]="size"
459-
[showSelectionColumn]="showSelectionColumn"
460-
[striped]="striped">
461-
<tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>
462-
</app-table>
458+
<div style="width: 650px">
459+
<app-table
460+
[model]="model"
461+
[size]="size"
462+
[showSelectionColumn]="showSelectionColumn"
463+
[striped]="striped">
464+
<tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>
465+
</app-table>
466+
</div>
463467
`,
464468
styles: [`
465469
.no-data {
@@ -477,11 +481,13 @@ storiesOf("Table", module).addDecorator(
477481
}))
478482
.add("with expansion", () => ({
479483
template: `
480-
<app-expansion-table
481-
[size]="size"
482-
[showSelectionColumn]="showSelectionColumn"
483-
[striped]="striped">
484-
</app-expansion-table>
484+
<div style="width: 650px">
485+
<app-expansion-table
486+
[size]="size"
487+
[showSelectionColumn]="showSelectionColumn"
488+
[striped]="striped">
489+
</app-expansion-table>
490+
</div>
485491
`,
486492
props: {
487493
size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
@@ -491,11 +497,13 @@ storiesOf("Table", module).addDecorator(
491497
}))
492498
.add("with dynamic content", () => ({
493499
template: `
494-
<app-custom-table
495-
[size]="size"
496-
[showSelectionColumn]="showSelectionColumn"
497-
[striped]="striped">
498-
</app-custom-table>
500+
<div style="width: 650px">
501+
<app-custom-table
502+
[size]="size"
503+
[showSelectionColumn]="showSelectionColumn"
504+
[striped]="striped">
505+
</app-custom-table>
506+
</div>
499507
`,
500508
props: {
501509
size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
@@ -505,11 +513,13 @@ storiesOf("Table", module).addDecorator(
505513
}))
506514
.add("with overflow menu", () => ({
507515
template: `
508-
<app-overflow-table
509-
[size]="size"
510-
[showSelectionColumn]="showSelectionColumn"
511-
[striped]="striped">
512-
</app-overflow-table>
516+
<div style="width: 650px">
517+
<app-overflow-table
518+
[size]="size"
519+
[showSelectionColumn]="showSelectionColumn"
520+
[striped]="striped">
521+
</app-overflow-table>
522+
</div>
513523
`,
514524
props: {
515525
size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
@@ -519,7 +529,9 @@ storiesOf("Table", module).addDecorator(
519529
}))
520530
.add("with pagination", () => ({
521531
template: `
532+
<div style="width: 650px">
522533
<app-pagination-table [totalDataLength]="totalDataLength" [model]="model"></app-pagination-table>
534+
</div>
523535
`,
524536
props: {
525537
model: simpleModel,

0 commit comments

Comments
 (0)