Addressing merge issue: fixing labels config

Merge to redocly additional magnetic style changes
anuvu · Oct 27, 2023 · 3de9e58 · 3de9e58
1 parent 9fd0737
commit 3de9e58
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 20,570 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
@@ -71,7 +71,7 @@ export const TypeTitle = styled(FieldLabel)`
 export const TypeFormat = TypeName;
 
 export const RequiredLabel = styled(FieldLabel).attrs({
-  as: 'div',
+  as: 'span',
 })`
   color: ${props => props.theme.schema.requireLabelColor};
   font-size: ${props => props.theme.schema.requireLabelTextSize};

diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts
@@ -44,7 +44,7 @@ export const Tabs = styled(ReactTabs)`
       &:first-child:not(.toggle) {
         margin: 0 17px 0 0;
       }
-      &:last-child:not(.toggle) {
+      &:last-child:not(.toggle):not(:only-of-type) {
         margin: 0 0 0 17px;
       }
       &.react-tabs__tab--selected:not(.toggle):not(.status-code) {
@@ -55,7 +55,6 @@ export const Tabs = styled(ReactTabs)`
         border-bottom: 3px solid #326cd1;
         border-radius: 2px;
         &:focus {
-          outline: auto;
           background: white;
         }
       }
@@ -79,7 +78,6 @@ export const Tabs = styled(ReactTabs)`
     }
   }
   > .react-tabs__tab-panel {
-    & > div,
     & > pre {
       margin: 0;
     }

diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
@@ -25,17 +25,11 @@ export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boo
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-
-  ${props =>
-    (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
-    ''}
+  border: none;
 
   .${ServerRelativeURL} {
     color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
   }
-  &:focus {
-    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
-  }
 `;
 
 export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
@@ -85,7 +79,8 @@ export const ServersOverlay = styled.div<{ $expanded: boolean }>`
   border-bottom-right-radius: 4px;
   transition: all 0.25s ease;
   visibility: hidden;
-  ${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
+  // ${props =>
+    props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);'}
 `;
 
 export const ServerItem = styled.div`

diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
@@ -76,7 +76,6 @@ export class Field extends React.Component<FieldProps> {
           aria-label={`expand ${name}`}
         >
           <span className="property-name">{name}</span>
-          {required && <RequiredLabel>*</RequiredLabel>}
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
         {labels}

diff --git a/src/components/Parameters/Parameters.tsx b/src/components/Parameters/Parameters.tsx
@@ -74,13 +74,11 @@ function DropdownWithinHeader({
   ...props
 }: DropdownOrLabelProps & { bodyRequired?: boolean }) {
   const isRequired = typeof bodyRequired === 'boolean' && !!bodyRequired;
-  const isOptional = typeof bodyRequired === 'boolean' && !bodyRequired;
 
   return (
     <BoldHeader key="header">
       Request Body schema: <DropdownOrLabel {...props} />
-      {isRequired && <RequiredBody>required</RequiredBody>}
-      {isOptional && <OptionalBody>optional</OptionalBody>}
+      {isRequired && <RequiredBody>*</RequiredBody>}
     </BoldHeader>
   );
 }
@@ -126,9 +124,3 @@ const commonStyles = `
 const RequiredBody = styled(RequiredLabel)`
   ${commonStyles}
 `;
-
-const OptionalBody = styled('div')`
-  ${commonStyles}
-  color: ${({ theme }) => theme.colors.text.secondary};
-  font-size: ${props => props.theme.schema.labelsTextSize};
-`;
diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx
@@ -27,12 +27,12 @@ function ResponseTitleComponent({
     <button className={className} aria-expanded={opened} disabled={empty}>
       <Code>{code} </Code>
       <Markdown compact={true} inline={true} source={title} />
-      <Link onClick={(!empty && onClick) || undefined}>
-        <span>{`${opened ? 'Hide' : 'View'} Details`}</span>
-        {!empty && (
+      {!empty && (
+        <Link onClick={onClick || undefined}>
+          <span>{`${opened ? 'Hide' : 'View'} Details`}</span>
           <ShelfIcon size={'1.5em'} color={'#326CD1'} direction={opened ? 'down' : 'right'} />
-        )}
-      </Link>
+        </Link>
+      )}
     </button>
   );
 }

diff --git a/src/components/TryOut/styled.elements.ts b/src/components/TryOut/styled.elements.ts
@@ -75,6 +75,10 @@ export const SectionHeader = styled.div`
   margin: 10% 0% 0% 0%;
   display: flex;
   justify-content: space-between;
+
+  &:first-child {
+    margin: 0;
+  }
 `;
 
 export const RunButton = styled.button<{ disabled: boolean }>`

diff --git a/src/services/Labels.ts b/src/services/Labels.ts
@@ -19,6 +19,8 @@ const labels: LabelsConfig = {
   callbackResponses: 'Callback responses',
   requestBody: 'Request body',
   response: 'Response',
+  requestSamples: 'Request samples',
+  responseSamples: 'Response samples',
 };
 
 export function setRedocLabels(_labels?: LabelsConfigRaw) {