feat: make IllustratedMessage support RTL

lazd · lazd · commit 3183eff41a61 · 2020-02-13T16:03:44.000-08:00
diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css
@@ -19,7 +19,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-IllustratedMessage {
-  height: 100%;
+  block-size: 100%;
 
   display: flex;
   flex-direction: column;
@@ -30,16 +30,16 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-IllustratedMessage-illustration {
-  margin-bottom: var(--spectrum-illustrated-message-illustration-margin-bottom);
+  margin-block-end: var(--spectrum-illustrated-message-illustration-margin-bottom);
 }
 
 .spectrum-IllustratedMessage-heading {
-  max-width: var(--spectrum-illustrated-message-heading-max-width);
+  max-inline-size: var(--spectrum-illustrated-message-heading-max-width);
   margin: var(--spectrum-illustrated-message-heading-margin);
 }
 
 .spectrum-IllustratedMessage-description {
-  max-width: var(--spectrum-illustrated-message-description-max-width);
+  max-inline-size: var(--spectrum-illustrated-message-description-max-width);
   margin: var(--spectrum-illustrated-message-description-margin);
 
   font-style: italic;

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ governing permissions and limitations under the License.`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.spectrum-IllustratedMessage {`
`22`		`- height: 100%;`
	`22`	`+ block-size: 100%;`
`23`	`23`
`24`	`24`	`display: flex;`
`25`	`25`	`flex-direction: column;`
`@@ -30,16 +30,16 @@ governing permissions and limitations under the License.`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.spectrum-IllustratedMessage-illustration {`
`33`		`- margin-bottom: var(--spectrum-illustrated-message-illustration-margin-bottom);`
	`33`	`+ margin-block-end: var(--spectrum-illustrated-message-illustration-margin-bottom);`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`.spectrum-IllustratedMessage-heading {`
`37`		`- max-width: var(--spectrum-illustrated-message-heading-max-width);`
	`37`	`+ max-inline-size: var(--spectrum-illustrated-message-heading-max-width);`
`38`	`38`	`margin: var(--spectrum-illustrated-message-heading-margin);`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.spectrum-IllustratedMessage-description {`
`42`		`- max-width: var(--spectrum-illustrated-message-description-max-width);`
	`42`	`+ max-inline-size: var(--spectrum-illustrated-message-description-max-width);`
`43`	`43`	`margin: var(--spectrum-illustrated-message-description-margin);`
`44`	`44`
`45`	`45`	`font-style: italic;`