feat(PPDSC-1986): layout props 6/7 (#213)

* feat(PPDSC-1986): layout props 6/7 * feat(PPDSC-1986): addressing comments
newscorp-ghfb · May 31, 2022 · d932bda · d932bda
1 parent 371b009
commit d932bda
Show file tree

Hide file tree

Showing 23 changed files with 1,946 additions and 29 deletions.
diff --git a/site/pages/components/tabs.tsx b/site/pages/components/tabs.tsx
@@ -18,6 +18,10 @@ import {MetaStatus} from '../../components/meta/types';
 import {LayoutProps} from '../../components/layout';
 import {ComponentPageTemplate} from '../../templates/component-page-template';
 import {Link} from '../../components/link';
+import {
+  logicalMarginOverrideProps,
+  logicalPaddingOverrideProps,
+} from '../../components/component-api/common-logical-props';
 
 const TabsComponent = (layoutProps: LayoutProps) => (
   <ComponentPageTemplate
@@ -307,6 +311,8 @@ const TabsComponent = (layoutProps: LayoutProps) => (
                 </>
               ),
             },
+            ...logicalMarginOverrideProps,
+            ...logicalPaddingOverrideProps,
           ],
           propsFooter: (
             <InlineMessage>

diff --git a/site/pages/components/tag.mdx b/site/pages/components/tag.mdx
@@ -6,6 +6,7 @@ import {LegacyBlock} from '../../components/legacy-block';
 import {CodeFromDefaultPresets} from '../../components/code';
 import {Tag, TagSize} from 'newskit';
 import {InverseTheme} from '../../components/inverse-theme';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
 
 export default Layout;
 
@@ -53,7 +54,7 @@ Tags have a number of props to facilitate a variety of uses:
     <Prop name="stylePreset" type="MQ<string>">
       If provided, this overrides the style preset applied to the Tag.
     </Prop>
-     <Prop name="transitionPreset" type="TransitionToken | TransitionToken[]">
+    <Prop name="transitionPreset" type="TransitionToken | TransitionToken[]">
       If provided, this overrides the transition preset applied to the Tag.
     </Prop>
     <Prop name="typographyPreset" type="MQ<string>">
@@ -100,6 +101,7 @@ Tags have a number of props to facilitate a variety of uses:
       If provided, this sets a maximum width to the Tag. This can be a sizing
       token from the theme, or any CSS length value.
     </Prop>
+    <CommonLogicalPropsMDX nested />
     Refer to the defaults below for the object structure:
     <CodeFromDefaultPresets componentName="tag" />
   </Prop>

diff --git a/site/pages/components/text-field.tsx b/site/pages/components/text-field.tsx
@@ -7,6 +7,10 @@ import {getIllustrationComponent} from '../../components/illustrations/illustrat
 import {InlineCode} from '../../components/markdown-elements';
 import {Link} from '../../components/link';
 import {UsageKind} from '../../components/usage-card';
+import {
+  logicalMarginOverrideProps,
+  logicalPaddingOverrideProps,
+} from '../../components/component-api/common-logical-props';
 
 const infoIcon = (
   <IconFilledInfo
@@ -110,15 +114,14 @@ const commonOverridesRows = [
     description: 'If provided, this overrides the input & placeholder text.',
   },
   {
-    attribute: 'spaceInset',
+    attribute: 'spaceInset(deprecated)',
     type: 'MQ<string>',
     default: [
       'small = spaceInset020',
       'medium = spaceInset030',
       'large = spaceInset030',
     ],
-    description:
-      'If provided, this overrides the inset space within the Text Field.',
+    description: `This property is deprecated. Use paddingInline and paddingBlock instead.`,
   },
   {
     attribute: 'startEnhancer.iconSize',
@@ -148,6 +151,8 @@ const commonOverridesRows = [
     description:
       'If provided, this overrides the lnline space of the end enhancer.',
   },
+  ...logicalMarginOverrideProps,
+  ...logicalPaddingOverrideProps,
 ];
 
 const formInputPropsFooter = (

diff --git a/site/pages/components/title-bar.mdx b/site/pages/components/title-bar.mdx
@@ -5,6 +5,7 @@ import {LegacyBlock} from '../../components/legacy-block';
 import {TextBoxSwatch} from '../../components/theming-values/colors';
 import {CodeFromDefaultPresets} from '../../components/code';
 import {Link} from '../../components/link';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
 
 import {TitleBar, Button, Headline} from 'newskit';
 
@@ -24,36 +25,50 @@ Title bar has a number of props to facilitate a variety of uses:
   <Prop name="children" type="string" required>
     The content of the title is passed as the child of the component.
   </Prop>
-  <Prop name="headingAs" type="'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'" default="h3">
-    The heading tag used for the title. It should be one of the following strings:
-    'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.
+  <Prop
+    name="headingAs"
+    type="'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'"
+    default="h3"
+  >
+    The heading tag used for the title. It should be one of the following
+    strings: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.
   </Prop>
   <Prop name="actionItem" type="React.ComponentType">
-    An action item, most commonly a button or a link, related to the title.
-    The actionItem is <b>hidden for extra small viewports</b> (less than 480px).
+    An action item, most commonly a button or a link, related to the title. The
+    actionItem is <b>hidden for extra small viewports</b> (less than 480px).
   </Prop>
   <Prop name="hideActionItemOn" type="MQPartial<boolean>" default="{xs: true}">
     An object to specify in which breakpoints to hide the action item.
   </Prop>
   <Prop name="overrides" type="object">
-    If provided, overrides the respective presets for the component and provided elements.
+    If provided, overrides the respective presets for the component and provided
+    elements.
     <Prop name="stylePreset" type="MQ<string>">
       If provided, this overrides the style preset applied to the TitleBar.
     </Prop>
     <Prop name="spaceInset" type="MQ<string>">
-      If provided, this overrides the padding preset applied to the TitleBar.
+      This property is deprecated. Use the below logical padding props instead. If provided, applies padding to the teaser container.
     </Prop>
     <Prop name="heading" type="object">
       <Prop name="typographyPreset" type="MQ<string>">
-        If provided, this overrides the typography preset applied to the TitleBar heading.
+        If provided, this overrides the typography preset applied to the
+        TitleBar heading.
       </Prop>
       <Prop name="stylePreset" type="MQ<string>">
-        If provided, this overrides the typography preset applied to the TitleBar heading.
+        If provided, this overrides the typography preset applied to the
+        TitleBar heading.
       </Prop>
+      <CommonLogicalPropsMDX />
     </Prop>
     Refer to the defaults below for the object structure:
     <CodeFromDefaultPresets componentName="titleBar" />
-    For more information about how to apply overrides to a component please refer to the <Link href="/theme/theming/component-defaults/">Override default preset</Link> page.
+    For more information about how to apply overrides to a component please
+    refer to the{' '}
+    <Link href="/theme/theming/component-defaults/">
+      Override default preset
+    </Link>{' '}
+    page.
+
   </Prop>
 </LegacyBlock>