Merge pull request #23 from gsoft-inc/feature/OR-158

Feature/OR-158 - Rebrand of Modal / Dialog / Alert
gsoft-inc · Oct 18, 2023 · 4e7f765 · 4e7f765
2 parents a5ff053 + 332143e
commit 4e7f765
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 63 deletions.
diff --git a/packages/components/src/alert/src/Alert.css b/packages/components/src/alert/src/Alert.css
@@ -1,7 +1,7 @@
 .o-ui-alert-warning-icon {
-    color: var(--o-ui-icon-alias-warning);
+    color: var(--hop-warning-icon-weak);
 }
 
 .o-ui-alert-negative-icon {
-    color: var(--o-ui-icon-alias-alert);
+    color: var(--hop-danger-icon-weak);
 }
diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css
@@ -20,8 +20,9 @@
 /* DIALOG */
 .o-ui-dialog {
     position: relative;
-    background-color: var(--o-ui-bg-alias-surface);
-    border-radius: var(--o-ui-br-4);
+    background-color: var(--hop-neutral-surface);
+    border-radius: var(--hop-shape-rounded-md);
+    box-shadow: var(--hop-elevation-lifted);
     display: grid;
     overflow: hidden;
     align-items: stretch;
@@ -39,7 +40,7 @@
 
 /* DIALOG | ASIDE */
 .o-ui-dialog-aside {
-    padding: var(--o-ui-sp-9);
+    padding: var(--hop-space-inset-lg) var(--hop-space-inset-xl);
     grid-area: aside;
     overflow: hidden;
     display: flex;
@@ -48,30 +49,30 @@
 
 /* DIALOG | SIZES */
 .o-ui-dialog-sm {
-    width: 544px;
+    width: 34rem;
 }
 
 .o-ui-dialog-md {
-    width: 800px;
+    width: 50rem;
 }
 
 .o-ui-dialog-lg {
-    width: 960px;
+    width: 60rem;
 }
 
 /* DIALOG | IMAGE & ILLUSTRATION */
 .o-ui-dialog-image,
 .o-ui-dialog-illustration {
     width: 100%;
-    height: var(--o-ui-sz-14);
+    height: 12rem;
     grid-area: image;
     overflow: hidden;
 }
 
 @media screen and (min-width: 768px) {
     .o-ui-dialog-image,
     .o-ui-dialog-illustration {
-        width: var(--o-ui-sz-15);
+        width: 16rem;
         height: 100%;
     }
 }
@@ -94,7 +95,7 @@
 .o-ui-dialog-header-section {
     display: flex;
     justify-content: space-between;
-    gap: var(--o-ui-sp-4);
+    gap: var(--hop-space-inline-md);
     flex-wrap: wrap;
 }
 
@@ -113,7 +114,8 @@
 
 /* DIALOG | CONTENT */
 .o-ui-dialog-content {
-    margin-top: var(--o-ui-sp-4);
+    color: var(--hop-neutral-text-weak);
+    margin-top: var(--hop-space-stack-md);
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -123,9 +125,9 @@
 .o-ui-dialog-footer-section {
     display: flex;
     justify-content: space-between;
-    padding-top: var(--o-ui-sp-6);
+    padding-top: var(--hop-space-inset-lg);
     margin-top: auto;
-    gap: var(--o-ui-sp-4);
+    gap: var(--hop-space-inline-md);
 }
 
 /* DIALOG | FOOTER SECTION | FOOTER */
@@ -148,6 +150,6 @@
 /* DISMISS BUTTON */
 .o-ui-dialog .o-ui-dialog-dismiss-button {
     position: absolute;
-    right: var(--o-ui-sp-4);
-    top: var(--o-ui-sp-4);
+    right: 0.5rem;
+    top: 0.5rem;
 }
diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx
@@ -262,11 +262,11 @@ export function InnerDialog({
     );
 
     const headerMarkup = isString(header?.props?.children)
-        ? cloneElement(header, { children: <Text>{header?.props?.children}</Text> })
+        ? cloneElement(header, { children: <Text size="sm">{header?.props?.children}</Text> })
         : header;
 
     const footerMarkup = isString(footer?.props?.children)
-        ? cloneElement(footer, { children: <Text>{footer?.props?.children}</Text> })
+        ? cloneElement(footer, { children: <Text size="sm">{footer?.props?.children}</Text> })
         : footer;
 
     const dismissButtonMarkup = dismissable && (

diff --git a/packages/components/src/modal/docs/Modal.stories.mdx b/packages/components/src/modal/docs/Modal.stories.mdx
@@ -62,8 +62,8 @@ A modal must have an heading and a content.
             <Modal>
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
             </Modal>
         </ModalTrigger>
@@ -82,8 +82,8 @@ A modal can have a side banner [image](?path=/story/chromatic-image--default). M
                 <Image src={{ base: SpacePortraitHorizontal, sm: SpacePortrait }} alt="City over clouds" />
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
             </Modal>
         </ModalTrigger>
@@ -102,8 +102,8 @@ Or an [illustration](?path=/docs/illustration--horizontal). Prefer 1:1 ratio for
                 </Illustration>
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
             </Modal>
         </ModalTrigger>
@@ -150,11 +150,11 @@ Use an header to provide additional information usually in the form of a link or
             <Modal>
                 <Heading>Cloud City</Heading>
                 <Header>
-                    <TextLink href="https://en.wikipedia.org/wiki/Floating_cities_and_islands_in_fiction" external>Wikipedia</TextLink>
+                    <TextLink href="https://en.wikipedia.org/wiki/Floating_cities_and_islands_in_fiction" external size="sm">Wikipedia</TextLink>
                 </Header>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
             </Modal>
         </ModalTrigger>
@@ -172,8 +172,8 @@ Use a footer to provide trivial information about content present in the modal,
             <Modal>
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
                 <Footer>Copyright 2021</Footer>
             </Modal>
@@ -192,8 +192,8 @@ A modal can have a single [button](?path=/docs/button--default-story). Use a pri
             <Modal>
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
                 <Button>Choose</Button>
             </Modal>
@@ -210,8 +210,8 @@ Or a [group of button](?path=/docs/button--default-story#button-group). A maximu
             <Modal>
                 <Heading>Cloud City</Heading>
                 <Content>
-                    <Paragraph>Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
-                    <Paragraph>The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
+                    <Paragraph size="sm">Cloud City was a completely man-made tibanna gas mining colony staff hovering over the gas giant Bespin, occupied by millions of workers, tourists and support staff. Located in Bespin's Life Zone, the station had no need for airlocks or life support systems, with the atmosphere comprised mostly of oxygen and acceptable levels of gravity and temperature.</Paragraph>
+                    <Paragraph size="sm">The station was situated 59,000 kilometers above Bespin's core, while its disk was approximately 16.2 kilometers in diameter. 36,000 repulsorlift engines and tractor beam generators kept the giant city floating above the planet. It contained 392 levels, along with platforms and rooms for residents and visitors.</Paragraph>
                 </Content>
                 <ButtonGroup>
                     <Button variant="secondary">Select</Button>

diff --git a/packages/components/src/modal/src/Modal.css b/packages/components/src/modal/src/Modal.css
@@ -2,8 +2,8 @@
 .o-ui-modal-choice-container {
     display: grid;
     align-items: stretch;
-    grid-template-columns: repeat(auto-fit, minmax(var(--o-ui-sz-15), 1fr));
-    gap: var(--o-ui-sp-7);
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    gap: var(--hop-space-inline-xl);
 }
 
 .o-ui-modal-choice {