Skip to content

Commit

Permalink
feat(ColorPicker): Add a new Coral Color Picker component. (#179)
Browse files Browse the repository at this point in the history 
* Add a new Coral Color Picker component.

* dependency at tiny

* Fix axe

* lint

* add package-lock

* update examples

* @trivial

* Fixed

* Add formats support.

* Tests ColorArea

* fix(#179): Suggested changes to ColorArea to improve accessibility

1. ColorArea is currently just for Saturation and Brightness/Value. With luminosity, 50% is fully saturated, 100% is white and 0% is black, so its important to be clear about which values the slider controls.
2. We should use `aria-valuetext` to report the value of each slider.
3. The ColorPicker overlay should have aria-live="off", otherwise the value change to the text input announces assertively instead of the value of the slider that changed.
4. I added a degree symbol to the aria-valuetext of the Hue slider.

* Tests ColorSliderHue

* Test ColorProperties.

* test

* Test ColorPicker

* coverage

* large style

* support large

* Add 1 second debounce for change event.

* cleanup

* add translation provided by translation team.

Co-authored-by: igurjar <[email protected]>
Co-authored-by: Michael Jordan <[email protected]>
Co-authored-by: Mohit Arora <[email protected]>
  • Loading branch information
@indra2gurjar @majornista @mohiaror
4 people committed Sep 16, 2021
1 parent 98cab56 commit eb1b4d6
Show file tree
Hide file tree
Showing 70 changed files with 5,193 additions and 7 deletions.
123 changes: 123 additions & 0 deletions coral-component-colorpicker/examples/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coral.ColorPicker</title>

<script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const markup = document.body.querySelectorAll('.markup');
for (var i = 0; i < markup.length; i++) {
const code = markup[i].innerHTML;
const id = 'markup-code-' + i;
markup[i].insertAdjacentHTML('afterend',
'<div style="margin:10px 0">' +
'<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' +
'<pre hidden>' +
'<code id="'+ id +'" class="html">' +
'</code>' +
'</pre>' +
'</div>');
document.getElementById(id).textContent = code;
}
window.hljs.initHighlightingOnLoad();
});
</script>

<link rel="stylesheet" href="../dist/css/coral.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = '../dist/js/coral.js';
script.dataset.coralIcons = '../dist/resources/';
document.head.appendChild(script);
});
</script>
</head>

<body class="coral--lightest">
<main class="u-coral-margin">
<div style="position:absolute;top:16px;right:16px;">
<strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong>
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a>
<strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong>
<a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
<a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
</div>

<h1 class="coral-Heading--XXL">Color Picker</h1>

<h2 class="coral-Heading--M">Usage notes</h2>
<hr class="coral-Divider--L">
<p class="coral-Body--M u-coral-padding-vertical">
Color pickers are used as color form fields.
</p>

<h2 class="coral--Heading--S">Default</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label1" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label1"></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">Disabled</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label2" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label2" value="#39CCCC" disabled></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">Invalid Value</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label3" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label3" value="hello"></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">Formats</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label4" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label3" value="#39CCCC" formats="hex,rgb,hsl"></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">Invalid Formats Ignored</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label5" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label3" value="#39CCCC" formats="rgb,abcd"></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">Value Converted In Format</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label6" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label3" value="#39CCCC" formats="rgb"></coral-colorpicker>
</form>
</div>

<h2 class="coral--Heading--S">ReadOnly</h2>
<div class="markup">
<form class="coral-Form coral-Form--vertical">
<label id="label7" class="coral-Form-fieldlabel">Label</label>
<coral-colorpicker labelledby="label4" value="rgb(123,23,155,.5)" readonly labelledby="label-ro"></coral-colorpicker>
</form>
</div>
</main>
</body>
</html>
13 changes: 13 additions & 0 deletions coral-component-colorpicker/gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* Copyright 2021 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

require('../coral-gulp')(require('gulp'));
Loading

0 comments on commit eb1b4d6

Please sign in to comment.