lightning-base-components 1.15.4-alpha → 1.16.2-alpha

package/src/lightning/colorPickerCustom/color-picker-custom.slds.css

@@ -0,0 +1,625 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* Document
+ * --------------------- */
+
+/**
+ * Normalize box sizing to border box for all browsers.
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/* Grouping Content
+ * --------------------- */
+
+/**
+ * Add the correct display in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * 1. Remove the margin in all browsers.
+ * 2. Remove the padding in all browsers.
+ * 3. Normalize font sizes in all browsers.
+ * 4. Normalize font weight in all browsers.
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 0.875rem; /* 3 */
+  font-weight: normal; /* 4 */
+  margin: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+p {
+  margin: 0;
+}
+
+/**
+ * 1. Remove the margin in all browsers.
+ * 2. Normalize border styles in all browsers.
+ */
+
+hr {
+  margin: 0; /* 1 */
+  border: 0; /* 2 */
+  border-top-width: 1px; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: inherit; /* 2 */
+}
+
+/**
+ * 1. Remove the margin in all browsers.
+ * 2. Remove the padding in all browsers.
+ * 3. Remove the list-style in all browsers, sub-system dependant.
+ */
+
+ol,
+ul {
+  list-style: none; /* 3 */
+  padding: 0; /* 2 */
+  margin: 0; /* 1 */
+}
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+dl,
+dt,
+dd {
+  margin: 0;
+}
+
+/* Form Controls
+ * --------------------- */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+form {
+  margin: 0;
+}
+
+/**
+ * 1. Correct font properties not being inherited.
+ * 2. Remove the margin in Firefox and Safari.
+ * 3. Fix correct color not being inherited.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+  color: inherit; /* 3 */
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Correct inability to style clickable `input` types in iOS.
+ * 2. Normalizes cursor indicator on clickable elements.
+ */
+
+button,:host([data-render-mode="shadow"]) 
+[type='button'],:host([data-render-mode="shadow"]) 
+[type='reset'],:host([data-render-mode="shadow"]) 
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  appearance: button; /* 1 */
+  cursor: pointer; /* 2 */
+}
+
+/**
+ * Prevent option or optgroup to increase the width of a select.
+ */
+
+select {
+  max-width: 100%;
+}
+
+/**
+ * Correct the outline style in Safari.
+ */
+
+input:focus,
+button:focus,
+select:focus,
+textarea:focus {
+  outline-offset: 0;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge 18- and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+ */
+
+legend {
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  white-space: normal; /* 1 */
+  padding: 0; /* 3 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome and Firefox.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+:host([data-render-mode="shadow"]) [type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to 'inherit' in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Remove the additional ':invalid' styles in Firefox.
+ * See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+ */
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/* Text-level semantics
+ * --------------------- */
+
+/**
+ * Normalizes cursor indicator on clickable elements.
+ */
+
+a {
+  cursor: pointer;
+}
+
+/**
+ * Add the correct text decoration in Chrome, Edge, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+/**
+ * Add the correct font weight in Edge and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ * 3. Remove the margin in all browsers.
+ */
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Prevent overflow of the container in all browsers
+ */
+
+pre {
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+ * --------------------- */
+
+/**
+ * Change the alignment on media elements in all browsers.
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/**
+ * Make images responsive by default.
+ */
+
+img,:host([data-render-mode="shadow"]) 
+[type='image'] {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Remove the border on iframes in all browsers.
+ */
+
+iframe {
+  border-style: none;
+}
+
+/**
+ * Change the fill color to match the text color in all browsers.
+ */
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+/* Tabular data
+ * --------------------- */
+
+/**
+ * 1. Remove text indentation from table contents in Chrome and Safari. [Chromium Bug 999088](https://bugs.chromium.org/p/chromium/issues/detail?id=999088), [Webkit Bug 201297](https://bugs.webkit.org/show_bug.cgi?id=201297)
+ * 2. Correct table border color inheritance in all Chrome and Safari. [Chromium Bug 935729](https://bugs.chromium.org/p/chromium/issues/detail?id=935729), [Webkit Bug 195016](https://bugs.webkit.org/show_bug.cgi?id=195016)
+ * 3. Collapse border spacing in all browsers
+ */
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/* Shadow host
+ * --------------------- */
+
+/**
+ * 1. Change the line height in all browsers
+ * 2. Change the base font size in all browsers, inherit 100% from `html`
+ * 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+ * 4. Remove the grey highlight on links in iOS
+ * 5. Font Stack:
+ *   a. Safari for OS X and iOS (San Francisco)
+ *   b. Chrome < 56 for OS X (San Francisco)
+ *   c. Windows
+ *   d. Android
+ *   e. Web Fallback
+ *   f. Emoji font stack [Mac, Windows, Linux]
+ */
+
+:host([data-render-mode="shadow"]) {
+  line-height: 1.5;
+  font-size: 0.875rem;
+  -webkit-tap-highlight-color: transparent;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) [part='color-picker-custom'] .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part='color-picker-custom'] {
+    --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  /* needed to change the size of the hex input */
+  :host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
+    flex: none;
+    width: 4.2rem;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-m-bottom_small {
+    margin-block-end: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator {
+    transform: translate3d(-0.375rem, 0.375rem, 0);
+    cursor: pointer;
+    position: absolute;
+    height: var(--sds-g-spacing-3, 0.75rem);
+    width: var(--sds-g-spacing-3, 0.75rem);
+    border: var(--sds-g-sizing-border-2, 2px) solid var(--sds-g-color-neutral-base-100, #ffffff);
+    border-radius: 50%;
+    box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.16), inset 0 2px 4px 4px rgba(0, 0, 0, 0.16);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
+    outline: none;
+    box-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
+    display: flex;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
+    appearance: none;
+    cursor: pointer;
+    flex: 1;
+    margin: 0;
+    padding: 0;
+    height: var(--sds-g-spacing-5, 1.5rem);
+    width: 100%;
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+    border-radius: var(--sds-g-spacing-1, 0.25rem);
+    background: linear-gradient(
+      to right,
+      red,
+      #ff1500,
+      #ff2b00,
+      #ff4000,
+      #f50,
+      #ff6a00,
+      #ff8000,
+      #ff9500,
+      #fa0,
+      #ffbf00,
+      #ffd500,
+      #ffea00,
+      yellow,
+      #eaff00,
+      #d5ff00,
+      #bfff00,
+      #af0,
+      #95ff00,
+      #80ff00,
+      #6aff00,
+      #5f0,
+      #40ff00,
+      #2bff00,
+      #15ff00,
+      lime,
+      #00ff15,
+      #00ff2b,
+      #00ff40,
+      #0f5,
+      #00ff6a,
+      #00ff80,
+      #00ff95,
+      #0fa,
+      #00ffbf,
+      #00ffd5,
+      #00ffea,
+      aqua,
+      #00eaff,
+      #00d5ff,
+      deepskyblue,
+      #0af,
+      #0095ff,
+      #0080ff,
+      #006aff,
+      #05f,
+      #0040ff,
+      #002bff,
+      #0015ff,
+      blue,
+      #1500ff,
+      #2b00ff,
+      #4000ff,
+      #50f,
+      #6a00ff,
+      #8000ff,
+      #9500ff,
+      #a0f,
+      #bf00ff,
+      #d500ff,
+      #ea00ff,
+      fuchsia,
+      #ff00ea,
+      #ff00d5,
+      #ff00bf,
+      #f0a,
+      #ff0095,
+      #ff0080,
+      #ff006a,
+      #f05,
+      #ff0040,
+      #ff002b,
+      #ff0015
+    );
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
+    appearance: none;
+    cursor: pointer;
+    height: calc(var(--sds-g-spacing-5, 1.5rem) - (1px * 2));
+    width: 0.375rem;
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-30, #444444);
+    border-radius: var(--sds-g-radius-border-1, 0.125rem);
+    background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
+    appearance: none;
+    box-sizing: border-box; /* Note: FF did not inherit border-box from parent. Initially set to content-box, it needs to set manually here */
+    cursor: pointer;
+    height: calc(var(--sds-g-spacing-5, 1.5rem) - (1px * 2));
+    width: 0.375rem;
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-30, #444444);
+    border-radius: var(--sds-g-radius-border-1, 0.125rem);
+    background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+    border: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
+    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+    border: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
+    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+    border: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
+    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+    border: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
+    outline: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-swatch {
+    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    height: var(--sds-g-spacing-5, 1.5rem);
+    width: var(--sds-g-spacing-5, 1.5rem);
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+    border-radius: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
+    display: flex;
+    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error {
+    border-color: var(--sds-g-color-error-base-50, #ea001e);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-form-element__help {
+    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    color: var(--sds-g-color-error-base-50, #ea001e);
+    font-size: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  abbr[title] {
+    text-decoration: none;
+  }
+}

package/src/lightning/colorPickerCustom/colorPickerCustom.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './color-picker-custom.slds.css';

package/src/lightning/colorPickerCustom/colorPickerCustom.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-color-picker__custom">
+    <div part="color-picker-custom" class="slds-color-picker__custom">
         <p id="color-picker-instructions" class="slds-assistive-text">{i18n.colorPickerInstructions}</p>
         <!--gradient -->
         <div class="slds-m-bottom_small" data-id="color-gradient" style={gradientStyle} onmousedown={handleMouseDown}>
@@ -40,13 +40,14 @@
         <!--Custom Inputs-->
         <div class="slds-color-picker__custom-inputs">
             <!--HEX-->
-            <div class="slds-form-element slds-color-picker__input-custom-hex">
-                <label class="slds-form-element__label" for="input">{i18n.hexLabel}</label>
-                <div class="slds-form-element__control">
+            <div part="input-text" class="slds-form-element slds-color-picker__input-custom-hex">
+                <label part="label" class="slds-form-element__label" for="input">{i18n.hexLabel}</label>
+                <div part="input-container" class="slds-form-element__control">
                     <input
                         data-primary-input
                         type="text"
                         id="input"
+                        part="input"
                         class="slds-input"
                         minlength="4"
                         maxlength="7"
@@ -58,15 +59,16 @@
                 </div>
             </div>
             <!--RED-->
-            <div class="slds-form-element">
-                <label class="slds-form-element__label" for="red">
+            <div part="input-text" class="slds-form-element">
+                <label part="label" class="slds-form-element__label" for="red">
                     <abbr title={i18n.redAbbr}>{i18n.rInput}</abbr>
                 </label>
-                <div class="slds-form-element__control">
+                <div part="input-container" class="slds-form-element__control">
                     <input
                         type="text"
                         id="red"
                         data-color-name="red"
+                        part="input"
                         class="slds-input"
                         placeholder="255"
                         onchange={handleRgbChange}
@@ -75,15 +77,16 @@
                 </div>
             </div>
             <!--GREEN-->
-            <div class="slds-form-element">
-                <label class="slds-form-element__label" for="green">
+            <div part="input-text" class="slds-form-element">
+                <label part="label" class="slds-form-element__label" for="green">
                     <abbr title={i18n.greenAbbr}>{i18n.gInput}</abbr>
                 </label>
-                <div class="slds-form-element__control">
+                <div part="input-container" class="slds-form-element__control">
                     <input
                         type="text"
                         id="green"
                         data-color-name="green"
+                        part="input"
                         class="slds-input"
                         placeholder="255"
                         onchange={handleRgbChange}
@@ -92,15 +95,16 @@
                 </div>
             </div>
             <!--BLUE-->
-            <div class="slds-form-element">
-                <label class="slds-form-element__label" for="blue">
+            <div part="input-text" class="slds-form-element">
+                <label part="label" class="slds-form-element__label" for="blue">
                     <abbr title={i18n.blueAbbr}>{i18n.bInput}</abbr>
                 </label>
-                <div class="slds-form-element__control">
+                <div part="input-container" class="slds-form-element__control">
                     <input
                         type="text"
                         id="blue"
                         data-color-name="blue"
+                        part="input"
                         class="slds-input"
                         placeholder="255"
                         onchange={handleRgbChange}

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -110,9 +110,7 @@ export default class LightningColorPickerCustom extends LightningElement {
     }
 
     get gradientStyle() {
-        return `background: ${
-            this._hex || 'rgb(0, 85, 255)'
-        }; position: relative;`;
+        return 'position: relative;';
     }
 
     get canvasRect() {