playbook_ui 11.20.0.pre.alpha.focus1 → 11.20.0.pre.alpha.railsdialog1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd5b6e17a1e5ff8a0149e8d809b67ebd4c1bd6ade257db72ed9fe4716c7f0488
-  data.tar.gz: 4f6b2edf940d88f2113516a34e7288c18e68bde88cb367a49e3407c8e5d506a9
+  metadata.gz: 270f21bddaa2e5f8a2e2bfb4426ce26083f89c21fd219c068fc4e3f643589748
+  data.tar.gz: b8cc815cc03a09ef95173a42b1f7c52bb2f000d010923c3930be1fc45b1c767e
 SHA512:
-  metadata.gz: 7400acc711d9fa10b999850ed8c02282b3e6f9dcee98745dec7df79bdb7e57842d3751cae96b9d248ac08bf807daa035af6b429b3ea93c4d7157f6bf0e156392
-  data.tar.gz: f54bc46b74b4f15ad295303b73413b8f2e7e17adc078420b2b21970f470770ee2dcdc9203d58fec00fb28e826f8e7f0a4065c28f8e798efd60d3d582250e7e7e
+  metadata.gz: 5e6487ff9f39df73b1a3cf95cd6be02b82978be031a21f8b4c022daecee81e08ac01105facd9d92293be13de4fdd65f4c2fe3d7688736ee5de6dafca4be1e41c
+  data.tar.gz: 428c54f40b19703257dabe224279a0229769f89832985864d95411b6b8c0d9dee7806f5bfd19615285abf5f0598eada9af239bbf501fb8888ac5c56a80eeb00f

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

@@ -29,6 +29,11 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
+    @media (hover:hover) {
+      &:hover {
+        color: $text_lt_default;
+      }
+    } 
   }
 
   // Disabled =================

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

@@ -5,7 +5,6 @@
 @import "../tokens/spacing";
 @import "../tokens/transition";
 @import "../tokens/typography";
-@import "../tokens/accessibility";
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
@@ -63,12 +62,11 @@ $pb_button_border_width: 0px;
     margin-left: $space_xs;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  @include focus;
-
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
@@ -88,10 +86,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover;
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant($primary_action);
-    }
   }
 }
 
@@ -103,10 +97,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_3));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
-    }
   } 
 }
 
@@ -117,11 +107,6 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: $text_lt_default;
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($transparent, $primary_action);
     }
   }
 }
@@ -131,9 +116,6 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($charcoal, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
-  &:focus {
-    outline: none;
-  }
 }
 
 // Block =======================
@@ -163,10 +145,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant($primary_action);
-    }
   }
 }
 
@@ -178,10 +156,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_2));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant(rgba($white, 0.2), $white);
-    }
   }
 }
 
@@ -192,11 +166,6 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($white, $opacity_6)
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -6,7 +6,6 @@ const ButtonIconOptions = (props) => (
       <Button
           fixedWidth
           icon='plus'
-          marginRight='lg'
           text="Icon on Left"
           {...props}
       />
@@ -15,7 +14,6 @@ const ButtonIconOptions = (props) => (
           fixedWidth
           icon='chevron-right'
           iconRight
-          marginRight='lg'
           text="Icon on Right"
           {...props}
       />

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -6,7 +6,6 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
-        marginRight='lg'
         text="A Tag Button"
         {...props}
     />
@@ -14,7 +13,6 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
-        marginRight='lg'
         newWindow
         text="Open in New Window"
         {...props}
@@ -24,7 +22,6 @@ const ButtonLink = (props) => (
         aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
-        marginRight='lg'
         text="A Tag Button Disabled"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -6,7 +6,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="Button Primary"
         {...props}
     />
@@ -14,7 +13,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="Button Secondary"
         variant="secondary"
         {...props}
@@ -23,7 +21,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="A Tag Button Disabled"
         variant="link"
         {...props}

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -4,21 +4,18 @@ import { Button } from '../../'
 const ButtonSize = (props) => (
   <div>
     <Button
-        marginRight='lg'
         size="sm"
         text="Button sm size"
         {...props}
     />
     {' '}
     <Button
-        marginRight='lg'
         size="md"
         text="Button md size"
         {...props}
     />
     {' '}
     <Button
-        marginRight='lg'
         size="lg"
         text="Button lg size"
         {...props}

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -316,6 +316,7 @@
 	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
 	//conflicts were only apparent in nitro, not in playbook local env
 	.pb_dialog_rails {
+		position: fixed !important;
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -94,13 +94,11 @@ $hover_colors: (
 );
 
 /* Focus colors -----------------------*/
-$focus_color:         $primary;
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
-  focus_input_dark:         $focus_input_dark,
-  focus_color:              $focus_color
+  focus_input_dark:         $focus_input_dark
 );
 
 /* Border colors ----------------------*/

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.20.0"
-  VERSION = "11.20.0.pre.alpha.focus1"
+  VERSION = "11.20.0.pre.alpha.railsdialog1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.20.0.pre.alpha.focus1
+  version: 11.20.0.pre.alpha.railsdialog1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-25 00:00:00.000000000 Z
+date: 2023-01-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2235,7 +2235,6 @@ files:
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
-- app/pb_kits/playbook/tokens/_accessibility.scss
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss

data/app/pb_kits/playbook/tokens/_accessibility.scss

@@ -1,6 +0,0 @@
-@mixin focus {
-  &:focus-visible {
-    outline: $focus_color solid 2px;
-    outline-offset: 2px;
-  }
-}