Is there a way to uppercase the titles in the sidebar?

[npearson72]

I'm using a mono repo where my component library is separated from and shared by other sub-repos.

I'd like to have a presentation in the sidebar (ladle-aside) like so:

UI
  - Buttons
  - Forms
  - etc..
Web
  - Feature 1
  - Feature 2
  - etc..
Mobile
  - Feature 1
  - Feature 2
  - etc..

UI represents the shared component library, and Web and Mobile represents sub-repos in the monorepo.

Is there a way to make UI uppercase?

Currently I'm only getting capitalized values regardless of file names or meta details.

[tajo]

Not currently possible. We could store the export default { title } and .storyName separately in our internal representation so they get preserved 1:1 instead of going through no/denormalization (we use story names for IDs).

A good feature to add, it just wasn't top priority.

[npearson72]

Thanks for responding. Excellent tool. Really appreciate it.

[denis-avakov]

You can achieve this by adding some custom css through .ladle/config.mjs

export default {
  appendToHead: `
    <style>
      ul[role="tree"] > li > div {
        text-transform: uppercase;
      }
    </style>`
};

[tajo]

Probably will do some bigger overhaul how the sidebar can be organized & styled, the workaround seems fine for now.