diff --git a/docs/assets/dls/storybook-page.png b/docs/assets/dls/storybook-page.png index 58470feaff..b1b98f1338 100644 Binary files a/docs/assets/dls/storybook-page.png and b/docs/assets/dls/storybook-page.png differ diff --git a/docs/dls/contributing-to-storybook.md b/docs/dls/contributing-to-storybook.md index 058f4a23a7..fff9e51e18 100644 --- a/docs/dls/contributing-to-storybook.md +++ b/docs/dls/contributing-to-storybook.md @@ -4,8 +4,38 @@ title: Contributing to Storybook description: Documentation on How to Contribute to Storybook --- -You find our storybook at -[http://backstage.io/storybook](http://backstage.io/storybook) +The Backstage Storybook provides you a way to explore reusable Backstage User +Interface elements and how to use them in developing the Backstage core and its +plugins. These UI elements are commonly called "components", and include things +such as buttons, tables, specialized widgets with specific formatting, and so +on. + +You'll find our storybook at +[http://backstage.io/storybook](http://backstage.io/storybook). + +As noted in the [design introduction](design.md), Backstage's design is based +off of [Material-UI](https://material-ui.com/). Much of the UI elements use +direct Material-UI, while we've also extended and written custom ones to provide +specific functionality. + +![Storybook Page](../assets/dls/storybook-page.png) + +Storybook "Stories" are used to provide examples for how to use a specific +component, which are then displayed both visually and with sample code to be +copied. + +When custom Backstage components are created, they are placed in the +`@backstage/core` package and added to the Storybook. + +There may be times where an existing Material-UI component (in +`@material-ui/core`) is sufficient and doesn't need to be wrapped or duplicated. +However, we may want to identify an _opinionated_ way to use that component +inside of Backstage. In these cases, stories showing how to use those existing +components will also be put into our storybook. + +When a story example using Material-UI becomes more complex, requiring a +specific set of colors, variants, parameters, etc., it may become a candidate to +be refactored to become a full Backstage core component. ## Creating a new Story @@ -33,12 +63,10 @@ core Go to `packages/storybook`, run `yarn install` and install the dependencies, then run the following on your command line: `yarn start` -![](../assets/dls/running-storybook.png) +![Storybook command startup](../assets/dls/running-storybook.png) _You should see a log like the image above._ If everything worked out, your server will be running on **port 6006**, go to your browser and navigate to `http://localhost:6006/`. You should be able to navigate and see the Storybook page. - -![](../assets/dls/storybook-page.png) diff --git a/docs/dls/design.md b/docs/dls/design.md index 042312d0a3..a2091aeb10 100644 --- a/docs/dls/design.md +++ b/docs/dls/design.md @@ -127,6 +127,10 @@ your own plugin for Backstage. **[Discord](https://discord.gg/EBHEGzX)** - all design questions should be directed to the _#design_ channel. +**[Customize Backstage's look and feel](https://backstage.io/docs/getting-started/app-custom-theme)** - +How to customize the look and feel of your Backstage instance by extending the +theme. + ## 🔮 Future ### Contributions from designers diff --git a/docs/features/software-templates/legacy.md b/docs/features/software-templates/legacy.md index d70773e251..49f3e21904 100644 --- a/docs/features/software-templates/legacy.md +++ b/docs/features/software-templates/legacy.md @@ -1,9 +1,8 @@ --- id: template-legacy title: Writing Templates (Legacy) -description: - Old documentation describing the backstage.io/v1alpha1 format of the Template - Schema +# prettier-ignore +description: Old documentation describing the backstage.io/v1alpha1 format of the Template Schema --- ## Kind: Template