Skip to content

fix(oxygen): hide disabled shade and tint variables #31

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

Open
Jan-CoreBunch wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(oxygen): hide disabled shade and tint variables #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions packages/builder-integrations/src/oxygen_builder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1489,14 +1489,16 @@ interface Font {
colorsWrapper.appendChild(main);

const shades =
color.shades?.map((shade, index) => {
const darkColor = color.darkShades?.[index]?.value;
return this.createColorButton({
variable: shade.name,
color: shade.value,
darkColor,
});
}) ?? [];
color.isShades && color.shades
? color.shades.map((shade, index) => {
const darkColor = color.darkShades?.[index]?.value;
return this.createColorButton({
variable: shade.name,
color: shade.value,
darkColor,
});
})
: [];

if (shades.length) {
const title = document.createElement("div");
Expand All @@ -1514,14 +1516,16 @@ interface Font {
}

const tints =
color.tints?.map((tint, index) => {
const darkColor = color.darkTints?.[index]?.value;
return this.createColorButton({
variable: tint.name,
color: tint.value,
darkColor,
});
}) ?? [];
color.isTints && color.tints
? color.tints.map((tint, index) => {
const darkColor = color.darkTints?.[index]?.value;
return this.createColorButton({
variable: tint.name,
color: tint.value,
darkColor,
});
})
: [];

if (tints.length) {
const title = document.createElement("div");
Expand Down
169 changes: 169 additions & 0 deletions packages/wp/Tests/HelperColorVariantsTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<?php

use CoreFramework\Helper;
use PHPUnit\Framework\TestCase;

if ( ! defined( 'ABSPATH' ) ) {
define( 'ABSPATH', __DIR__ . '/' );
}

if ( ! function_exists( 'get_option' ) ) {
function get_option( $option, $default = false ) {
return array_key_exists( $option, $GLOBALS['cf_test_options'] )
? $GLOBALS['cf_test_options'][ $option ]
: $default;
}
}

if ( ! function_exists( 'esc_sql' ) ) {
function esc_sql( $value ) {
return $value;
}
}

if ( ! function_exists( 'wp_parse_args' ) ) {
function wp_parse_args( $args, $defaults = array() ) {
return array_merge( $defaults, $args );
}
}

final class CoreFrameworkHelperColorVariantsTestDatabase {
public $prefix = 'wp_';

public function prepare( $query ) {
return $query;
}

public function get_row() {
return (object) array(
'data' => json_encode( $GLOBALS['cf_test_preset'] ),
);
}
}

final class HelperColorVariantsTest extends TestCase {
protected function setUp(): void {
global $wpdb;

$GLOBALS['cf_test_options'] = array(
'core_framework_main' => array(
'selected_id' => 'preset-id',
),
);
$GLOBALS['cf_test_preset'] = array(
'styleSheetData' => array(),
'modulesData' => array(
'COLOR_SYSTEM' => array(
'groups' => array(
array(
'name' => 'Brand',
'colors' => array(
array(
'name' => 'secondary',
'isShades' => false,
'shades' => array(
array(
'name' => 'secondary-d-4',
'value' => '#000000',
),
),
'isTints' => false,
'tints' => array(
array(
'name' => 'secondary-l-1',
'value' => '#eeeeee',
),
),
'gen' => array( 'bg', 'text', 'border' ),
),
array(
'name' => 'primary',
'isShades' => true,
'shades' => array(
array(
'name' => 'primary-d-1',
'value' => '#111111',
),
),
'isTints' => true,
'tints' => array(
array(
'name' => 'primary-l-1',
'value' => '#dddddd',
),
),
'gen' => array( 'bg', 'text', 'border' ),
),
array(
'name' => 'neutral',
'shades' => array(
array(
'name' => 'neutral-d-1',
'value' => '#222222',
),
),
'tints' => array(
array(
'name' => 'neutral-l-1',
'value' => '#cccccc',
),
),
'gen' => array( 'bg', 'text', 'border' ),
),
),
),
),
),
),
);
$wpdb = new CoreFrameworkHelperColorVariantsTestDatabase();
}

public function testVariablesIncludeOnlyEnabledColorVariants(): void {
$variables = ( new Helper() )->getVariables(
array(
'group_by_category' => false,
)
);

$this->assertSame(
array( 'secondary', 'primary', 'primary-d-1', 'primary-l-1', 'neutral' ),
$variables
);
}

public function testGroupedVariablesIncludeOnlyEnabledColorVariants(): void {
$variables = ( new Helper() )->getVariablesGroupedByCategoriesAndGroups();

$this->assertSame(
array( 'secondary', 'primary', 'primary-d-1', 'primary-l-1', 'neutral' ),
$variables['colorStyles']['Brand']
);
}

public function testClassNamesIncludeOnlyEnabledColorVariants(): void {
$class_names = ( new Helper() )->getClassNames(
array(
'group_by_category' => false,
)
);

$this->assertContains( 'bg-primary-d-1', $class_names );
$this->assertContains( 'text-primary-l-1', $class_names );
$this->assertNotContains( 'bg-secondary-d-4', $class_names );
$this->assertNotContains( 'text-secondary-l-1', $class_names );
$this->assertNotContains( 'border-neutral-d-1', $class_names );
$this->assertNotContains( 'border-neutral-l-1', $class_names );
}

public function testGroupedClassNamesIncludeOnlyEnabledColorVariants(): void {
$class_names = ( new Helper() )->getClassNamesGroupedByCategoriesAndGroups();

$this->assertContains( 'bg-primary-d-1', $class_names['colorStyles']['Backgrounds'] );
$this->assertContains( 'text-primary-l-1', $class_names['colorStyles']['Text Colors'] );
$this->assertNotContains( 'bg-secondary-d-4', $class_names['colorStyles']['Backgrounds'] );
$this->assertNotContains( 'text-secondary-l-1', $class_names['colorStyles']['Text Colors'] );
$this->assertNotContains( 'border-neutral-d-1', $class_names['colorStyles']['Border Colors'] );
$this->assertNotContains( 'border-neutral-l-1', $class_names['colorStyles']['Border Colors'] );
}
}
6 changes: 3 additions & 3 deletions packages/wp/assets/public/js/oxygen_builder.js
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 16 additions & 8 deletions packages/wp/wp/Helper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,12 +574,14 @@ public function getClassNames(array $options = array(
$main_name = $color['name'];
$local_color_names[] = $main_name;

$shades = isset( $color['shades'] ) ? $color['shades'] : array();
$is_shades = isset( $color['isShades'] ) && $color['isShades'] === true;
$shades = $is_shades && isset( $color['shades'] ) ? $color['shades'] : array();
foreach ( $shades as $shade ) {
$local_color_names[] = $shade['name'];
}

$tints = isset( $color['tints'] ) ? $color['tints'] : array();
$is_tints = isset( $color['isTints'] ) && $color['isTints'] === true;
$tints = $is_tints && isset( $color['tints'] ) ? $color['tints'] : array();
foreach ( $tints as $tint ) {
$local_color_names[] = $tint['name'];
}
Expand Down Expand Up @@ -879,12 +881,14 @@ public function getClassNamesGroupedByCategoriesAndGroups(): array {
$main_name = $color['name'];
$local_color_names[] = $main_name;

$shades = isset( $color['shades'] ) ? $color['shades'] : array();
$is_shades = isset( $color['isShades'] ) && $color['isShades'] === true;
$shades = $is_shades && isset( $color['shades'] ) ? $color['shades'] : array();
foreach ( $shades as $shade ) {
$local_color_names[] = $shade['name'];
}

$tints = isset( $color['tints'] ) ? $color['tints'] : array();
$is_tints = isset( $color['isTints'] ) && $color['isTints'] === true;
$tints = $is_tints && isset( $color['tints'] ) ? $color['tints'] : array();
foreach ( $tints as $tint ) {
$local_color_names[] = $tint['name'];
}
Expand Down Expand Up @@ -1167,12 +1171,14 @@ public function getVariables(array $options = array(
$name = $color['name'];
$grouped_variables['colorStyles'][] = $variable_prefix . $name;

$shades = isset( $color['shades'] ) ? $color['shades'] : array();
$is_shades = isset( $color['isShades'] ) && $color['isShades'] === true;
$shades = $is_shades && isset( $color['shades'] ) ? $color['shades'] : array();
foreach ( $shades as $shade ) {
$grouped_variables['colorStyles'][] = $variable_prefix . $shade['name'];
}

$tints = isset( $color['tints'] ) ? $color['tints'] : array();
$is_tints = isset( $color['isTints'] ) && $color['isTints'] === true;
$tints = $is_tints && isset( $color['tints'] ) ? $color['tints'] : array();
foreach ( $tints as $tint ) {
$grouped_variables['colorStyles'][] = $variable_prefix . $tint['name'];
}
Expand Down Expand Up @@ -1432,12 +1438,14 @@ public function getVariablesGroupedByCategoriesAndGroups(array $options = array(
$name = $color['name'];
$grouped_variables['colorStyles'][ $group_name ][] = $variable_prefix . $name;

$shades = isset( $color['shades'] ) ? $color['shades'] : array();
$is_shades = isset( $color['isShades'] ) && $color['isShades'] === true;
$shades = $is_shades && isset( $color['shades'] ) ? $color['shades'] : array();
foreach ( $shades as $shade ) {
$grouped_variables['colorStyles'][ $group_name ][] = $variable_prefix . $shade['name'];
}

$tints = isset( $color['tints'] ) ? $color['tints'] : array();
$is_tints = isset( $color['isTints'] ) && $color['isTints'] === true;
$tints = $is_tints && isset( $color['tints'] ) ? $color['tints'] : array();
foreach ( $tints as $tint ) {
$grouped_variables['colorStyles'][ $group_name ][] = $variable_prefix . $tint['name'];
}
Expand Down
Loading