I'm introducing storybooks into our react components. When I start adding examples:
The components themselves are added to the top left corner. In this example: http://react.carbondesignsystem.com/?selectedKind=ComposedModal&selectedStory=Using%20Header%20%2F%20Footer%20Props&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel
We can wee that the components themselves are flushed in the middle of the page.
How do I do that?
You can even add layout: 'centered' as a parameter in the preview.js file of storybook. The layout parameter can also be added at a Component or Story level. See https://storybook.js.org/docs/react/configure/story-layout for more details.
You can use Storybook addon called "#storybook/addon-centered".
This can be found here: https://www.npmjs.com/package/#storybook/addon-centered
Alternatively, you can also provide style parameters with each story to style a particular template. Here is a quick example of that:
.add('Your sample story', () => ({
template: `<sample-component class="sample-component-class"><sample-component>`,
styles: ['.sample-component-class {display: flex; justify-content: center}'],
props: {
sampleProps
},
}))
Hope this helps.
Related
I am currently writing a component in svelte and in order to work on only this component I am also using storybook.
The problem is that because of the css library I am using the component will be incorrectly rendered unless it is properly wrapped by a parent element. In short, this component is list element and without the list wrapper the css will be funky.
So the question is, can I somehow tell storybook to wrap my component in a div?
i.e. something like this
storiesOf("Kanban card", module)
.add(
"small",
() => ({
Component: Card,
template: "<div class='wrapper'><Card /></div>",
props: {
...
}
})
);
Your best bet would be to create a separate Svelte component, specifically for that story. This approach also gives you a way to use slots properly, something that's not clearly available through Storybook.
Something like kanban-card.story.svelte containing:
<script>
import Card from '../wherever/kanban-card.svelte';
// export the props that the component needs
// pass up all events you want to handle
</script>
<Card on:eventYouWant />
I have a very niche use-case. I have to add a modal animation like this:
regular css animation
But I need to have a component (our own filter component for a datatable) inside said modal.
So I need to use the ModalService. But this service is only attaching my custom config like this:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels, // needed for filter to have labels
filterGroups: this.filterGroups // needed to add filterGroups
},
class: 'filter-modal' // this sould be my custom class
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.
How can I overcome this issue I'm having?
Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
I'm trying to understand how to customize a theme completely.
material-ui guidelines/docs say to check this file:
https://github.com/callemall/material-ui/blob/master/src/styles/theme-manager.js
So to a custom theme I tried adding a block like:
AppTheme = {
appBar: {
color: Colors.yellow500,
textColor: 'white'
},
but that has no effect on the app bar. The rest of the theme variables do work tho.
How do I customize the other variables in this file?
I just checked the properties that you mentioned and everything work properly with appBar.
The quickest way to check any props in Material-UI theme is to see the
storybook-addon-material-ui demo page!
(You can find appBar props at the right sidebar and play with colors.)
so it should work!
I'm using Simple Dialog 2:
I have the dialog box below:
$('<div>').simpledialog2({
mode: 'button',
themeHeader: 'b',
headerText: 'Confirm',
headerClose: true,
buttonPrompt: message,
buttons : {
'OK': {
click: function () {
$.mobile.changePage(url, {changeHash: false});
}
},
'Cancel': {
click: function () {
},
icon: "delete",
theme: "c"
}
}
})
Screenshot:
I want to text-align the message to left and have some space from left and right side of the button. How can I achieve it?
Thanks.
you can use Firebug or another developer tool to examine the CSS to manipulate...
see docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.