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.

Sign up for GitHub

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

chore(fluid-form): update fluid input styles #13343

Merged
merged 9 commits into from
Mar 17, 2023
Merged

chore(fluid-form): update fluid input styles #13343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
89389ef
chore(fluid-form): fix modal fluid padding
aledavila Mar 14, 2023
cd1aaea
chore(fluid-form): fix modal fluid input styles
aledavila Mar 15, 2023
b1cf8e1
Merge branch 'main' of github.com:carbon-design-system/carbon into 13…
aledavila Mar 15, 2023
3b206a6
chore(fluid-inputs): update fluid input styles
aledavila Mar 16, 2023
e56c3fe
chore(fluid-form): update fluid form in modal style
aledavila Mar 16, 2023
bc05274
Merge branch 'main' into 13258-fluid-inputs
kodiakhq[bot] Mar 16, 2023
8dd72b2
chore(fluid-form): update example
aledavila Mar 17, 2023
61d6b50
Merge branch '13258-fluid-inputs' of github.com:aledavila/carbon into…
aledavila Mar 17, 2023
c037b3f
Merge branch 'main' into 13258-fluid-inputs
kodiakhq[bot] Mar 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@
white-space: nowrap;
}

.#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper {
position: initial;
}

.#{$prefix}--number-input--fluid input[type='number'] {
min-height: rem(64px);
padding: rem(32px) rem(80px) rem(13px) $spacing-05;
Expand All @@ -74,7 +78,6 @@
border-bottom: 1px solid transparent;
}

// Focus Overrides
.#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
.#{$prefix}--number {
@include focus-outline('outline');
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/fluid-select/_fluid-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
}

.#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper {
flex-direction: column;
display: block;
}

.#{$prefix}--select--fluid
Expand Down
15 changes: 10 additions & 5 deletions packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,12 @@
resize: none;
}

// accounts for 2px of border when invalid
.#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid {
padding: 0 rem(14px) rem(13px);
margin-top: rem(30px);
}

.#{$prefix}--text-area--fluid
.#{$prefix}--text-area__wrapper[data-invalid]
.#{$prefix}--text-area__divider,
Expand Down Expand Up @@ -156,22 +162,21 @@
}

//invalid outline
// needs to be a border for some weirdness when in a modal
.#{$prefix}--text-area--fluid
.#{$prefix}--text-area__wrapper[data-invalid]:not(:focus) {
@include focus-outline('invalid');

outline-offset: 0;
border: 2px solid $support-error;
}

// focus
.#{$prefix}--text-area--fluid
.#{$prefix}--text-area__wrapper[data-invalid]:focus-within,
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper:focus-within {
@include focus-outline('outline');

outline-offset: 0;
}

// end weirdness

.#{$prefix}--text-area--fluid
.#{$prefix}--text-area__wrapper[data-invalid]
> .#{$prefix}--text-area--invalid:focus,
Expand Down
41 changes: 41 additions & 0 deletions packages/styles/scss/components/modal/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,41 @@
.#{$prefix}--number__rule-divider {
background-color: $border-subtle-02;
}

// Fluid inputs
.#{$prefix}--text-input--fluid .#{$prefix}--text-input,
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
.#{$prefix}--text-area--fluid .#{$prefix}--text-area,
.#{$prefix}--search--fluid .#{$prefix}--search-input,
.#{$prefix}--select--fluid .#{$prefix}--select-input,
.#{$prefix}--text-area--fluid
.#{$prefix}--text-area__wrapper[data-invalid]
.#{$prefix}--text-area__divider
+ .#{$prefix}--form-requirement,
.#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
.#{$prefix}--number-input--fluid input[type='number'],
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
.#{$prefix}--date-picker--fluid
.c#{$prefix}ds--date-picker-input__wrapper
.#{$prefix}--date-picker__input {
background-color: $field-01;
}

.#{$prefix}--number-input--fluid
.#{$prefix}--number__control-btn:hover::before,
.#{$prefix}--number-input--fluid
.#{$prefix}--number__control-btn:hover::after {
background-color: $field-hover;
}

.#{$prefix}--number-input--fluid
.#{$prefix}--number__control-btn:focus::before,
.#{$prefix}--number-input--fluid
.#{$prefix}--number__control-btn:focus::after {
border-left: 2px solid $focus;
}
}

.#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
Expand Down Expand Up @@ -144,6 +179,12 @@
}
}

// fluid form in modal
.#{$prefix}--modal-content .#{$prefix}--form--fluid {
margin-right: -$spacing-05;
margin-left: -$spacing-05;
}

//TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
// text/p gets 20% right padding
.#{$prefix}--modal-content > p,
Expand Down