diff --git a/package.json b/package.json index 16ff077680cd..a211c9625d22 100644 --- a/package.json +++ b/package.json @@ -167,6 +167,8 @@ "scripts": { "build": "gulp build", "build-dev": "gulp build:dev", + "build-dev-rollup": "gulp build:dev --rollup", + "build-dev-rollup-experimental": "gulp build:dev --rollup -e", "ci-check": "sh ./tools/ci-check.sh", "commitmsg": "commitlint -e $GIT_PARAMS", "dev": "gulp serve", diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index fe338d5797ce..e1049cfdb570 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -6,7 +6,7 @@ @import '../../globals/scss/css--reset'; @import '../../globals/scss/import-once'; -@include exports('form') { +@mixin form { .#{$prefix}--fieldset { @include reset; margin-bottom: $spacing-xl; @@ -96,3 +96,93 @@ margin-bottom: $spacing-xs; } } + +@mixin form--experimental { + .#{$prefix}--fieldset { + @include reset; + margin-bottom: $spacing-xl; + } + + .#{$prefix}--form-item { + @include font-family; + display: flex; + flex-direction: column; + flex: 1; + align-items: flex-start; + } + + .#{$prefix}--label { + @include reset; + @include font-family; + @include typescale('omega'); + color: $text-01; + font-weight: $input-label-weight; + display: inline-block; + vertical-align: baseline; + margin-bottom: $spacing-xs; + } + + .#{$prefix}--label .#{$prefix}--tooltip__trigger { + @include typescale('zeta'); + } + + .#{$prefix}--label--disabled { + color: $text-disabled; + cursor: not-allowed; + } + + // Skeleton State + .#{$prefix}--label.#{$prefix}--skeleton { + @include skeleton; + width: rem(75px); + height: rem(14px); + } + + input[data-invalid], + textarea[data-invalid], + select[data-invalid], + .#{$prefix}--list-box[data-invalid] { + box-shadow: 0 2px 0px 0px $support-01; + + ~ .#{$prefix}--form-requirement { + max-height: rem(200px); + display: block; + color: $support-01; + } + } + + // Fix for red ring when input is marked required in Firefox, refs #744 + input:not(output):not([data-invalid]):-moz-ui-invalid { + box-shadow: none; + } + + .#{$prefix}--form-requirement { + @include reset; + @include typescale('omega'); + margin: $spacing-2xs 0 0; + max-height: 0; + overflow: hidden; + line-height: 1.5; + display: none; + } + + .#{$prefix}--form__helper-text { + @include typescale('omega'); + color: $text-02; + order: 1; + line-height: 1.5; + z-index: 0; + max-height: 3rem; + opacity: 1; + margin-top: $spacing-2xs; + margin-bottom: $spacing-xs; + } +} + +@include exports('form') { + @if feature-flag-enabled('components-x') { + @include form--experimental; + } @else { + @include form; + } +} diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss index ab517a4c6fbc..a716ba1de407 100644 --- a/src/components/text-input/_text-input.scss +++ b/src/components/text-input/_text-input.scss @@ -11,7 +11,7 @@ @import '../../globals/scss/import-once'; @import '../form/form'; -@include exports('text-input') { +@mixin text-input { .#{$prefix}--text-input { @include reset; @include font-family; @@ -118,3 +118,81 @@ } } } + +@mixin text-input--experimental { + .#{$prefix}--text-input { + @include reset; + @include typescale('zeta'); + background-color: $field-01; + width: 100%; + height: rem(32px); + padding: 0 $spacing-xl 0 $spacing-md; + color: $text-01; + border: none; + outline: 1px solid $ui-04; + outline-offset: -1px; + padding-bottom: 1px; + } + + .#{$prefix}--text-input:hover { + color: $text-01; + outline: 1px solid $brand-01; + outline-offset: -1px; + } + + .#{$prefix}--text-input:focus, + .#{$prefix}--text-input:active { + outline: 2px solid $brand-01; + outline-offset: -2px; + } + + .#{$prefix}--text-input::-webkit-input-placeholder { + color: $text-03; + } + + //----------------------------- + // Disabled & Error icon spacing + //----------------------------- + .#{$prefix}--text-input:disabled, + .#{$prefix}--text-input[data-invalid], + .#{$prefix}--text-input:invalid, + .#{$prefix}--text-input[data-loading] { + padding-right: rem(40px); + background-repeat: no-repeat; + background-position: right 8px bottom 50%; + } + + //----------------------------- + // Disabled + //----------------------------- + .#{$prefix}--text-input:disabled { + cursor: not-allowed; + // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE + background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e"); + outline: none; + } + + .#{$prefix}--text-input:disabled::-webkit-input-placeholder { + color: $text-disabled; + } + + //----------------------------- + // Error + //----------------------------- + .#{$prefix}--text-input[data-invalid], + .#{$prefix}--text-input:invalid { + outline: 2px solid $support-01; + outline-offset: -2px; + box-shadow: none; + // THIS SHOULD BE MOVED TO AN INLINE SVG IN THE HTML IN NEXT MAJOR RELEASE + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--warning--filled' fill='%23da1e28'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm-1 6h2v11h-2zm1 17a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25z'/%3e%3c/svg%3e "); + } +} + +@include exports('text-input') { + @if feature-flag-enabled('components-x') { + @include text-input--experimental; + } @else { + @include text-input; + } +} diff --git a/src/components/text-input/text-input.hbs b/src/components/text-input/text-input.hbs index 7191d222ef56..3b035646c0e1 100644 --- a/src/components/text-input/text-input.hbs +++ b/src/components/text-input/text-input.hbs @@ -1,10 +1,10 @@
{{#unless password}} - + {{else}} + placeholder="Placeholder text" data-toggle-password-visibility>