playbook_ui 14.3.0.pre.alpha.revert3654PBNTR479removeextraspacingfromradiochildren3734 → 14.3.0.pre.rc.0

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -23,7 +23,6 @@ type HomeAddressStreetProps = {
   homeId: string,
   houseStyle: string,
   homeUrl: string,
-  target: string,
   newWindow: boolean,
   state: string,
   zipcode: string,
@@ -43,7 +42,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
-    target,
     newWindow,
     houseStyle,
     state,
@@ -64,19 +62,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
   const dataProps: GenericObject = buildDataProps(data)
   const ariaProps: GenericObject = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
-
-  const getTargetAttribute = () => {
-    if (target && homeUrl) {
-      return target
-    } else if (newWindow) {
-      return '_blank'
-    } else {
-      return '_self'
-    }
-
-    return null
-  }
-
   return (
     <div
         className={classes(className, dark)}
@@ -135,7 +120,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             dark={dark}
             marginRight="xxs"
             newWindow={newWindow}
-            target={getTargetAttribute()}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -33,7 +33,6 @@
     type: "home",
     dark: object.dark,
     classname: "home-hashtag",
-    target: object.target_option,
     new_window: object.new_window}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -10,20 +10,9 @@ module Playbook
       prop :home_url
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
-      prop :target
       prop :territory
       prop :zip
       prop :dark, type: Playbook::Props::Boolean, default: false
-
-      def target_option
-        if target && home_url
-          target
-        elsif new_window
-          "_blank"
-        else
-          "_self"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb

@@ -5,7 +5,7 @@
   home_id: 8250263,
   home_url: "https://powerhrg.com/",
   house_style: "Colonial",
-  target: "_blank",
+  new_window: true,
   state: "PA",
   zipcode: "19382",
   territory: "PHL",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx

@@ -11,8 +11,8 @@ const HomeAddressStreetLink= (props) => {
         homeId={8250263}
         homeUrl="https://powerhrg.com/"
         houseStyle="Colonial"
+        newWindow
         state="PA"
-        target="_blank"
         territory="PHL"
         zipcode="19382"
         {...props}

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md

@@ -1 +1 @@
-Use the `target` prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any [web/standard](https://www.w3schools.com/tags/att_a_target.asp) values or a custom string to specify your link target.
+Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -14,7 +14,6 @@ module Playbook
       prop :house_style
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
-      prop :target
       prop :state
       prop :zipcode
       prop :territory
@@ -56,7 +55,6 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
-          target: target_option,
           new_window: new_window,
           territory: territory,
           zip: zip,
@@ -71,22 +69,11 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
-          target: target_option,
           new_window: new_window,
           territory: territory,
         }
       end
 
-      def target_option
-        if target && home_url
-          target
-        elsif new_window
-          "_blank"
-        else
-          "_self"
-        end
-      end
-
     private
 
       def dark_class

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -23,10 +23,10 @@ function HomeAdressStreetTest(props) {
             territory="PHL"
             zipcode="19382"
             {...props}
-        />
+    />
     );
   }
-
+  
   test("renders the component", () => {
     render(<HomeAdressStreetTest />);
     const kit = screen.getByTestId("primary-test");

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -23,8 +23,7 @@
     type: "home",
     dark: object.dark,
     classname: "home-hashtag",
-    new_window: object.new_window,
-    target: object.target_option}) %>
+    new_window: object.new_window}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -10,20 +10,9 @@ module Playbook
       prop :home_url
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
-      prop :target
       prop :territory
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-
-      def target_option
-        if target && home_url
-          target
-        elsif new_window
-          "_blank"
-        else
-          "_self"
-        end
-      end
     end
   end
 end

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

@@ -102,11 +102,6 @@ module Playbook
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
         svg = doc.at_css "svg"
-
-        unless svg
-          return "" # Return an empty string if SVG element is not found
-        end
-
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
@@ -117,9 +112,6 @@ module Playbook
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
         raw doc
-      rescue OpenURI::HTTPError, StandardError
-        # Handle any exceptions and return an empty string
-        ""
       end
 
       def is_svg?

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: $size/2;
+      border-radius: calc($size/2);
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: $space-xs/1.5;
+    margin-bottom: calc($space-xs/1.5);
   }
 }

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -17,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 $space-xs/2;
+      margin: 0 0 calc($space-xs/2);
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: $pb_multiple_users_size / 2 + 2;
+    border-radius: calc($pb_multiple_users_size/2) + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

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

@@ -13,7 +13,6 @@ examples:
   - nav_with_font_control: Nav With Font Control
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
-  - collapsible_nav_no_icon: Collapsible Nav No Icon
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -38,7 +37,6 @@ examples:
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
-  - collapsible_nav_no_icon: Collapsible Nav No Icon
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -15,8 +15,7 @@ export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
 export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
+export {default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
 export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
-export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
-export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
-export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
+export {default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
+export {default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -33,7 +33,6 @@ $top_bottom_radius: 0px;
     border-top-right-radius: $top_bottom_radius;
     border-bottom-right-radius: $top_bottom_radius;
     cursor: pointer;
-    transition: background-color $transition_default ease-out, color $transition_default ease-out;
   }
   li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
     padding: $pagination_padding;
@@ -41,14 +40,13 @@ $top_bottom_radius: 0px;
     z-index: 2;
     border-top-left-radius: $top_bottom_radius;
     border-bottom-left-radius: $top_bottom_radius;
-    transition: background-color $transition_default ease-out, color $transition_default ease-out;
   }
   a, .pagination-number {
     color: $text_lt_default;
     font-size: $text_small;
     font-weight: $regular;
     border: none;
-    transition: background-color $transition_default ease-out, color $transition_default ease-out, border-color $transition_default ease-out;
+    transition: all $transition_default ease-out;
 
     &:hover {
       @include hover-state;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -21,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: $space_xs / 2;
+    margin-right: calc($space_xs/2);
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: $space_xs / 2;
+      margin-bottom: calc($space_xs/2);
     }
 
     .passphrase-text-input input {
@@ -57,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: $space_xs/2;
+    margin-bottom: calc($space_xs/2);
 
     &.progress-empty-input {
       visibility: hidden;

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,4 +1,4 @@
-@import "./intlTelInput";
+@import "intl-tel-input/build/css/intlTelInput.css";
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
@@ -60,7 +60,6 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     border-radius: 1px;
   }
 
@@ -101,7 +100,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-($transform-rotate-deg/3));
+    transform: rotate(-(calc($transform-rotate-deg/3)));
     top: $space_xs + 4px;
     color: $primary_action;
   }
@@ -197,10 +196,4 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
-
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
-    .iti__flag {
-      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
-    }
-  }
 }

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -9,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/1.8;
+  padding: 0 calc($space-sm/1.8);
   height: $pb_pill_height;
-  border-radius: $pb_pill_height/2;
+  border-radius: calc($pb_pill_height/2);
   white-space: nowrap;
 
   &[class*=lowercase] {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: $pb_progress_simple_height/2;
+  border-radius: calc($pb_progress_simple_height/2);
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: $pb_progress_simple_height/2;
+    border-radius: calc($pb_progress_simple_height/2);
     background: $primary;
   }
 

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,27 +1,28 @@
-import React, { forwardRef, isValidElement, useRef } from 'react'
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body'
-import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type RadioProps = {
-  aria?: { [key: string]: string },
+  aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
-  data?: { [key: string]: string },
+  data?: {[key: string]: string},
   disabled?: boolean,
   error?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label: string,
   name?: string,
   value?: string,
   text?: string,
-  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps
 
 const Radio = ({
@@ -30,9 +31,9 @@ const Radio = ({
   children,
   className,
   dark = false,
+  data = {},
   disabled = false,
   error = false,
-  data = {},
   htmlOptions = {},
   id,
   label,
@@ -41,103 +42,52 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => { void 0 },
   ...props
-}: RadioProps ) => {
-  const radioRef = useRef(null);
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+}: RadioProps, ref: any) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_radio_kit', alignment),
-    dark ? 'dark' : null,
-    error ? 'error' : null,
+    buildCss('pb_radio_kit', alignment ),
+    dark ? 'dark': null, error ? 'error': null,
     globalProps(props),
-    className
-  );
-
-  const classesCustom = classnames(
-    dark ? 'dark' : null,
-    error ? 'error' : null,
-    globalProps(props),
-    className
-  );
-
-  const isCustomChild = children && isValidElement(children) && children.type !== 'input';
+    className)
 
   const displayRadio = (props: RadioProps & any) => {
-    if (isValidElement(children) && children.type === 'input') {
-      return children;
-    } else if (isCustomChild || !children) {
-      return (
-        <input
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={radioRef}
-            text={text}
-            type="radio"
-            value={value}
-            {...props}
-        />
-      );
-    }
-  };
-
-  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
-    if (event) {
-      const target = event.target as HTMLElement;
-      if (
-        target.id === 'pb-radio-children-wrapper' ||
-        target.closest('#pb-radio-children-wrapper')
-      ) {
-        radioRef.current?.click();
-      }
-    }
-  };
+    if (children)
+      return (children)
+    else
+    return (
+    <input
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
 
   return (
-    isCustomChild ? (
-      <Flex 
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          align='center'
-          className={classesCustom}
-          cursor='pointer'
-          htmlFor={id}
-          htmlOptions={{
-            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              handleContainerClick(event);
-            }) as unknown as () => void
-          }}
-          id="radio-container"
-      >
-        <label className={buildCss('pb_radio_kit', alignment)}>
-          <>{displayRadio(props)}</>
-          <span className="pb_radio_button" />
-        </label>
-        <div id="pb-radio-children-wrapper"> {children} </div>
-      </Flex>
-    ) : (
-      <label
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          htmlFor={id}
-      >
-        <>{displayRadio(props)}</>
-        <span className="pb_radio_button" />
-        <Body
-            dark={dark}
-            status={error ? 'negative' : null}
-            text={label}
-            variant={null}
-        />
-      </label>
-    )
-  );
-};
+    <label
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        htmlFor={id}
+    >
+    <>{displayRadio(props)}</>
+    <span className="pb_radio_button" />
+    <Body
+        dark={dark}
+        status={error ? 'negative' : null}
+        text={label}
+        variant={null}
+    />
+    </label>
+  )
+}
 
-export default forwardRef(Radio);
+export default forwardRef(Radio)

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

@@ -14,7 +14,6 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_children: Children
 
   swift:
   - radio_default_swift: Default

data/app/pb_kits/playbook/pb_radio/docs/index.js

@@ -3,4 +3,3 @@ export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
-export { default as RadioChildren } from './_radio_children.jsx'