-
Notifications
You must be signed in to change notification settings - Fork 51
feat(iOS): add custom style #641
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.
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
Open
kacperzolkiewski
wants to merge
12
commits into
@kacperzolkiewski/custom-style
Choose a base branch
from
@kacperzolkiewski/feat-custom-style
base: @kacperzolkiewski/custom-style
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
8016f73
feat(iOS): add custom style
kacperzolkiewski fb8cdc0
fix: copilot code review
kacperzolkiewski e4f4804
fix: reapplying attributes
kacperzolkiewski 2c29d83
fix: use hex for colors
kacperzolkiewski c2c0613
feat: handle named colors in html parsing
kacperzolkiewski ce12b57
feat: add colors to toolbar
kacperzolkiewski 18ca4bd
Merge branch 'main' into @kacperzolkiewski/feat-custom-style
kacperzolkiewski ec7521b
test: add e2e test for colors
kacperzolkiewski 9c0c095
fix: handling rgb colors
kacperzolkiewski f34fbf0
Merge branch 'main' into @kacperzolkiewski/feat-custom-style
kacperzolkiewski cf3739e
fix: custom style parsing
kacperzolkiewski 4ab7531
fix: align normalizer to properly handle span with colors
kacperzolkiewski File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
118 changes: 118 additions & 0 deletions
118
.maestro/enrichedInput/flows/custom_style_colors_visual.yaml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| appId: swmansion.enriched.example | ||
| --- | ||
| # Validates custom colors on plain text, inline styles, and paragraph styles. | ||
| - launchApp | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-screen-button' | ||
|
|
||
| - tapOn: | ||
| id: 'editor-input' | ||
|
|
||
| # Section 1: Plain text with colors | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FF0000' | ||
| - inputText: 'Red text' | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - inputText: ' ' | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FFFF00' | ||
| - inputText: 'Yellow back' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - inputText: ' ' | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FF0000' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FFFF00' | ||
| - inputText: 'Red+Yellow' | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - inputText: ' ' | ||
|
|
||
| # Section 2: Inline styles + color | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-bold' | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FF0000' | ||
| - inputText: 'Bold red' | ||
| - tapOn: | ||
| id: 'toolbar-bold' | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - inputText: ' ' | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-italic' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FFFF00' | ||
| - inputText: 'Italic yellow back' | ||
| - tapOn: | ||
| id: 'toolbar-italic' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
| - inputText: ' ' | ||
| - pressKey: Enter | ||
|
|
||
| # Section 3: Paragraph styles + color | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-heading-5' | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FF0000' | ||
| - inputText: 'H5 red' | ||
| - pressKey: Enter | ||
| - tapOn: | ||
| id: 'toolbar-text-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
|
|
||
| - tapOn: | ||
| id: 'toolbar-quote' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-FFFF00' | ||
| - inputText: 'Quote yellow back' | ||
| - tapOn: | ||
| id: 'toolbar-bg-color' | ||
| - tapOn: | ||
| id: 'color-swatch-clear' | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'custom_style_colors' |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions
28
.maestro/enrichedText/flows/custom_style_colors_visual.yaml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| appId: swmansion.enriched.example | ||
| --- | ||
| # Validates that custom style colors are displayed correctly | ||
| - launchApp | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-screen-button' | ||
|
|
||
| - tapOn: | ||
| id: 'toggle-enriched-text-screen-button' | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/set_enriched_text_value.yaml' | ||
| env: | ||
| VALUE: > | ||
| <html> | ||
| <p><span style="color: #FF5733;">Standard 6-digit Hex text</span></p> | ||
| <p><span style="background-color: #000000; color: #FFFFFF;">White text on black background</span></p> | ||
| <p><span style="background-color: #00FF0040;">25% transparent green background</span></p> | ||
| <p><span style="color: #0000FF80;">50% transparent blue text</span></p> | ||
| <p><span style="color: #F00;">Red 3-digit shorthand text</span></p> | ||
| <h6><span style="background-color: #0F0; color: #000;">Black text on green</span></h6> | ||
| </html> | ||
|
|
||
| - runFlow: | ||
| file: '../subflows/capture_or_assert_screenshot.yaml' | ||
| env: | ||
| SCREENSHOT_NAME: 'custom_style_colors_visual' |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { type FC } from 'react'; | ||
| import { Pressable, ScrollView, StyleSheet, Text } from 'react-native'; | ||
|
|
||
| interface Props { | ||
| colors: string[]; | ||
| activeColor: string; | ||
| onSelectColor: (color: string) => void; | ||
| onClear: () => void; | ||
| } | ||
|
|
||
| export const ColorPickerRow: FC<Props> = ({ | ||
| colors, | ||
| activeColor, | ||
| onSelectColor, | ||
| onClear, | ||
| }) => { | ||
| return ( | ||
| <ScrollView | ||
| horizontal | ||
| showsHorizontalScrollIndicator={false} | ||
| style={styles.container} | ||
| contentContainerStyle={styles.content} | ||
| > | ||
| <Pressable | ||
| testID="color-swatch-clear" | ||
| style={styles.clearButton} | ||
| onPress={onClear} | ||
| > | ||
| <Text style={styles.clearText}>✕</Text> | ||
| </Pressable> | ||
| {colors.map((color) => { | ||
| const isActive = color.toLowerCase() === activeColor?.toLowerCase(); | ||
| const swatchId = `color-swatch-${color.replace('#', '').toUpperCase()}`; | ||
| return ( | ||
| <Pressable | ||
| key={color} | ||
| testID={swatchId} | ||
| onPress={() => onSelectColor(color)} | ||
| style={[ | ||
| styles.swatch, | ||
| { backgroundColor: color }, | ||
| isActive && styles.swatchActive, | ||
| color === '#FFFFFF' && styles.swatchBordered, | ||
| ]} | ||
| /> | ||
| ); | ||
| })} | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| const SWATCH_SIZE = 28; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| width: '100%', | ||
| backgroundColor: 'rgba(0, 26, 114, 0.9)', | ||
| }, | ||
| content: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| paddingHorizontal: 8, | ||
| paddingVertical: 8, | ||
| gap: 8, | ||
| }, | ||
| clearButton: { | ||
| width: SWATCH_SIZE, | ||
| height: SWATCH_SIZE, | ||
| borderRadius: SWATCH_SIZE / 2, | ||
| backgroundColor: 'rgba(255,255,255,0.15)', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| clearText: { | ||
| color: 'white', | ||
| fontSize: 14, | ||
| lineHeight: 16, | ||
| }, | ||
| swatch: { | ||
| width: SWATCH_SIZE, | ||
| height: SWATCH_SIZE, | ||
| borderRadius: SWATCH_SIZE / 2, | ||
| }, | ||
| swatchActive: { | ||
| borderWidth: 3, | ||
| borderColor: 'white', | ||
| }, | ||
| swatchBordered: { | ||
| borderWidth: 1, | ||
| borderColor: 'rgba(0,0,0,0.25)', | ||
| }, | ||
| }); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.