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

[Bug Report] <VExpansion> component is incorrectly displayed when in rtl mode. #6663

Closed
FunnyPhantom opened this issue Mar 3, 2019 · 2 comments
Closed

[Bug Report] <VExpansion> component is incorrectly displayed when in rtl mode. #6663

FunnyPhantom opened this issue Mar 3, 2019 · 2 comments
Assignees
@johnleider
Labels
C: VExpansionPanels VExpansionPanels T: bug Functionality that does not work as intended/expected
Milestone
v2.0.0

Comments

@FunnyPhantom
Copy link

Versions and Environment

Vuetify: 1.4.5
Vue: 2.5.0
Browsers: Chrome 72.0.3626.119
OS: Windows 10

Steps to reproduce

*open link.
*set $vuetify.rtl to true.

Expected Behavior

when $vuetify.rtl is set to true, the text direction of <v-expansion-panel> (either header or body) become rtl as well.

Actual Behavior

although the content order is correct, but the actual text start to render from left, instead of right.

Reproduction Link

https://codepen.io/funnyphantom/pen/Wmxbvv?editors=1010
@FunnyPhantom
Copy link
Author

the current work-around would be to add .text-xs-right to your elements.

@FunnyPhantom
Copy link
Author

apparently, .v-expansion-panel text-align property was manually set to left. this seems to be the cause of the inconsistent text-direction.

@johnleider johnleider added the T: bug Functionality that does not work as intended/expected label Mar 13, 2019
@johnleider johnleider self-assigned this Mar 13, 2019
@johnleider johnleider added this to the v2.0.0 milestone Mar 13, 2019
johnleider added a commit that referenced this issue Mar 13, 2019
@johnleider
fix(VExpansionPanel): remove explicit text-alignment
bff3879 
fixes #6663
@johnleider johnleider mentioned this issue Mar 16, 2019
Merged
14 tasks
johnleider added a commit that referenced this issue Mar 18, 2019
@johnleider
feat(VExpansionPanel): update to v2 (#6720)
f891304 
* refactor(VExpansionPanel): initial conversion to new style

add new accordion prop

* fix(VExpansionPanelContent): inherit border radius for focus state

* refactor(VExpansionPanelItem): deprecate panel-content, clean-up styles

* fix(VExpansionPanel): remove explicit text-alignment

fixes #6663

* fix(VExpansionPanelItem): add to component export

* refactor(VExpansionPanelItem): move index and events to header

* fix(VExpansionPanelItem): lazy entrance animation

* chore(VExpansionPanelItem): remove unused import

* chore(VExpansionPanel): improve breaking messages

* chore(VExpansionPanel): remove useless render fn

* test(VExpansionPanel): move tests and expand coverages

* test(VExpansionPanelContent): add fake test to appease CI

* test(VExpansionPanelContent): round 3 test CI

* refactor(VExpansionPanelItem): better handle rtl

* docs(VExpansionPanel): fix examples for new structure

* feat(VExpansionPanelItem): add new **disable-icon-rotate** prop

resolves #6290

* docs: update deprecated name for VExpansionPanelContent

* docs: update api-generator mappings

* refactor(VExpansionPanel): better match box-shadow from spec

* fix(VExpansionPanelItem): add border radius to psuedo element

* docs(VExpansionPanel): expand upon variants example

* style(VExpansionPanel): adjust inset max-width for better ux

* fix(VExpansionPanel): use correct prop name for **disable-icon-rotate**

* refactor(VExpansionPanel): improve ux for multiple open panels

* chore(VExpansionPanel): remove commented out code

* docs(VExpansionPanel): add missing/improve existing prop language

* refactor(VExpansionPanel): abstract sass variables

* docs(VExpansionPanel): update deprecated functionality in example

* feat: update expansion panels to match spec

BREAKING CHANGE: many components have been renamed and props moved
v-expansion-panel         => v-expansion-panels
v-expansion-panel-content => v-expansion-panel
new component                v-expansion-panel-header
new component                v-expansion-panel-content

* style(VExpansionPanel): clean-up styles

* fix: add vertical padding to header

* docs(VExpansionPanels): update examples to new structure

* fix(VExpansionPanelHeader): use correct css selector for **disabled** prop

* fix(VExpansionPanelHeader): add proper focus support for a11y

* docs(VExpansionPanel): add advanced example

* refactor(VExpansionPanel): clean-up files

* test(VExpansionPanel): fix existing tests and expand coverage

* docs: remove unused variable from example

* fix: prevent disabled panels from being toggled

* docs: combine repetitive examples, update props and language

* docs: 🤦‍♂️

* docs(VExpansionPanels): remove prop from api entirely

no property deprecations for 2.0

* test(VExpansionPanelHeader): update snapshots

* test(VExpansionPanel): fix tests from bootable update
@MajesticPotatoe MajesticPotatoe added the C: VExpansionPanels VExpansionPanels label Apr 9, 2019
This was referenced Jul 23, 2019
Merged
Closed
Merged
Closed
Closed
Merged
Closed
Merged
Closed
Closed
Closed
Closed
Merged
Closed
Merged
Closed
Merged
Merged
Closed
Closed
This was referenced Jul 23, 2019
Merged
Closed
Merged
Closed
Closed
This was referenced Sep 20, 2019
Closed
Merged
Closed
@renovate renovate bot mentioned this issue Aug 23, 2020
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnleider johnleider

Labels
C: VExpansionPanels VExpansionPanels T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v2.0.0
Development

No branches or pull requests
3 participants
@johnleider @FunnyPhantom @MajesticPotatoe