Gramex UI component enhancements

sanand0 commented 3 years ago

Notes from discussion with UI scaffolding team on how often UI components are used, prioritized with H (high), M (medium) and L (low)

Revise these components

[x] Text opacity: .opacity-90: HHH. Add .opacity-100
[x] Shadows: .shadow, .text-shadow: HHH. Remove in favor of Boostrap shadows
[ ] Height: .h-full: HHM. Adds scroll to page. Create an option that's the equivalent of an overlay for the navbar that ensures no-scroll on the page
[ ] Z-Index: .z-9: HHH. Add z-1 = z-index: 1. Want to place items BELOW and ABOVE the default bootstrap z-scales
[ ] Tail: .tail-primary: HHH. Add shadow to tail. Make tail smaller (half the size). Can we curve the tail's end?
[ ] Switch: HHH. Add smaller switches. -sm, -md etc
[ ] Round: .round: HHH. Replace with Bootstrap's variables for .rounded-*. But we need tl-0, etc.
[ ] Borders: .border-2, .border-0: MHH. Designers specify 3, 4 or even 5px borders, not just border-2. .border-bottom-0 etc are used often
[ ] Color states: .hover-bg-primary: MLL. Add !important. Make optional
[x] Line height: .lh-1: LMM. Document Bootstrap line height variables
[ ] Letter spacing: .ls-1: HLM. Document Bootstrap letter-spacing variables

Retain as-is

Make optional

[ ] Text size: .sm1: LLL. Document Bootstrap font sizes and font-weights
[ ] Backgrounds: .bg-no-repeat, .bg-fixed: LLL. Background properties conflict -- cannot be used independently
[ ] Gradients: .gradient-tl: LLL. Developers create custom classes, usually
[ ] Ripple: .ripple: LLL. - QA team raises an issue that these are not present in design
[ ] Arrows: .arrow-primary: LLL
[ ] Slider: LLL

Component requests

sanand0 commented 3 years ago

Next steps: @sanand0 to make these updates or share status by Fri 11 Dec

sanand0 commented 3 years ago

We'll move this to after Bootstrap 5 is released

gramener / gramex