Issue number: resolves#27812
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We currently have CSS to ensure the floating/stacked label is not
obscured by the input/textarea when using the outline styles. However,
it was discovered that this scenario can happen with any
floating/stacked label not just when the input/textarea is using the
outline style.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Floating/stacked labels appear on top of the input/textarea regardless
of fill mode.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.2.1-dev.11690464203.1b2b4419`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27061
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Input does not accept custom HTML labels
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Input accepts custom HTML labels as an experimental feature. We marked
this as experimental because it makes use of "scoped slots" which is an
emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.
Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/2997
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: resolves#27184
---------
## What is the current behavior?
The modern form controls do not use the same opacity for their labels
when disabled, resulting in inconsistent UI when using two different
types in the same view (select vs checkbox, for example).
## What is the new behavior?
The checkbox, input, radio, range, select, textarea and toggle labels
have been updated on both modes to use the same opacity as each other
when disabled. The checkbox and radio icons have been updated to use a
different opacity than the label for `md` mode.
- Updates `ios` mode so all form controls use the same opacity of `0.3`
- I could not find any guidelines by Apple for what color these should
be, so I decided to just make them the same as what is most commonly
used & match item
- Updates `md` mode so all form control labels use the same opacity of
`0.38`
- I used the [Material Design 3
documentation](https://m2.material.io/components) to get this number as
well as the opacity of the disabled selection controls in the [Material
Design 2 figma design
kit](https://www.figma.com/community/file/778763161265841481). The
Material Design 2 documentation does not mention the opacity, but this
is also the number used by Material Design 1 so it's safe to assume it
is what the disabled form labels should also use for Material Design 2.
- Updates the `md` range so the slotted elements are also included when
setting the opacity on the label
- Updates the range, radio & checkbox tests to make sure there are
screenshots in the different disabled states
- Updates the item/disabled test to include radio & textarea so you can
see all form controls side by side
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
I downloaded screenshots of the item disabled tests and put them side by
side for `main` and this branch in order to see the differences in the
labels. The grey boxes to the left of each item are just a bigger
version of the label color for that item, so it's easier to see when
they aren't the same.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27129
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Material Design has 16px of margin between the form control and the
label, but we have 8px:
https://m2.material.io/components/selection-controls#usage
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates default margin from 8px to 16px for checkbox, input, radio,
range, select, textarea, and toggle.
Note: This should only apply to labels that are on the same line as the
form control. In other words, they do not apply to stacked/floating
labels.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27116
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
With `ion-input`, `ion-select`, or `ion-textarea` using
`fill="outline"`, applying a large value for the `--border-radius` CSS
prop causes the radius to render differently on the left and right
sides:
This is due to the structure of the outline container, which is used to
render the empty space in the border when a `stacked` or `floating`
label floats upwards. The container has three pieces, which combine to
form a seamless-looking border:
The issue is that the browser will only render a radius that fits within
the element's dimensions, and the piece on the left side (or right on
RTL) is not wide enough.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
While we could fix this issue by making the left-side piece wider (and
there was originally a PR for this at
https://github.com/ionic-team/ionic-framework/pull/27459), it was
decided to not include this fix in Ionic automatically. This is because
the fix does not work for `label-placement="stacked"` or `"floating"`;
the notch spacer (the middle piece of the outline) is pushed to the
side, leading to broken visuals:
We decided that introducing inconsistent behavior across different
values for `label-placement` would be confusing for developers. Even if
we did restructure the outline container to position the notch spacer
correctly, it could easily be made to fall on the curve of the border,
creating awkward visuals.
Instead, developers looking to use a large `--border-radius` with
`fill="outline"` should either increase `--padding-start` to be at least
as high as the `--border-radius` (which will increase the width of the
left outline piece while also moving the floating label in step), or use
`shape="round"` (which will change both the padding and border radius
automatically). This PR documents this workaround in the
`--border-radius` description.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue URL: resolves#27086
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When an `ion-select` is inside a card, the label is slightly lower than
it should be, making it out of alignment with the label of an
`ion-input`.
<!-- Issues are required for both bug fixes and features. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When inside a card, the labels of `ion-input` and `ion-select` are in
line with each other.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This bug was occurring because the label of ion-select is in the shadow
DOM. [As
recommended](https://github.com/ionic-team/ionic-framework/issues/27086#issuecomment-1494427311),
this fix was also added to ion-input and ion-textarea in case those
labels are also later moved to the shadow DOM.
Before:
<img width="534" alt="Screenshot 2023-04-13 at 4 35 44 PM"
src="https://user-images.githubusercontent.com/14926794/231877123-02f8e381-2137-4d3c-8dab-ae9051ad3591.png">
After:
<img width="535" alt="Screenshot 2023-04-13 at 4 36 02 PM"
src="https://user-images.githubusercontent.com/14926794/231877151-bd49b87b-762a-4d20-b6b7-57c1ab3bb368.png">
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27249
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The cloned input/textarea for scroll assist is not sized correctly. For
legacy inputs, this causes the clone to be off by ~1px because it does
not have the correct height. For modern inputs, this causes the same bug
as the legacy inputs plus cloned inputs overlap any floating/stacked
labels. This was not a concern for legacy inputs because those inputs
did not contain the label element where modern inputs do.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Sets `bottom: 0` for cloned inputs so they have the correct height
- Sets `position: relative` on the `.native-wrapper` so the cloned input
does not flow outside of the parent container.
**Before**
| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385644-3c15f98e-2646-41e1-b206-34c505791bde.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233385681-8d682222-44b4-4cdc-b0de-96ed3fd38792.MP4"></video>
|
(Note: The legacy input bug is subtle -- the input only shifts by ~1px)
**After**
| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385911-243dea95-39b4-4d81-bfe9-26e52382a702.mp4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233386237-2c9eede3-ca91-429b-8a35-15428529a883.mp4"></video>
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
BREAKING CHANGE:
The default value for the `--placeholder-opacity` CSS Variable on `ion-input`, `ion-searchbar`, `ion-select`, and `ion-textarea` has been updated to `0.6`.
* style(theming): clean up sass TODOs
* fix(item): use proper padding on small buttons in an item
* refactor(components): remove color from unused components
* chore(components): update build files to remove color
* fix(tab-bar): remove unused layout prop
* test(segment): add custom test and update standalone
* docs(segment): update usage examples to remove layout
* test(segment): update tests to remove layout
* test(tab-bar): update tests to remove layout
* fix(segment): set the colors in the parent segment
but use them in the child segment button
This allows the user to customize all of the segment buttons from segment, while still allowing the `color` property to take precedence, and they can also edit the segment button colors directly if desired.
This actually fixes some bugs surrounding colors and allows customization for a segment inside of a toolbar.
references #14853
* style(sass): fix lint errors
* chore(build): build files
* fix(segment-button): use transparent background
* docs(segment-button): add color activated back
* why does the build hate me
* fix(segment): set initial css variables to avoid inheriting
* fix(segment): set initial color activated
also add new line to the nav readme because reasons
* test(segment): parent mode should match children
* fix(fab): separate the mode colors and update the md icon color
-md icon color matches spec by adding 0.54 opacity to the color
fixes#16091
* fix(fab): update the font size for buttons in a fab list
* fix(fab-button): update box-shadow for both states
* fix(fab-button): update transition to match md spec
