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

Jump to bottom

v4: setting --background overrides the background set by color #14853

Closed
35 tasks done
brandyscarney opened this issue Jul 24, 2018 · 2 comments · Fixed by #16641
Closed
35 tasks done

v4: setting --background overrides the background set by color #14853

brandyscarney opened this issue Jul 24, 2018 · 2 comments · Fixed by #16641
Assignees
@brandyscarney

Comments

@brandyscarney
Copy link
Member

brandyscarney commented Jul 24, 2018 •
edited
Loading

Bug Report

Describe the Bug
Setting the --background variable on an ion-toolbar overrides toolbars with color

Steps to Reproduce
Steps to reproduce the behavior:

  1. Open up any of the preview tests that use a translucent, white toolbar, for example:
    http://localhost:3333/src/components/alert/test/preview
  2. Add a color to the ion-toolbar: <ion-toolbar color="danger">
  3. See that the toolbar still has a white background.
  • anchor
  • back-button
  • badge
  • button
  • card
  • card-header
  • card-subtitle
  • card-title
  • checkbox
  • chip
  • chip-button
  • chip-icon
  • content
  • fab-button
  • input
  • item
  • item-divider
  • item-option
  • label
  • list-header
  • menu-button
  • note
  • radio
  • range
  • searchbar
  • segment
  • segment-button
  • spinner
  • tabbar
  • tabs
  • text
  • textarea
  • title
  • toggle
  • toolbar
@ionitron-bot ionitron-bot bot added triage and removed triage labels Jul 24, 2018
@brandyscarney brandyscarney mentioned this issue Aug 16, 2018
Closed
86 tasks
brandyscarney added a commit that referenced this issue Aug 16, 2018
@brandyscarney
fix(chip): add and document custom properties
07e99a1 
references #14850
references #14853
references #14808
brandyscarney added a commit that referenced this issue Aug 16, 2018
@brandyscarney
fix(content): document and add custom properties
0372aec 
references #14850 references #14808 references #14853
brandyscarney added a commit that referenced this issue Sep 4, 2018
@brandyscarney
fix(button): add custom properties and remove --ion-color vars
afde90f 
references #14808 references #14853
@brandyscarney brandyscarney mentioned this issue Sep 4, 2018
Merged
brandyscarney added a commit that referenced this issue Sep 5, 2018
@brandyscarney
fix(button): add custom properties and remove --ion-color overrides (#…
3af4361 
…15463)

- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850
camwiegert added a commit that referenced this issue Sep 7, 2018
@camwiegert
fix(list-header): add and document custom properties
5ccc1fd 
references #14850
references #14853
references #14808
pull bot pushed a commit to peterennis/ionic that referenced this issue Sep 24, 2018
@brandyscarney
fix(back-button): add and document custom properties
b3aebb8 
removes use of `--ion-color-*` variables references ionic-team#14808
documents custom properties references ionic-team#14850
uses `—background` vars to prevent overriding the color css references
ionic-team#14853
brandyscarney added a commit that referenced this issue Oct 9, 2018
@brandyscarney
fix(card-header): get color property working
92514b3 
references #14723
references #14853
brandyscarney added a commit that referenced this issue Oct 10, 2018
@brandyscarney
fix(label): add color variable, examples to test and document
b485eba 
references #14853 references #14850
brandyscarney added a commit that referenced this issue Oct 10, 2018
@brandyscarney
fix(title): allow color to be set for title without attribute
a9b3064 
references #14853 references #14850
brandyscarney added a commit that referenced this issue Oct 11, 2018
@brandyscarney
fix(fab-button): add and document css properties
098bd82 
references #14853 references #14850 closes #14808
brandyscarney added a commit that referenced this issue Oct 11, 2018
@brandyscarney
test(menu-button): add a standalone test with menu buttons
a7fae3b 
references #14853
@brandyscarney
Copy link
Member Author

Confirmed this is still an issue for segment and tabs after the refactor, cc @manucorporat

@brandyscarney brandyscarney self-assigned this Nov 2, 2018
@brandyscarney brandyscarney mentioned this issue Nov 8, 2018
Merged
brandyscarney added a commit that referenced this issue Nov 8, 2018
@brandyscarney
fix(segment): fix background states and document properties
bedc7c6 
references #14850 references #14853
brandyscarney added a commit that referenced this issue Nov 15, 2018
@brandyscarney
feat(segment): adds scrollable and layout props and updates to follow…
256745c 
… the spec (#16273)

Adds the ability to apply a layout to the segment button in order to better match the Material Design spec, updates the design and UI to match the spec more, and separates the segment button styles back into the proper directory.

- moves the segment button css back into segment-button directory
- updates the design to match the MD spec better
- adds layout property to match MD spec
- adds custom properties for better styling
- allows for overscroll / scrolling tabs via scrollable attribute
- changes the indicator to a div - will need to animate it
- updates e2e tests and add spec test

fixes #16232 fixes #16081
references #14853

BREAKING CHANGES

Segment Button now requires the text to be wrapped in an `ion-label` element for improved styling.

*Old usage:*

 ```html
<ion-segment-button>
  Item One
</ion-segment-button>
```
 *New usage:*

 ```html
<ion-segment-button>
  <ion-label>Item One</ion-label>
</ion-segment-button>
```

Note: this will not technically break your app, but the styles may look wrong.
brandyscarney added a commit that referenced this issue Nov 20, 2018
@brandyscarney
fix(tab-bar): override bakground and color directly
80508e8 
references #14853
brandyscarney added a commit that referenced this issue Dec 5, 2018
@brandyscarney
fix(segment): set the colors in the parent segment
52a84cd 
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
manucorporat pushed a commit that referenced this issue Dec 5, 2018
@brandyscarney @manucorporat
fix(segment): set colors in the parent segment and remove the unused …
8029df3 
…color property (#16590)

* 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
brandyscarney added a commit that referenced this issue Dec 7, 2018
@brandyscarney
fix(tab-bar): update tab-bar to set the color/bg of tab-button
3ba3e60 
similar to PR #16590, this is to implement the color/background in the tab-bar and inherit in tab-button

closes #14853
@brandyscarney brandyscarney mentioned this issue Dec 7, 2018
Merged
brandyscarney added a commit that referenced this issue Dec 10, 2018
@brandyscarney
fix(tab-bar): update tab-bar to set the color/background of tab-button (
2f63049 
#16641)

similar to the PR for segment: #16590, this implements the color/background in the tab-bar and inherits it in tab-button

closes #14853
@ionitron-bot
Copy link

ionitron-bot bot commented Jan 9, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@brandyscarney brandyscarney

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tab-bar): update tab-bar to set the color/background of tab-button ionic-team/ionic-framework
1 participant
@brandyscarney