Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorPalette (ui5-color-palette): New component #2615

Closed
fifoosid opened this issue Dec 22, 2020 · 1 comment · Fixed by #2731
Closed

ColorPalette (ui5-color-palette): New component #2615

fifoosid opened this issue Dec 22, 2020 · 1 comment · Fixed by #2731

Comments

@fifoosid
Copy link
Contributor

fifoosid commented Dec 22, 2020

Is your feature request related to a problem? Please describe.
A color palette component should be implemented. Reference: https://sapui5.hana.ondemand.com/#/entity/sap.m.ColorPalette/sample/sap.m.sample.ColorPalette

Additional context
The current use case: this component will be used in responsive popover

image

@fifoosid fifoosid changed the title Color Palette component Color Palette & Color Picker components Dec 23, 2020
@ilhan007 ilhan007 changed the title Color Palette & Color Picker components ColorPalette: New component Jan 8, 2021
@ilhan007 ilhan007 added this to Topic B in Planning - Topic Core Jan 8, 2021
@ilhan007 ilhan007 changed the title ColorPalette: New component ColorPalette (ui5-color-palette): New component Jan 8, 2021
@ilhan007
Copy link
Member

ilhan007 commented Jan 8, 2021

Background
Hello @SAP/ui5-webcomponents-topic-b we need a color palette component for the TextEditor (RichTextEditor) we are currently building to allow users select text's color and text's background-color. Also, the component can be used to build ColorPalettePopover if we decide it is necessary and find it useful.

Reference
https://sapui5.hana.ondemand.com/#/entity/sap.m.ColorPalette/sample/sap.m.sample.ColorPalette

Main Use-Case
The palette will be mainly used inside a ui5-popover or ui5-responsive-popover

Restrictions
As in openui5, we would like to display up to 15 coloured squares as part of the palette.

API (This is just a proposal)

  1. Definition of the colors the user clack select of, either via property, or via slot
// Variant 1: string property of comma separated CSS colors:
properties: {
  colors: {
     type: String
  }
}
<ui5-color-palette colors="darkblue, #444444, white, black, rgb(0,0,0), hsla(50%,10%,30%,0.5), #fff, green">
// Variant 2: with abstract element as a slot

slots: {
   colors: {
       type: HTMLElement
   }
}
<ui5-color-palette> 
 <ui5-color-palette-entry value="darkblue">
 <ui5-color-palette-entry value="#333">
 <ui5-color-palette-entry value="#444">
</ui5-color-palette> 
  1. We need to fire an event when the users interacts/clicks the coloured squares (SPACE, ENTER as well)
Events: {
    click: {
       details: {
          color: {
              type: "String"
           }
       }
    }
}

Keyboard handling
By the existing spec - at least ArrowKeys navigation + ENTER and SPACE

Screen Reader
By the existing spec

Playground Sample

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants