FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: Add support for active vs. inactive background colors on wind variant of tabs by starryeyez024 · Pull Request #1124 · patternfly/patternfly-elements · GitHub

/ patternfly-elements Public

fix: Add support for active vs. inactive background colors on wind variant of tabs #1124

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

Merged
castastrophe merged 18 commits into from
Apr 7, 2021
Conversation 7 Commits 18 Checks 0 Files changed
Merged

fix: Add support for active vs. inactive background colors on wind variant of tabs #1124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
414abba
add support for active vs inactive background colors on wind variant
starryeyez024 Oct 2, 2020
f12f5ab
Merge branch 'master' into issue-1123-tab-colors
castastrophe Oct 8, 2020
8e5bba9
formatting
starryeyez024 Oct 19, 2020
c57f6e9
Merge branch 'master' into issue-1123-tab-colors
starryeyez024 Oct 19, 2020
99310ad
Branch was auto-updated with the latest.
github-actions[bot] Oct 20, 2020
7f1dfe6
Branch was auto-updated with the latest.
github-actions[bot] Oct 21, 2020
592f613
Branch was auto-updated with the latest.
github-actions[bot] Oct 22, 2020
61a9b42
Branch was auto-updated with the latest.
github-actions[bot] Nov 9, 2020
65f9a34
Resolve merge conflicts
Mar 17, 2021
4add53d
Documentation update
Mar 17, 2021
5a736b5
Branch was auto-updated with the latest.
github-actions[bot] Mar 17, 2021
f84a7d2
Branch was auto-updated with the latest.
github-actions[bot] Mar 17, 2021
2cb4edc
Merge branch 'master' into issue-1123-tab-colors -- resolve conflict …
starryeyez024 Apr 1, 2021
0afa160
changelog
starryeyez024 Apr 1, 2021
ab38420
Tidy code
starryeyez024 Apr 1, 2021
467de90
Branch was auto-updated with the latest.
github-actions[bot] Apr 1, 2021
fec3bc6
reverting @wdio/browserstack-service
heyMP Apr 5, 2021
ece61f7
Update AT snapshots
starryeyez024 Apr 6, 2021
File filter

Filter by extension

Filter by extension .json  (1) .md  (2) .png  (3) .scss  (3) All 4 file types selected
Only manifest files
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
4 changes: 4 additions & 0 deletions CHANGELOG-1.x.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# 1.5.0 (TBD)

- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add CSS variable support for typography & background colors on tabs

# 1.4.0 (2021-03-30)

- [76c2c36](https://github.com/patternfly/patternfly-elements/commit/76c2c3689a9a338b278d99f6e2d3cbeef4f3cc3d) feat: Add performance marks to PFElement for more accurate reporting on performance
Expand Down
51 changes: 34 additions & 17 deletions elements/pfe-tabs/README.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -150,23 +150,40 @@ Fires when a selected tab is no longer the selected tab. The `event.detail.tab`

| Theme hook | Description | Default |
| -------------- | ----------- | ------- |
| `--pfe-theme--container-padding` | Tab padding and panel padding | 16px |
| `--pfe-theme--color--surface--border` | Link color for default CTA | `$pfe-color--surface--border` |
| `--pfe-theme--ui--border-style` | Border style for selected tab | solid |
| `--pfe-theme--ui--border-width` | Border width for selected tab | 1px |
| `--pfe-theme--color--surface--lightest` | Selected tab background color | `$pfe-color--surface--lightest` |
| `--pfe-theme--color--surface--lightest--text` | Default tab text color | `$pfe-color--surface--lightest--text` |
| `--pfe-theme--color--surface--lightest--link` | Tab hover and selected indicator color | `$pfe-color--surface--lightest--link` |
| `--pfe-theme--color--surface--lightest--link--focus` | Focused tab outline color | `$pfe-color--surface--lightest--link--focus` |
| `--pfe-tabs__indicator--Display` | Tab indicator display | block |
| `--pfe-tabs__indicator--Height` | Tab indicator height | 4px |
| `--pfe-tabs__indicator--Width` | Tab indicator width | 22px |
| `--pfe-tabs__tab--TextTransform` | Tab text transform | none |
| `--pfe-tabs__panel--PaddingTop` | Tab panel padding-top |
| `--pfe-tabs__panel--PaddingRight` | Tab panel padding-right |
| `--pfe-tabs__panel--PaddingBottom` | Tab panel padding-bottom |
| `--pfe-tabs__panel--PaddingLeft` | Tab panel padding-left |

| `--pfe-tabs--Display` | | block |
| `--pfe-tabs--Padding` | Tab padding and panel padding | 0 |
| `--pfe-tabs__tabs--FlexDirection` | | row |
| `--pfe-tabs__tabs--Width` | | auto |
| `--pfe-tabs__tabs--Padding` | | 0 |
| `--pfe-tabs__tabs--BorderTop` | | 0 |
| `--pfe-tabs__tabs--BorderRight` | | 0 |
| `--pfe-tabs__tabs--BorderLeft` | | 0 |
| `--pfe-tabs__tabs--BorderColor` | | var(--pfe-theme--color--surface--border, #d2d2d2) |
| `--pfe-tabs__tabs--BorderBottom` | | var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs__tabs--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2)) |
| `--pfe-tabs__panels--Width` | | auto |
| `--pfe-tabs--BackgroundColor` | | transparent |
| `--pfe-tabs--BackgroundColor--inactive` | | var(--pfe-theme--color--surface--lighter, #f0f0f0) |
| `--pfe-tabs--Color` | Default tab text color | var(--pfe-theme--color--text--muted, #6a6e73) |
| `--pfe-tabs--BorderColor--hover` | | #b8bbbe |
| `--pfe-tabs--BorderWidth` | | var(--pfe-theme--ui--border-width--active, 3px) |
| `--pfe-tabs__tab--FontSize` | | var(--pfe-theme--font-size, 1rem) |
| `--pfe-tabs__tab--Margin` | | 0 0 calc( var(--pfe-theme--ui--border-width, 1px) * -1) |
| `--pfe-tabs__tab--PaddingTop` | | var(--pfe-theme--container-padding, 1rem) |
| `--pfe-tabs__tab--PaddingBottom` | | var(--pfe-theme--container-padding, 1rem) |
| `--pfe-tabs__tab--PaddingRight` | | calc(var(--pfe-theme--container-padding, 1rem) * 2) |
| `--pfe-tabs__tab--PaddingLeft` | | calc(var(--pfe-theme--container-padding, 1rem) * 2) |
| `--pfe-tabs__tab--TextTransform` | | none |
| `--pfe-tabs--Color--focus` | | var(--pfe-tabs--focus, var(--pfe-theme--color--text, #151515)) |
| `--pfe-tabs--highlight` | Border style for selected tab | var(--pfe-theme--color--ui-accent, #06c) |
| `--pfe-tabs--BorderColor` | Border style for selected tab | var(--pfe-tabs--highlight, var(--pfe-theme--color--ui-accent, #06c)) |
| `--pfe-tabs--focus` | | var(--pfe-theme--color--link, #06c) |
| `--pfe-tabs__panel--BackgroundColor` | | transparent |
| `--pfe-tabs__panel--Padding` | | var(--pfe-theme--container-spacer, 1rem) |
| `--pfe-tabs__panel--BorderTop` | | 0 |
| `--pfe-tabs__panel--BorderRight` | | 0 |
| `--pfe-tabs__panel--BorderBottom` | | 0 |
| `--pfe-tabs__panel--BorderLeft` | | 0 |

## Test

npm run test
Expand Down
2 changes: 0 additions & 2 deletions elements/pfe-tabs/src/pfe-tab-panel.scss
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../../pfe-sass/pfe-sass";


$LOCAL: tabs;

$LOCAL-VARIABLES: (focus: pfe-var(link),
Expand All @@ -20,7 +19,6 @@ $LOCAL-VARIABLES: (focus: pfe-var(link),

/// ===========================================================================


:host {
display: block;
color: pfe-broadcasted(text);
Expand Down
21 changes: 9 additions & 12 deletions elements/pfe-tabs/src/pfe-tab.scss
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ $backwards-compatibility: (

$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);


/// ===========================================================================
/// DEFAULT / WIND TAB VARIANT
/// ===========================================================================
Expand All @@ -36,38 +35,35 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
text-align: left;
position: relative;
display: block;
cursor: pointer;
margin: pfe-local(Margin, $region: tab);
// Padding
padding:
pfe-local(PaddingTop, $region: tab) pfe-local(PaddingRight, $region: tab) pfe-local(PaddingBottom, $region: tab) pfe-local(PaddingLeft, $region: tab);
padding: pfe-local(PaddingTop, $region: tab) pfe-local(PaddingRight, $region: tab) pfe-local(PaddingBottom, $region: tab) pfe-local(PaddingLeft, $region: tab);
// Borders
border-style: pfe-var(ui--border-style);
border-width: pfe-var(ui--border-width);
border-color: transparent;
border-bottom-width: pfe-local(BorderWidth);
// Inner style
background-color: pfe-local(BackgroundColor);
cursor: pointer;
background-color: pfe-local(BackgroundColor--inactive, $fallback: none); // TODO update to use opacity
text-align: pfe-local(TextAlign, center, $region: tab);

// Exposing this for customization
text-transform: pfe-local(TextTransform, $region: tab);
font-family: pfe-var(font-family);
font-weight: pfe-var(font-weight--normal);
font-size: pfe-local(FontSize, $region: tab);

color: pfe-local(Color);
@include pfe-c-typography($type: text, $sizing: md, $base: true, $region: tab, $light-dom-heading: true);

#tab {
display: inline-block;

* {
font-size: inherit;
font-weight: inherit;
color: inherit;
margin: 0;
color: pfe-local(Color);
}
}

@at-root #{&}([aria-selected="true"]) {
background-color: pfe-local(BackgroundColor);
border-bottom-color: pfe-local(BorderColor);

#tab * {
Expand All @@ -79,6 +75,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
:host(:hover),
:host(:focus),
:host(:active) {
background-color: pfe-local(BackgroundColor);
border-bottom-color: pfe-local(BorderColor--hover);

#tab * {
Expand Down
2 changes: 0 additions & 2 deletions elements/pfe-tabs/src/pfe-tabs.scss
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
)
));

@include pfe-local-debug;

/// ===========================================================================

:host {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@storybook/cli": "^5.3.8",
"@storybook/polymer": "^5.3.8",
"@storybook/storybook-deployer": "^2.8.1",
"@wdio/browserstack-service": "^6.1.12",
"@wdio/browserstack-service": "^6.1.10",
"@wdio/cli": "^6.1.12",
"@wdio/local-runner": "^6.1.12",
"@wdio/mocha-framework": "^7.0.7",
Expand Down
Binary file modified test/vrt-baseline/desktop_chrome/pfe-dropdown.png
Show comments
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Binary file modified test/vrt-baseline/desktop_chrome/pfe-number.png
Show comments
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Binary file modified test/vrt-baseline/desktop_chrome/pfe-select.png
Show comments
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Viewer requires iframe.
Back | FazBrowse Home | New Git URL