gramex icon indicating copy to clipboard operation
gramex copied to clipboard
verified publisher icon gramener

Gramex UI component enhancements

Open sanand0 opened this issue 5 years ago • 2 comments

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

  • Divider: .divider: HHH
  • Position: .pos-tl: HHH
  • Text alignment: .text-middle: HHH
  • Overlay: .overlay-black: HLM

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

  • [ ] Data table with scroll indicators. Mostly jQuery data tables work, but next/previous fails
  • [ ] Pretty checkbox is used often: https://lokesh-coder.github.io/pretty-checkbox/
  • [ ] Calendar: https://gramener.invisionapp.com/d/main#/console/20311787/426286149/preview
  • [ ] Select Picker: https://gramener.invisionapp.com/d/main#/console/20311787/426286151/preview

sanand0 avatar Dec 04 '20 07:12 sanand0

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

sanand0 avatar Dec 04 '20 07:12 sanand0

We'll move this to after Bootstrap 5 is released

sanand0 avatar Dec 22 '20 07:12 sanand0