Add default suffix.

GoogleForCreators · Jun 30, 2020 · 4198936 · 4198936
1 parent be94083
commit 4198936
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/assets/src/edit-story/components/form/text.js b/assets/src/edit-story/components/form/text.js
@@ -34,7 +34,7 @@ import MULTIPLE_VALUE from './multipleValue';
 import { Input } from '.';
 
 const StyledInput = styled(Input)`
-  width: 100%;
+  width: ${({ width }) => (width ? width + 'px' : '100%')};
   border: none;
   padding-right: ${({ suffix }) => (suffix ? 6 : 0)}px;
   padding-left: ${({ label }) => (label ? 6 : 0)}px;
@@ -50,8 +50,8 @@ const Container = styled.div`
   letter-spacing: ${({ theme }) => theme.fonts.body2.letterSpacing};
   display: flex;
   flex-direction: row;
-  justify-content: center;
   align-items: center;
+  font-style: italic;
   background-color: ${({ theme }) => rgba(theme.colors.bg.v0, 0.3)};
   flex-basis: ${({ flexBasis }) => flexBasis}px;
   position: relative;
@@ -93,6 +93,7 @@ function TextInput({
   placeholder,
   ...rest
 }) {
+  const { suffix } = rest;
   const isMultiple = value === MULTIPLE_VALUE;
   value = isMultiple ? '' : value;
   placeholder = isMultiple ? __('multiple', 'web-stories') : placeholder;
@@ -114,6 +115,7 @@ function TextInput({
       className={`${className}`}
       flexBasis={flexBasis}
       disabled={disabled}
+      suffix={suffix}
     >
       {/* type="text" is default but added here due to an a11y-related bug. See https://github.com/A11yance/aria-query/pull/42 */}
       <StyledInput
@@ -135,6 +137,7 @@ function TextInput({
           }
         }}
       />
+      {suffix}
       {Boolean(value) && clear && (
         <ClearBtn onClick={onClear} showBackground={showClearIconBackground}>
           {clearIcon ?? <CloseIcon />}

diff --git a/assets/src/edit-story/components/panels/pageAttachment/index.js b/assets/src/edit-story/components/panels/pageAttachment/index.js
@@ -71,6 +71,7 @@ function PageAttachmentPanel() {
     !isValidUrl(withProtocol(url || ''))
   );
 
+  const isDefault = ctaText === defaultCTA;
   return (
     <SimplePanel
       name="pageAttachment"
@@ -105,7 +106,9 @@ function PageAttachmentPanel() {
             }
             value={ctaText || defaultCTA}
             aria-label={__('Edit: Page Attachment CTA text', 'web-stories')}
-            clear={Boolean(ctaText) && ctaText !== defaultCTA}
+            clear={Boolean(ctaText) && !isDefault}
+            suffix={isDefault ? __('default', 'web-stories') : null}
+            width={isDefault ? 85 : null}
           />
         </Row>
       )}