style: remove uppercase from labels, buttons, tabs to align with design system (#29673)

2024-07-31 13:50:09 -07:00 · 2024-07-31 13:50:09 -07:00 · c094ac3584
parent 2b4a8e9083
commit c094ac3584
26 changed files with 2 additions and 36 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@ -279,7 +279,7 @@ const config: ControlPanelConfig = {
      label: t('Number format'),
    },
    x_axis: {
-      label: t('TEMPORAL X-AXIS'),
+      label: t('Temporal X-Axis'),
      ...temporalColumnMixin,
    },
  },
--- a/superset-frontend/src/GlobalStyles.tsx
+++ b/superset-frontend/src/GlobalStyles.tsx
@ -40,7 +40,6 @@ export const GlobalStyles = () => (
        border-radius: ${theme.borderRadius}px;
        background: ${theme.colors.primary.base};
        border: none;
-        text-transform: uppercase;
        color: ${theme.colors.grayscale.light5};
        line-height: 1.5715;
        font-size: ${theme.typography.sizes.s}px;
@ -53,7 +52,6 @@ export const GlobalStyles = () => (
        border-radius: ${theme.borderRadius}px;
        background: ${theme.colors.primary.light4};
        border: none;
-        text-transform: uppercase;
        color: ${theme.colors.primary.dark1};
        line-height: 1.5715;
        font-size: ${theme.typography.sizes.s}px;
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
@ -58,10 +58,6 @@

 // Buttons ====================================================================

-.btn {
-  text-transform: uppercase;
-}
-
 .btn:focus,
 .btn:active:focus {
  outline: none;
@ -508,7 +504,6 @@ a {
 }

 .control-label {
-  text-transform: uppercase;
  color: @gray;
  font-size: @font-size-s;
 }
--- a/superset-frontend/src/components/Button/index.tsx
+++ b/superset-frontend/src/components/Button/index.tsx
@ -170,7 +170,6 @@ export default function Button(props: ButtonProps) {
        fontSize: typography.sizes.s,
        fontWeight: typography.weights.bold,
        height,
-        textTransform: 'uppercase',
        padding: `0px ${padding}px`,
        transition: `all ${transitionTiming}s`,
        minWidth: cta ? theme.gridUnit * 36 : undefined,
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@ -1086,7 +1086,7 @@ class DatasourceEditor extends PureComponent {
                  <Col xs={24} md={12}>
                    <Field
                      fieldKey="databaseSelector"
-                      label={t('virtual')}
+                      label={t('Virtual')}
                      control={
                        <div css={{ marginTop: 8 }}>
                          <DatabaseSelector
--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/superset-frontend/src/components/DeleteModal/index.tsx
@ -27,7 +27,6 @@ const StyledDiv = styled.div`
  width: 50%;
  label {
    color: ${({ theme }) => theme.colors.grayscale.base};
-    text-transform: uppercase;
  }
 `;

--- a/superset-frontend/src/components/DropdownButton/index.tsx
+++ b/superset-frontend/src/components/DropdownButton/index.tsx
@ -31,7 +31,6 @@ const StyledDropdownButton = styled.div`
      font-size: 12px;
      line-height: 13px;
      outline: none;
-      text-transform: uppercase;
      &:first-of-type {
        border-radius: ${({ theme }) =>
          `${theme.gridUnit}px 0 0 ${theme.gridUnit}px`};
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@ -24,7 +24,6 @@ const StyledItem = styled(Form.Item)`
    .ant-form-item-label {
      padding-bottom: ${theme.gridUnit}px;
      & > label {
-        text-transform: uppercase;
        font-size: ${theme.typography.sizes.s}px;
        color: ${theme.colors.grayscale.base};

--- a/superset-frontend/src/components/Form/FormLabel.tsx
+++ b/superset-frontend/src/components/Form/FormLabel.tsx
@ -27,14 +27,12 @@ export type FormLabelProps = {
 };

 const Label = styled.label`
-  text-transform: uppercase;
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  color: ${({ theme }) => theme.colors.grayscale.base};
  margin-bottom: ${({ theme }) => theme.gridUnit}px;
 `;

 const RequiredLabel = styled.label`
-  text-transform: uppercase;
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  color: ${({ theme }) => theme.colors.grayscale.base};
  margin-bottom: ${({ theme }) => theme.gridUnit}px;
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@ -156,7 +156,6 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`

    .btn {
      font-size: 12px;
-      text-transform: uppercase;
    }

    .btn + .btn {
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@ -74,7 +74,6 @@ const StyledTabs = ({
        justify-content: center;
        font-size: ${theme.typography.sizes.s}px;
        text-align: center;
-        text-transform: uppercase;
        user-select: none;
        .required {
          margin-left: ${theme.gridUnit / 2}px;
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
@ -124,7 +124,6 @@ const SliceAddedBadgePlaceholder: FC<{
      border-radius: ${theme.gridUnit}px;
      color: ${theme.colors.primary.dark1};
      font-size: ${theme.typography.sizes.xs}px;
-      text-transform: uppercase;
      letter-spacing: 0.02em;
      padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
      margin-left: ${theme.gridUnit * 4}px;
@ -151,7 +150,6 @@ const SliceAddedBadge: FC<{ placeholder?: HTMLDivElement }> = ({
      border-radius: ${theme.gridUnit}px;
      color: ${theme.colors.primary.dark1};
      font-size: ${theme.typography.sizes.xs}px;
-      text-transform: uppercase;
      letter-spacing: 0.02em;
      padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
      margin-left: ${theme.gridUnit * 4}px;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
@ -44,7 +44,6 @@ export const RowLabel = styled.span`
    color: ${theme.colors.grayscale.base};
    padding-right: ${theme.gridUnit * 4}px;
    margin-right: auto;
-    text-transform: uppercase;
    white-space: nowrap;
  `};
 `;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
@ -78,7 +78,6 @@ const RowPanel = styled.div`
 `;

 const Label = styled.div`
-  text-transform: uppercase;
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  color: ${({ theme }) => theme.colors.grayscale.base};
  margin-bottom: ${({ theme }) => theme.gridUnit}px;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@ -196,7 +196,6 @@ export const StyledRowSubFormItem = styled(FormItem)<{ expanded: boolean }>`
 export const StyledLabel = styled.span`
  color: ${({ theme }) => theme.colors.grayscale.base};
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  text-transform: uppercase;
 `;

 const CleanFormItem = styled(FormItem)`
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@ -160,7 +160,6 @@ const FormatPickerLabel = styled.span`
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  color: ${({ theme }) => theme.colors.grayscale.base};
  margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
-  text-transform: uppercase;
 `;

 const DataTableTemporalHeaderCell = ({
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@ -140,7 +140,6 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
              padding: theme.gridUnit * 2,
              textAlign: 'center',
              cursor: 'pointer',
-              textTransform: 'uppercase',
              fontSize: theme.typography.sizes.xs,
              color: theme.colors.text.label,
              ':hover': {
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ControlForm/index.tsx
@ -128,7 +128,6 @@ export default function ControlForm({
    <div
      css={{
        label: {
-          textTransform: 'uppercase',
          color: theme.colors.text.label,
          fontSize: theme.typography.sizes.s,
        },
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@ -84,7 +84,6 @@ const ContentStyleWrapper = styled.div`
      font-weight: ${theme.typography.weights.medium};
      color: ${theme.colors.grayscale.light2};
      line-height: 16px;
-      text-transform: uppercase;
      margin: 8px 0;
    }

--- a/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx
@ -145,8 +145,6 @@ const VizTile = ({
        css={css`
          display: flex;
          align-items: center;
-          text-transform: uppercase;
-
          color: ${theme.colors.grayscale.base};
          font-weight: ${theme.typography.weights.bold};
          border-radius: 6px;
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@ -302,7 +302,6 @@ const HighlightLabel = styled.div`
    font-weight: ${theme.typography.weights.bold};
    text-align: center;
    padding: ${theme.gridUnit * 0.5}px ${theme.gridUnit}px;
-    text-transform: uppercase;
    cursor: pointer;

    div {
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@ -31,7 +31,6 @@ const StyledDiv = styled.div`
  padding-top: ${({ theme }) => theme.gridUnit * 2}px;
  label {
    color: ${({ theme }) => theme.colors.grayscale.base};
-    text-transform: uppercase;
    margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
  }
 `;
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@ -465,7 +465,6 @@ export const CreateHeaderSubtitle = styled.div`
 export const EditHeaderTitle = styled.div`
  color: ${({ theme }) => theme.colors.grayscale.light1};
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  text-transform: uppercase;
 `;

 export const EditHeaderSubtitle = styled.div`
@ -480,7 +479,6 @@ export const CredentialInfoForm = styled.div`
  }

  .label-select {
-    text-transform: uppercase;
    color: ${({ theme }) => theme.colors.grayscale.dark1};
    font-size: 11px;
    margin: 0 5px ${({ theme }) => theme.gridUnit * 2}px;
@ -553,7 +551,6 @@ export const SelectDatabaseStyles = styled.div`
  }

  .label-available-select {
-    text-transform: uppercase;
    font-size: ${({ theme }) => theme.typography.sizes.s}px;
  }

--- a/superset-frontend/src/features/queries/QueryPreviewModal.tsx
+++ b/superset-frontend/src/features/queries/QueryPreviewModal.tsx
@ -32,7 +32,6 @@ const QueryTitle = styled.div`
  color: ${({ theme }) => theme.colors.secondary.light2};
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  margin-bottom: 0;
-  text-transform: uppercase;
 `;

 const QueryLabel = styled.div`
--- a/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
+++ b/superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
@ -30,7 +30,6 @@ const QueryTitle = styled.div`
  color: ${({ theme }) => theme.colors.secondary.light2};
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  margin-bottom: 0;
-  text-transform: uppercase;
 `;

 const QueryLabel = styled.div`
--- a/superset-frontend/src/pages/AllEntities/index.tsx
+++ b/superset-frontend/src/pages/AllEntities/index.tsx
@ -67,7 +67,6 @@ const AllEntitiesContainer = styled.div`
    margin-bottom: ${theme.gridUnit * 2}px;
  }
  .select-control-label {
-    text-transform: uppercase;
    font-size: ${theme.gridUnit * 3}px;
    color: ${theme.colors.grayscale.base};
    margin-bottom: ${theme.gridUnit * 1}px;