Skip to content

Commit

Permalink
feat: migrate Picker from FieldButton to Picker... button
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Picker markup changed completely
  • Loading branch information
@lazd @GarthDB
lazd authored and GarthDB committed Dec 1, 2020
1 parent 3e57a52 commit 6fbc452
Show file tree
Hide file tree
Showing 3 changed files with 296 additions and 272 deletions.
332 changes: 224 additions & 108 deletions components/picker/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,73 +11,99 @@ governing permissions and limitations under the License.
*/

@import "../commons/index.css";
@import "../commons/basebutton.css";
@import "../vars/css/components/spectrum-picker.css";

:root {
--spectrum-picker-popover-max-width: var(
--spectrum-global-dimension-size-3000
);
--spectrum-picker-width: var(--spectrum-global-dimension-size-2400);

/* This needs to be a variable so it overrides when using multiStops */
--spectrum-picker-quiet-width: auto;
}

.spectrum-Picker {
/* todo: remove when fixed in DNA */
--spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);

@remapvars {
find: /--spectrum-picker-m(.*)/;
filter: color;
replace: --spectrum-picker$1;
}
@remapvars {
find: /--spectrum-picker-quiet-m(.*)/;
filter: color;
replace: --spectrum-picker-quiet$1;
}

/* todo: remove when fixed in DNA */
--spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);

/* Todo: fix in DNA, should have been zero */
--spectrum-picker-disabled-border-size: 0;

--spectrum-picker-popover-max-width: var(--spectrum-global-dimension-size-3000);
--spectrum-picker-width: var(--spectrum-global-dimension-size-2400);

/* todo: use real DNA var */
--spectrum-picker-border-size-increase-focus: 1px;
}

.spectrum-Picker {
position: relative;
display: inline-block;
@inherit: %spectrum-BaseButton;

display: flex;
justify-content: space-between;
align-items: center;

/* Truncate if menu options make us too wide */
max-inline-size: 100%;
inline-size: var(--spectrum-picker-width);
min-inline-size: var(--spectrum-picker-min-width);
block-size: var(--spectrum-picker-height);

/* Hack to enable select-powered Dropdowns */
select {
appearance: none;
-ms-appearance: none; /* Edge */
margin: 0;
padding-block: 0;
padding-inline: var(--spectrum-picker-textonly-padding-left) var(--spectrum-picker-textonly-padding-right);

&::-ms-expand {
display: none;
}
border-width: var(--spectrum-picker-border-size);
border-style: solid;
border-radius: var(--spectrum-picker-border-radius);

&::-ms-value {
background-color: transparent;
}
transition: background-color var(--spectrum-global-animation-duration-100),
box-shadow var(--spectrum-global-animation-duration-100),
border-color var(--spectrum-global-animation-duration-100);

& + .spectrum-Picker-icon {
position: absolute;
inset-inline-end: var(--spectrum-picker-icon-gap);
inset-block-start: 50%;
margin-block-start: calc(
var(--spectrum-icon-chevron-down-medium-height) / -2
);
}
&:disabled,
&.is-disabled {
border-width: var(--spectrum-picker-disabled-border-size);
cursor: default;
}

&.is-open {
border-width: var(--spectrum-picker-border-size);
}

.spectrum-Picker-icon {
flex-shrink: 0;

margin-inline-start: calc(var(--spectrum-picker-padding-left) - var(--spectrum-picker-textonly-padding-left));
margin-inline-end: var(--spectrum-picker-icon-gap);
}

.spectrum-Picker-label + .spectrum-Picker-icon {
margin-inline-start: var(--spectrum-picker-icon-gap);
}
}

.spectrum-Picker-trigger {
position: relative;
inline-size: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.spectrum-Picker--quiet {
@remapvars {
find: /--spectrum-picker-quiet-m(.*)/;
filter: color;
replace: --spectrum-picker-$1;
}

/* Todo: fix in DNA, should have been zero */
--spectrum-picker-border-size: 0;
--spectrum-picker-border-radius: 0;
--spectrum-picker-textonly-padding-left: 0;
--spectrum-picker-textonly-padding-right: 0;
}

.spectrum-Picker--quiet {
inline-size: auto;

&:disabled,
&.is-disabled {
&:focus-ring {
box-shadow: none;
}
}
}

.spectrum-Picker-label {
Expand Down Expand Up @@ -107,93 +133,183 @@ governing permissions and limitations under the License.
}

/* Only apply margin to the icon if there's a label */
.spectrum-Picker-label + .spectrum-Picker-icon {
margin-inline-start: var(--spectrum-picker-icon-gap);
}

.spectrum-Icon + .spectrum-Picker-label {
/* todo not sure if this is right */
.spectrum-Picker-label + .spectrum-Picker-validationIcon {
margin-inline-start: var(--spectrum-picker-icon-gap);
}

/* Only apply margin if there's a label */
.spectrum-Picker-label ~ .spectrum-Picker-icon {
.spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
margin-inline-start: var(--spectrum-picker-icon-gap);
}

.spectrum-Picker-icon {
/* The picker chevron */
.spectrum-Picker-menuIcon {
display: inline-block;
position: relative;
vertical-align: top;
transition: color var(--spectrum-global-animation-duration-100) ease-out;
flex-shrink: 0;

/* Fix Safari 10 bug where align-items is ignored inside of buttons */
margin-block-start: calc(
calc(
var(--spectrum-picker-height) -
calc(var(--spectrum-picker-border-size) * 2) -
var(--spectrum-icon-chevron-down-medium-height)
) / 2
);
margin-block-end: calc(
calc(
var(--spectrum-picker-height) -
calc(var(--spectrum-picker-border-size) * 2) -
var(--spectrum-icon-chevron-down-medium-height)
) / 2
);

opacity: 1;
}

/* Error icons */
.spectrum-Picker-trigger {
.spectrum-Icon:not(.spectrum-Picker-icon) {
flex-shrink: 0;
/* Fix Safari 10 bug where align-items is ignored inside of buttons */
margin-block-start: calc(
calc(
var(--spectrum-picker-height) -
calc(var(--spectrum-picker-border-size) * 2) -
var(--spectrum-picker-icon-size)
) / 2
);
margin-block-end: calc(
calc(
var(--spectrum-picker-height) -
calc(var(--spectrum-picker-border-size) * 2) -
var(--spectrum-picker-icon-size)
) / 2
);
}

.spectrum-Picker-label + .spectrum-Icon:not(.spectrum-Picker-icon) {
margin-inline-start: var(--spectrum-picker-icon-gap);
}
}

.spectrum-Icon + .spectrum-Picker-icon {
.spectrum-Picker-validationIcon + .spectrum-Picker-menuIcon {
margin-inline-start: var(--spectrum-picker-icon-gap);
}

.spectrum-Picker--quiet {
@remapvars {
find: /--spectrum-picker-quiet-m(.*)/;
filter: color;
replace: --spectrum-picker$1;
}

inline-size: var(--spectrum-picker-quiet-width);
}

.spectrum-Picker-popover {
max-inline-size: var(--spectrum-picker-popover-max-width);
}

.spectrum-Picker-popover--quiet {
margin-inline-start: calc(
-1 * calc(var(--spectrum-picker-quiet-popover-offset-x) +
-1 * calc(var(--spectrum-picker-quiet-m-popover-offset-x) +
var(--spectrum-popover-border-size))
);
}

.spectrum-Picker {
color: var(--spectrum-picker-m-text-color);
background-color: var(--spectrum-picker-m-background-color);
border-color: var(--spectrum-picker-m-border-color);

&:hover {
color: var(--spectrum-picker-m-text-color-hover);
background-color: var(--spectrum-picker-m-background-color-hover);
border-color: var(--spectrum-picker-m-border-color-hover);

.spectrum-Picker-menuIcon {
color: var(--spectrum-picker-m-icon-color-hover);
}
}

&:active,
&.is-selected {
background-color: var(--spectrum-picker-m-background-color-down);
border-color: var(--spectrum-picker-m-border-color-down);

&.is-placeholder {
.spectrum-Picker-label {
color: var(--spectrum-picker-m-placeholder-text-color-down);
}
}
}

&:focus-ring,
&.is-focused {
background-color: var(--spectrum-picker-m-background-color-key-focus);
border-color: var(--spectrum-picker-m-border-color-key-focus);
box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus);
color: var(--spectrum-picker-m-text-color-key-focus);

&.is-placeholder {
color: var(--spectrum-picker-m-placeholder-text-color-key-focus);
}
}

&.is-invalid {
border-color: var(--spectrum-picker-m-border-color-error);

.spectrum-Picker-validationIcon {
color: var(--spectrum-picker-m-validation-icon-color-error);
}

&:hover {
border-color: var(--spectrum-picker-m-border-color-error-hover);
}

&:active,
&.is-selected {
border-color: var(--spectrum-picker-m-border-color-error-down);
}

&:focus-ring,
&.is-focused {
border-color: var(--spectrum-picker-m-border-color-error-key-focus);
box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus);
}
}

&:disabled,
&.is-disabled {
background-color: var(--spectrum-picker-m-background-color-disabled);
color: var(--spectrum-picker-m-text-color-disabled);

.spectrum-Picker-icon,
.spectrum-Picker-menuIcon,
.spectrum-Picker-validationIcon {
color: var(--spectrum-picker-m-icon-color-disabled);
}

.spectrum-Picker-label {
&.is-placeholder {
color: var(--spectrum-picker-m-placeholder-text-color-disabled);
}
}
}
}

.spectrum-Picker-menuIcon {
color: var(--spectrum-picker-m-icon-color);
}

.spectrum-Picker-label {
&.is-placeholder {
color: var(--spectrum-picker-m-placeholder-text-color);

&:hover {
color: var(--spectrum-picker-m-placeholder-text-color-hover);
}

&:active {
color: var(--spectrum-picker-m-placeholder-text-color-mouse-focus);
}
}
}

.spectrum-Picker--quiet {
color: var(--spectrum-picker-m-text-color);
border-color: var(--spectrum-picker-quiet-m-border-color);
background-color: var(--spectrum-picker-quiet-m-background-color);

&:hover {
background-color: var(--spectrum-picker-quiet-m-background-color-hover);
color: var(--spectrum-picker-m-text-color-hover);
}

&:focus-ring,
&.is-focused {
background-color: var(--spectrum-picker-quiet-m-background-color-key-focus);
box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus);

&.is-placeholder {
color: var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus);
}
.spectrum-Picker-menuIcon {
color: var(--spectrum-picker-m-icon-color-key-focus)
}
}

&:active,
&.is-selected {
background-color: var(--spectrum-picker-quiet-m-background-color-down);
border-color: var(--spectrum-picker-quiet-m-border-color-down);

&:focus-ring,
&.is-focused {
background-color: var(--spectrum-picker-quiet-m-background-color-key-focus);
box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus);
}
}

&.is-invalid {
&:focus-ring,
&.is-focused {
box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus);
}
}

&:disabled,
&.is-disabled {
background-color: var(--spectrum-picker-quiet-m-background-color-disabled);
color: var(--spectrum-picker-m-text-color-disabled);
}
}
Loading

0 comments on commit 6fbc452

Please sign in to comment.