playbook_ui 10.0.1.alpha.railscusticon → 10.0.1.alpha.rtflexfix

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fac834bfee4b1e2becacc6beb81454bc07c2245b4aa5868ce39f15680f17b75
-  data.tar.gz: 3906161634d9eff14a41c5c754f754b371aeb7ab9e9619a050f4b4bec81eaa59
+  metadata.gz: e5e3db15b69710f1f18b55e24642b90c7dcbc00b2a19d568aeb0d234b59c5e74
+  data.tar.gz: 6af1e23b3f4b42eb24319c3649d0cb308db273289e5e231e6e7cc08abd95ad41
 SHA512:
-  metadata.gz: 3e85c115a8506cf4b388bdb0e07e3fa34b516f861ed72e7796355caff50439489c5073484c5691b995192a914395ed40ddd906c85fedc0e97843486699619a3d
-  data.tar.gz: 4f875cce483498737eca8abab11167a83272706cb345f2068a70d928f50ef67e6a0ddaa267ab7a716c005bdeeb7c0b88d0407efad90b59045892e5f198155e85
+  metadata.gz: 59bf90d751af319a439aa23617e8a933a6d14357832a01332f4be1f8f27ee85923a94ea3948ff509cd12c798ad8543f46335d114682adb9e30790434c0738d95
+  data.tar.gz: 6b257eec72921d6030a02c3844c3fec35f3069827c1623dc5bbd9753d14c045cbaf642ec00e6e7002c6aa6bac4f0490fcb898028b82e5f861746bf828c8b8d60

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,6 @@
 @import "./button_mixins";
 
 [class^=pb_button_kit]{
-  @include pb_button;
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -12,17 +12,8 @@ $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
-@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
-  background-color: $bg;
-  color: $color;
-  border-color: $border;
-
-  &:active {
-    border-color: darken($bg, $pb_button_hover_darken);
-  }
-}
 
-@mixin pb_button {
+@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
@@ -30,12 +21,15 @@ $pb_button_border_width: 0px;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
+  border-color: $border;
   border-style: solid;
   border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
+  background-color: $bg;
+  color: $color;
   outline: none;
   transition: background $transition_default ease, color $transition_default ease;
   box-sizing: border-box;
@@ -63,6 +57,7 @@ $pb_button_border_width: 0px;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
+    border-color: darken($bg, $pb_button_hover_darken);
   }
   
 };
@@ -73,7 +68,7 @@ $pb_button_border_width: 0px;
 
 // Primary ======================
 @mixin pb_button_primary {
-  @include pb_button_variant($primary_action, $text_dk_default, transparent);
+  @include pb_button;
 
   @media (hover:hover) {
     &:hover {
@@ -84,7 +79,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -95,7 +90,7 @@ $pb_button_border_width: 0px;
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button_variant($transparent, $primary_action);
+  @include pb_button($transparent, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -107,7 +102,7 @@ $pb_button_border_width: 0px;
 // Disabled ====================
 @mixin pb_button_disabled {
   $disabled_color: rgba($charcoal, $opacity_5);
-  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
+  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
 }
 
@@ -132,7 +127,7 @@ $pb_button_border_width: 0px;
 
 // Dark Primary =================
 @mixin pb_button_primary_dark{
-  @include pb_button_variant($primary_action);
+  @include pb_button($primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -143,7 +138,7 @@ $pb_button_border_width: 0px;
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button_variant(rgba($white, 0.2), $white);
+  @include pb_button(rgba($white, 0.2), $white);
 
   @media (hover:hover) {
     &:hover {
@@ -154,7 +149,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button_variant($transparent, $white);
+  @include pb_button($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
@@ -166,6 +161,6 @@ $pb_button_border_width: 0px;
 // Dark Disabled ====================
 @mixin pb_button_disabled_dark {
   $disabled_color: rgba($white, $opacity_5);
-  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
+  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
 }

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,12 +1,3 @@
 [class^=pb_icon_kit]{
 
 }
-
-// Rails custom icon styles
-svg.pb_custom_icon {
-  width: 1em;
-  fill: currentColor;
-  path {
-    fill: currentColor;
-  }
-}

data/app/pb_kits/playbook/pb_icon/docs/example.yml

@@ -7,7 +7,6 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,13 +1,7 @@
-<% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
-<% else %>
-  <%= content_tag(:i, nil,
-      id: object.id,
-      data: object.data,
-      class: object.classname
-  ) %>
-  <%= content_tag(:span, nil,
-      aria: { label: "#{object.icon} icon" }.merge(object.aria),
-      hidden: true
-  ) %>
-<% end %>
+<%= content_tag(:i, nil,
+    id: object.id,
+    data: object.data,
+    class: object.classname ) %>
+<%= content_tag(:span, nil,
+    aria: { label: "#{object.icon} icon" }.merge(object.aria),
+    hidden: true ) %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "open-uri"
-
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -12,9 +10,7 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon
-      prop :custom_icon, type: Playbook::Props::String,
-                         default: nil
+      prop :icon, required: true
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -52,34 +48,6 @@ module Playbook
         )
       end
 
-      def custom_icon_classname
-        generate_classname(
-          "pb_icon_kit",
-          border_class,
-          fixed_width_class,
-          flip_class,
-          inverse_class,
-          list_item_class,
-          pull_class,
-          pulse_class,
-          rotation_class,
-          size_class,
-          spin_class,
-          separator: " "
-        )
-      end
-
-      def render_svg(path)
-        if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
-          svg = doc.at_css "svg"
-          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
-          raw doc
-        else
-          raise("Custom icon must be an svg. Please check your path and file type.")
-        end
-      end
-
     private
 
       def border_class

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.0.1"
-  VERSION = "10.0.1.alpha.railscusticon"
+  VERSION = "10.0.1.alpha.rtflexfix"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.0.1.alpha.railscusticon
+  version: 10.0.1.alpha.rtflexfix
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-09 00:00:00.000000000 Z
+date: 2021-07-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,7 +1004,6 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
-- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -1,22 +0,0 @@
-<%# SVG fill color inherited from css color property %>
-<div class="icon-wrapper" style="color:blue;">
-
-  <p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
-  
-  <%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
-
-
-  <%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
-
-
-  <%= pb_rails("body", props: { 
-    text: "Custom icons must be SVGs. They can be locally or remotely
-    sourced and are compatible with other icon props (size, rotation,
-    spin, flip, etc). Their SVG fill colors will be inherited from
-    parent element's css color properties."
-  } ) %>
-</div>