fix(back-button): update style for ios spec (#26395)

resolves #26393
This commit is contained in:
Liam DeBeasi
2022-12-02 09:21:32 -05:00
committed by GitHub
parent 13a47b4e40
commit 1a840c43e9
14 changed files with 14 additions and 2 deletions

View File

@ -16,6 +16,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#version-7x-components) - [Components](#version-7x-components)
- [Accordion Group](#version-7x-accordion-group) - [Accordion Group](#version-7x-accordion-group)
- [Action Sheet](#version-7x-action-sheet) - [Action Sheet](#version-7x-action-sheet)
- [Back Button](#version-7x-back-button)
- [Card Header](#version-7x-card-header) - [Card Header](#version-7x-card-header)
- [Checkbox](#version-7x-checkbox) - [Checkbox](#version-7x-checkbox)
- [Datetime](#version-7x-datetime) - [Datetime](#version-7x-datetime)
@ -86,6 +87,17 @@ This section details the desktop browser, JavaScript framework, and mobile platf
| ---------- | -------------- | --------- | | ---------- | -------------- | --------- |
| `--height` | `100%` | `auto` | | `--height` | `100%` | `auto` |
<h4 id="version-7x-back-button">Back Button</h4>
- Back Button is updated to align with the design specification for iOS.
**Design tokens**
| Token | Previous Value | New Value |
| ------------------- | -------------- | --------- |
| `--icon-margin-end` | `-5px` | `1px` |
| `--icon-font-size` | `1.85em` | `1.6em` |
<h4 id="version-7x-card-header">Card Header</h4> <h4 id="version-7x-card-header">Card Header</h4>
- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title. - The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.

View File

@ -11,9 +11,9 @@
--background-focused-opacity: .1; --background-focused-opacity: .1;
--border-radius: 4px; --border-radius: 4px;
--color: #{$back-button-ios-color}; --color: #{$back-button-ios-color};
--icon-margin-end: -5px; --icon-margin-end: 1px;
--icon-margin-start: -4px; --icon-margin-start: -4px;
--icon-font-size: 1.85em; --icon-font-size: 1.6em;
--min-height: 32px; --min-height: 32px;
font-size: 17px; font-size: 17px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 KiB

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 KiB

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 KiB

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 94 KiB